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

研究
この記事は約3分で読めます。

はじめに

要は、かつて使っていたBootStrapを自前で用意するという話なんですが。

atomic designとは。

Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か | CodeGrid
「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。

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

早速見直されてる件

Create atomic design systems with Pattern Lab - Pattern Lab

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

Atomic Designをやめてディレクトリ構造を見直した話|食べログ フロントエンドエンジニアブログ|note
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic De...

食べログさんで早速見直されています。
どこかのページでの使い道が他ページと衝突すると余計に部品が増えるから、一部でしか使わないものはそちらで引き受ける。
これはこれでやっぱり似たような部品が増えそうな。

むすび

ところで、未だにLaravelのUIをVue.jsにする利便性がよくわかっていない件。

なぜVue.js ? Laravelで Vue.js を使う理由と導入方法。
こんにちはマツイです。現在、個人的に時間管理のためにSlackを使った勤怠管理システムを作っていおります。ロジックは、Slackに登録したスラッシュコマンドを叩くと、グーグルのスプレッドシートに記載してくれて、Slackのボットがリアクションしてくれる仕組み。
vue.jsを使う人の思想を知りたいです(できればサーバーサイドメインの開発者目線の意見で)|teratail
現在開発中のプロダクトで、ユーザーの種類が大きく分けて「個人ユーザー」と「企業ユーザー」があります。ユーザー登録すると、個人ユーザーの権限が割り当てられます。ログイン後に「企業成申請」という機能があり今作っている部分でもあるのですが、企業成申請画面では企業形態のセレクトボックスがあり、は大きく分けて

SPAでなければそんなに利便性が無い気が…

SPAでのセッション管理とセキュリティ - Qiita
編集履歴 ※ SessionStorage→LocalStorage(永続化される方はこちらだった) ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 概要 Fr...

SPAでの場合のセッション切れ対策とか。

理解できてないならtech learningらへんに幾ばくか突っ込んでみっちり勉強するかなぁ。

コメント

タイトルとURLをコピーしました