クマのブログ

つまづいたところ、学びを書いていきます

スタイルガイド（優先度：B）

Vue Vue

https://jp.vuejs.org/v2/style-guide/#優先度B-のルール-強く推奨-読みやすさの向上

コンポーネントのファイル

悪い例

Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})

良い例

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

単一ファイルコンポーネントのファイル名の形式

  • すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にする

基底コンポーネントの名前

悪い例

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

良い例

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

単一インスタンスのコンポーネント名

悪い例

components/
|- Heading.vue
|- MySidebar.vue

良い例

components/
|- TheHeading.vue
|- TheSidebar.vue

コンポ―ネント名における単語の順番

最高レベルの(最も一般的な)単語から始めて、説明的な修飾語で終わるべき

悪い例

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

良い例

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

テンプレート内でのコンポーネント名の形式

JS/JSX 内でのコンポーネント名の形式

完全な単語によるコンポーネント名

プロパティ名の型式

  • プロパティ名は、定義の時は常にキャメルケース(camelCase)にするべき
  • テンプレートや JSX ではケバブケース(kebab-case)

悪い例

props: {
  'greeting-text': String
}

良い例

props: {
  greetingText: String
}

テンプレート内での単純な式

複雑な式は算出プロパティかメソッドにリファクタリングして、コンポーネントのテンプレートには単純な式だけを含むようにするべきです。

悪い例

{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

良い例

<!-- テンプレート内 -->
{{ normalizedFullName }}

// 複雑な式を算出プロパティに移動
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

単純な算出プロパティ

できる限りたくさんの単純なプロパティに分割するべき

悪い例

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

良い例

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

ディレクティブの短縮記法

ディレクティブの短縮記法は、常に使うか、まったく使わないかのどちらか