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
790
「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
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
670
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
680
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
670
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
670
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
710
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
680
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
670
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
670
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
140
Other Decks in Technology
See All in Technology
Android Audio: Beyond Winning On It
atsushieno
0
3.5k
AWSで始める実践Dagster入門
kitagawaz
1
750
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
590
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ:はじめてのローカルLLM
stanaka26
0
100
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
テストを軸にした生き残り術
kworkdev
PRO
0
220
KotlinConf 2025_イベントレポート
sony
1
140
Rustから学ぶ 非同期処理の仕組み
skanehira
1
160
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
1
120
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What's in a price? How to price your products and services
michaelherold
246
12k
How GitHub (no longer) Works
holman
315
140k
Practical Orchestrator
shlominoach
190
11k
RailsConf 2023
tenderlove
30
1.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Cult of Friendly URLs
andyhume
79
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing for humans not robots
tammielis
253
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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