Vue 公式チュートリアル〜入力された値を表示に使う

Vue 公式チュートリアル〜入力された値を表示に使う

Vue 公式チュートリアルのステップ５では、入力フォームに入力した文字を表示に反映させる方法を学習します。

前回までのポイントは？

例によって、まずは前回までの復習です。 これまで、Vue の「部品」である、「.vue」ファイルの書き方を学習してきました。 HTML/CSS/Javascript の三つの部分から、Vue の表示の部品である「.vue」は、構成されています。それぞれの、基本の書き方と、ボタンを作成して、ボタンをクリックした場合の処理のやり方を前回までに学習しました。

特に前回は、ボタンをクリックしたという「利用者の操作」をイベントとして検出して、それに対応した処理（メソッド／関数）を呼び出す方法を学習しました。

これには、Vue 特有の HTML の書き方と、Javascript との連携が必要になります。 こうした書き方には、基本的な決まりがあるので、それを覚えれば Vue の色々な機能を使えるようになります。

今回学ぶのは？

今回のステップ５で学ぶのは、文字を入力する入力フィールドに入力された文字を、表示に反映させるやり方です。

最初に示されているコードは以下の通りです。

<script>

export default {

  data() {

    return {

      text: "",

    };

  },

  methods: {

    onInput(e) {

      this.text = e.target.value;

    },

  },

};

</script>

<template>

  <input :value="text" ＠input="onInput" placeholder="Type here" />

  <p>{{ text }}</p>

</template>

今回は、このコードで必要な機能は既に実装されています。

＊　HTML:「input」のタグを使って文字の入力フィールドを作る

＊　HTML: 「＠input」で文字が入力されたイベントを検出して必要な処理「onInput」を呼び出す。

＊　HTML: Javascript で作成した「text」の内容を入力フィールドに表示する

＊　HTML: Javascript で作成した「text」の内容を入力フィールドに表示させる

＊　HTML: 入力された文字が「空」の場合に入力フィールドに表示する文字を指定する

＊　HTML: 文字を表示するのに「p」のタグを使う

＊　Javascript: 入力フィールドに入力された文字を読み取って、Javascript の変数を更新する。（onInput の処理）

というのが、今回のポイントです！

コンセプト自体は、前回のステップ４で学習したボタンの場合と似ています。

ステップ４では、ボタンがクリックされたというイベントを「＠click」で検出していたわけですが、今回は、入力フィールドに文字を入れたというイベントを「＠input」で検出しています。あとは、呼び出す処理を特定する部分は同じです。

さらに、入力フィールドに表示する文字は、Javascript の変数「text」になるように、「value="text"」で指定しています。 この書き方は、一見標準の HTML の書き方に似ていますが、Vue の場合は少し意味が違ってきます。標準の書き方では、入力フィールドには、「text」という文字が表示されますが、Vue の書き方では、Javascript の変数、「text」の値が表示されます。微妙に違うので注意が必要です。

処理をするのは、メソッド（関数）で、Javascript の「export default {}」の中に、「method:{}」という部分を作ってその中に記述します。今回は、入力された文字が何かを「e.target.value」で取得しています。

この書き方は、「e」というのは、「イベントの情報」になっています。これが自動的に呼び出したメソッドに渡される仕組みになっています。入力された文字は、「e.targert.value」で取得できるというのが「決まり」になっているので、あとはこの値を変数に入れてあげれば良い事になります。

何故？というのが気になるところですが、これは、「取り決め」で、ここに値を入れると決めたというのが理由なので、まずは、「覚えて」「使う」というのがここで学ぶ事になります。

表示は、これまでに学習した通りで、Javascript で作った変数を、文字を表示するタグを使って書けば良い事になります。

まずは、最初のコードを実行して、入力した文字が表示されるのを体験してください。

もっと簡単なやり方がある！

実は、このステップ５で学ぶ事は、上で紹介した書き方よりもっとシンプルに書く方法があるという事です。機能自体は、最初のコードで既に実現できています。これは、既に上で説明した通り、ステップ４までのやり方の拡張で、違った HTML の部品を使った方法という事になります。

ここでは、新しいやり方として、「v-model」というやり方を学習するというのが本当の目的です。

<input v-model="text" placeholder="Type here">

この書き方では、自動的に、入力された文字の内容と、Javascript で作った変数「text」の値の更新をやってくれます。つまり、イベントの検出と、イベントに対応した処理のメソッド（関数）を書く必要がなくなるのでコードがシンプルになります。

従って、完成したコードは以下のようになっています。

<script>

export default {

  data() {

    return {

      text: "",

    };

  },

};

</script>

<template>

  <input v-model="text" placeholder="Type here" />

  <p>{{ text }}</p>

</template>

今回の応用は？

ステップ５の課題は比較的シンプルでした。 応用編として、少しこのプログラムを変更する事を考えてみます。

＊　ボタンを追加する。

＊　ボタンには「更新」という文字を表示させる

＊　ボタンを押したら、表示する文字の内容を入力された文字に更新する

という感じで変更したらどうなるでしょうか？

少し難しいですね。

答えはこちらになります。

<script>

export default {

  data() {

    return {

      text: "",

      update: "",

    };

  },

  methods: {

    updateText() {

      this.update = this.text;

    },

  },

};

</script>

<template>

  <input v-model="text" placeholder="Type here" />

  <button ＠click="updateText">更新</button>

  <p>{{ update }}</p>

</template>

ポイントは、以下の四点です。

＊　別の変数「update」を用意する

＊　ボタンがクリックされたら、「updateText」を呼び出す

＊　「updateText」のメソッド（関数）を Javascript に追加する

＊　表示する変数を「text」から「update」に変更する

これで今まで学習した内容で機能の拡張ができます。

まとめ

今回の学習のポイントは、「入力フィールドに入力した文字を実際の表示に反映させる」という機能の実現でした。これまでに学習した事の「応用」で機能を実現することができますが、もっとシンプルな記述方法を Vue は提供しています。

プログラミングでは、同じ機能を実現する方法が複数ある場合も沢山あります。

色々なやり方を知っていると、必要に応じて必要な実現方法を選ぶ事ができます。さらに、よりシンプルな方法を知っていると、コード自体短くて見やすい物にすることもできます。

また、ステップ５になって学習した事が増えてきたので、「出来る事も確実に増えています」ちょっと工夫すると、機能の拡張なども出来るようになります。必要な事をその度にマスターする学習方法ですが、出来る範囲はどんどん大きくなっていきます。

そう考えると、「必要な事だけを学ぶ」という方法も悪くないことがわかります。

次回は、2022 年 2 月 22 日にお届けします。お楽しみに！