初心者が始めるVue.jsハンズオ２
公開日: 2024/6/14
近年JSフレームワークとして人気の高いVue.jsの学習を兼ね、Vue.jsの導入から実装までを実施してみます。
今回も前回に引き続き、こちらの記事に沿ってハンズオンを実施します。
https://handson.vuejs-jp.org/v-for.html
◆環境
Docker
WSL
nginx
Vue.js
1. V-for
今回はVueの基本であるv-forとv-ifを使用して商品リストの表示を効率化していきたいと思います。
まず、v-forについてはvue.jsにて利用できるディレクティブで、ループ処理の実現ができます。
v-for ディレクティブを使って繰り返し表示することで、複数の商品を表示できるようにプログラムを改修していきます。
1-1. v-for の書き方
Vue.js では、配列からデータを取り出し、繰り返しで表示する、v-for というディレクティブが用意されています。
v-for ディレクティブは、 task in tasks のような構文で書きます。
tasks はデータを取り出す元の配列で、あらかじめ用意した配列の名前を指定します。
task は配列から取り出した 1 つ 1 つの値にアクセスするエイリアスで、任意の名前を指定します。
以下の例では script 内の tasks からデータを取り出し {{ task }} で表示しています。
上記の出力結果は下記のようになります。
・タスクA
・タスクB
・タスクC
ref型の変数tasksを定義して、ディレクティブに値をもたせることで、refの要素数の分だけ勝手に処理を回してくれます。
ここまではその他の言語のfor文と特に変わらないといった印象です。
次に複数の商品をレンダリングしていきます。
まずは、 script に表示したい商品を設定します。
item から items に変更し商品のオブジェクトを持つ配列にします。
ここでscript setupというタグが使用されています。
通常のscriptタグと何が違うのでしょうか。
調べてみると、<script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）と紹介されていました。
つまるところ、setup() 関数内部を <script> 直下に直接記述することができるという構文のようでした。
本来、scriopt setupを使用しない書き方をする場合は以下のようになります。
下記はボタンを押すとカウントが追加されるプログラムのscriptになります。
v-for ディレクティブは、 task in tasks のような構文で書きます。
tasks はデータを取り出す元の配列で、あらかじめ用意した配列の名前を指定します。
task は配列から取り出した 1 つ 1 つの値にアクセスするエイリアスで、任意の名前を指定します。
以下の例では script 内の tasks からデータを取り出し {{ task }} で表示しています。
<div id="app">
<ul>
<li v-for="task in tasks">{{ task }}</li>
</ul>
</div>
const tasks = ref([
'タスクA',
'タスクB',
'タスクC',
])上記の出力結果は下記のようになります。
・タスクA
・タスクB
・タスクC
ref型の変数tasksを定義して、ディレクティブに値をもたせることで、refの要素数の分だけ勝手に処理を回してくれます。
ここまではその他の言語のfor文と特に変わらないといった印象です。
次に複数の商品をレンダリングしていきます。
まずは、 script に表示したい商品を設定します。
item から items に変更し商品のオブジェクトを持つ配列にします。
<script setup>
import { ref } from 'vue'
const items = ref([
{
id: 1,
name: 'アボカドディップバケット',
description:
'刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
price: 480,
image: '/images/item1.jpg'
},
{
id: 2,
name: 'あの日夢見たホットケーキ',
description:
'子供のころに食べたかった、あのホットケーキを再現しました。素朴でどこか懐かしい味をどうぞ。',
price: 1180,
image: '/images/item2.jpg'
},
～～～～～中略～～～～～～
</script>ここでscript setupというタグが使用されています。
通常のscriptタグと何が違うのでしょうか。
調べてみると、<script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）と紹介されていました。
つまるところ、setup() 関数内部を <script> 直下に直接記述することができるという構文のようでした。
本来、scriopt setupを使用しない書き方をする場合は以下のようになります。
下記はボタンを押すとカウントが追加されるプログラムのscriptになります。
<script lang="ts">
import { defineComponent, ref } from 'vue'
2. V-if
v-ifについて、vue.jsにて利用できるディレクティブで、条件による制御の実現ができます。
v-for ディレクティブを使って制御することで、複数の商品のだし分けをしていきます。
v-for ディレクティブを使って制御することで、複数の商品のだし分けをしていきます。
2-1. v-ifの書き方
表示・非表示を制御したい DOM 要素に v-if を追加します。
v-if の値が true の場合は表示され、 false の場合は表示されません。
プロパティの追加
それでは、v-if を使用して、売り切れの商品を非表示にしましょう。
まず、"売り切れかどうか"という情報を、items の商品情報に soldOut というプロパティで持たせました。
今回はid が 3 の商品に soldOut というプロパティを追加し、 true を設定します。
DOM 要素に v-if を追加
次に、DOM 要素に v-if を追加して、非表示にします。1 つ 1 つの商品を表示している要素は以下でハイライトしている部分です。
<div> 要素に v-if を記述していきます。
item.soldOut が true の場合は、売り切れであることを示しています。
v-if の値が true の場合は表示され、 false の場合は表示されません。
<!-- 表示される -->
<div v-if="true">something</div>
<!-- 表示されない -->
<div v-if="false">something</div>プロパティの追加
それでは、v-if を使用して、売り切れの商品を非表示にしましょう。
まず、"売り切れかどうか"という情報を、items の商品情報に soldOut というプロパティで持たせました。
今回はid が 3 の商品に soldOut というプロパティを追加し、 true を設定します。
<script setup>
import { ref } from 'vue'
const items = ref([
{
～～～～～中略～～～～～
{
id: 2,
name: 'あの日夢見たホットケーキ',
description:
'子供のころに食べたかった、あのホットケーキを再現しました。素朴でどこか懐かしい味をどうぞ。',
price: 1180,
image: '/images/item2.jpg',
soldOut: false
},
{
id: 3,
name: 'HOP WTR',
description:
'ロサンゼルス生まれのスパークリングウォーター。ノンカロリー、ノンアルコールの新感覚飲料です。',
price: 320,
image: '/images/item3.jpg',
soldOut: true
},
～～～～～中略～～～～～
</script>DOM 要素に v-if を追加
次に、DOM 要素に v-if を追加して、非表示にします。1 つ 1 つの商品を表示している要素は以下でハイライトしている部分です。
<div> 要素に v-if を記述していきます。
item.soldOut が true の場合は、売り切れであることを示しています。
<template>
<header class="header">
<img
src="/images/logo.svg"
alt="">
<h1>Vue.js ハンズオン</h1>
</header>
<main class="main">
<template
v-for="item in items"
:key="item.id">
<div
3. 終わりに
今回学習したv-for,v-ifのどちらも特に難しいことはなく、他の言語と変わらずに感覚的に使えて使いやすい印象でした。
次回はもう少し踏み込んだ関数などを作っていきたいと思います。