- リンティング
- 基本ルール
- ネーミング
- アライメント
- 引用
- 小道具
- データ
- ディレクティブ
- 終了タグ
- テンプレート内でのコンポーネントの使用
- ご注文
:key
- VueとBootstrap
- JavaScriptとVueの合意
Vue.jsスタイルガイド
リンティング
デフォルトはeslint-vue-pluginで、plugin:vue/recommended
。 詳しいドキュメントはこちらのルールをご覧ください。
基本ルール
- サービスは独自のファイル
- 店舗は独自のファイル
-
バンドルファイル内の関数を使用して、Vueコンポーネントをインスタンス化します:
// bad class { init() { new Component({}) } } // good document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#element', components: { componentName }, render: createElement => createElement('component-name'), }));
-
サービスやストアにシングルトンを使用しないでください。
// bad class Store { constructor() { if (!this.prototype.singleton) { // do something } } } // good class Store { constructor() { // do something } }
- Vue テンプレートには
.vue
を使用してください。HAML では%template
を使用しないでください。
ネーミング
-
拡張子: Vueコンポーネントの拡張子は
.vue
を使用します。ファイルの拡張子として.js
を使用しないでください(#34371)。 -
リファレンス名: インスタンスには PascalCase を使用します:
// bad import cardBoard from 'cardBoard.vue' components: { cardBoard, }; // good import CardBoard from 'cardBoard.vue' components: { CardBoard, };
- プロップの命名:DOMコンポーネントのプロップ名の使用は避けてください。
-
小道具の命名:テンプレートで小道具を指定するには、キャメルケースの代わりにケバブケースを使用してください。
// bad <component class="btn"> // good <component css-class="btn"> // bad <component myProp="prop" /> // good <component my-prop="prop" />
アライメント
-
テンプレート・メソッドでは、以下のアライメント・スタイルに従ってください:
-
複数の属性がある場合は、すべての属性を改行する必要があります:
// 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>
-
属性が1つだけの場合、タグはインラインにすることができます:
// good <component bar="bar" /> // good <component bar="bar" /> // bad <component bar="bar" />
-
引用
-
テンプレート内部では常に二重引用符
"
を使用し、その他のJSでは一重引用符'
を使用します。// bad template: ` <button :class='style'>Button</button> ` // good template: ` <button :class="style">Button</button> `
小道具
-
小道具はオブジェクトとして宣言する必要があります。
// bad props: ['foo'] // good props: { foo: { type: String, required: false, default: 'bar' } }
-
プロップを宣言する際には、必ず必須キーを指定する必要があります。
// bad props: { foo: { type: String, } } // good props: { foo: { type: String, required: false, default: 'bar' } }
-
プロパティの存在をチェックする必要があるシナリオも_あります_。 そのようなシナリオでは、デフォルト・キーは提供されるべきではありません。
// good props: { foo: { type: String, required: false, } } // good props: { foo: { type: String, required: false, default: 'bar' } } // good props: { foo: { type: String, required: true } }
データ
-
data
メソッドは常に関数// bad data: { foo: 'foo' } // good data() { return { foo: 'foo' }; }
ディレクティブ
-
@
の方が望ましいです。v-on
// bad <component v-on:click="eventHandler"/> // good <component @click="eventHandler"/>
-
:
の方が望ましいです。v-bind
// bad <component v-bind:class="btn"/> // good <component :class="btn"/>
-
#
の方が望ましいです。v-slot
// bad <template v-slot:header></template> // good <template #header></template>
終了タグ
-
自動開閉コンポーネントタグを優先
// bad <component></component> // good <component />
テンプレート内でのコンポーネントの使用
-
コンポーネント名をテンプレートで使用する際に、他のスタイルよりもケバブケースの名前を優先します。
// bad <MyComponent /> // good <my-component />
ご注文
-
.vue
ファイルのタグの順序<script> // ... </script> <template> // ... </template> // We don't use scoped styles but there are few instances of this <style> // ... </style>
-
Vue コンポーネント内のプロパティ:コンポーネント内のプロパティの順序を確認するルール。
:key
v-for
を使用する場合は、各項目に一意の :key
属性を指定する必要があります。
-
反復処理される配列の要素に一意な
id
がある場合は、それを使うことをお勧めします:<div v-for="item in items" :key="item.id" > <!-- content --> </div>
-
反復処理される要素が一意なIDを持たない場合、
:key
属性として配列インデックスを使用できます。<div v-for="(item, index) in items" :key="index" > <!-- content --> </div>
-
template
とともにv-for
を使用し、子要素が複数ある場合、:key
の値は一意でなければなりません。kebab-case
名前空間を使用することをお勧めします。<template v-for="(item, index) in items"> <span :key="`span-${index}`"></span> <button :key="`button-${index}`"></button> </template>
-
ネストされた
v-for
、上記と同じガイドラインを使用してください。<div v-for="item in items" :key="item.id" > <span v-for="element in array" :key="element.id" > <!-- content --> </span> </div>
役立つリンク
VueとBootstrap
-
ツールチップ: Vueコンポーネントの
has-tooltip
クラス名に依存しないようにしました。// bad <span class="has-tooltip" title="Some tooltip text"> Text </span> // good <span v-tooltip title="Some tooltip text"> Text </span>
-
ツールチップ: ツールチップを使うときは、tooltipディレクティブを含めてください、
./app/assets/javascripts/vue_shared/directives/tooltip.js
-
data-original-title
を変更しないでください。// bad <span data-original-title="tooltip text">Foo</span> // good <span title="tooltip text">Foo</span> $('span').tooltip('_fixTitle');
JavaScriptとVueの合意
この合意の目的は、私たち全員が同じ考えを持っていることを確認することです。
- Vueを記述する場合、アプリケーションでjQueryを使用することはできません。
- DOM からデータを取得する必要がある場合、
dataset
を使って、アプリケーションの起動中に 1 回だけ DOM にクエリを発行し、データ属性を取得することができます。 jQuery を使わなくても、これを行うことができます。 - Vue.jsでjQueryの依存関係を使用するには、ドキュメントにある以下の例を参考にしてください。
- 外部のjQueryイベントをVueアプリケーションの内部でリッスンする必要がある場合、jQueryイベントリスナーを使用できます。
- 新しいjQueryイベントを追加する必要がない場合は、それを避けるようにします。 新しいjQueryイベントを追加する代わりに、同じタスクを実行する別の方法を見てみましょう。
- DOM からデータを取得する必要がある場合、
- アプリケーションのブートストラップ中に、
window
オブジェクトに一度だけ、アプリケーション固有のデータをクエリすることができます(例えば、scrollTo
はいつでもアクセスできます)。 このアクセスは、アプリケーションのブートストラップ中に行ってください。 - あなたは、私たちの標準に従わないコードを書いて技術的負債を作り、後でリファクタリングする必要があるかもしれません。 そもそも、メンテナーはその技術的負債にOKを出す必要があります。 その技術的負債についてイシューを作成し、さらに評価し、議論する必要があります。 今後数ヶ月の間に、その技術的負債を修正する必要がありますが、その優先順位はメンテナーが決定します。
- 例えば、jQueryのテストをVueのテストに書き換えるなどです。
- VueXを使用しない場合は、Vue.jsのドキュメントにあるstoreパターンを使用する必要があります。
- 一元化された状態管理ソリューションを選択したら、それをアプリケーション全体に使用する必要があります。