制作

【Nuxt.js】Nuxt番外編:コードを書く前のルールチェックリスト

前置き

さぁコード書くぞ✨✊
の前にチェックしておくと
良いことをまとめました✅

デザインができている前提です!

コンポーネントの分け方が曖昧で
どこにあるか分からんっっ😖💦

とか

クラス名をつけずに
タグに直接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も同じ

✅ importする時も基本的にそのままの名前

✅ pagesコンポーネントでも同じ命名の仕方
  pages/login.vue(pagesでは先頭は小文字でOK)

✅ index.vue


クラス

複数形・単数形は使いわける

ただ並んでいるだけの要素の場合は
複数形と単数形にしても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タグ、
inputnavlabelsectionheaderなど
なるべく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いろいろ


まとめ

共通化、ルール化することで
効率がグンっ!と上がることが
分かったかと思います🌟🐣

これを絶対まもる❗️
ではなく、
あくまで参考にしていただき、
個人やチームでやりやすい形を
作ってくださいね😉❤️

-制作
-,

© 2020 aLiz Nuxt