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.
   

   View Slide

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
   🎮
   和菓子好き、特に最中
   

   View Slide

3. COMMUNITY
   TokyoUppersBoost
   エンジニア / デザイナー / PM向け
   自由な学習コミュニティ
   Queens-Tech-Lab
   毎週土曜日14〜20時
   神田小川町
   アプリ開発初心者向け
   Swift & Flutterの学習コミュニティ
   毎週水曜日 19:30〜20:30
   オンライン
   

   View Slide

4. CONTENT
   はじめに
   Atomic Designとは？
   なぜFlutterでAtomic Designを利
   用すべきか？
   Atomic要素とFlutterコンポーネント化
   持ち帰ってほしいこと
   1
   2
   3
   4
   5
   

   View Slide

5. はじめに
   今回お話すること、しないこと
   

   View Slide

6. はじめに
   今回お話すること
   ● Atomic Designの概要
   ● Atomic DesignとFlutterの関連性
   ● Atomic DesignをFlutterプロジェクトに
   適用した例
   ● 細かいコードの書き方
   ● デザインを作成するまでの工程
   ● デザインからコードに落とし込むまでの細かい工
   程
   ● ダークテーマの考慮
   ● デザインシステムについて
   今回お話しないこと
   

   View Slide

7. はじめに
   ファイルの細分化をどの単位ですればいいかわからない
   同じコードを色々な場所で書いてしまっている
   これからFlutterを学習しようと思っている
   Target
   

   View Slide

8. Atomic Design とは?
   Atomic Designの説明
   

   View Slide

9. Brad Frostさんが2013年に提案/提唱
   Atomic Designとは？
   Atoms
   原子
   Molecules
   分子
   Organisms
   有機体
   Templates
   テンプレート
   Pages
   ページ
   パーツ単位で設計・開発していく設計思想
   パーツ単位で統一性を持たせる＝全体で統一性を得ることができる
   ページ単位で部品を都度作成する必要がなく流用することができる
   

   View Slide

10. 本家ver.
    分類 詳細
    Atoms テキストやボタン、画像などの最小パーツ
    Molecules テキストやボタンを組み合わせた最小構成
    一つのパーツとして扱う (フォームなど)
    Organisms Moleculesを複数合わせたものでヘッダーやフッダーが該当する
    〇〇エリアなど分類できるレベルの塊
    Templates Organismsを当て込んでいき仮のテキスト等を表示している状態、使い回すことも
    可能
    Pages 実際にページにデータを入れ込んだものでユーザーが触れる状態
    Atomic Designとは？
    構造の括り
    

    View Slide

11. 独自バージョン
    分類 詳細
    Atoms 色、フォント、サイズ、テーマ、アイコン
    Molecules Flutterのデフォルトウィジェットや単体のウィジェット
    Organisms Atomsを指定した複数のMoleculesの集まり
    Templates 必要に応じて追加、Organismsの使用例のページとして作成
    ※デザインに置いてはワイヤーフレーム、開発だと Mockやコンポーネント一覧ペー
    ジのような扱い
    Pages 実際にページにデータを入れ込んだものでユーザーが触れる状態
    Atomic Designとは？
    Flutterに落とし込む際の構造の括り
    

    View Slide

12. Atomic Designとは？
    color icon
    text
    color
    text
    style
    #53D9A9
    primary
    #6ADBEB
    secondary
    #333333
    textBlack
    #838383
    textGray
    large
    Noto Sans JP Large 20pt
    Atoms
    

    View Slide

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
    

    View Slide

14. Atomic Designとは？
    shopDetailWidget
    commentDetailWidget
    shoplistWidget
    Organisms
    

    View Slide

15. Atomic Designとは？
    Templates Pages
    

    View Slide

16. なぜFlutterでAtomic Designを
    利用すべきか？
    

    View Slide

17. なぜFlutterでAtomic Designを利用すべきか？
    Atomic Designの使用を検討するに至った背景
    Atomic
    Design
    ≒ ≒
    コンポーネントを作成し使い回す
    Dartはwebに近い構成
    

    View Slide

18. なぜFlutterでAtomic Designを利用すべきか？
    アプリ作成時のディレクトリ構造の指標を作ることができる
    Viewの作りのみ細分化するのでアーキテクチャに依存しにくい
    類似パーツを複数作る事が減る
    導入して良かったこと
    複数のプロジェクトで流用することができる
    

    View Slide

