こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第2回：繰り返し］

JavaScript

posted : 2018.10.07

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。こまのんVue2回目です。

※こま（けぇこたぁいいんだよ）のん（びり）Vue（.js超入門）です。

配列を繰り返し描画する

先ずはコードを。

See the Pen Vue.js for super beginner, part2 by mycreatesite (@mycreatesite) on CodePen.

Vue.jsではもちろん配列やオブジェクトが扱えます。

その為、例えば配列の要素をそれぞれ書き出すことも可能。

それを実現するのはHTML側で記述してある↓の部分です。

<li v-for="item in foods">{{item}}</li>

v-for：vはVueのvとでも思ったら良いです。forはプログラミング言語でおなじみの繰り返し表現。
item in foods：「foods」という配列の中のそれぞれの値（油そば・ラーメン・ステーキ）を「item」という変数に見立てるよということ。
{{item}}：その上で、item（油そば・ラーメン・ステーキ）をli要素の中に一個ずつ出力するよということ。

ちなみにitemという変数は何でもいいです。配列がfoods（複数形）だからfood（単数形）の名前にしてもいいし、何ならunkoでもいいです。

<li v-for="unko in foods">{{unko}}</li>

はい汚い。

配列のインデックス番号も取得可能

unko、じゃなくてitem部分を以下のようにすると配列のインデックス番号も取得して描画できるようになります。

See the Pen Vue.js for super beginner, part2-2 by mycreatesite (@mycreatesite) on CodePen.

<li v-for="(item,index) in foods">{{index+1}}位：{{item}}</li>

インデックス番号は0から始まるので、この例ではindexに+1して順位としています。

知っておくといいっぽいこと

配列やオブジェクトが絡む処理をVueで実現する場合、注意点がある模様。

特に描画後のリストを操作する場合（追加・削除する場合）などはそれぞれのアイテムにユニークな値を振った方が良いみたい。

See the Pen Vue.js for super beginner, part2-3 by mycreatesite (@mycreatesite) on CodePen.

今回の例ではリストをオブジェクトにして、idの値をHTML側で個々のリスト要素のkey属性にバインド（紐づけ）しています。

<li v-for="(item,index) in foods" v-bind:key="item.id">{{index+1}}位：{{item.food}}</li>

v-bindはまあ、「key」っていう属性にitem.idの値（＝foods配列内のアイテム各々のid値）を紐づけるよ！ってな感じの意味。

次回以降にサンプルで出すのでここでは割愛。というか良く出てくるのでコードみるうちに何となくわかってくると思います（雑）。

ちなみにアイテムをオブジェクトにしたので{{item}}が{{item.food}}に変えないといけません。

{{item}}だと、

1位：{ “id”: 1, “food”: “麺珍亭の油そば” }

のようにオブジェクト全てがモロ出しになってしまいます。

なぜそんなことをする必要があるのか

こまけぇ事は省きますが主に描画効率化の為のようです。

それぞれのアイテムにユニークな値を割り振ることで、リストを操作した後の無駄な再描画を避ける為とのこと。

まあそこらへんはふーんてな感じで、リストの描画時にはユニーク値を紐づける習慣を作った方が良いということでしょう。

ユニークな値ならインデックス番号で良いんでないの？

ダメです。リストを操作する場合のインデックス番号（今回の例なら「index」部分）はいつもユニークとは限りません。

例えば、あるリストアイテムを一つ削除した場合、リストアイテム数が減るのでインデックス番号は再度割り振られます。

ちなみにkey属性はHTML出力されないです。Vueが内部で独自に管理するものなんですかね。

第2回感想

HTMLに1行分li要素を書くだけで、繰り返し描画してくれるのはなんだか自動化っぽくてカッコイイ。

でも楽しいかと言われると別に…って感じ。

それよりも今はただ麺珍亭の油そばが食べたい。