始まりましたカレーアドベントカレンダーーーーーーーーー！
カレーが！！！好きかーーーーーーーーー！！！！！！！！！！！
今日から！25日かけて！！！！カレーを！！作るぞーーーーーーーーー！！！！！！
ちなみに一人暮らし9年目になりそうだけど、今まで1人でカレーを一度も作ったことないぞーーーーー！いけるんかこれーーーーーー！
ということで、お楽しみいただけたらいいなと思うんですけれども。
そんなこんなで、今日はカレーをAtomic Designに絡めて
記事にできたらなと思います🍛
Atomic Designとは
Webページを作るときのUI設計の考え方で、コンポーネント同士の組み合わせでページを作る考え方。
コンポーネントは以下の5つから構成されます。
- Atoms
- Molecules
- Organisms
- Templates
- Pages
とりあえずここでは「カレーは5つに分解できるぞ」と構えてください。
Atoms（原子）
これ以上分けられないような単位のUIのことを指します。
カレーで例えるなら、原材料のことです。
- カレーで例えた場合
- にんじん
- じゃがいも
- 肉
- クミン
- ターメリック
- ローリエ
- 水
- 米粒
にんじんもこれ以上細分化できないですもんね。はい、そいつはAtomsです。
Molecules（分子）
atomsを2つ以上組み合わせたもの。つまり、カレーで言うと、具材「達」です。
- カレーで例えた場合
- 炒めた野菜と肉（にんじん + じゃがいも + 肉）
- カレースパイス（クミン + ターメリック + パプリカ + レッドチリ + コリアンダー）
- 米粒の集合体（米 + 米 + 米）
ん〜〜〜〜美味しい匂いがしてきた。
Organisms（有機体）
複数のMoleculesを組み合わせたもの。上記の炒めた具材と米をヴウウウンってがっちゃんこしたもんです。
- カレーで例えた場合
- カレールー（カレースパイス + 水 + 炒めた野菜と肉）
- 皿にのってない宙に浮いたカレーライス（米 + カレールー）
Templates
Organismを組み合わせ、ページの枠組みを構成します。
......おっと。カレーに例えると、有機体（カレールーと米）を組み合わせて...？無理じゃない...？
じゃあここではカレーの枠組みを構成するもの（=どこに何を入れるかの定義されたもの）と捉えましょう。
つまりダムカレーの盛り付け方ですね！！！そうですよね！！！！！！！！！
- ダムカレーで例えると
- 各地域のダムごとのお皿に以下を定義
- カレールーはお皿の左側に200gの分量
- ご飯はお皿の右側に250gの分量
- 福神漬けはお皿の手前に100gの分量
- 実体はない。（カレーで再現できなかった）
- 各地域のダムごとのお皿に以下を定義
Pages
Templateに具体的なコンテンツを入れ込んだのが、最終的なアウトプットとなるPagesです。
つまり、ダムカレーの皿に入ったカレーライス！これがまさに！Pages！
いただきまーーーーーーーーーす！！！！！！！！！！！！！
おわりに
結論、カレーで例えてみたけど
カレーは実体だし、Atomic DesignはUI設計での考え方なので、
Atomic Designはカレーで完全には例えられない！！！！！！！