【Vue.js】v-forを使って繰り返し処理を実装してみましょう

今回の記事は、

  • これからVue.jsを始めてみたい
  • Vue.jsで繰り返し処理を実装してみたい

という方に向けた記事になっています。

なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

Vue.jsロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

Vue.jsで繰り返し処理を実装する方法

Vue.jsで条件分岐を実装するには、v-forディレクティブを使用します。

基本的な使い方としては、以下の通り、繰り返し表示したいタグに対してv-forディレクティブを設定します。
(※下記の例では、liタグを繰り返し表示するよう実装しています。)

基本的な使い方

<ul>
  <li v-for="変数 in 配列/オブジェクト">
  </li>
</ul>

それでは実際に簡単な事例を見ながらその挙動を確認していきましょう。

実装コード

<div id="app1">
  <ul>
    <li v-for="language in languages" :key="language.id">
      {{ language.name }}
    </li>
  </ul>
</div>

<script>
let app1 = new Vue({
  el: "#app1",
  data: {
    language: [
      { id: 1, name: "Ruby" },
      { id: 2, name: "Java" },
      { id: 3, name: "PHP" },
      { id: 4, name: "Javascript" },
      { id: 5, name: "HTML" }
    ]
  }
})
</script>

動作確認用

  • {{ language.name }}

上記の例では、dataプロパティにlanguagesという配列を設定し、v-forディレクティブを使用してその中身を繰り返し表示しています。

なお、v-forディレクティブ以外にkey属性も登場していますが、これは繰り返し表示されている各ノードの識別情報をVue.js側が追跡するために必要な属性になります。

このkey属性は必ずしも必要というわけでは無いのですが、配列への要素の追加/削除や並び替えがあった際にVue.jsが識別しやすくするための機能ですので、基本的には設定するようにしましょう
(※Vue.jsの公式サイトでもkey属性の付与は推奨されています。

また、v-forの後に変数を追加することで、配列のインデックスを取得することも可能です。

実装コード

<div id="app2">
  <ul>
    <li v-for="(language, index) in languages" :key="language.id">
      {{ index }}: {{ language.name }}
    </li>
  </ul>
</div>

<script>
let app2 = new Vue({
  el: "#app2",
  data: {
    language: [
      { id: 1, name: "Ruby" },
      { id: 2, name: "Java" },
      { id: 3, name: "PHP" },
      { id: 4, name: "Javascript" },
      { id: 5, name: "HTML" }
    ]
  }
})
</script>

動作確認用

  • {{ index }}: {{ language.name }}

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでVue.jsのv-forディレクティブを使った繰り返し処理の実装方法をご紹介してきましたがいかがでしたか?

先日ご紹介したv-ifディレクティブと並んで最も頻繁に登場するディレクティブの一つですので、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。