19. なぜFlutterでAtomic Designを利用すべきか？
    デザインの意図を汲み取りやすくなる
    デザイナーと共通の言語で
    話ができるきっかけになる
    他のデザインガイドラインと組
    み合わせることが容易
    エンジニア デザイナー
    x
    

    View Slide

20. Atomic要素と
    Flutterコンポーネント化
    

    View Slide

21. Atomic要素の説明を行った際のデザインを元に
    Flutterアプリを作成します
    Atomic要素とFlutterコンポーネント化
    いいスイーツのお店があったら教えてくれ
    

    View Slide

22. atomic要素と同じ形にする
    ● ui
    ○ atoms
    ○ molecules
    ○ organisms
    ○ pages
    ○ templates
    Atomic要素とFlutterコンポーネント化
    ディレクトリ構成
    

    View Slide

23. pagesに実際に使用する画面を書いていく
    ＝ main.dartの中は縮小されて見やすくなる
    Atomic要素とFlutterコンポーネント化
    main.dart
    Firebase等アプリ起動時に設定が必要なものはここで呼び出す
    

    View Slide

24. Atomic要素とFlutterコンポーネント化
    Atoms
    

    View Slide

25. Atomic要素とFlutterコンポーネント化
    Molecules
    

    View Slide

26. Atomic要素とFlutterコンポーネント化
    Organisms
    

    View Slide

27. Atomic要素とFlutterコンポーネント化
    Templates
    これまでに作成したAtomic要素を並べる
    　どう見えるか・使うのかをわかりやすくしておこう
    

    View Slide

28. Atomic要素とFlutterコンポーネント化
    Pages
    今まで作ったAtomic要素を組み上げて見栄えのいい形
    に画面を作っていく
    　うまくパーツ分けができていれば 1ファイルのコード量は少なくなるはず
    　ここまでの中で１番多い行数は routeでした
    

    View Slide

29. 持ち帰ってほしいこと
    

    View Slide

30. 持ち帰ってほしいこと
    

    View Slide

31. THANK YOU !!!!
    千葉 諒
    Manhattan Code inc.
    

    View Slide

32. 質疑応答
    TextStyleとかDecorationとか、ある程度共通化したい見た目周りは theme.dart
    とか作って定数化しているけど、そのイメージに近いのかな？
    質問1
    アプリ全体で共通のもの、例えばフォントとかは全体で共通化される場合があ
    るためThemeで設定するケースが多いです。
    その中で「ここだけ変えたい！」という場合は個別で設定を行って全体で使うも
    のをThemeにいれます。
    Themeの中でも設定できるものが沢山あるので是非確認してみてください
    

    View Slide

33. 質疑応答
    M3（Material Design 3）のカラー対応とか、これからどうなるんだろう？
    質問2
    基本的にM3になってもThemeは存在していて、そこで今後個別で対応されて
    いくはずです。
    それに合わせてAtoms要素から順次必要なクラス分けをしていけば
    FlutterでM3へのAtomic対応がしやすくなるのではないかと思っています。
    

    View Slide

34. 質疑応答
    ProviderなどのStateを管理する処理はAtomicDesignはどこに書くんだろう？
    質問3
    Atomic Designの考え方だと、他のアーキテクチャに入れやすいです。
    理由は「viewに関することを主にやっているから」というのが前提としてありま
    す。
    なのでstateなどの状態管理はなるべく Atomic要素に触れないPages要素で状
    態管理を行い、極力 Pages配下には値を渡すだけにするのが良いと思ってい
    ます。
    

    View Slide

35. 質疑応答
    逆にパーツを使い回す際のデメリットが気になります
    質問4
    もしパーツを使い回す際にデメリットがあるなら、 Atomic Designに則ったデザ
    インがうまく作れていない可能性があります。
    「ここだけ部分的に違う」という要素が複数発生してくると、 Atomic Designで開
    発を行う際の問題よりも「共通性や統一性が有るか？」など Atomic Designで
    の設計段階で問題が発生している可能性が高いです。
    

    View Slide

36. 質疑応答
    決まりをチームで作る中で、意見が別れてしまったなど大変だったことはあります
    か？
    質問5
    役割を持たせる時に三点リーダーなどの制限をどこの単位で用いるべきかで
    悩みました。
    細かい階層、例えば Moleculesで制限をかけた場合 Organismsところで流用し
    て使おうとした時に「 Molecules制限がかかっているから Organismsで流用でき
    ない、だからといって Pagesで制限を掛けてしまうと Pagesの肥大化が問題に
    なってしまう」となった時の決めの部分が難しい部分でした。
    

    View Slide

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
    情報置き場
    今回使用したもの
    

    View Slide