制作

【Nuxt.js】Nuxt番外編:
アトミックデザインにおけるフォルダの分け方と
サンプル集

前置き

コンポーネントの分類の仕方についてと
少しですがサンプルコード集です🎈🧸

この要素はどこ❓
molecules❓
それともorganisms❓
なんて時にチェックしてください✅🌟

フォルダ分けはアトミックデザインを推奨しています。
Atomic Designとは

サンプルコードもあるので
コンポーネントの命名や
中身の構成などの参考にも
お役立てください❤️

コードを書き始める前のチェックリストを
見ておくと尚良いと思います✨👀


分け方

アトミックデザインに基づく分け方

アトミックデザイン は、
要素の大きさや機能ごとに
ファイルを分けるやり方です✨🗂

それに乗っ取って分けていますが、
確実な正解・ルールは存在しないので
あくまでも私たちの分け方として
参考にしてくださいね♪

それぞれ、
どの階層のコンポーネントを
読み込んでもOKです🙆‍♀️

atoms

UIの最小要素。
button, icon, inputなど。

タイトルのh1と、
サブタイトルのpでセットの場合なんかも
1つのまとまりなのでatomsへ🍎


molecules

atomsを2, 3つ貼り付けたような物🧩
ul > li li
formに入れるlabelつきのinputなど。

organismがformulなどの
まとまりなので
それを分解した要素です💡

InputDefault.vueを
atomで作っていた場合はimportし、
作っていない場合は
FormItemInput.vueで
直接inputを使ってもOKです⭕️


organisms

formulなど、
ある程度のまとまり。
modalの中身もココ💫


templates

modalやnavHeaderFooter
sectionなどの大きなまとまり🍓


atoms



buttons

ButtonDefault.vue

ボタンをコンポーネントにする場合は
必ず$emitが必要になりますね💡
https://wp.me/pc9NHC-od

テキストは親によって
変わることがほとんどなので
slotを使用しています🙋‍♀️
https://wp.me/pc9NHC-k3


入力項目を全て入力しないと
ボタンが押せないようにしたい場合。
propsのstatusと:class
クラスバインディングを付け足します😉
scssは親でstatusが
inactiveになった時の
スタイリングを記載しています✍️

リンク先はv-bind="$attrs"が便利です。
https://wp.me/pc9NHC-li

色はscssの変数を使っています❗️🎨
楽ちんなのでflex派ですが、
時々バグって最後の1文字だけ
改行されることがあるようです、、、
その場合は
padding, line-height, text-aline
で調整しましょう!
https://wp.me/pc9NHC-sc


icons

よく使うアイコンなどは
予めコンポーネントにしちゃいましょう❣️

クリックイベントがあったり、
親によってつけるクラスを変えたい場合は
⬆️のbuttonを参考にしてください🌟

IconEdit.vue


title

メインタイトルのみでも⭕️
サブタイトルもセットの場合も
1つのタイトルのまとまりなのでatom🌟

TitlePage.vue


molecules


FormItemInput


FormItemTextarea


ListItemEvent

イベントを作るアプリの体です。
イベントが出来たらliで表示させています。

atomsをimportしています。
親で写真やユーザー情報を入れられるように
propsにしています。


organisms

FormLogin


ListEvent

ListItemEventを並べるだけ。


templates

Modal

モーダルの中身は親で
organismを指定したいので
slotにしてあります🍓

親で中身を指定☝️🌟


SectionEvent

ListEventをimportしています。
イベントのジャンルなどをlabelに記載、
+ボタンでイベントの追加ができたり
MOREでもっとイベントを見ることができます。


まとめ

アトミックデザインでの分類は
管理がしやすくなって便利ですね❤️

命名やコードもある程度きめて
テンプレ化しておけば
他の開発でも使い回しが効くので
よりスムーズな開発が進められると思います✨

❗️とはいえ丸コピはミス多発する原因なので(特にTS)
 あくまで見ながら構成を真似するようにしましょう…

-制作
-,

© 2020 aLiz Nuxt