Vue.js スタイルガイド早見表 🎄✨

Vue.jsの公式スタイルガイドは長い！！！ 
サクッっと要点だけまとまったガイドが欲しい。そんなアナタのために書きました。

この記事はVue.jsのスタイルガイドを簡潔にまとめたものです。
( ※部分的に補足を加えたりしています。 )

対象となる人物像: `一度目を通したことがある人` or `時間の無い人` or `ザックリでいいから知りたい人`

## ルールカテゴリ
Vueのスタイルガイドは4つのカテゴリに分けられています。
`A > B > C > D` の順で優先度 (強制力) が強いです。

| A. 必須 | B. 強く推奨 | C. 推奨 | D. 注意(危険) |
|:-----------|:------------|:-------------|:-------------|
|エラー防止|読みやすさ向上|一貫性の確保|潜在的に危険、<br>予期せぬ副作用を起こす可能性を事前に回避|


📎 <a href="https://qiita.com/_upto_me_/private/58642612b0106b193c82#a-%E5%BF%85%E9%A0%88">[A. 必須] 一覧を見る</a>
📎 <a href="https://qiita.com/_upto_me_/private/58642612b0106b193c82#b-%E5%BC%B7%E3%81%8F%E6%8E%A8%E5%A5%A8">[B. 強く推奨] 一覧を見る</a>
📎 <a href="https://qiita.com/_upto_me_/private/58642612b0106b193c82#c-%E6%8E%A8%E5%A5%A8">[C. 推奨] 一覧を見る</a>
📎 <a href="https://qiita.com/_upto_me_/private/58642612b0106b193c82#d-%E6%B3%A8%E6%84%8F%E5%8D%B1%E9%99%BA">[D. 注意] 一覧を見る</a>

## A. 必須

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 複数単語コンポーネント名
コンポーネント名は複数単語にする。
※将来定義されるHTML要素との衝突を防止するため。

**😊 Good**

```html
<todo-item />
```

**😰 Bad**

```html
<todo />
```

<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネントのデータ
`data`プロパティを使用する際は、オブジェクトを返す関数にする。


**😊 Good**

```js
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
```

**😰 Bad**

```js
export default {
  data: {
    foo: 'bar'
  }
}
```

