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 × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
Search
gree_tech
PRO
November 11, 2021
Technology
0
460
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/ShortSession-1
gree_tech
PRO
November 11, 2021
Tweet
Share
More Decks by gree_tech
See All by gree_tech
kustomizeをいい感じに使う方法
gree_tech
PRO
4
2.3k
スケーラビリティとコスト管理 Google Cloud Spanner 費用最適化の取り組み
gree_tech
PRO
0
760
「アナザーエデン 時空を超える猫」の5年前のログを引っ越してデータドリブンで事業運用プロセスを改善した話
gree_tech
PRO
0
490
Unity,PHP+Jenkins+GAS 多言語対応を意識させない開発を目指したシステム構築
gree_tech
PRO
0
1k
全社総会における「REALITY Spaces」の活用と、Addressableを用いたコンテンツ配信技術について
gree_tech
PRO
0
630
AWSのEKS環境でログ機能を構築/リリースしたお話
gree_tech
PRO
0
490
「ヘブンバーンズレッド」の大規模アップデートにおける国内及び翻訳QAの取り組み
gree_tech
PRO
0
580
アプリ「REALITY」の12言語対応プロセスの仕組みと品質向上の取り組み
gree_tech
PRO
0
870
REALITYアプリのメンテナンスなしでの機能リリースを実現する、Istio導入とB/Gデプロイ実現の取り組み
gree_tech
PRO
0
700
Other Decks in Technology
See All in Technology
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
AWSでRAGを作る法方
sonoda_mj
1
140
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Classmethod Odyssey 登壇資料
yamahiro
0
390
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
Writing Fast Ruby
sferik
623
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How STYLIGHT went responsive
nonsquared
93
5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
How to name files
jennybc
67
96k
For a Future-Friendly Web
brad_frost
173
9.2k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
GitHub's CSS Performance
jonrohan
1026
450k
Rails Girls Zürich Keynote
gr2m
93
13k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Transcript
「Atomic Design × Nuxt.js」 コンポーネント毎に責務の範囲を 明確にしたら幸せになった話 アウモ株式会社 エンジニアマネージャー 村田 翔
• 名前 • 村田 翔(むらた じょう) • GREE Tech Conference2020でも登壇してます
• 担当 • サーバーサイドエンジニア • フロントエンド、インフラも少し触ります • aumo歴 • もうそろそろ丸4年 • aumoエンジニアとしては2番目に古いメンバー 自己紹介 2 アウモテックブログで取組発信中 ↓
3 Atomic Design使っていますか?
利用したことあるUIコンポーネント設計 を教えてください ⓘ Start presenting to display the poll results
on this slide.
5 Web施設サイト4ドメインにAtomic Design適用 1つのNuxt.jsのレポジトリで4ドメイン出し分け → Atomic Designを採用することにより、効率的にUIのトンマナを統一しつつ開発進行
6 Brad Frost氏が発案。構成要素を「Atoms(原子)、Molecules(分子)、Organisms(有機 体)、Template(テンプレート)、Page(ページ)」の階層に分けた設計手法。 Atomic Designとは
7 なぜAtomic Designなのか?
8 Nuxt.jsのディレクトリ構成に合う (components / layouts / pages)
9 UIコンポーネントの共通化
10 UIコンポーネントの共通化により • 複数サイトでUIに一貫性を持たせる • デザイン及び開発の効率化を目指すため
11 だがしかしだな...
12 Atomic Designで遭遇しがちな問題 • Moleculesなのか?Organismsなのか? どのレベルに当てはめるべきか迷う • 状態管理はどこでするべきか? • プロパティで値渡しのバケツリレーになりがち
• marginはどのレベルで定義するべきか などなど...
13 そこで今回の本題
14 コンポーネント毎に責務の範囲を明確にする話
15 Web施設サイトで実際に適用している構成 コンポーネントとディレクトリと責務の組み合わせ レベル Atomic Design ディレクトリ 責務 1 Atoms(原子)
~components/atoms ・最小UIコンポーネント 2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント 3 Organisms(有機体) ~components/organisms ・複数のAtoms、Moleculesを持つUIコンポーネント ・Storeとのやり取り(Dispatch/Render) ・ビジネスロジック 4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせたUIフレーム 5 Page(ページ) ~pages ・アプリケーションのルート ・router関連の処理 ・認証認可 ・Storeとのやり取り(Dispatchのみ)
16 最小単位のUIコンポーネント 1. Atoms(原子) ▼ポイント ・プロパティで上位レベルから値を埋め込むため、データは基本的に利用しない ・外枠にmarginを持たせない
17 Atomsを組み合わせたコンポーネント 2. Molecules(分子) ▼ポイント ・プロパティでOrganismsから値を埋め込むため、データは基本的に利用しない ・外枠にmarginを持たせない
18 複数のAtomsとMoleculesを組み合わせたコンポーネント 3. Organisms(有機体) ▼ポイント ・Storeからgetterでデータを取得し、下位レベルのコンポーネントに埋め込む値を渡す ・外枠にmarginを持たせない
19 下位レベルのコンポーネントを組み合わせたUIフレーム 4. Template(テンプレート) ▼ポイント ・レイアウトを定義するのに特化、データの受け渡しは行わない
20 アプリケーションのルート 5. Page(ページ) ▼ポイント ・APIから必要な情報を取得し、Storeにcommitする
21 Web施設サイトで実際に適用している構成 [再掲]コンポーネントとディレクトリと責務の組み合わせ レベル Atomic Design ディレクトリ 責務 1 Atoms(原子)
~components/atoms ・最小UIコンポーネント 2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント 3 Organisms(有機体) ~components/organisms ・複数のAtoms、Moleculesを持つUIコンポーネント ・Storeとのやり取り(Dispatch/Render) ・ビジネスロジック 4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせたUIフレーム 5 Page(ページ) ~pages ・アプリケーションのルート ・router関連の処理 ・認証認可 ・Storeとのやり取り(Dispatchのみ)
22 • コンポーネント再利用しやすい状態になる • 状態管理がカオス状態になることを避けること ができ、コードの見通しがよくなる • 誰がレビューしても指摘のブレがなくなる コンポーネント毎の責務範囲を明確にしておくことで おわりに
Atomic Designを活用してみようと思い ましたか? ⓘ Start presenting to display the poll
results on this slide.
24