Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「明日からフロントもよろしく」と言われたときに備える Atomic Design
Search
akki
February 11, 2020
Technology
0
3.4k
「明日からフロントもよろしく」と言われたときに備える Atomic Design
akki
February 11, 2020
Tweet
Share
More Decks by akki
See All by akki
データの民主化はじめました 俺たちの民主化はこれからだ
akki_megane
0
1.2k
フィーチャートグルを 使って素早く価値を検証する 早く安全に失敗し学ぶために
akki_megane
0
2.1k
技術的負債を返し続ける取り組み
akki_megane
0
480
Editor 調査
akki_megane
0
160
Laravel Vapor Serverless Laravel
akki_megane
2
280
アノテーションコメントについて調べてみた
akki_megane
2
510
入門 無限LT
akki_megane
0
3.8k
PHP Insights - リファクタリングが100倍楽しくなるツール -
akki_megane
3
1.3k
バグを直す前にまずテストを書く
akki_megane
0
1.6k
Other Decks in Technology
See All in Technology
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
820
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
170
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
64
19k
生産性向上チームの紹介
cybozuinsideout
PRO
1
850
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
280
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
170
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
220
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
130
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2.1k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
120
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.3k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
336
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
39k
Designing Experiences People Love
moore
136
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
77
42k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Product Roadmaps are Hard
iamctodd
43
9.7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Transcript
2020/02/1 Phperkaigi 2020 ルーキーズLT 秋葉 誠一 @akki_megane 「明日からフロントもよろしく!」 と言われたとき備える Atomic
Design でのフロントエンド設計
自己紹介 @akki_megane 名前:秋葉 誠一 好きな技術:PHP、Serverless 会社:ROXX (2月に転職しました) 趣味:スノボ、サバゲ、野球
前置き SPA (Single Page Application)で作りたい! はよくあること 複雑化するフロントエンドに対して、 バックエンドとフロントエンドで分業することも最 近は多くなりました
前置き SPA (Single Page Application)で作りたい! はよくあること 複雑化するフロントエンドに対して、 バックエンドとフロントエンドで分業することも最 近は多くなりました が、そんなに都合よく人はいない
前置き 明日からフロントもやって (またはやるしかない)
現代のフロントエンド コンポーネント指向での開発が一般的 (GUI の部品を作る)
コンポーネント設計がむずい 分け方とかよくわからん、、、 粒度、役割、etc けど、揃えないとまさにカオス
コンポーネント設計がむずい そこで Atomic Design
Atomic Design
Atomic Design • web デザイナーのBrad Frost が提唱 • ビジュアル的なデザインではなく「設計」という意味 のほうが強いです
• インターフェイスシステムを作成するための設計 方法論 • 5つの異なる階層で構成される • UIをまとまりのある全体とパーツの集合体である ととらえるメンタルモデル 原典
Atomic Design Atomic is 原子
Atomic Design
None
Atomic Design Atom(原子)が結合してMolecules (分子)を形成し Molecules (分子)はさらに結合して、より複雑な Organisms (生物)を形成する この考えをベースにUIシステムを構築する
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ)
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ) UIの構成する基本的な要素 これ以上分解することのできない要素 最も抽象的な要素 基本的なHTML要素が含まれる ラベル、インプットフォーム、ボタン
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms を組み合わせることで構成される 要素 複数のAtoms が組み合わさることにより目 的をもった具体的な要素になる 入力フォーム、テーブル
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms/Molecules/ 他のOrganisms を 組合わせて構成される要素 UIとしてセクションを形成する ヘッダー、フッター
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ) コンポーネントのレイアウトする ページのコンテンツ構造を定義する
Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms
(生物) 4. Templates (テンプレート) 5. Pages (ページ) コンテンツの適用、最終的なUIを表示 コンポーネントに具体的なコンテンツ(画像、 テキスト、メディア)を入れ込む
Atomic Design 依存の方向 上位層 下位層
Atomic Design 依存の方向 上位層 下位層 詳細な分割基準はない なにをどの層に分類するか決 めるのはあなた
利点 • チーム内での共通概念 • 再利用性の高いコンポーネント • 階層構造でのコンポーネントの整理 • コンポーネントの責務を分けることができる
利点 • チーム内での共通概念 • 再利用性の高いコンポーネント • 階層構造でのコンポーネントの整理 • コンポーネントの責務を分けることができる 実際にやってみて感じた最大利点はこれ
レイヤードアーキテクチャ的な考え方 + コンポーネントの責務分離(単一責任の原則) 開発と保守がしやすい、テストも適用しやすい
まとめ
まとめ • Atomic Design いいぞ! • UIとはパーツ(コンポーネント)の集合体であるという 意識 • 厳格な設計原則ではないので、詳細はチームで作っ
ていくのが大切
前置き 明日からフロントもやって (またはやるしかない)
まとめ というチャンスが来たときに備えましょう