• リンティング
• 基本ルール
• ネーミング
• アライメント
• 引用
• 小道具
• データ
• ディレクティブ
• 終了タグ
• テンプレート内でのコンポーネントの使用
• ご注文
• :key
• VueとBootstrap
• JavaScriptとVueの合意

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. 一元化された状態管理ソリューションを選択したら、それをアプリケーション全体に使用する必要があります。