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
610
「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
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
550
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
260
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
260
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
220
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
270
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
510
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
310
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
380
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
530
Other Decks in Technology
See All in Technology
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
540
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
180
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.6k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
730
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
6.1k
クラウドサービス事業者におけるOSS
tagomoris
0
260
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
130
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing for Performance
lara
604
68k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing for humans not robots
tammielis
250
25k
4 Signs Your Business is Dying
shpigford
182
22k
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