<commit_before>title: Displaying a List
type: guide
order: 5
---

ViewModel上のオブジェクトの配列に基づき、テンプレート要素を繰り返すために、`v-repeat` directive を利用することができます。
`v-repeat` directive は、配列内の各オブジェクトを `$data` オブジェクトとして利用し、子の Vue インスタンスを作成します。それらの子インスタンスは親の全データを継承しているので、繰り返された要素内では、繰り返されたインスタンスと親インスタンス双方のプロパティにアクセスできます。加えて、レンダリングされたインスタンスの配列インデックスに対応する `$index` プロパティにもアクセスすることができます。

**例:**

``` html
<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
    {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
</ul>
```

``` js
var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
```

**結果:**

<ul id="demo"><li v-repeat="items" class="item-{&#123;$index&#125;}">{&#123;$index&#125;} - {&#123;parentMsg&#125;} {&#123;childMsg&#125;}</li></ul>
<script>
var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
</script>

## プリミティブ値の配列

プリミティブ値を含む配列では、単純に `$value` として値にアクセスできます。

``` html
<ul id="tags">
  <li v-repeat="tags">
    {{$value}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#tags',
  data: {
    tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
})
```

**結果:**
<ul id="tags" class="demo"><li v-repeat="tags">{&#123;$value&#125;}</li></ul>
<script>
new Vue({
  el: '#tags',
  data: {
    tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
})
</script>

## 識別子の利用

親スコープへの不明確なフォールバックよりは、もっと明確に変数を指定したい場合が多々あるでしょう。それを行うには、繰り返されるアイテムの識別子として、 `v-repeat` に引数を指定して下さい。

``` html
<ul id="users">
  <!-- think of this as "for each user in users" -->
  <li v-repeat="user: users">
    {{user.name}} - {{user.email}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#users',
  data: {
    users: [
      { name: 'Foo Bar', email: '<EMAIL>' },
      { name: '<NAME>', email: '<EMAIL>' }
    ]
  }
})
```

**結果:**
<ul id="users" class="demo"><li v-repeat="user: users">{&#123;user.name&#125;} - {&#123;user.email&#125;}</li></ul>
<script>
new Vue({
  el: '#users',
  data: {
    users: [
      { name: 'Foo Bar', email: '<EMAIL>' },
      { name: '<NAME>', email: '<EMAIL>' }
    ]
  }
})
</script>

## Mutation Methods

内部的に、Vue.js は監視対象の配列のミューテーションメソッド (`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()` 及び `reverse()`) を横取りし、ビューの更新を引き起こします。

``` js
// the DOM will be updated accordingly
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()
```

## Augmented Methods

Vue.js は配列の監視を、 `$set()` と `$remove()` の２つの便利なメソッドで補います。

データバインドされた配列に対して、直接インデックスを指定して要素を設定するのは避けて下さい。これは、 Vue.js によって変更を感知できなくなってしまうためです。代わりに、augmented method の `$set()` を利用して下さい。

``` js
// `demo.items[0] = ...` と同様だが、ビューの更新が実行される
demo.items.$set(0, { childMsg: 'Changed!'})
```

`$remove()` は単なる `splice()` へのシンタックスシュガーです。引数で指定されたインデックスの要素を削除します。引数が数値でない場合、 `$remove()` は配列内をその値で検索し、最初に見つかった要素を削除します。

``` js
// インデックスが0のアイテムを削除
demo.items.$remove(0)
```

## 配列の置き換え

Non-mutating method（例： `filter()`, `concat()` または `slice()` ）を使う場合、返却される配列は異なるインスタンスになります。このケースでは、古い配列を新しいものと置き換えることが出来ます。

``` js
demo.items = demo.items.filter(function (item) {
  return item.childMsg.match(/Hello/)
})
```

この操作により、既存の DOM を吹き飛ばし、すべてが再構築されてしまうのではないかと思うかもしれませんが、その心配はありません。Vue.js は、既に配列に関連付けられた Vue インスタンスがあれば認識し、それらのインスタンスを可能な限り再利用します。

## `track-by` の利用

いくつかのケースで、完全に新しいオブジェクトで配列を置き換える必要があるかもしれません（例えば、API コールから返されたオブジェクトなど）。もし、データオブジェクトがユニークな ID プロパティを持っているのであれば、同一 ID を持つデータに基づく既存のインスタンスを再利用するための Vue.js へのヒントとして、`track-by` 属性を利用することができます。

例として、もし data がこのようであるならば：

``` js
{
  items: [
    { _uid: 88f869d, ... },
    { _uid: 7496c10, ... }
  ]
}
```

このようにヒントを与えることができます：

``` html
<div v-repeat="items" track-by="_uid">
  <!-- content -->
</div>
```

## オブジェクトをイテレーションする

オブジェクトのプロパティに対して、 `v-repeat` を使ってイテレーションすることができます。それぞれの繰り返されたインスタンスは `$key` という特別なプロパティを持ちます。また、プリミティブ値に対しては、配列と同様に、`$value` を取得することができます。

``` html
<ul id="repeat-object">
  <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
  <li>===</li>
  <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>
```

``` js
new Vue({
  el: '#repeat-object',
  data: {
    primitiveValues: {<commit_msg>update by review in Displaying a List section<commit_after>title: Displaying a List
type: guide
order: 5
---

ViewModel 上のオブジェクトの配列に基づき、テンプレート要素を繰り返すために、`v-repeat` directive を利用することができます。
`v-repeat` directive は、配列内の各オブジェクトを `$data` オブジェクトとして利用し、子の Vue インスタンスを作成します。それらの子インスタンスは親の全データを継承しているので、繰り返された要素内では、繰り返されたインスタンスと親インスタンス双方のプロパティにアクセスできます。加えて、レンダリングされたインスタンスの配列インデックスに対応する `$index` プロパティにもアクセスすることができます。

**例:**

``` html
<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
    {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
</ul>
```

``` js
var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
```

**結果:**

<ul id="demo"><li v-repeat="items" class="item-{&#123;$index&#125;}">{&#123;$index&#125;} - {&#123;parentMsg&#125;} {&#123;childMsg&#125;}</li></ul>
<script>
var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
</script>

## プリミティブ値の配列

プリミティブ値を含む配列では、単純に `$value` として値にアクセスできます。

``` html
<ul id="tags">
  <li v-repeat="tags">
    {{$value}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#tags',
  data: {
    tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
})
```

**結果:**
<ul id="tags" class="demo"><li v-repeat="tags">{&#123;$value&#125;}</li></ul>
<script>
new Vue({
  el: '#tags',
  data: {
    tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
})
</script>

## 識別子の利用

親スコープへの不明確なフォールバックよりは、もっと明確に変数を指定したい場合が多々あるでしょう。それを行うには、繰り返されるアイテムの識別子として、 `v-repeat` に引数を指定して下さい。

``` html
<ul id="users">
  <!--これを "for each user in users" とみなす -->
  <li v-repeat="user: users">
    {{user.name}} - {{user.email}}
  </li>
</ul>
```

``` js
new Vue({
  el: '#users',
  data: {
    users: [
      { name: 'Foo Bar', email: '<EMAIL>' },
      { name: '<NAME>', email: '<EMAIL>' }
    ]
  }
})
```

**結果:**
<ul id="users" class="demo"><li v-repeat="user: users">{&#123;user.name&#125;} - {&#123;user.email&#125;}</li></ul>
<script>
new Vue({
  el: '#users',
  data: {
    users: [
      { name: 'Foo Bar', email: '<EMAIL>' },
      { name: '<NAME>', email: '<EMAIL>' }
    ]
  }
})
</script>

## Mutation Methods

内部的に、Vue.js は監視対象の配列のミューテーションメソッド (`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()` 及び `reverse()`) を横取りし、ビューの更新を引き起こします。

``` js
// この結果、DOM が更新される
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()
```

## Augmented Methods

Vue.js は配列の監視を、 `$set()` と `$remove()` の２つの便利なメソッドで補います。

データバインドされた配列に対して、直接インデックスを指定して要素を設定するのは避けて下さい。これは、 Vue.js によって変更を感知できなくなってしまうためです。代わりに、augmented method の `$set()` を利用して下さい。

``` js
// `demo.items[0] = ...` と同様だが、ビューの更新が実行される
demo.items.$set(0, { childMsg: 'Changed!'})
```

`$remove()` は単なる `splice()` へのシンタックスシュガーです。引数で指定されたインデックスの要素を削除します。引数が数値でない場合、 `$remove()` は配列内をその値で検索し、最初に見つかった要素を削除します。

``` js
// インデックスが0のアイテムを削除
demo.items.$remove(0)
```

## 配列の置き換え

Non-mutating method（例： `filter()`, `concat()` または `slice()` ）を使う場合、返却される配列は異なるインスタンスになります。このケースでは、古い配列を新しいものと置き換えることが出来ます。

``` js
demo.items = demo.items.filter(function (item) {
  return item.childMsg.match(/Hello/)
})
```

この操作により、既存の DOM を消し飛ばし、すべてが再構築されてしまうのではないかと思うかもしれませんが、その心配はありません。Vue.js は、既に配列に関連付けられた Vue インスタンスがあれば認識し、それらのインスタンスを可能な限り再利用します。

## `track-by` の利用

いくつかのケースで、完全に新しいオブジェクトで配列を置き換える必要があるかもしれません（例えば、API コールから返されたオブジェクトなど）。もし、データオブジェクトがユニークな ID プロパティを持っているのであれば、同一 ID を持つデータに基づく既存のインスタンスを再利用するための Vue.js へのヒントとして、`track-by` 属性を利用することができます。

例として、もし data がこのようであるならば：

``` js
{
  items: [
    { _uid: 88f869d, ... },
    { _uid: 7496c10, ... }
  ]
}
```

このようにヒントを与えることができます：

``` html
<div v-repeat="items" track-by="_uid">
  <!-- 内容 -->
</div>
```

## オブジェクトをイテレーションする

オブジェクトのプロパティに対して、 `v-repeat` を使ってイテレーションすることができます。それぞれの繰り返されたインスタンスは `$key` という特別なプロパティを持ちます。また、プリミティブ値に対しては、配列と同様に、`$value` を取得することができます。

``` html
<ul id="repeat-object">
  <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
  <li>===</li>
  <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>
```

``` js
new Vue({
  el: '#repeat-object',
  data: {
    primitiveValues: {
{'fraction_non_alphanumeric': 0.22077606130641042, 'fraction_numerical': 0.014353484977496654, 'mean_word_length': 4.608458390177353, 'pattern_counts': {'":': 0, '<': 99, '<?xml version=': 0, '>': 99, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3584260', 'n_tokens_mistral': 5094, 'n_tokens_neox': 4665, 'n_words': 596}