Atomic Designとフロントエンドのインピーダンスミスマッチ / Impedance mismatch in atomic design

# URL
あとがき: https://nrslib.com/postscript-impedance-mismatch-in-atomic-design/
HP: https://nrslib.com
Twitter: https://twitter.com/nrslib

# Summary
2019/2/8「第２回AtomicDesignについて考える会（https://thinkatomicdesign.connpass.com/event/115574/）」にて行った LT 用のスライドです。
アトミックデザインをフロントエンドに適用したときのインピーダンスミスマッチとそれに対する向き合い方についてお話しています。

Transcript

1. Atomic Designとフロントエンドの インピーダンスミスマッチ nrs @nrslib
2. とある日の会話 Me
3. とある日の会話 Me フロントでなんか 面白そうなのある？
4. とある日の会話 Me フロントでなんか 面白そうなのある？ Atomic Design ってのを耳にしました
5. とある日の会話 フロントでなんか 面白そうなのある？ Atomic Design ってのを耳にしました じゃあそれ採用で Me
7. 簡単そう
8. Button Atoms TextBox DropDown Label
9. Button Atoms TextBox DropDown Label 簡単
10. Button Molecules TextBox SearchBox
11. Button Molecules TextBox SearchBox わかる
12. Button Organisms TextBox Header Label
13. Button Organisms TextBox Header Label これはいける
14. 本当に？
15. Atoms TableCell Paging button TabButton TabContent
16. Molecules TableRow TableCell TableCell TableCell TableCell PagingMenu 2 1 3 > < TabMenu TabButton TabButton TabButton
17. Organisms Table Tab
18. Organisms Table Tab
19. Organisms Table Tab
20. Organisms Table Tab Organism + Organism = ？
21. Another side
22. Atoms Button Modal
23. Molecules OK Cancel ModalFooterYesNo Close ModalFooterClose
24. Organisms ModalYesNo Content
25. Organisms ModalYesNo Content
26. Organisms ModalYesNo Content Success !
27. Organisms ModalYesNo Content Success ! Good
28. ModalChangeUserName Success ! TableCell UserName
29. ModalChangeUserName Success ! TableCell UserName Organisms ?
30. Templates の話をしよう
31. Templates Footer
32. Templates Footer Pages Information Since 2018 Image
33. Templates Footer Pages Information Since 2018 Image OK
34. Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents
35. Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents Good
36. But
37. Templates Footer Contents Footer Contents SideMenu
38. Templates Footer Contents Breadcrumb Footer Contents SideMenu Breadcrumb
40. Good ?
41. NoMenuLayout Footer Footer SideMenu NormalLayout
42. NormalContent Contents BreadcrumbContent Contents Breadcrumb
48. Good
49. もう一つ
50. Project directory atomic
51. Project directory atomic atoms molecules
52. Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : :
54. Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : :
55. Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : : 気づけない
56. では
57. フロントエンドにおいて Atomic Design は使い物にならない？
58. フロントエンドにおいて Atomic Design は使い物にならない？
59. フロントエンドにおける Atomic Design のメリット
60. それは
61. 粒度の指針
62. Atomic Design を意識した コンポーネントの粒度は フロントエンドのコンポーネントの 粒度にマッチしやすい （プログラマにフレンドリー）
63. まとめ フロントエンドにそのまま採用すると 辛くなる部分が出るから うまくいくように インピーダンスミスマッチを埋めよう
64. おまけ 途中出てきた問題には どう対処したか ※こんな感じでやってみました というものなので鵜呑み厳禁
65. 全部 Organisms
66. LayoutTemplate ContentsTemplate 原文の Template は不採用
67. フォルダを分けた atomic atoms molecules PrimaryButton SecondaryButton TabConent LinkButton Button Tab TabButton
68. Auther nrs HomePage https://nrslib.com Twitter @nrslib