Vue 公式チュートリアル ~ Vue の部品の状態とテンプレートのリファレンス

Vue 公式チュートリアル　~ Vue の部品の状態とテンプレートのリファレンス

今回は、今までとは違ったステップです。Vue の仕組みを理解するには意味のある内容ですが、初めて Vue を学習する人には、知識として覚えておけば十分です。では、早速内容を見てみましょう。

前回までの復習

Vue の部品の書き方の基本を使って、少しプログラムらしい例として、「やる事の一覧を管理」をするための、シンプルなアプリを前の二つのステップで学習しました。

ちょっとしたアプリにしたので、初めて、HTML や Javascript を学習している人には、ちょっと学習する項目が多くなっていました。 今回の、ステップはシンプルなので、時間が許すようならば、前回までの復習を今一度やってみてください！

今回学ぶのは？

今回学ぶのは、「Vue の部品」の状態と、HTML の記述（template のタグの部分）で利用できる「リファレンス」の使い方です。

「Vue の部品」は、Vue の中で「部品が作られる（準備される）」状態から、Web ブラウザで表示できるような状態に「組み込まれた状態」など、いくつかの違った「状態」があります。この「状態」によって、実際に表示される内容が微妙に違ってきます。

変更前のコードです。

<script>

export default {

  // ...

};

</script>

<template>

  <p ref="p">hello</p>

</template>

この変更前のコードだと、HTML の部分（template の部分）には、「hello」と言う文字が「p」のタグに囲まれています。Javascript の部分は特に記述がありませんので、このコードを実行すると「hello」が表示されます。

当たり前なのですが、状態が違うと表示が違ってくると言うのを体験するのが今回のステップ９です。

変更後のコードは？

今回は、課題というより、答えを最初に見て見てください。

<script>

export default {

  mounted() {

    this.$refs.p.textContent = "mounted!";

  },

};

</script>

<template>

  <p ref="p">hello</p>

</template>

変更点は、Javascript の部分です（script の部分）

mounted() {

   this.$refs.p.textContent = 'mounted!'

}

という記述が書き加えられています。 これまで学習した Javascript の部分の「export default {}」の中に書いてある記述は以下の三つのパターンでした。

＊　data() {}

＊　method: {}

＊　computed: {}

今回の変更されたコードは、「mounted() {}」と言う記述になっています。 この状態は、この Vue の部品が表示できる状態に組み込まれた（mounted）の状態になった時点で呼び出されるメソッド（関数）です。

そこで実行されるのが

this.$refs.p.textContent = "mounted!";

になります。これは、「p」という名前の「リファレンス（$ref）」の文字の部分（textContent）に「mounted」という文字をセットするという処理です。

実は、HTML の部分（template の部分）には、「ref='p'」が書かれているので、この部分の値が変更されます。HTML の記述は、「hello」ですが、Javascript でこの値を上書きして「mounted」に変えています。

従って、変更後のコードを実行すると表示されるのは、「hello」ではなく、「mounted」になります。

ポイントは何か？

このステップのポイントは、「Vue の部品の状態を体験する事」にあります。

この Vue の部品が作られた状態では、この「p という名前」の HTML のタグ「p」の部分の値は、「hello」になっています。 特に何もしなければ、そのまま「hello」が表示されます。これが、変更前のコードです。

ところが、Javascript で表示の準備が整ったら、「p」という名前の HTML の部品に、「mounted」をセットする処理が変更後のコードには加えられています。従って、表示が可能になった「瞬間」に値の更新が行われます。実際には、一瞬の出来事なので、「hello」と表示されるのは見ることができません。

これが何の意味があるかというと、この例の場合はほとんど意味はありません。ただし、表示に必要なデータの処理に時間がかかるような場合は、話が変わってきます。その場合、データの準備ができるまで、仮のデータを表示できるようにした方が便利です。例えば、「データ読み込み中」などの表示をさせておけば、利用者は何かおかしい！と勘違いするのを防ぐことができます。

現段階では、Vue の部品には、いくつか違った状態があると言うのを覚えておけば十分です。

まとめ

今回は、「知識」を増やすためのステップでした。 入門向けのチュートリアルのようなシンプルなプログラムでは、あまり必要性を感じない「仕組み」でした。もう少し、複雑なプログラムを書くようになると、上手く使うとより、「利用者のため」のプログラムにするために必要な「やり方」になります。

プログラミングでは、機能的にあまり大きな意味を持たないような仕組みもたくさんあります。ただ、プログラムの中身を知らない利用者を考えた場合、こうしたちょっとした仕組みがあるだけで、より使いやすく、わかりやすいアプリに仕上げる事ができます。

こんな機能があったなと頭の隅にでも置いておくと将来役に立ちます。

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