こんばんは。
echoes開発チームの加藤です。
唐突ですが私はFEがとても苦手でした。
この半年FEのタスクも受け持つようになり、既存のコードとドキュメントを眺めることでなんとか「こういう塊を作ればこういう動きをする」というレベルには理解ができるようになりました。
しかし、その塊がどういうもので構成されていて、それぞれがどのような働きをしているのかが理解できておらず…
これはいかんなーと思い、わかるところも含めて1から勉強しなおしてみることにしました。
ということで今回から「Vueを1から勉強してみた。」シリーズをスタートします。
更新頻度は未定ですが、書籍等で勉強してみて、こういうのよく使うよなーとか、こういう使い方もあったのかーと思ったものは簡単なものについて、アウトプットとしてブログに書き出してみようと思います。
初回の今回はいきなりめちゃくちゃ基礎的なことであれなのですが、v-forについて書いてみようと思います。
そもそもv-forって？
配列やオブジェクトなど、複数の要素を持つデータや変数をバインドするためディレクティブ（Vue独自の属性）です。
これを使うことで、例えば商品一覧などテーブルの形で表示したい配列やオブジェクトなど、中身の要素を1つ1つ取り出してコード書かずに繰り返し処理で描画できるわけですね。
また、配列やオブジェクト内の動的な変化に対応させるためにも必要になるかと思います。
配列データからテーブルを作ってみよう
オブジェクトを持つ配列を用意し、テーブルの形で表示させてみようと思います。
早速ですが作ってみたコンポーネントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<template> <div class="table"> <table border="1"> <tr> <th>No.</th> <th>名前</th> <th>年齢</th> <th>ジョブ</th> <th>レベル</th> </tr> <tr v-for="(member, index) in members" :key="index"> <td>{{ index+1 }}</td> <td>{{ member.name }}</td> <td>{{ member.age }}</td> <td>{{ member.job }}</td> <td>{{ member.level }}</td> </tr> </table> </div> </template> <script> export default { name: "TableSample1.vue", data() { return { members: [ { name: '内藤孝', age: '29', job: 'ナイト', level: '90' }, { name: '四之宮信夫', age: '21', job: '忍者', level: '90' }, { name: '玄野一真', age: '34', job: '黒魔導士', level: '87' }, { name: '剣崎梓紗', age: '30', job: '賢者', level: '81' } ] } } } </script> |
これを表示してみるとこんな感じになります。
今回v-forを使っているのはこの部分。
|
1 2 3 4 5 6 7 |
<tr v-for="(member, index) in members" :key="index"> <td>{{ index+1 }}</td> <td>{{ member.name }}</td> <td>{{ member.age }}</td> <td>{{ member.job }}</td> <td>{{ member.level }}</td> </tr> |
今回の場合はmembersが配列で、memberが繰り返しの中で取得された要素、indexがその要素のindexですね。
配列を扱うv-forの場合は、
|
1 |
v-for="(取り出された要素, 取り出された要素のindex) in 繰り返し処理したい配列" |
となるわけですね。
オブジェクトからテーブルを作ってみよう
今度はオブジェクトを用意し、テーブルの形で表示させてみようと思います。
配列の方のコードの<template>を以下のように少し変更してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div class="table"> <table border="1"> <tr> <th>No.</th> <th>名前</th> <th>年齢</th> <th>ジョブ</th> <th>レベル</th> </tr> <tr v-for="(member, index) in members" :key="index"> <td>{{ index+1 }}</td> <!--取り出したオブジェクトの中身をv-forを使って繰り返し処理に変更--> <td v-for="(value, key, object_index) in member" :key="index"> {{ value }} </td> </tr> </table> </div> </template> |
見た目は変わらないので割愛しますが、配列の中のオブジェクトをv-forで回すようにした形です。
オブジェクトの場合は、オブジェクトの中の要素を順番に取り出して処理をしていきます。
引数の役割などはそれぞれ以下のようになります。
|
1 |
v-for="(取り出された値, 取り出された値のキー, 取り出された値のindex) in 繰り返し処理したいオブジェクト" |
これは今回の私の初めて知りましたポイントなのですが、オブジェクトの場合はそのオブジェクトの要素が持つindexも取り出せるんですね
まとめ
今回はv-forについてまとめてみました。
今更いちいち要素を手作業で取り出して、1つ1つテンプレートに書く…なんてことをしている人はいないとは思いますが、v-forを使うことでスッキリ繰り返し処理をかけることが改めて再確認できました。
今更こんなこと書いて…とは自分でも思いつつ、普段v-forでオブジェクトを繰り返し処理させるなんてことがなく、初めての発見もあって改めて1から勉強してみるのも悪くないのではないかと思い始めています。
今後もこんな感じで、簡単なことから躓いたことまで色々試してまとめてみようと思います。
追記（2023/08/24）
「Vueを1から勉強してみた。」の第2弾公開しました！
今回は条件付きレンダリングについてまとめてみましたので、ご興味のある方はぜひご覧ください！
参考
・https://ja.vuejs.org/guide/essentials/list.html#v-for
・https://handson.vuejs-jp.org/v-for.html
・Vue.jsのツボとコツがゼッタイにわかる本［第2版］p.60~p.63（https://www.shuwasystem.co.jp/book/9784798066608.html）
