AtomicDesignの説明と所感

CyberAgent様のインターン中の勉強会で使用した資料です。
特別に許可をいただき公開に至りました。

Transcript

1. Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ
   ೥
   ۼా
   ल࠸
   (@kubo_programmer)
2. ࣗݾ঺հ ๺۝भ޻ۀߴ౳ઐ໳ֶߍ
   ੜ࢈σβΠϯ޻ֶՊ
   ৘ใγεςϜίʔε
   ̐೥ੜ
   ຊ໊͸ʮ
   ۼాल࠸ ΫϘλ
   ώσϠ
   ʯ ٕज़
   7VF
   3FBDU
   
   5XJUUFS*%
   LVCP@QSPHSBNNFS
   $"UFDIKPC
   Πϯλʔϯ
   
3. My Hobby ・コンピュータ研究部 ・コン研と略称で呼ばれることが多い
 ・部員数: 57名 ・活動 ・プログラミング班
 (開発,競プロ,ハッカソン,etc) ・イラスト班 (ディジタルイラスト,デザイン,etc)
4. My Assignment Unistore Preact
5. My Assignment Unistore Preact 念願の Qiitaのトレンド入り
6. Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ
   ೥
   ۼా
   ल࠸
   (@kubo_programmer)
7. Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ
   ೥
   ۼా
   ल࠸
   (@kubo_programmer)
8. 免責事項 "UPNJD%FTJHO
   Ͱ͕͢ɺ
   ࣗ෼͸ͦΕΛ࢖ͬͨϓϩδΣΫτʹճ͔͠
   ΞαΠϯ͞Εͨܦݧͳ͍ͷͰ
   ٕज़తͳϛε͕͋ΔՄೳੑ͕ߴ͍Ͱ͢
9. What is Atomic Design
10. What is Atomic Design      Atoms (アトム/原子) Molecules (モルキュール/分子) Organisms (オーガニズム/組織) Templates (テンプレート) Pages (ページ)
11. What is Atoms  Atoms (アトム/原子)
12. What is Molecules  Molecules (モルキュール/分子)
13. What is Organisms  Organisms (オーガニズム/組織)
14. What is Templates & Pages   Templates & Pages
15. What is Features 限定的 汎用的
16. Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ
    ೥
    ۼా
    ल࠸
    (@kubo_programmer)
17. Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ
    ೥
    ۼా
    ल࠸
    (@kubo_programmer)
18. What are the merits ?     再利用性が高まる デザインが統一される デザイナーに優しい 保守性が高まる
19. 再利用性が高まる 自明
20. デザインに統一感が生まれる 複数の人がバラバラで作成しても使用する部品は同じ (規模が大きいほど有用そう)
21. デザイナーに優しい デザイナーじゃないから分かんない()
22. 保守性が高まる コンポーネントを修正した場合、 その修正がそれを依存しているコンポーネントにも伝播
23. 個人的な使い方
24. Story book を導入する ページに反映させるまでの手順が多いので これがないとコンポーネントの変更の確認が困難
25. Templates を使っていない 個人的には使う理由は見つかりませんでした. そもそもあれって何を実装するんですかね?
26. 複雑になっても汎用性を重要視する props地獄になるので Atomsに機能や状態を持たせたい気持ちも分かるが そうすると汎用性がなくなりAtmicDesignの意味がなくなる
27. 短期的な開発ではAtomicDesign使わない 実装量が大幅に増えるので 長期的なプロジェクトでのみ使用
28. My Important point
29. My Important point  汎用性のあるコンポーネントを作成し再利用
30. My Important point   汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢
31. My Important point    汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢 実装量が多くなるのでそれに見合うのかを考える
32. Thank you!! ๺۝भߴ౳ઐ໳ֶߍ
    ೥
    ۼా
    ल࠸
    (@kubo_programmer)