<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> プロパティの定義
`props`プロパティの定義は、できる限り詳細にする。
📎 [Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成](https://qiita.com/potato4d/items/1b92df0cbf9b0b6cf8d6)




**😊 Good**

```js
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}
```

**😰 Bad**

```js
props: ['status']
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> キー付き `v-for`
`v-for`には`key`を付与する。( パフォーマンス向上 )
※`key`はVirtualDOMのdiffから実際のDOMに反映させるときに、最小限の変更するために使われる。
コストをかけずにDOM変化を実行するためにも`key`を付与するようにする。
📎 [React.jsの地味だけど重要なkeyについて](https://qiita.com/koba04/items/a4d23245d246c53cd49d)


**😊 Good**

```html
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
```

**😰 Bad**

```html
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネントスタイルのスコープ
コンポーネントのスタイルは、下記ルールのどれかを採用する。

1. scoped属性を使用する
2. CSS modulesを使用する
3. BEMのようなCSS設計を採用する


**😊 Good ( 1. scoped属性を使用する )**

```html
<template>
  <button class="button button-close">X</button>
</template>

<!-- `scoped` を使用 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
.button-close {
  background-color: red;
}
</style>
```

**😊 Good ( 2. CSS modulesを使用する )**

```html
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- CSS modules を使用 -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}
.buttonClose {
  background-color: red;
}
</style>
```

**😊 Good ( 3. BEMのようなCSS設計を採用する )**

```html
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- BEM の慣例を使用 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}
.c-Button--close {
  background-color: red;
}
</style>
```


**😰 Bad**

```html
<template>
  <button class="btn btn-close">X</button>
</template>

<!-- CSSがグローバル汚染 -->
<style>
.btn-close {
  background-color: red;
}
</style>
```

<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> プライベートなプロパティ名
プラグインやミックスインなどのカスタムプロパティには、`$_`プレフィックスを付与する。
※コンポーネントのプロパティとの衝突を避けるため

**😊 Good**

```mixins/hoge.js
var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function() {
      // ...
    }
  }
}
```


**😰 Bad**

```mixins/hoge.js
var myGreatMixin = {
  // ...
  methods: {
    update: function() {
      // ...
    }
  }
}
```

## B. 強く推奨

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネントのファイル
各コンポーネントはそれぞれ別のファイルに書くようにする。
※ コンポーネントが分かれていることで対象コンポーネントを探しやすくなる。可読性があがる。

**😊 Good**

```js
// ファイルがコンポーネントごとに分けられている

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


**😰 Bad**

```js
// ひとつのファイルにコンポーネントを書きまくる

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


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 基底コンポーネントの名前
基底コンポーネントは、すべて`Base` 、 `App` 、`V` などの固有のプレフィックスで始める。

**😊 Good**

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

**😰 Bad**

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


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 単一インスタンスのコンポーネント名
ページごとに1回しか使われないコンポーネントは、`The`というプレフィックスで始める。
※1つしか存在しえないことを示すため


**😊 Good**

```js
components/
|- TheHeading.vue
|- TheSidebar.vue
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
```

**😰 Bad**

```js
components/
|- Heading.vue
|- MySidebar.vue
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 密結合コンポーネントの名前
親コンポーネントと密結合した子コンポーネントは、親コンポーネントの名前をプレフィックスとして含むようにする。


**😊 Good**

```js
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
```

**😰 Bad**

```js
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネント名における単語の順番
コンポーネント名は一般的な単語から始まり、説明的な修飾語で終わるようにする。

**例: 検索フォームのあるアプリケーション**

**😊 Good**

```js
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue
```
※ 100以上のコンポーネントがあるような場合のみSearchディレクトリの下にネストするのを推奨。


**😰 Bad**

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


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 自己終了形式のコンポーネント
単一ファイルコンポーネント 、文字列テンプレート、およびJSXの中では自己終了形式で書くようにする。
※DOMテンプレート内は除く


**😊 Good**

```html
<MyComponent />
```

**😰 Bad**

```html
<MyComponent></MyComponent>
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> テンプレート内でのコンポーネント名の形式
単一ファイルコンポーネントと文字列テンプレート中のカスタムタグは、常にパスカルケース(PascalCase)にする。
※ DOM テンプレートの中ではケバブケース(kebab-case)であるべき。
> HTMLは大文字と小文字を区別しないので、DOM テンプレートの中ではまだケバブケースを使う。


**😊 Good**

```html
<MyComponent />
```

**😰 Bad**

```html
<mycomponent />
<myComponent />
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> JS/JSX 内でのコンポーネント名の形式
JS/JSX内でのコンポーネント名は、パスカルケース(PascalCase)にする。

**😊 Good**

```js
Vue.component('MyComponent', {
  // ...
})
```

```js
import MyComponent from './MyComponent.vue'
```

```js
export default {
  name: 'MyComponent',
  // ...
}
```

**😰 Bad**

```js
Vue.component('myComponent', {
  // ...
})
```

```js
import myComponent from './myComponent.vue'
```

```js
export default {
  name: 'myComponent',
  // ...
}
```

```js
export default {
  name: 'my-component',
  // ...
}
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 完全な単語によるコンポーネント名
コンポーネント名には、略語よりも完全な単語を使うようにする。


**😊 Good**

```js
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
```

**😰 Bad**

```js
components/
|- SdSettings.vue
|- UProfOpts.vue
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> プロパティ名の型式
プロパティ名は、定義の時はキャメルケース(camelCase)、
HTML(テンプレート)やJSXで使う際はケバブケース(kebab-case)にする。


**😊 Good**

```js
props: {
  greetingText: String
}
```

```html
<WelcomeMessage greeting-text="hi"/>
```

**😰 Bad**

```js
props: {
  'greeting-text': String
}
```

```html
<WelcomeMessage greetingText="hi"/>
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 複数の属性をもつ要素
複数の属性をもつ要素は、1行に1要素ずつ、複数の行に渡って書くようにする。


**😊 Good**

```html
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
```

**😰 Bad**

```html
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> テンプレート内での単純な式
複雑な式は、算出プロパティかメソッドに書くようにする。
コンポーネントのテンプレートには単純な式だけを含むようにする。
※テンプレートには、何が表示されるかを簡潔に記述する。


**😊 Good**

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

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

**😰 Bad**

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

```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 引用符付きの属性値
HTMLの属性値は、JSの中で使われていない引用符(`シングルコーテーション`か`ダブルコーテーション`)でくくるようにする。


**😊 Good**

```html
<input type="text">
```

```html
<AppSidebar :style="{width:sidebarWidth+'px'}">
```

**😰 Bad**

```html
<input type=text>
```

```html
<AppSidebar :style={width:sidebarWidth+px}>
```


<br>
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> ディレクティブの短縮記法
ディレクティブの短縮記法`:` `@`は、常に使うか、まったく使わないかのどちらかにする。


**😊 Good**

```html
<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>
```
```html
<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>
```
```html
<input
  @input="onInput"
  @focus="onFocus"
>
```
```html
<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>
```

**😰 Bad**

```html
<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>
```
```html
<input
  v-on:input="onInput"
  @focus="onFocus"
>
```


## C. 推奨

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネント/インスタンス オプション順序
下記の順序を推奨｡
※一貫した順序を守ることで、プロパティが探しやすくなる。


```
 - el
 - name
 - parent
 - functional
 - delimiters
 - comments
 - components
 - directives
 - filters
 - extends
 - mixins
 - inheritAttrs
 - model
 - props/propsData
 - data
 - computed
 - watch
 - ライフサイクルイベント (呼び出される順)
 - methods
 - template/render
 - renderError
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 要素の属性の順序
下記の順序を推奨｡
※一貫した順序を守ることで、カスタム属性とディレクティブが探しやすくなる。

```
 - is
 - v-for
 - v-if
 - v-else-if
 - v-else
 - v-show
 - v-cloak
 - v-pre
 - v-once
 - id
 - ref
 - key
 - slot
 - v-model
 - その他の属性
 - v-on
 - v-html
 - v-text
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> コンポーネント/インスタンス オプションの空行
スクロールする程、長くなった場合はプロパティの間に空行を追加する。

**😊 Good**

```js
props: {
  value: {
    type: String,
    required: true
  },
  
  focused: {
    type: Boolean,
    default: false
  },
  
  label: String,
  icon: String
},
computed: {
  formattedValue: function () {
    // ...
  },
  
  inputClasses: function () {
    // ...
  }
}
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 単一ファイルコンポーネントのトップレベルの属性の順序
単一ファイルコンポーネントでは､ `<template>` ､ `<script>` ､ `<style>` の順で書くようにする。

**😊 Good**

```html
<template></template>
<sctipt></sctipt>
<style></style>
```

**😰 Bad**

```html
<template></template>
<style></style>
<sctipt></sctipt>
```

## D. 注意(危険)
### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> `key`を使わない `v-if` / `v-if-else` / `v-else`
`v-if` + `v-else`と一緒に`key`を書かないと予期せぬ副作用が生じる。

副作用の例: https://jsfiddle.net/chrisvfritz/bh8fLeds/

※`key`は必ず書くようにする。

**😊 Good**

```html
<div v-if="error" key="search-status">
  Error: {{ error }}
</div>
<div v-else key="search-results">
  {{ results }}
</div>
```

**😰 Bad**

```html
<div v-if="error">
  Error: {{ error }}
</div>
<div v-else>
  {{ results }}
</div>
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> scoped付きの要素セレクタ
要素セレクタに直接CSSを書くのはやめましょう。
※CSSを書く際は、クラスセレクタを使うようにする。（パフォーマンス向上）

**😊 Good**

```html
<style scoped>
.btn-close {
  background-color: red;
}
</style>
```

**😰 Bad**

```html
<style scoped>
button {
  background-color: red;
}
</style>
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> 暗黙的な親子間のやりとり
`$parent`と`$children`は使わないようにする。

**😊 Good**

```js
Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <input
      :value="todo.text"
      @input="$emit('input', $event.target.value)"
    >
  `
})
```
```js
Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="$emit('delete')">
        X
      </button>
    </span>
  `
})
```

