Vue.jsを用いたWebページ制作　～その３～

今回は Vue.js シリーズの第３弾です。

前回は画面遷移をできるようにしたので、次回はホームページらしいデザインにしようということでしたが、少し趣向を変えて Vue.js の簡単な紹介をしてみます。

では早速 Go !

Vue.js とは？

ウェブサイトやウェブアプリの画面の見た目や動きを簡単に作るためのツールです。

特徴は？

「データが変わると自動的に画面の表示も更新される」といった、保持しているデータと画面表示とを簡単に結びつける機能があります。

データと画面の結びつき実践

こんなコードを書いてみました。

<template>
  <v-container>
    <v-responsive class="align-centerfill-height mx-auto" max-width="900">
      <v-row>
        <v-col cols="12">
          <v-text-field v-model="name" label="名前" />
        </v-col>
        <v-col cols="12"> あなたの名前は {{ name }} です。 </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')
</script>

画面の見た目はこんな感じです。

簡単に解説します。

まず、下から 2 行目にある const name = ref('') で変数 name を宣言しています。これが結びつける対象の「保持しているデータ」です。

<v-text-field v-model="name" label="名前" /> はテキストボックスを表しており、 v-model で変数 name とテキストボックスの入力とを結び付けています。これによって、テキストボックスに入力した値がリアルタイムで変数 name へ反映されます。

さらに <v-col cols="12"> あなたの名前は {{ name }} です。 </v-col> の二重カッコで囲まれた name は、変数 name の値をここに表示することを表しており、変数 name の値が変わるとリアルタイムであなたの名前欄の画面表示が変わります。

では少し改良してみましょう。

これでも十分ではありますが、名前を入力していない状態で表示欄があるのは不格好なので、名前を入力したときだけ表示欄を出すように変更します。

<template>
  <v-container>
    <v-responsive class="align-centerfill-height mx-auto" max-width="900">
      <v-row>
        <v-col cols="12" v-if="name != ''">
          <v-text-field v-model="name" label="名前" />
        </v-col>
        <v-col cols="12"> あなたの名前は {{ name }} です。 </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')
</script>

<v-col cols="12" v-if="name != ''"> に v-if を追加しました。

「if」はプログラミングで頻出する条件分岐の命令で、この場合 v-if の name が空でない場合に名前表示欄を出現させます。

画面を初期表示した時点では name は空なので表示欄は表示されず、テキストボックスに名前を入力して name が空でなくなると表示欄が表示されるという動きをします。

まとめ

「データと画面表示を結びつける」というイメージ、なんとなく理解していただけましたでしょうか？

Vue.js を使わずにこれを実現しようとすると変数と表示を結びつけるためのコードを書く必要がありますが、 Vue.js を使うことでこれが簡単に実現できます。

私たちや皆さんが普段使っているアプリも、このようなツールのおかげで便利に使えていると思うとありがたいものです。

では、次回をお楽しみに…(^^♪