Tweet
Tweet

Slide 1

Slide 1 text

Atomic Design を用いて Flutter APP の 責務分担 を明確化しよう 千葉 諒 Manhattan Code inc.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Atomic Design とは? Atomic Designの説明

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Atomic Designとは？ shopDetailWidget commentDetailWidget shoplistWidget Organisms

Slide 15

Slide 15 text

Atomic Designとは？ Templates Pages

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

持ち帰ってほしいこと

Slide 30

Slide 30 text

持ち帰ってほしいこと

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Github https://github.com/mht-ryo-chiba/sweets_app_sample Figmaデータ https://www.figma.com/file/RTkbcZQmHGars7DKr3JwBD/Flutter-conference-chiba ?node-id=0%3A1 情報置き場 今回使用したもの