Tweet
Tweet

Slide 1

Slide 1 text

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

Slide 2

Slide 2 text

ࣗݾ঺հ ๺۝भ޻ۀߴ౳ઐ໳ֶߍੜ࢈σβΠϯ޻ֶՊ৘ใγεςϜίʔε̐೥ੜ ຊ໊͸ʮۼాल࠸ ΫϘλώσϠ ʯ ٕज़7VF 3FBDU 5XJUUFS*%LVCP@QSPHSBNNFS $"UFDIKPCΠϯλʔϯ

Slide 3

Slide 3 text

My Hobby ・コンピュータ研究部 ・コン研と略称で呼ばれることが多い
 ・部員数: 57名 ・活動 ・プログラミング班
 (開発,競プロ,ハッカソン,etc) ・イラスト班 (ディジタルイラスト,デザイン,etc)

Slide 4

Slide 4 text

My Assignment Unistore Preact

Slide 5

Slide 5 text

My Assignment Unistore Preact 念願の Qiitaのトレンド入り

Slide 6

Slide 6 text

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

Slide 7

Slide 7 text

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

Slide 8

Slide 8 text

免責事項 "UPNJD%FTJHOͰ͕͢ɺ ࣗ෼͸ͦΕΛ࢖ͬͨϓϩδΣΫτʹճ͔͠ ΞαΠϯ͞Εͨܦݧͳ͍ͷͰ ٕज़తͳϛε͕͋ΔՄೳੑ͕ߴ͍Ͱ͢

Slide 9

Slide 9 text

What is Atomic Design

Slide 10

Slide 10 text

What is Atomic Design Atoms (アトム/原子) Molecules (モルキュール/分子) Organisms (オーガニズム/組織) Templates (テンプレート) Pages (ページ)

Slide 11

Slide 11 text

What is Atoms Atoms (アトム/原子)

Slide 12

Slide 12 text

What is Molecules Molecules (モルキュール/分子)

Slide 13

Slide 13 text

What is Organisms Organisms (オーガニズム/組織)

Slide 14

Slide 14 text

What is Templates & Pages Templates & Pages

Slide 15

Slide 15 text

What is Features 限定的 汎用的

Slide 16

Slide 16 text

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

Slide 17

Slide 17 text

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

Slide 18

Slide 18 text

What are the merits ? 再利用性が高まる デザインが統一される デザイナーに優しい 保守性が高まる

Slide 19

Slide 19 text

再利用性が高まる 自明

Slide 20

Slide 20 text

デザインに統一感が生まれる 複数の人がバラバラで作成しても使用する部品は同じ (規模が大きいほど有用そう)

Slide 21

Slide 21 text

デザイナーに優しい デザイナーじゃないから分かんない()

Slide 22

Slide 22 text

保守性が高まる コンポーネントを修正した場合、 その修正がそれを依存しているコンポーネントにも伝播

Slide 23

Slide 23 text

個人的な使い方

Slide 24

Slide 24 text

Story book を導入する ページに反映させるまでの手順が多いので これがないとコンポーネントの変更の確認が困難

Slide 25

Slide 25 text

Templates を使っていない 個人的には使う理由は見つかりませんでした. そもそもあれって何を実装するんですかね?

Slide 26

Slide 26 text

複雑になっても汎用性を重要視する props地獄になるので Atomsに機能や状態を持たせたい気持ちも分かるが そうすると汎用性がなくなりAtmicDesignの意味がなくなる

Slide 27

Slide 27 text

短期的な開発ではAtomicDesign使わない 実装量が大幅に増えるので 長期的なプロジェクトでのみ使用

Slide 28

Slide 28 text

My Important point

Slide 29

Slide 29 text

My Important point 汎用性のあるコンポーネントを作成し再利用

Slide 30

Slide 30 text

My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢

Slide 31

Slide 31 text

My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢 実装量が多くなるのでそれに見合うのかを考える

Slide 32

Slide 32 text

Thank you!! ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)