投稿日: 投稿者: phg72974

Vue.jsでのリストレンダリングについて

Vue.jsでのリストレンダリングについて

リストレンダリングについて

リストレンダリングとは、配列（リスト）、その繰り返し処理に基づいてレンダリングを行うものです。

レンダリングとは「あるルールに従って記述されたデーターを、人が読める形に整形してブラウザに出力すること」です。


<ul>
<li>ピアノ</li>
<li>ギター</li>
<li>オルガン</li>
</ul>

この状態はまだ、HTMLというルールに沿って記述されたテキストで、HTMLを知らない人からすると意味がわからないと思います。

これをブラウザでレンダリングすると、だれが見てもピアノ、ギター、オルガンのリストとして見えます。

繰り返し処理はプログラミングの基本的な制御構文の１つで、指定した条件を満たす間は、特定の処理を繰り返す制御です。

リストレンダリングを実現する　レンダリング「v-for」

Vue.jsではv-forを使ってリストレンダリングを行うことができます。v-forは、Vueインスタンス内に用意された配列を自動的にレンダリングします。

v-forの書き方 <div v-for=”(変数１,変数２) in 配列の変数”> </div>
inの前に半角を空けないとエラーになりますので注意


<body>
<div id=”app”>
<ul>
<li v-for=”(item, i ) in fruits” :key=”i”>{{item}}</li>
</ul>
</div>
</body>

配列fruitsの中身がある間は繰り返しを実行することを意味します。変数itemに配列要素が入り、変数iに配列のindex（最初の要素を0として1ずつ増えていく連番）が入ります。


また、:key=”i”という形でindexをkey属性にしています。このkey属性をするのは、レンダリングしたHTML要素の１つずつが、配列のどの配列要素と紐づいているのかをVue.jsが識別できるようにするためです。
keyを指定していない場合、Vue.jsはレンダリングした要素とデータの紐づきを知ることができません。そのため、例えば画面側から一部の行を削除するような場合に、データとDOMにずれが生じることで意図しない動作になる可能性があります。

keyは省略可能ですが、Vue.js公式サイトでも推奨されているので、特別な理由がない限りkeyを指定することをおすすめします。

Javascript new Vue({
el:’#app’,
data(){
return{
fruits:[‘りんご’,’ぶどう’,’いちご’,’みかん’]
}
}
})
  • {{item}}
このような実行結果になります。HTMLに書いたliタグは1つだけでしたが、繰り返し処理により、配列要素の文字列がすべてレンダリングされています。

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT） その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。