**😰 Bad**

```js
Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: '<input v-model="todo.text">'
})
```

```js
Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    removeTodo () {
      var vm = this
      vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
        return todo.id !== vm.todo.id
      })
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="removeTodo">
        X
      </button>
    </span>
  `
})
```

<br>

### <img src="https://camo.qiitausercontent.com/4868d21f84d08d3b9ebab9da0da726d5db01500d/68747470733a2f2f6a702e7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="26px" height="26px" data-canonical-src="https://jp.vuejs.org/images/logo.png"> Flux 以外の状態管理
グローバル状態管理には、`this.$root`やグローバルイベントバスよりも、`Vuex`が推奨される。
※`Vuex`を使うようにする。

**😊 Good**

```js

// store/modules/todos.js

export default {
  state: {
    list: []
  },
  mutations: {
    REMOVE_TODO (state, todoId) {
      state.list = state.list.filter(todo => todo.id !== todoId)
    }
  },
  actions: {
    removeTodo ({ commit, state }, todo) {
      commit('REMOVE_TODO', todo.id)
    }
  }
}
```

```html
<!-- TodoItem.vue -->

<template>
  <span>
    {{ todo.text }}
    <button @click="removeTodo(todo)">
      X
    </button>
  </span>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: mapActions(['removeTodo'])
}
</script>
```

**😰 Bad**

```js
// main.js

new Vue({
  data: {
    todos: []
  },
  created: function () {
    this.$on('remove-todo', this.removeTodo)
  },
  methods: {
    removeTodo: function (todo) {
      var todoIdToRemove = todo.id
      this.todos = this.todos.filter(function (todo) {
        return todo.id !== todoIdToRemove
      })
    }
  }
})
```

<br>

# まとめ
 - 全てを遵守する必要は無い
  - 個人的には `A` > `B` = `D` > `C`の順で大事かなぁと思いました
 - チームでコーディングルールを採用する上での指標になる

# 参考 ( special thx )
- Vue.js 公式
https://jp.vuejs.org/v2/style-guide/
  

- Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成 (@potato4d さん)
https://qiita.com/potato4d/items/1b92df0cbf9b0b6cf8d6
  

- React.jsの地味だけど重要なkeyについて (@koba04 さん)
https://qiita.com/koba04/items/a4d23245d246c53cd49d


# さいごに
このアドベントカレンダーを通して、多くの人がVue.jsのスタイルガイドを知るきっかけになればと思います。
フライングメリークリスマス！🎄✨