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
780
「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
400
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
410
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
400
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
400
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
410
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
400
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
400
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
400
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
140
Other Decks in Technology
See All in Technology
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
620
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
600
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
240
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
31
11k
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
490
進捗
ydah
2
220
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
7
820
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
880
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
800
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
340
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
6k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
A Modern Web Designer's Workflow
chriscoyier
696
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Thoughts on Productivity
jonyablonski
69
4.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
It's Worth the Effort
3n
187
28k
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