Contents
はじめに
要は、かつて使っていたBootStrapを自前で用意するという話なんですが。
atomic designとは。
https://www.codegrid.net/articles/2017-atomic-design-1/
UIのライブラリ、コード集、それらをどう使うか、体制やルール、ワークフローがAtomic Designのいうデザインシステムで、このデザインシステムの確立と運用がサイト全体のUIを統合された状態に保つのに必須であるというのが、Atomic Designの主張です。
https://www.codegrid.net/articles/2017-atomic-design-1/
言ってることは大まかにわかるんですが、今回めちゃくちゃ苦労しました。
苦労したこと
こういうことらしいんですが、今回悩んだのがめいめいの切り分けでした。
AtomsとMoleculesとOrganismsをどう分けるか？
- Atoms：これ以上分けられない最小単位
- Molecules：Atomを組み合わせて検索フォームなどの塊にする
- Organisms：Moleculesをまとめてヘッダ、フッタなどのひとつのまとまりを作る
- Templates：Organismsを組み合わせてページ構成の枠組みとする
- Pages：完成品←Controllerからはこいつを呼ぶ
という次第なんですが、MoleculesとOrganismsの区切りで難儀しました。
Moleculesにいたある部品を使おうとしたんですが、私のcontrollerから渡すデータが足りず。
結果Moleculesがif文だらけになったり、OrganismsからひとつのMoleculesしか呼んでなかったりするのですが、これでいいんだろうか？
Controllerからの変数が一発で末端まで伝わらない話
これが手間取りました。
Pagesから呼び出すOrganismsのpropsにて引き渡してやらないとならないんです。
OrganismsからMoleculesを呼び出す際も然り。
ただ用意されているMoleculesにプレースホルダーとか使いたいpropsが無いことも然り。
これ、手を入れていいんか？となりましたw
早速見直されてる件
本式？というものを読んでみてから判断するべきなんですが
https://note.com/tabelog_frontend/n/n07b4077f5cf3
食べログさんで早速見直されています。
どこかのページでの使い道が他ページと衝突すると余計に部品が増えるから、一部でしか使わないものはそちらで引き受ける。
これはこれでやっぱり似たような部品が増えそうな。
むすび
ところで、未だにLaravelのUIをVue.jsにする利便性がよくわかっていない件。
https://rubydesign.jp/blog/why_vue.html
https://teratail.com/questions/160012
SPAでなければそんなに利便性が無い気が…
https://qiita.com/uryyyyyyy/items/9a8276f7241b650f1c15
SPAでの場合のセッション切れ対策とか。
理解できてないならtech learningらへんに幾ばくか突っ込んでみっちり勉強するかなぁ。