A Philosophy of Software Design 後半
2022/6/22 @ MoneyForward 勉強会 で実施した A Philosophy of Software Design の話です。
2022/6/22 @ MoneyForward 勉強会 で実施した A Philosophy of Software Design の話です。
SmartHR Design System
だれでも・効率よく・迷わずに。SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。 デザインシステムとは？
Software Design連載 2021年10月号 スナップショットテストの可能性を追求する - MonotaRO Tech Blog
こんにちは、辰巳です。 第3回は「スナップショットテスト」をテーマにお送りします！ 「組織が拡大する中で、十分な設計情報がない状況でも、複雑に改修が積み重なったソフトウェアをいかに安全かつ正確に変更できるか？」 本記事では、数多くの大幅なシステム変更の経験を経て、この課題に対してモノタロウがいま実践しているグッドプラクティスを紹介します。 本記事の初出は、 Software Design2021年10月号「Pythonモダン化計画（第3回）」になります。過去の連載記事は以下を参照ください。 第1回 Software Design連載 2021年8月号 Python製のレガシー＆大規模システムをどうリファクタリングするか 第2回 Software Design連載 2021年9月号 「テストが無い」からの脱却 スナップショットテストの可能性を追求する モノタロウは、事業者向けの間接資材を販売
ビジネス考えてるかい？事業の持続的成長を促進させるシステム設計の考え方 / buisiness_purpose_system_design
Developers Summit 2021 Summer (2021/07/30)の登壇資料です。 https://event.shoeisha.jp/devsumi/20210730/session/3249/
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
A collection of Design Systems for Figma from all over the globe 🌎 backed by code.
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
なぜ日本語UIキットを公開するのか？ デザインチームの研究活動のひとつとして、体験設計やUIデザインの品質を高めたり、デザインチーム内の協働を円滑に行うために、汎用的なデザインテンプレートやデザインアセットを作成し、体験デザインプロセスの仕組み化と共有を行っています。 UIデザインにおいても、Figma Communityをはじめとした様々な媒体でUIキットが共有・配布されており、UIキットを参考にデザインワークを行うというケースが増えてきているかと思います。 一方でUIキットの多くが欧文フォントで構成されているため、日本語フォントに変換する必要があり、場合によってはサイズやレイアウトを微調整しなくてはなりませんでした。 このUIキットも、単にAppleやGoogleのUIコンポーネントを日本語化しているだけと言えばそうかもしれませんが、これを活用することでデザイナーやプロダクト開発に携わ
“A Philosophy of Software Design” を30分でざっと理解する / Understand roughly "Philosophy of Software Design" in 30 minutes
NTT Communications の社内ランチ勉強会 (TechLunch) で講演した資料です。
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
Web開発の歴史の復習の仕方 悲報: WEB+DB PRESSが休刊 22年以上続いていたWEB+DB PRESSが休刊するそうです。Software Design、WEB+DB PRESS共に年間購読していたのですが、とても残念です。 日本語と英語、少し中国語の技術書を普段から読み漁っているのですが、本ほどガッツリでなく、ブログよりはちゃんとバリデートされた上でトレンドをおさえた雑誌文化は割合日本的で、他の言語圏だとあまりない文化だとも感じています。 技術評論社からでているSoftware Design、WEB+DB PRESSなのですが、Software Designの創刊が1990年11月で、WEB+DB PRESS Vol.1が2000年12月で10年の差があります。 どちらかというとSoftware Designがインフラ&バックエンドでWEB+DB PRESSがバックエンド&ク
Software Design「データベース速攻入門」に「SQL50本ノック」が掲載されました - LIVESENSE ENGINEER BLOG
リブセンスでデータエンジニアをしている富士谷です。 Software Designのデータベースに関連する特集記事を再構成した「データベース速攻入門 ～モデリングからSQLの書き方まで」が、2023年3月に発売されました。 gihyo.jp リブセンスがSoftware Design 2017年11月号に寄稿した「データ分析に効くSQL50本ノック」が、内容を更新して再掲載されました。 今回、再掲載にあたって、「SQL50本ノック」の内容の更新を私が担当しましたので、簡単に紹介します。 SQL50本ノック 「SQL50本ノック」は、SQL、特にSELECT文の演習問題集です。 PostgreSQLをDockerで立ち上げて、もっともシンプルな例から実行し、WHERE句、LIMIT句などを一つ一つ体験し、最後には、移動平均といった高度な文法を習得する事ができます。 これを読めば、SQLを使っ
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
Google UX Design
Get on the fast track to a career in UX design. In this certificate program, you'll learn in-demand skills at your own pace, no degree or experience required. Enroll today and get access to Google AI Essentials at no cost. Offer ends 11/30*
モノリシックなアプリケーション開発から小さなアプリケーション開発へ（Software Design連載 2022年3月号：設計方針から変えていく、 モノリシックなアプリの過去と未来） - MonotaRO Tech Blog
この記事の初出は、Software Design2022年3月号「設計方針から変えていく、モノリシックなアプリの過去と未来（最終回）」で、加筆修正されています。過去の連載記事は以下を参照ください。 第1回 Software Design連載 2021年8月号 Python製のレガシー＆大規模システムをどうリファクタリングするか - MonotaRO Tech Blog 第2回 Software Design連載 2021年9月号 「テストが無い」からの脱却 - MonotaRO Tech Blog 第3回 Software Design連載 2021年10月号 スナップショットテストの可能性を追求する - MonotaRO Tech Blog 第4回 Software Design連載 2021年11月号 Robot FrameworkでE2Eテストを自動化する - MonotaRO Te
2022年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも | Web Design Trends
OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があります。 今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。 OGPとは？ OGPとは、「Open Graph Protcol（オープングラフプロトコル）」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。 例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。 このように、OGPが正しく設定されて
Design Docs への思い
Message Passing での話題を契機に、色々な人が自身の Design Docs 観を共有していて、とても興味深く読ませてもらいました。普段「仕事を進める上で当たり前に必要なもの」として書いている自分に気づき、これを機に自分の Design Docs 観も言語化してみようと思ったのが本記事です。実践の一例を付け加えることが狙いであり、「Design Docs はかくあるべき」と主張するものではないです。 はじめに 「人によって思い浮かべる Design Docs 観が全然違う！多様で面白い！！」というのが話の出発点ですが、さすがに想定しているものが違いすぎると話が発散してしまうので、本記事では Design Docs を「ソフトウェアエンジニア (私) が何らかのプロジェクトやタスクを進める上で書く文書」としておきます。 次に私の立場を明確にしておきます。私はオープンソースのウェ
私 (@kossmori) が働くアメリカのスタートアップでは、どんな会話においても ”Is there a design doc?” (デザインドックはないの?) という質問が連発します。 会話のコンテクストを合わせるため、取り組みの背景を理解するための必須資料として位置づけられています。 デザインドックは技術詳細を書いた仕様書ではありません。 取組みに関わる Why, What, How と、ハイレベルな実装戦略、主要な設計上の決定、決定の際に考慮されたトレードオフに重点を置いて文書化したもので、それをもとにエンジニアは必要に応じてTech docを書き、デザイナーはデザインを始めます。 追記: その2も書きました。最後の方に記事へのリンクを貼っています。 追追記: 思った以上に反響あり、この記事のおかげでこれまで非常に多くの スタートアップの方々とお話しさせていただく機会をいただき
Atomic Design は難しい Webフロントエンド開発をしている人で Atomic Design を用いた経験がある方に会った時は、必ず 『Atomic Designどうですか？』と聞くようにしています。 大体の方はちょっと苦笑いをしながら『やっぱり難しいですねぇ』とか『試行錯誤しながらで...』みたいなことを教えてくれます。 私もメインの開発をする際に Atomic Design という枠組みを用いています。そして、同様に色々と悩んだのですが、このあたりについて納得がいく解釈ができたと思っています。 そこで、私の思う Atomic Design の難しさや、そう思う原因、どうやってそれを解消するかという点について、https://atomicdesign.bradfrost.com/ を適宜参照しながら共有したいなと思います。 そもそも Atomic Design 何やねん。な方
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
みんなで使えるデザインガイドライン「SmartHR Design」ができました｜SmartHRオープン社内報｜株式会社SmartHR
※ 2020年 9月 3日 追記 デザインシステム「SmartHR Design」がお引越し&アップデートしたため、最新情報はこちらからご覧ください。 おつかれさまです。コミュニケーションデザイングループのさめまる（@samemaru_saxo）です。 このたび、だれでも！効率よく！SmartHRらしく！表現できるのを目標とした、デザインガイドラインができました！ ▶️ SmartHR Design https://smarthr.design （2020年9月3日更新） 社外の方でもどなたでも読めるように一般公開しています。 SmartHR Design とは SmartHRでは、資料やスライド、オウンドメディア、このオープン社内報など、日々どのメンバーもばしばしアウトプットしています。中には見た目のデザインが必要なものもありますが、どれもデザイナーに依頼して作る余裕があるとは限りません
無名のセキュリティエンジニアがたった2本のブログ記事からSoftware Designで連載をすることになった (技術編) - NFLabs. エンジニアブログ
tl;dr 前半をサイバー脅威インテリジェンスの理論、後半をハンズオンの形式で全6回の連載をしてきました 連載は現実のインテリジェンス業務をなるべく反映させたものであり、戦術脅威インテリジェンスがアウトプットの中心になります 実態のよくわからないバズワードに飛びつかず、企業は自組織の体制と世の中の脅威を正しく理解するところからはじめましょう はじめに 本稿は前回の記事「無名のセキュリティエンジニアがたった2本のブログ記事からSoftware Designで連載をすることになった (非技術編)」の技術的内容部分を抜き出したものです。未読の方は先にそちらの記事を参考にしていただいた方が、内容を理解しやすいと思います。 blog.nflabs.jp 前回に引き続き @strinsert1Na です。事業推進部の Defensive チームで脅威インテリジェンスの生成やソフトウェアの開発をしていま
2020年に流行するグラフィックデザインの最新トレンド13個まとめ | Web Design Trends
2020年のグラフィックデザインはどんなスタイルがトレンドとなるのか気になっている方も多いのではないでしょうか。 様々な角度から調査を行い、人気が高まっているグラフィックデザインのスタイルをまとめました。 今回は、2020年に流行する13個のグラフィックデザインのトレンドをご紹介したいと思います。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWe... Web Design Trends
WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration of software design in WEB front end
概要 ・現代Webフロントエンドにおける難しさは何によってもたらされるのか ・Webフロントエンドと「ドメイン」の関係について ・Webフロントエンドを「設計」することについて ・Webフロントエンドにおけるアーキテクチャ考察 参考資料（スライドにも記載） ・エリック・エヴァンスのドメイ…
Hello Web Design
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Hello Web Design teaches design principles, handy shortcuts, and quick solutions to common problems, so you can learn the fundamentals of design and get ahead in your career. Using rea
SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブルオブジェクト名（必須）オブジェクトの情報オブジェクトの操作タイトルエリアテーブル操作エリア一時操作エリア 1. テーブルよくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイルオブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあ
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
Design docs というのが昔からあまり好きでない。読むのも書くのも好きでない。 仕事で文書を書くのはやぶさかではないけど Design docs はなんとなくいや。 せっかくなのでこのイヤさを言語化してみたい。 Design Docs とはなにか 自分が想定している Design docs は この文章が説明しているようなものだ。 なにかそれなりの規模があるものを作る時に設計やそのトレードオフをざっと文書化する文書。 もっというと一般名詞の design docs ではなく、リンク先に書いてあるような自分の勤務先固有の The Design Docs 文化が好きでない。 「設計やそのトレードオフをざっと文書化する。」 それだけ聞くと割と良いもののような気がして、自分もある時期までは良いものだと思っていた。 「ドキュメンテーション」というのは、プログラミングのポップカルチャーにおいて
デザインって何だろう。デザインって面白そう。 でも自分がやることではない。そう思っている人は多い。 けれどデザインはものの見方だったり 相手を理解することだったり 世の中がもっと良くなれという願いだったりする。 そんなデザインのことをもっと知ってもらいたい。 ここにゼロから学ぶデザインの学校を開校します。
爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends
Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な設定無しに利用することができるので、Emmetだと気付かずに使っている方も多いのではないでしょうか。 今回は、Emmetの基本的な使い方と、VSCodeでEmmetを利用する時のおすすめ設定をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends Emmetとは Emmetとは、HTMLやCSSを省略記法で入力することができるプラグイン、
エンジニアリング組織アーキテクチャの調査と設計要点に対する考察 / Investigation of engineering organization architecture and consideration of design points
第5回 Web System Architecture 研究会 (WSA研) の発表資料です。 https://websystemarchitecture.hatenablog.jp/entry/2019/07/30/172650
デザインパターンの使い方を パタン・ランゲージとの比較から考える / design-pattern-usage-inspired-by-pattern-language
Object Oriented Conference 2020 にて発表した内容です。
自社サービス『ツクリンク』はリリースから7年が経ちました。 直近でAtomic Designをベースにしたデザインシステムの作成と、CSS設計の変更をしたので紹介します📛 CSSの変遷現在の設計の話をする前にこれまでのCSSを紹介。 Ver１ 初回リリース時 昔懐かしいCSSです。Sassも使わずベタ書き。 #main .articles p { } #main .articles .header { }実は今でも一部で生きています。反省してます。探さないでください。 Ver２ リニューアル リニューアルをしたタイミングでCSS設計にはMindBEMdingを採用、SCSSを使い格段に書きやすくなりました。ファイルはBlockごとに分け、クラスの衝突を防いでいました。 # _block.scss .block { &__element { &--modifier {} } } # ディレ
AWSにおけるアプリチームとインフラチームのコワーク設計 / Co-working Design about App and Infra on AWS
AWSにおけるアプリチームとインフラチームのコワーク設計 / Co-working Design about App and Infra on AWS
REST API Design Best Practices Handbook – How to Build a REST API with JavaScript, Node.js, and Express.js
I've created and consumed many API's over the past few years. During that time, I've come across good and bad practices and have experienced nasty situations when consuming and building API's. But there also have been great moments. There are helpful articles online which present many best practices, but many of them lack some practicality in my opinion. Knowing the theory with few examples is goo
DIST.31 「DIST 6周年記念イベント」
GitHub - karanpratapsingh/system-design: Learn how to design systems at scale and prepare for system design interviews
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tao of React - Software Design, Architecture & Best Practices
Tao of React - Software Design, Architecture & Best PracticesJanuary 18, 2021 • 25 minute read I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design. While there are best practices on the micro level, most teams build their own “thing” when it comes to architecture. Of course, there isn’t a universal best practice tha
Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料デザインツールの新鋭「Adobe Express」は試す価値あり！ 生成AIの可能性は「Firefly Design Model」でさらに広がるか／AIが編集可能なデザインテンプレートを生成する新機能を試してみた【特集・集中企画】
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
Design Systems For Figma
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
モバイルアプリ日本語UIキットの公開｜Japan Digital Design, Inc.
Software Design、WEB+DB PRESS全巻読破のすすめ
プロダクトマネージャーの必須スキル: デザインドックの書き方 - Design Doc｜kosuke mori
Atomic Design はなぜ難しいか？どうやって難しさを解消するか
Design Doc for react-boilerplate-2022
「よくあるテーブル」 | デザインパターン（共通） | SmartHR Design System
Penpot: The Design Tool for Design & Code Collaboration
Design Docs のいけすかなさ / morrita - Message Passing
「Tama Design High School」 by 多摩美術大学 TUB
Atomic DesignをベースにしたデザインシステムとCSS設計｜あっきー
SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
Cloudscape - Cloudscape Design System