前置き
さぁコード書くぞ✨✊
の前にチェックしておくと
良いことをまとめました✅
デザインができている前提です！
コンポーネントの分け方が曖昧で
どこにあるか分からんっっ😖💦
とか
クラス名をつけずに
タグに直接cssあてたら
親にも影響出ちゃって
どこを直せばよいのっっ😨💦
とか
変なことがなくなるように
予め知っておいた方が良いことをまとめました！
コンポーネントの分け方
アトミックデザイン
アトミックデザイン
要素の大きさごとに
ファイルを分けるやり方です✨🗂
コンポーネントの管理が
しやすくなりますよ❤️👀
分け方はここが参考になります！
Atomic Designとは
もちろんプロジェクトによっては
予めフォルダ名や分け方も
決められている場合があると思いますが、
ぜひこちらを提案してみてください❗️
共通認識のしやすさ、管理のしやすさが
変わってくると思いますよ♪
デザインでも同じように
コンポーネントが要素の大きさ別に
一覧で分かると尚良いですね👍
アトミックデザインにおけるルール
atoms < moledules < organisms < templates < pages
これは絶対ではありませんが、
1つ下の階層をimportするようにすると⭕️
どこでクラスをあてているのかなど
全体の構造が分かりやすくなります💕
例えば運営メンバーの一覧ページを作る時。molecules/listsItems/ListItemMember.vue
organisms/lists/ListMembers.vue
templates/sections/SectionMemberIntro.vue
pages/members/index.vue
といった具合にそれぞれ作成し、
1つ下の階層をimportするようにします。
atomの場合のみ…
使い回す場所が多岐に渡り、
いきなりtemplatesやpagesに
入れたりすることもあります❗️
どこでcssをあてているかも
分かりやすいことが多いです。
親子関係のタグを分離
デザイン見るとliタグだけが
別のコンポーネントになってる…！？
そんなことできるの！？💥😵
ということがあると思います。
できます！
やり方はこちらで解説しているので
やっていきましょう✨💪
また、その逆で
デザインではコンポーネントが分かれていない…
ということにも気づけるようになります💡👀
命名系
こちらもプロジェクトで
既に決められている場合があると思いますが、
提案してみたり、参考にしてみてくださいね♪
コンポーネント
フォルダ名、コンポーネント名
components/atoms/buttons/ButtonDefault.vue
atoms
アトミックデザイン を参考にしてください🍎
buttons = 役割
コンポーネントの役割を複数形にしたものを書きましょう。
例えbuttonのコンポーネントが1つしかなくても
複数形にして他のコンポーネントと合わせましょう。
ButtonDefault.vue = 明確な役割
単語の先頭は大文字で。
役割(button)を更に明確に(default)します。
他のコンポーネントと被らない、
固有の名前をつけましょう🍀
コンポーネントのクラス名も統一
全体を囲むタグのクラスも
統一しましょう🌟
button(役割、ここでは単数形でOK)
button-default(明確な役割)
明確な役割は
他のファイルに影響がないよう、
固有の名前にしてあります✅
✅ TSの時のnameも同じ
|
1 2 3 4 5 6 7 |
<script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'ButtonDefault', }) </script> |
✅ importする時も基本的にそのままの名前
|
1 2 3 4 5 6 7 8 9 |
<script> import ButtonDefault from '~/components/atom/buttons/ButtonDefault.vue'; export default { components: { ButtonDefault: ButtonDefault, }, } </script> |
✅ pagesコンポーネントでも同じ命名の仕方
pages/login.vue(pagesでは先頭は小文字でOK)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div class="page page-login"> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'PageLogin', }) </script> |
✅ index.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div class="page"> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'PageIndex', }) </script> |
クラス
複数形・単数形は使いわける
ただ並んでいるだけの要素の場合は
複数形と単数形にしてもOKです。
tags, tagとか。
NG例だと
❌ ul=lists, li=list
⭕️ ul=list, li=item
liタグのlistを編集しているつもりがulタグのlistsを編集していた、
なんてことがあります💫🐣💥
また、それに気づいてliタグのlistをitemに変えようと
ページ内検索でlistを検索し
一括置換してしまうと…ulタグのlistsまでitemsに変わり、
結局またitemsとitemの
複数形と単数形で紛らわしくなります💦
あとから目視でクラス名を変えるのも
非常に面倒なので…😩
なるべく初めから気をつけたいポイントですね。
役割で命名
クラス名で役割が分かるような命名を。
例えばaタグだけどモーダルを開けるためのaなら
❌ link
⭕️ open-modal
数字は使わない
数字だと何番目か
数えなければなりません。
ここは説明文があるcontainerですよ、
といった中身の内容がわかれば
場所もハッキリしてきます。
❌ container2
⭕️ container-description
なるべく使ったことのあるクラス名を使用
同じ役割なのに
わざわざ新しいクラス名をつける必要はありません。
違う役割かと勘違いしてしまう原因になります💫🐣💥
なるべく共通化しましょう。
ただしコンポーネントの命名でつけた
固有の名前だけは使用しないようにしましょう❗️
イベント
何のために、何をするのか
🔺 @click="$emit(click)"
= 使用箇所が少なければOK
⭕️ @click="$emit('clickClose')"
= 閉じるためのクリック、意味がハッキリ分かる
コードの書き方
コンポーネント
templateタグの直下は役割のタグを
buttonならbuttonタグ、input、nav、label、section、headerなど
なるべくdivを避けて
役割をハッキリさせましょう🙋♀️
divを使うのはpagesコンポーネントや
モーダルコンポーネントなどに留めましょう。
SEO的にも良いですし、
ぱっと見でコンポーネント名と
中身のズレがないかも分かります✨👀
役割タグの直下にはdiv class="container"を
名前はcontainerでなくとも構いません。
pagesコンポーネントや
templatesのコンポーネントは
1番外側の役割タグの直下に入れておきます🍎
1個divを挟むと
containerだけに効かせたいものが
あったときに楽ですよ😉💕
scssの場合は後から全部入れ子に移動させるのが
面倒なので先にやっとくと良いです…！
クラス
class名を書くたびに改行する
繋げて書くと分かりにくいです。@include も同様に1つ改行しましょう。
必ずclass名をつける
他のコンポーネントに影響がでないよう、
全てclass名をつけて記載しましょう✍️
❌ p
⭕️ class="text"
直下 > を使用
他のコンポーネントに
影響がでないようにしましょう。
❌ .text
⭕️ > .text
&を使う場合はスペースNG
scssでは良く使う&
スペースを入れると効きません。
❌ & .inactive
⭕️ &.inactive
直下の場合はどちらでもOKです🙆♀️
⭕️ >.text
⭕️ > .textcssいろいろ
まとめ
共通化、ルール化することで
効率がグンっ！と上がることが
分かったかと思います🌟🐣
これを絶対まもる❗️
ではなく、
あくまで参考にしていただき、
個人やチームでやりやすい形を
作ってくださいね😉❤️