key リストの識別キー

最終更新：2026-10-22

key は v-for の識別子です。Vue がノードを正確に再利用 / 再構築できるようにし、リストの追加・削除時の状態の正しさを保証します。

📝 構文

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

props	一意で安定した値（データの id を推奨。インデックスは使わない）

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

出力：

Reversing reorders rows without dragging state into the wrong row.

⚠️ 注意 インデックスを key にするのは典型的なバグの元です。リストの挿入 / 削除後に Vue がノードを誤って再利用し、入力内容やアニメーションがずれます。

ℹ️ 補足 key は強制的な再構築にも使われます。コンポーネントに変わる値を与えると、再作成がトリガーされます。

💡 ヒント 安定した id を最優先し、id がなければビジネス上の一意なフィールド、最後の手段としてインデックスを使います。

Q key を書かないとどうなりますか？

A Vue はその場での再利用方針にフォールバックし、警告を出します。単純なリストでは問題なさそうに見えても、追加・削除や並べ替えでバグが出ます。

Q key はグローバルに一意である必要がありますか？

A 同じリスト内で一意であれば十分です。

Q コンポーネントを強制的に再描画できますか？

A できます。変わる値をコンポーネントにバインドすると、変化のたびに破棄されて再作成されます。

Web-Tutorial 技術チーム

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