Nuxt.js,Vue.js命名規則
昨日深夜寝る前にUdemyの動画を見返していたら発見があったのでメモします。
Nuxt.jsのコンポーネント名は基本パスカルケースで書く
パスカルケース→NustName
先頭大文字、語句の切り替えのときに大文字にする
こちらの記事の早見表がとてもわかり易かったので素晴らしかったです。
まとめと補足
・ファイル名 → パスカルケース
このほうが圧倒的に開発しやすいと思います。
メリットとしては
１、コンポーネントかどうかがはっきりわかる
こんな感じでこれはPostComment.vueというコンポーネントをよびだしているんだなとひと目で分かります。
２、importしやすい
componentを呼び出す際は３つの場所に記述をします。
1...template内での呼び出し、
2...<script>タグでのimport、
3...コンポーネントの登録
template内で記述をすると拡張機能で他の２つを補完してくれます。
その際の記法がパスカルケースですのでそれに合わせて作成したほうが余計な手間が減らせて良いです。
・HTML内 → ケバブケース
ケバブケースで記述するのはVue.cli内では必要ないです。
必要なのはindex.htmlなどのDOMテンプレートファイル内でだけです。
もしくは、<html></html>タグで囲まれている部分に小さくVue.jsを導入するケースのみケバブケースで記述します。
なぜなら、
ブラウザは大文字と小文字を区別しないからです。
ブラウザはNuxtTest、nuxttest、nuxtTest、これらのものを全て同じものだと認識します。
そのため混同をさける？ために語句の間に-ハイフンを挟んで区別します。
cssやclass名の規則がケバブケースなのはそのためです。
・JS内 → キャメルケース
これはjavascriptの記法でメソッド名などを命名する際にキャメルケースで書こうねっていう慣習があるからです。
その慣習にあわせて記述したほうがjsを今まで扱ってきた人でも違和感なく使えるよねということから、js内ではキャメルケースを使用しています。
この記事が気に入ったらサポートをしてみませんか？