Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
gree_tech
PRO
November 11, 2021
Technology
0
110
「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
基調講演-サステナブルなチームであるために-
gree_tech
PRO
0
280
クリエイターツール「QUANT」の開発の話 & クライアントに寄り添ったデータ分析基盤の構築
gree_tech
PRO
0
220
爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについて
gree_tech
PRO
0
360
グリーの新卒1年目が半年間働いて感じたグリーのカルチャー 〜新卒でもこんなに任せて貰えるんですか!?〜
gree_tech
PRO
0
360
クラウド - オンプレ間の通信品質向上作戦!〜ネットワーク編〜
gree_tech
PRO
0
200
よくわかる!「データアナリスト」の作り方 〜とある新卒の成長物語〜
gree_tech
PRO
0
420
事業環境の変化に対応するインフラ組織 その取り組みと現状
gree_tech
PRO
0
280
簡単!Slack+GAS+GCPでIT棚卸自動化
gree_tech
PRO
0
260
GREE VR Studio Laboratory - UXDev R&D Summary 2022
gree_tech
PRO
0
680
Other Decks in Technology
See All in Technology
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
130
Dockerに疲れた人のためのLXDではじめるシステムコンテナ入門
devops_vtj
0
140
Logbii(ログビー) 会社紹介
logbii
0
180
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
510
02_プロトタイピングの進め方
kouzoukaikaku
0
830
都市ARの作り方 PLATEAU ✖︎ Geospatial API
41h0_shiho
1
320
💰年度末予算消化祭💰 Large Memory Instance で 画像分類してみた
__allllllllez__
0
120
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
180
あつめたデータをどう扱うか
skrb
2
170
組織に対してSREを適用するとどうなるか
kuniim
9
3.1k
インフラ技術基礎勉強会 開催概要
toru_kubota
0
190
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
1
180
Featured
See All Featured
Robots, Beer and Maslow
schacon
154
7.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
The Pragmatic Product Professional
lauravandoore
21
3.5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
The Mythical Team-Month
searls
210
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Clear Off the Table
cherdarchuk
79
290k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
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