今回の記事は、
- これからVue.jsを始めてみたい
- Vue.jsで繰り返し処理を実装してみたい
という方に向けた記事になっています。
なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。
今回の記事は、 最近よく聞くけど、Vue.jsってなに？これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
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 }}
最後に
さて、ここまでVue.jsのv-forディレクティブを使った繰り返し処理の実装方法をご紹介してきましたがいかがでしたか？
先日ご紹介したv-ifディレクティブと並んで最も頻繁に登場するディレクティブの一つですので、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
