Vue 3でオブジェクトと整数に`v-for`を使うメモ

今日は、v-forをオブジェクトと整数に対して使う書き方を触ったので、そのメモです。
画像解析結果や写真データをブラウザに一覧表示するとき、データの数に応じて画面を増やせるようになりたいと思っています。
まだ途中段階なので、勘違いなどあれば教えていただけるとうれしいです。

今日やったこと

v-forでオブジェクトの項目を表示し、指定回数だけ要素を並べる書き方を確認しました。

まず、オブジェクトを繰り返す場合です。v-forでは、値・キー・インデックスを順番に受け取れます。詳しい説明はVue.js公式ドキュメントのリストレンダリングも見返したいです。 vueframework

<script setup>
import { ref } from 'vue'

// ユーザー情報をリアクティブな値として持つ
const user = ref({
  name: 'Yuki',
  age: 20,
  gender: 'female',
})
</script>

<template>
  <!--
    value: プロパティの値
    key: プロパティ名
    index: 繰り返し位置
  -->
  <p v-for="(value, key, index) in user" :key="key">
    {{ key }}: {{ value }} ({{ index }})
  </p>
</template>

この例では、name: Yuki (0)、age: 20 (1)のように、オブジェクトのプロパティごとに<p>要素が表示されます。refで作ったuserは、テンプレート内では.valueを書かずに参照できるようです。

オブジェクトの詳細をそのまま並べられるので、画像解析結果の属性、撮影情報、設定内容などを簡易的に確認する画面で使えそうです。

value、key、indexの順番は、最初に少し混乱しました。

「表示は`key: value`なのに、受け取る順番は`value, key`なんだね。書くたびに確認したくなりそう。」

今の理解では、v-forの引数は(value, key, index)の順番で固定し、画面にどう見せるかは{{ key }}: {{ value }}の側で決める、と考えると整理しやすそうです。

次に、整数を指定して繰り返す書き方も確認しました。

<script setup>
// この例では、表示回数をテンプレート側で直接指定する
</script>

<template>
  <!-- n には 1 から 10 まで順に入る -->
  <p v-for="n in 10" :key="n">
    {{ n }}
  </p>
</template>

v-for="n in 10"と書くと、1から10までの10個の要素が表示されます。ここでのnは0ではなく、1から始まることに注意したいです。 vueframework

また、inはofとも書けます。

<template>
  <!-- in の代わりに of も使える -->
  <p v-for="n of 10" :key="n">
    {{ n }}
  </p>
</template>

自分はJavaScriptのfor...ofを思い出せるので、ofのほうが読みやすいと感じる場面もありそうです。ただし、プロジェクト内の既存コードではどちらの表記が多いかも見ていきたいです。 vueframework

つまずいたところ

オブジェクトの引数の順番と、整数の開始値を意識する必要がありました。

値・キー・インデックスの順番

最初は(key, value)と書きたくなりましたが、オブジェクトのv-forでは先頭が値、2番目がキー、3番目がインデックスです。

「項目名を先に表示したいと、引数も先に受け取りたくなる。表示順と受け取る順番は別物なんだね。」

値だけが必要ならv-for="value in user"でもよく、キーも表示したいときに(value, key)を使うようです。インデックスまで必要な画面は限られそうなので、まずは必要な分だけ受け取る形で試したいです。 vueframework

整数のnは1始まり

配列のインデックスは0始まりなので、n in 10も0から9だと思いかけました。しかし整数を渡した場合、nには1から指定数までの値が入ります。 vueframework

「ページ番号みたいに見せるなら1始まりは便利そう。でも配列の番号と混ぜるときは、ずれを確認しないとだね。」

ページ番号や順位表示にはそのまま使いやすそうです。一方で、配列の要素へアクセスするための番号として使うなら、n - 1が必要になるケースがあるかを次に確かめたいです。

今の理解（メモ）

まだふわっとしていますが、v-forはデータの形や数に合わせて画面の要素を繰り返し作る仕組みだと捉えています。

• オブジェクトでは、各プロパティについて要素を1つずつ表示できる
• valueは値、keyはプロパティ名、indexは繰り返し位置になる
• :keyには、各要素を区別できる文字列や数値を指定する
• 整数を指定すると、指定回数だけテンプレートを表示できる
• inとofはどちらも使える vueframework

v-forは、持っているアイテム数に合わせて一覧画面へ行を並べる仕組みに少し近いと感じました。たとえば画像解析結果の配列を受け取れば、結果ごとにカードを作る画面へつなげられそうです。

また、Nuxtでページを作る場合も、ページ内のVueコンポーネントでこの書き方を使うことになりそうです。今後propsを学ぶと、親コンポーネントから受け取ったデータを、子コンポーネント側でv-for表示する場面もありそうだと思っています。

次にやりたいこと

実際の一覧表示に近い形で、v-forの動きを確かめたいです。

• 配列の画像解析結果を用意し、カード形式でv-for表示してみる。データ件数とカード数が連動する感覚を確認したい
• ResultCard.vueのような子コンポーネントを作り、propsで1件分のデータを渡してみる。コンポーネント分割と一覧表示をつなげたい
• オブジェクトの表示順が必要な画面では、配列でデータを持つべきかを調べる
• v-forとv-ifを同じ要素で使う場合の注意点を確認する
• v-for="n in 10"でページ番号風の表示を作り、クリックイベントと組み合わせられるか試す

今日の整理

今回のv-forの書き方を、後から見返せるように整理します。

書き方	役割	利用イメージ	次に確認したいこと
v-for="value in user"	オブジェクトの値を繰り返し表示する	設定値だけの一覧	キーを同時に表示する方法
v-for="(value, key, index) in user"	値、キー、位置を取り出す	画像やユーザーの詳細情報	順序が必要な場合のデータ設計
v-for="n in 10"	1から10まで繰り返し表示する	ページ番号、評価の目盛り	配列インデックスと併用する場合
v-for="n of 10"	inと同じく繰り返し表示する	チームの記法に合わせた表示	inとofの使い分け方
:key="key"	繰り返し要素を識別する	項目名が重複しない詳細一覧	配列のカード表示で適切なキー

おわりに

今回は、オブジェクトと整数に対するv-forを確認しました。まだなんとなく動く段階ですが、データの内容や数に応じて画面を増やせる流れが少し見えてきました。

画像解析結果を見やすく扱う画面では、一覧表示やカード表示が必要になりそうです。次は配列データとpropsを組み合わせて、情報を小さなコンポーネントへ渡しながら表示する形を試してみたいです。

学習中の内容なので、勘違いや理解不足もあると思います。もし気になる点があれば教えてもらえるとうれしいです。

　注意事項
　本ブログに掲載している内容は、私個人の見解であり、
　所属する組織の立場や戦略、意見を代表するものではありません。
　あくまでエンジニアとしての経験や考えを発信していますのでご了承ください。