Help us understand the problem. What is going on with this article?

【JavaScript、Vue.js、Nuxt.js】命名規則 個人的まとめ

JavaScript 命名規則

※ lowerCamelCaseとは、「lowerCamelCase」このような書き方を示す。

  • スクリプトの改行・空白は無視される
  • ローカル変数 -> lowerCamelCase
  • グローバル変数 -> lowerCamelCase
  • 定数 -> すべて大文字(ex)UPPER_CASE
  • 関数 -> 動詞+名詞になるように (ex)getName
  • オブジェクトのプロパティのメソッド -> lowerCamelCase
  • メソッドと関数のパラメータ -> lowerCamelCase
  • コンストラクタ関数 -> UpperCamelCase
  • 列挙型 -> UpperCamelCase
  • ファイル名 -> 全て小文字、区切り文字はハイフンのみ

OSによっては、大文字のファイルが認識されない場合がある

Vue.js 命名規則

※ PascalCaseとUpperCamelCaseは一緒

  • ファイル名 -> UpperCamelCase
  • name属性 -> 「.vue」ではない場合、必ず与えること。「.vue」は、自動でファイル名がname属性になる
  • html -> kebab-case
sample.vue.js
export default {
  name: "Hoge",
  components: {
    UserList
  }
}

{ ComponentA }は{ ComponentA: ComponentA }の簡略形です。
そしてVueは自動でキーをcomponent-aに変換してくれます。

らしい

  • メソッド名 -> lowerCamelCase(camelCase)
  • イベント名 -> kebab-case (ex)this.$emit.('update-button-click')

Nuxt.js 命名規則

  • components -> UpperCamelCase
  • pages -> Nuxtの場合このままURLが生成されるので、特に制限は無いと判断した。
  • ファイル・フォルダ名の先頭が_(pagesのみ) -> 動的パラメータ
  • ファイル・フォルダ名の先頭が-(pagesのみ) -> ルーティングの対象から除外
  • layouts -> lowerCamelCase?

まだ調べきれていない!

参考資料

【JavaScript関連】
今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200
JavaScriptにおける命名規則の個人的まとめ

【Vue.js関連】
Vue.js命名規則、命名のコツ

【Nuxt.js関連】
フォルダ構成

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away