Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する

Vue.js の v-for を使って、動的に今年〜100年前のセレクトボックスを作ってみましょう。

## 完成イメージ

まずは、完成イメージを見てみましょう。
セレクトボックスを確認すると、下記が確認できます。

- **今年〜100年前が入っている**
- **初期値が設定されている**（ `selected` されている）

<p class="codepen" data-height="153" data-theme-id="0" data-default-tab="result" data-user="maeco" data-slug-hash="xxKvLEz" style="height: 153px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する">
  <span>See the Pen <a href="https://codepen.io/maeco/pen/xxKvLEz">
  Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する</a> by maeco (<a href="https://codepen.io/maeco">@maeco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 実際に作ってみよう

それでは、実際に作ってみましょう。
いきなり完成形を作るのではなく、わかるところから少しづつ作っていきます。

### [STEP 1] ベタ書きでセレクトボックスを作る

まずは、`v-for` を使わないセレクトボックスを作ります。ポイントは２点。

- **`select` タグに `v-model`**
- **`data` で初期値を設定**

<p class="codepen" data-height="258" data-theme-id="0" data-default-tab="html,result" data-user="maeco" data-slug-hash="NWWxEKP" style="height: 258px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsのv-forで今年〜100年前のセレクトボックス・・・1">
  <span>See the Pen <a href="https://codepen.io/maeco/pen/NWWxEKP">
  Vue.jsのv-forで今年〜100年前のセレクトボックス・・・1</a> by maeco (<a href="https://codepen.io/maeco">@maeco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
※ 100個も `option` を書くのは面倒なので５個にしています

これは、公式ドキュメントの[フォーム入力バインディング](https://jp.vuejs.org/v2/guide/forms.html#%E9%81%B8%E6%8A%9E)に書かれているコードを少し変更しただけです。

`select` に、バインディングするプロパティ名（ `data` の `selected` ）を指定し、プロパティ値に初めに選択したい値を設定しています。

### [STEP 2] `v-for` で書き直す

先ほどのを v-for を使って書き直したのがこれ。ポイントは２点。

- **`data` に配列 `list` を作る**
- **`:key` を忘れない**

<p class="codepen" data-height="216" data-theme-id="0" data-default-tab="html,result" data-user="maeco" data-slug-hash="JjjGeEZ" style="height: 216px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsのv-forで今年〜100年前のセレクトボックス・・・2">
  <span>See the Pen <a href="https://codepen.io/maeco/pen/JjjGeEZ">
  Vue.jsのv-forで今年〜100年前のセレクトボックス・・・2</a> by maeco (<a href="https://codepen.io/maeco">@maeco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

`data` に `list` プロパティを用意して、配列で `option` に設定する値を入れています。
それを `v-for` で回すのですが、[`:key` 属性を忘れずにつけましょう。](https://jp.vuejs.org/v2/style-guide/#%E3%82%AD%E3%83%BC%E4%BB%98%E3%81%8D-v-for-%E5%BF%85%E9%A0%88)

### [STEP 3] `list` を動的に作り変える

今度は、基準の年を設定して、それを利用して `list` プロパティを作っていきます。ポイントは３つ。

- **`list` を空の配列にする**
- **基準の年を設定**
- **`for` で指定回数繰り返す**

<p class="codepen" data-height="387" data-theme-id="0" data-default-tab="js,result" data-user="maeco" data-slug-hash="eYYJQyy" style="height: 387px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsのv-forで今年〜100年前のセレクトボックス・・・3">
  <span>See the Pen <a href="https://codepen.io/maeco/pen/eYYJQyy">
  Vue.jsのv-forで今年〜100年前のセレクトボックス・・・3</a> by maeco (<a href="https://codepen.io/maeco">@maeco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

**・`list` を空の配列にする**
後からデータを入れたいので、`list` プロパティを空の配列 `[]` にしましょう。
そして、`created` 関数を作成します。この中に色々と処理を書いていきます。

**・基準の年を設定**
とりあえず、基準の年を変数（定数）で設定します。

```javascript
const year = 2015
```

**・`for` で指定回数繰り返す**
その年を基準に `for` で **5回**、 `list` 配列に `push` します。

```javascript
for (let i = 0; i < 5; i++) {
  this.list.push(year + i)
}
```

`push` は、配列の末尾に値を追加するメソッドです。
`for` を回す度に次の様に変化していきます。

```javascript
list: [2015]                         // 1回目 2015 + 0
list: [2015, 2016]                   // 2回目 2015 + 1
list: [2015, 2016, 2017]             // 3回目 2015 + 2
list: [2015, 2016, 2017, 2018]       // 4回目 2015 + 3
list: [2015, 2016, 2017, 2018, 2019] // 5回目 2015 + 4
```

### [STEP 4] 今年から〜の配列に変更する

さて、では一気に仕上げを行う。ポイントは3つ。

- **基準の年を今年にする**
- **`push` ではなく `unshift` を使う**
- **初期値を良い感じにする**

<p class="codepen" data-height="458" data-theme-id="0" data-default-tab="js,result" data-user="maeco" data-slug-hash="xxKvLEz" style="height: 458px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する">
  <span>See the Pen <a href="https://codepen.io/maeco/pen/xxKvLEz">
  Vue.jsのv-forで今年〜100年前のセレクトボックスを作り、初期値（selected）を良い感じに設定する</a> by maeco (<a href="https://codepen.io/maeco">@maeco</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

**・基準の年を今年にする**
STEP3 では、基準の年を直接指定していましたが、現実的ではありません。
Javascript の `Date` オブジェクトを使い、今年を取得します。
次のどちらの書き方でも大丈夫です。

```javascript
// 2行で書くと
const today = new Date()   // 今日を取得
year = today.getFullYear() // 今年を取得

// 1行で書くと
const year = new Date().getFullYear()
```

**・`push` ではなく `unshift` を使う**
STEP3では、`push` で配列の末尾に**プラス**した値を追加していきました。
今度は、**マイナス**した値を先頭に追加していきます。

`unshift` は、配列の先頭に値を追加するメソッドです。
`for` を回す度に次の様に変化していきます。

```javascript
list: [2019]                         // 1回目 2019 - 0
list: [2018, 2019]                   // 2回目 2019 - 1
list: [2017, 2018, 2019]             // 3回目 2019 - 2
list: [2016, 2017, 2018, 2019]       // 4回目 2019 - 3
list: [2015, 2016, 2017, 2018, 2019] // 5回目 2019 - 4
```

そして `this.num` の回数（今回は100回）だけループを繰り返しています。
変更の可能性も考えられるので、定数として別で管理した方が良さそうです。

**・初期値を良い感じにする**
初期値もベタ書きでは柔軟性がありません。
リストの３/５くらいを自動で選択するようにします。

```javascript
// 分数も良いけど・・・
this.selected = this.list[this.list.length * 3 / 5]

// 私はこちらの方がシンプルで好き
this.selected = this.list[this.list.length * 0.6]
```

これで完成です。