Vue.jsスタイルガイド

リンティング

デフォルトはeslint-vue-pluginでplugin:vue/recommended。 詳しいドキュメントはこちらのルールをご覧ください。

基本ルール

  1. サービスは独自のファイル
  2. 店舗は独自のファイル
  3. バンドルファイル内の関数を使用して、Vueコンポーネントをインスタンス化します:

    // bad
    class {
      init() {
        new Component({})
      }
    }
    
    // good
    document.addEventListener('DOMContentLoaded', () => new Vue({
      el: '#element',
      components: {
        componentName
      },
      render: createElement => createElement('component-name'),
    }));
    
  4. サービスやストアにシングルトンを使用しないでください。

    // bad
    class Store {
      constructor() {
        if (!this.prototype.singleton) {
          // do something
        }
      }
    }
    
    // good
    class Store {
      constructor() {
        // do something
      }
    }
    
  5. Vue テンプレートには.vue を使用してください。HAML では%template を使用しないでください。

ネーミング

  1. 拡張子: Vueコンポーネントの拡張子は.vue を使用します。ファイルの拡張子として.js を使用しないでください(#34371)。
  2. リファレンス名: インスタンスには PascalCase を使用します:

    // bad
    import cardBoard from 'cardBoard.vue'
    
    components: {
      cardBoard,
    };
    
    // good
    import CardBoard from 'cardBoard.vue'
    
    components: {
      CardBoard,
    };
    
  3. プロップの命名:DOMコンポーネントのプロップ名の使用は避けてください。
  4. 小道具の命名:テンプレートで小道具を指定するには、キャメルケースの代わりにケバブケースを使用してください。

    // bad
    <component class="btn">
    
    // good
    <component css-class="btn">
    
    // bad
    <component myProp="prop" />
    
    // good
    <component my-prop="prop" />
    

アライメント

  1. テンプレート・メソッドでは、以下のアライメント・スタイルに従ってください:

    1. 複数の属性がある場合は、すべての属性を改行する必要があります:

      // bad
      <component v-if="bar"
          param="baz" />
      
      <button class="btn">Click me</button>
      
      // good
      <component
        v-if="bar"
        param="baz"
      />
      
      <button class="btn">
        Click me
      </button>
      
    2. 属性が1つだけの場合、タグはインラインにすることができます:

      // good
        <component bar="bar" />
      
      // good
        <component
          bar="bar"
          />
      
      // bad
       <component
          bar="bar" />
      

引用

  1. テンプレート内部では常に二重引用符" を使用し、その他のJSでは一重引用符' を使用します。

    // bad
    template: `
      <button :class='style'>Button</button>
    `
    
    // good
    template: `
      <button :class="style">Button</button>
    `
    

小道具

  1. 小道具はオブジェクトとして宣言する必要があります。

    // bad
    props: ['foo']
    
    // good
    props: {
      foo: {
        type: String,
        required: false,
        default: 'bar'
      }
    }
    
  2. プロップを宣言する際には、必ず必須キーを指定する必要があります。

    // bad
    props: {
      foo: {
        type: String,
      }
    }
    
    // good
    props: {
      foo: {
        type: String,
        required: false,
        default: 'bar'
      }
    }
    
  3. プロパティの存在をチェックする必要があるシナリオも_あります_。 そのようなシナリオでは、デフォルト・キーは提供されるべきではありません。

    // good
    props: {
      foo: {
        type: String,
        required: false,
      }
    }
    
    // good
    props: {
      foo: {
        type: String,
        required: false,
        default: 'bar'
      }
    }
    
    // good
    props: {
      foo: {
        type: String,
        required: true
      }
    }
    

データ

  1. data メソッドは常に関数

    // bad
    data: {
      foo: 'foo'
    }
    
    // good
    data() {
      return {
        foo: 'foo'
      };
    }
    

ディレクティブ

  1. @ の方が望ましいです。v-on

    // bad
    <component v-on:click="eventHandler"/>
    
    // good
    <component @click="eventHandler"/>
    
  2. : の方が望ましいです。v-bind

    // bad
    <component v-bind:class="btn"/>
    
    // good
    <component :class="btn"/>
    
  3. # の方が望ましいです。v-slot

    // bad
    <template v-slot:header></template>
    
    // good
    <template #header></template>
    

終了タグ

  1. 自動開閉コンポーネントタグを優先

    // bad
    <component></component>
    
    // good
    <component />
    

テンプレート内でのコンポーネントの使用

  1. コンポーネント名をテンプレートで使用する際に、他のスタイルよりもケバブケースの名前を優先します。

    // bad
    <MyComponent />
    
    // good
    <my-component />
    

ご注文

  1. .vue ファイルのタグの順序

    <script>
      // ...
    </script>
    
    <template>
      // ...
    </template>
    
    // We don't use scoped styles but there are few instances of this
    <style>
      // ...
    </style>
    
  2. Vue コンポーネント内のプロパティ:コンポーネント内のプロパティの順序を確認するルール

:key

v-for を使用する場合は、各項目に一意の :key 属性を指定する必要があります。

  1. 反復処理される配列の要素に一意なid がある場合は、それを使うことをお勧めします:

    <div
      v-for="item in items"
      :key="item.id"
    >
      <!-- content -->
    </div>
    
  2. 反復処理される要素が一意なIDを持たない場合、:key 属性として配列インデックスを使用できます。

    <div
      v-for="(item, index) in items"
      :key="index"
    >
      <!-- content -->
    </div>
    
  3. template とともにv-for を使用し、子要素が複数ある場合、:key の値は一意でなければなりません。kebab-case 名前空間を使用することをお勧めします。

    <template v-for="(item, index) in items">
      <span :key="`span-${index}`"></span>
      <button :key="`button-${index}`"></button>
    </template>
    
  4. ネストされたv-for 、上記と同じガイドラインを使用してください。

    <div
      v-for="item in items"
      :key="item.id"
    >
      <span
        v-for="element in array"
        :key="element.id"
      >
        <!-- content -->
      </span>
    </div>
    

役立つリンク

  1. key
  2. ビュースタイルガイド:キー付きv-for

VueとBootstrap

  1. ツールチップ: Vueコンポーネントのhas-tooltip クラス名に依存しないようにしました。

    // bad
    <span
      class="has-tooltip"
      title="Some tooltip text">
      Text
    </span>
    
    // good
    <span
      v-tooltip
      title="Some tooltip text">
      Text
    </span>
    
  2. ツールチップ: ツールチップを使うときは、tooltipディレクティブを含めてください、./app/assets/javascripts/vue_shared/directives/tooltip.js

  3. data-original-titleを変更しないでください。

    // bad
    <span data-original-title="tooltip text">Foo</span>
    
    // good
    <span title="tooltip text">Foo</span>
    
    $('span').tooltip('_fixTitle');
    

JavaScriptとVueの合意

この合意の目的は、私たち全員が同じ考えを持っていることを確認することです。

  1. Vueを記述する場合、アプリケーションでjQueryを使用することはできません。
    1. DOM からデータを取得する必要がある場合、datasetを使って、アプリケーションの起動中に 1 回だけ DOM にクエリを発行し、データ属性を取得することができます。 jQuery を使わなくても、これを行うことができます。
    2. Vue.jsでjQueryの依存関係を使用するには、ドキュメントにある以下の例を参考にしてください。
    3. 外部のjQueryイベントをVueアプリケーションの内部でリッスンする必要がある場合、jQueryイベントリスナーを使用できます。
    4. 新しいjQueryイベントを追加する必要がない場合は、それを避けるようにします。 新しいjQueryイベントを追加する代わりに、同じタスクを実行する別の方法を見てみましょう。
  2. アプリケーションのブートストラップ中に、window オブジェクトに一度だけ、アプリケーション固有のデータをクエリすることができます(例えば、scrollTo はいつでもアクセスできます)。 このアクセスは、アプリケーションのブートストラップ中に行ってください。
  3. あなたは、私たちの標準に従わないコードを書いて技術的負債を作り、後でリファクタリングする必要があるかもしれません。 そもそも、メンテナーはその技術的負債にOKを出す必要があります。 その技術的負債についてイシューを作成し、さらに評価し、議論する必要があります。 今後数ヶ月の間に、その技術的負債を修正する必要がありますが、その優先順位はメンテナーが決定します。
  4. 例えば、jQueryのテストをVueのテストに書き換えるなどです。
  5. VueXを使用しない場合は、Vue.jsのドキュメントにあるstoreパターンを使用する必要があります。
  6. 一元化された状態管理ソリューションを選択したら、それをアプリケーション全体に使用する必要があります。