LaravelとVue.jsでAtomic Designを対応したら全く理解できなかった話

投稿者:

はじめに

要は、かつて使っていた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/

言ってることは大まかにわかるんですが、今回めちゃくちゃ苦労しました。

苦労したこと

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://patternlab.io/

本式?というものを読んでみてから判断するべきなんですが

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らへんに幾ばくか突っ込んでみっちり勉強するかなぁ。

コメントを残す