Atomic Designを用いてFlutterアプリの責務分担を明確化しよう / Clarify the role of the Flutter app in Atomic Design

FlutterKaigi2021発表資料

※フォントが崩れる方はこちら
https://docs.google.com/presentation/d/1JCuzmJrWTremLtNeRq-iM6DU--2izIrqAjhjJo7R5f8/edit?usp=sharing

FlutterにAtomic Designを使った特の責務分担の考え方と役割について説明していきます。

1. Atimic Designとはなにか？
　a. Atomic Designの説明
2. なぜFlutterでAtomic Designを利用するほうがいいのか？
　a. FlutterでAtomic Designを使用したほうがいい理由
3. Atomic要素とFlutterコンポーネント化の関連
　a. Flutterのどの要素をAtomic要素として切り出していくのか？

・ターゲット
　・Flutterを学び始めたけどファイルの細分化をどの単位でしていけばいいのかがわからない
　・同じコードをいろいろな場所で何度も書いてしまっている
　・webフロントの開発を今までやっていてこれからFlutterを学習しようと思っている

Transcript

1. Atomic Design を用いて Flutter APP の 責務分担 を明確化しよう 千葉 諒 Manhattan Code inc.
2. PROFILE 1 2 3 Ryo Chiba (30) chi-bird / bird / 鳥さん 秋田県湯沢市出身⛄❄ Manhattan Code inc. Engineer Dart / Swift / Kotlin / PHP / JavaScript / Ruby I love ... Sweet 🍰 / Spa ♨ / Game 🎮 和菓子好き、特に最中
3. COMMUNITY TokyoUppersBoost エンジニア / デザイナー / PM向け 自由な学習コミュニティ Queens-Tech-Lab 毎週土曜日14〜20時 神田小川町 アプリ開発初心者向け Swift & Flutterの学習コミュニティ 毎週水曜日 19:30〜20:30 オンライン
4. CONTENT はじめに Atomic Designとは？ なぜFlutterでAtomic Designを利 用すべきか？ Atomic要素とFlutterコンポーネント化 持ち帰ってほしいこと 1 2 3 4 5
5. はじめに 今回お話すること、しないこと
6. はじめに 今回お話すること • Atomic Designの概要 • Atomic DesignとFlutterの関連性 • Atomic DesignをFlutterプロジェクトに 適用した例 • 細かいコードの書き方 • デザインを作成するまでの工程 • デザインからコードに落とし込むまでの細かい工 程 • ダークテーマの考慮 • デザインシステムについて 今回お話しないこと
7. はじめに ファイルの細分化をどの単位ですればいいかわからない 同じコードを色々な場所で書いてしまっている これからFlutterを学習しようと思っている Target
8. Atomic Design とは? Atomic Designの説明
9. Brad Frostさんが2013年に提案/提唱 Atomic Designとは？ Atoms 原子 Molecules 分子 Organisms 有機体 Templates テンプレート Pages ページ パーツ単位で設計・開発していく設計思想 パーツ単位で統一性を持たせる＝全体で統一性を得ることができる ページ単位で部品を都度作成する必要がなく流用することができる
10. 本家ver. 分類 詳細 Atoms テキストやボタン、画像などの最小パーツ Molecules テキストやボタンを組み合わせた最小構成 一つのパーツとして扱う (フォームなど) Organisms Moleculesを複数合わせたものでヘッダーやフッダーが該当する 〇〇エリアなど分類できるレベルの塊 Templates Organismsを当て込んでいき仮のテキスト等を表示している状態、使い回すことも 可能 Pages 実際にページにデータを入れ込んだものでユーザーが触れる状態 Atomic Designとは？ 構造の括り
11. 独自バージョン 分類 詳細 Atoms 色、フォント、サイズ、テーマ、アイコン Molecules Flutterのデフォルトウィジェットや単体のウィジェット Organisms Atomsを指定した複数のMoleculesの集まり Templates 必要に応じて追加、Organismsの使用例のページとして作成 ※デザインに置いてはワイヤーフレーム、開発だと Mockやコンポーネント一覧ペー ジのような扱い Pages 実際にページにデータを入れ込んだものでユーザーが触れる状態 Atomic Designとは？ Flutterに落とし込む際の構造の括り
12. Atomic Designとは？ color icon text color text style #53D9A9 primary #6ADBEB secondary #333333 textBlack #838383 textGray large Noto Sans JP Large 20pt Atoms
13. Atomic Designとは？ CircleIconImage AngleCircleIconImage AngleCircleLargeImage width: 40 height: 40 margin: 16 width: 64 height: 64 radius: 14 margin: 16 width: maxWidth aspect: 4:3 radius: 14 margin: 16 Molecules
14. Atomic Designとは？ shopDetailWidget commentDetailWidget shoplistWidget Organisms
15. Atomic Designとは？ Templates Pages
16. なぜFlutterでAtomic Designを 利用すべきか？
17. なぜFlutterでAtomic Designを利用すべきか？ Atomic Designの使用を検討するに至った背景 Atomic Design ≒ ≒ コンポーネントを作成し使い回す Dartはwebに近い構成
18. なぜFlutterでAtomic Designを利用すべきか？ アプリ作成時のディレクトリ構造の指標を作ることができる Viewの作りのみ細分化するのでアーキテクチャに依存しにくい 類似パーツを複数作る事が減る 導入して良かったこと 複数のプロジェクトで流用することができる
19. なぜFlutterでAtomic Designを利用すべきか？ デザインの意図を汲み取りやすくなる デザイナーと共通の言語で 話ができるきっかけになる 他のデザインガイドラインと組 み合わせることが容易 エンジニア デザイナー x
20. Atomic要素と Flutterコンポーネント化
21. Atomic要素の説明を行った際のデザインを元に Flutterアプリを作成します Atomic要素とFlutterコンポーネント化 いいスイーツのお店があったら教えてくれ
22. atomic要素と同じ形にする • ui ◦ atoms ◦ molecules ◦ organisms ◦ pages ◦ templates Atomic要素とFlutterコンポーネント化 ディレクトリ構成
23. pagesに実際に使用する画面を書いていく ＝ main.dartの中は縮小されて見やすくなる Atomic要素とFlutterコンポーネント化 main.dart Firebase等アプリ起動時に設定が必要なものはここで呼び出す
24. Atomic要素とFlutterコンポーネント化 Atoms
25. Atomic要素とFlutterコンポーネント化 Molecules
26. Atomic要素とFlutterコンポーネント化 Organisms
27. Atomic要素とFlutterコンポーネント化 Templates これまでに作成したAtomic要素を並べる 　どう見えるか・使うのかをわかりやすくしておこう
28. Atomic要素とFlutterコンポーネント化 Pages 今まで作ったAtomic要素を組み上げて見栄えのいい形 に画面を作っていく 　うまくパーツ分けができていれば 1ファイルのコード量は少なくなるはず 　ここまでの中で１番多い行数は routeでした
29. 持ち帰ってほしいこと
30. 持ち帰ってほしいこと
31. THANK YOU !!!! 千葉 諒 Manhattan Code inc.
32. 質疑応答 TextStyleとかDecorationとか、ある程度共通化したい見た目周りは theme.dart とか作って定数化しているけど、そのイメージに近いのかな？ 質問1 アプリ全体で共通のもの、例えばフォントとかは全体で共通化される場合があ るためThemeで設定するケースが多いです。 その中で「ここだけ変えたい！」という場合は個別で設定を行って全体で使うも のをThemeにいれます。 Themeの中でも設定できるものが沢山あるので是非確認してみてください
33. 質疑応答 M3（Material Design 3）のカラー対応とか、これからどうなるんだろう？ 質問2 基本的にM3になってもThemeは存在していて、そこで今後個別で対応されて いくはずです。 それに合わせてAtoms要素から順次必要なクラス分けをしていけば FlutterでM3へのAtomic対応がしやすくなるのではないかと思っています。
34. 質疑応答 ProviderなどのStateを管理する処理はAtomicDesignはどこに書くんだろう？ 質問3 Atomic Designの考え方だと、他のアーキテクチャに入れやすいです。 理由は「viewに関することを主にやっているから」というのが前提としてありま す。 なのでstateなどの状態管理はなるべく Atomic要素に触れないPages要素で状 態管理を行い、極力 Pages配下には値を渡すだけにするのが良いと思ってい ます。
35. 質疑応答 逆にパーツを使い回す際のデメリットが気になります 質問4 もしパーツを使い回す際にデメリットがあるなら、 Atomic Designに則ったデザ インがうまく作れていない可能性があります。 「ここだけ部分的に違う」という要素が複数発生してくると、 Atomic Designで開 発を行う際の問題よりも「共通性や統一性が有るか？」など Atomic Designで の設計段階で問題が発生している可能性が高いです。
36. 質疑応答 決まりをチームで作る中で、意見が別れてしまったなど大変だったことはあります か？ 質問5 役割を持たせる時に三点リーダーなどの制限をどこの単位で用いるべきかで 悩みました。 細かい階層、例えば Moleculesで制限をかけた場合 Organismsところで流用し て使おうとした時に「 Molecules制限がかかっているから Organismsで流用でき ない、だからといって Pagesで制限を掛けてしまうと Pagesの肥大化が問題に なってしまう」となった時の決めの部分が難しい部分でした。
37. Github https://github.com/mht-ryo-chiba/sweets_app_sample Figmaデータ https://www.figma.com/file/RTkbcZQmHGars7DKr3JwBD/Flutter-conference-chiba ?node-id=0%3A1 情報置き場 今回使用したもの