Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

chibird
December 02, 2021

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を学習しようと思っている

chibird

December 02, 2021
Tweet

Other Decks in Programming

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ファイルのコード量は少なくなるはず
     ここまでの中で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