v-for リストレンダリングディレクティブ

最終更新：2026-10-22

v-for は配列やオブジェクトを反復処理して要素のリストをレンダリングします。構文は item in items です。効率的な更新のために必ず key を指定してください。

📝 構文

<li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>

<!-- オブジェクトの反復 -->
<div v-for="(value, key) in object"></div>

expression	反復可能なデータ（配列/オブジェクト/数値/文字列）。第 2 引数はインデックスまたはキー名です

戻り値：ディレクティブ。戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

Three list items render: 1. HTML, 2. CSS, 3. JavaScript.

⚠️ 注意 必ず一意の key を指定してください（インデックスではなく id を使用）。インデックスを key にすると、リストの追加・削除時に状態のずれが起こります。

⚠️ 注意 v-if と同じ要素に書かないでください。外側の template で v-for を包み、内側の要素に v-if を書いてください。

💡 ヒント 配列の変更メソッド（push/splice/sort など）は自動的に検出されます。arr[0] = x のような直接のインデックス代入は更新をトリガーしません。

Q key を適当に書いてはいけないのはなぜですか？

A key は Vue がノードの同一性を認識する根拠です。インデックスを key にすると、リストの追加・削除時に古い状態が別の行に付いてしまいます。

Q 配列のインデックスを直接変更しても更新が起きないのはなぜですか？

A Vue 3 の Proxy は、リアクティブなプロキシ経由のインデックス代入を追跡できます。ref/reactive でラップした配列なら可能ですが、普通の配列では追跡されません。

Q v-for と v-if は一緒に書けますか？

A おすすめしません。v-if が先に実行され、ループ変数にアクセスできません。v-if を外側の template に置いてください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。