入門！アトミックデザイン
ぞす！げんきちです！＼＼\\٩( 'ω' )و //／／
「いや、誰だよ」って方は、下記リンクを見てやってください。
目次〜
今日は、先日参加した勉強会の内容をシェアします！
自分用のメモのため、可読性についてはご容赦ください...🙇♂️
講師紹介
【成瀬 允宣】
SIer・ゲーム業界・Web 業界と居場所を転々。
現在は GMO インターネット株式会社にて Web プログラマ / デベロッパーエバンジェリストとして所属。
GMO テクノロジーブートキャンプ、新卒研修、社内勉強会、社外セミナーと至る所でプログラミングの講師活動に勤しんでいます。
アトミックデザインとは
アトミックデザイン＝ページの基礎となるコンテンツ構造
＝atoms、molecules、organisms、template、pageの5段階
5階層に抑えることでモジュールの乱立を防ぐ意図がある。
Atoms（原子）
最小単位
例）
ロゴ
ヘッダータイトル
テキストボックス
プライマリーボタン
molecules（分子）
原子を組み合わせたもの
例）
ヘッダーリンク
サーチボックス（テキストボックス＋ボタン）
テーブルの行（セル＋セル）
organisms（生物）
原子と分子を組み合わせたもの
例）
ヘッダー（ヘッダーリンク＋サーチボックス）
テーブル（テーブルの行＋テーブルの行）
template
ワイヤーフレームのこと
page
ワイヤーフレームにデータを流し込んだもの
例えば、こんなことありませんか？
デザイナー：ここのボタンこのデザインに変えてー。
プログラマ：もっと再利用しやすいデザインにできませんか？
デザイナー：わかりましたー。
プログラマ：（伝わったかな…？）
デザイナー：（再利用しやすいデザインってなんだ？）
デザイナーとエンジニア
向いている方向は同じ→プロダクトの完成
けど、勘所が違う。
デザイナーの勘所
統一感
視線誘導
格好良さ
プログラマの勘所
共通化
保守性
難易度
落とし所を見つけるために
デザインシステム（＝関係する人が頭に浮かべるもの＝アトミックデザイン＝デザイナーもエンジニアも分かっている粒度）で会話をする必要がある。
アトミックデザインの目的（存在意義）
「アトミックデザインをすること」ではない。
協業のための共通基盤作り。
物事の名前は会話をするためにつける。名前がそのものを表すから。
コンポーネント志向とは
キーワード
web is behind
タグの組み合わせでいけちゃうHTMLすごすぎ
→コンポーネント志向が育たなかった
すべてはコンポーネント！
ボタンの形（デザイン）を変えて。
CSSを変更すればいける。
けど、
全てのモーダルの右上に閉じるボタンを付て。
これは終わった。全ページに要素を足さないと、、、
そんな時にコンポーネント志向であれば、コンポーネントに1行書き足せば良い！
コンポーネント志向の利点
＝変更に強くなること
アトミックデザインとは ２
粒度にルールを加えたコンポーネント志向（コンポーネント志向を使いやすくした）
デザイナーの人からしたら、全てコンポーネントって哲学みたいに聞こえる。
実践してみよう！
学んだことは直ぐに実践しないと意味がない。
アトミックデザイン、どこから手をつける？
①サンプルページを作るところから。
②次にAtomを検討
Atom ＝UIの機能性を破壊しない最小要素
③次にモラキュラスを取り出す
④次にオーガニズムズを取り出す
①～④をできれば、デザイナーさんと一緒に行う！
そうすれば、共通認識を合わせられる。
コツ
下位要素を仮実装する。
例）
buttomタグではなく、divタグでつくる。
仮実装があれば上位の要素も作れる。
作業を分担する時は、事前に要素を洗い出すことが大切。
でないと、意図せず同じボタンとかが重複して書くことになる。
全体のテンプレートとコンテンツのテンプレートは分けるのがおススメ。
分けない場合
①パンくずリストのあるコンテンツが含まれるサイドバーのあるメインページ
②パンくずリストのないコンテンツが含まれるサイドバーのあるメインページ
②パンくずリストのあるコンテンツが含まれるサイドバーのないメインページ
②パンくずリストのないコンテンツが含まれるサイドバーのないメインページ
分けた場合
①サイドバーのあるメインページ ＋パンくずリストのあるコンテンツ
②サイドバーのあるメインページ ＋パンくずリストのないコンテンツ
②サイドバーのないメインページ ＋パンくずリストのあるコンテンツ
②サイドバーのないメインページ ＋パンくずリストのないコンテンツ
分けた方が各々、再利用がしやすい。
便利なものを作ろうとすると、atoms、molecules、organismsの3段階では足りない。
どうする？
忠実に、することが難しさに繋がるなら、その本質を見極めて取捨選択すべき。
まとめ
アトミックデザインは、唯一無二のデザインではない。
開発に携わる全ての人たちの指標である。
アトミックデザインが簡単そうに見えるから、デザイナーが手を付けてくれやすい。
コンポーネント志向とか言うと、デザイナーが引いちゃう。
アトム、モラキュラス、オーガニズムのたった3つだけだよ？
って簡単そうに見せてコンポーネント志向に引っ張り込んでいく。
そうすれば、今までよりはコミュニケーションを図りやすくなる。
＜一日一新＞
太陽のチーズラーメン。名前から好き。
＜学習進捗＞
学習開始からの期間 ：98日
今日までの合計時間：957h
今日までに到達すべき目標時間：892h
目標との解離：65h
「10,000時間」まで、
残り・・・「9,043時間！」
以上です。
読んでくれた方々、ありがとうございました！((_ _ (´ω｀ )ﾍﾟｺ。
