Vue の公式チュートリアル 表示内容をプログラムで決める

Vue の公式チュートリアル　表示内容をプログラムで決める

Vue の公式チュートリアルのステップ２です。このステップでは、Javascript のプログラムから表示に使うデータを決める方法です。

前回のポイントは？

ステップ２を始める前に、前回のステップ１の内容を簡単に復習しておきます。

前回のポイントは、基本的な HTML の記述を Vue で表示させる方法でした。

<template>

  <h1>Hello World!</h1>

</template>

のように、「tempalte」のタグの間に表示させたい文字を書けば良いだけでした。 あとは、Vue が勝手に処理して表示してくれます。

「.vue」ファイルには、「template」の他に、「script」のタグには、Javascript のプログラムを、「style」のタグには CSS の記述を書くことができます。 あとは、少し HTML のタグを幾つか学習しました。

今回学ぶのは？

ステップ２では、表示に使うデータを Javascript のプログラムで決めるやり方です。

こうすることで、プログラムで処理したデータを Web ブラウザで表示する事ができるようになります。このステップでは、その前段階で Javascript で設定した値を表示する方法を学習します。

「.vue」ファイルの構造はステップ１で学習した通りです。今回は、「template」のタグ以外に、「script」のタグに Javascript のプログラムを書きます。

<template>

   <h1>HTMLを書く部分</h1>

</template>

<script＞

   // Javascriptのプログラムを書く部分

</script>

このステップで学ぶ Javascript の記述です。

<script>

export default {

  data() {

    return {

      message: 'Hello World!',

      counter: {

        count: 0

      }

    }

  }

}

</script>

Vue で使う Javascript の記述は「あるパターン」があります。

export default {};

で囲んだ部分に書くのが基本です。今回は、この中に「data()」という関数を書いて使います。 関数は、Javascript の特定の処理をまとめた物で、この関数は、表示やプログラムで利用する変数をまとめて書きます。

実際の例では二つの変数

＊　message

＊　counter

という変数です。「message」は、文字列「Hello World!」を入れる変数です。 「counter」は、JSON 形式の変数（連想配列）{count: 0}になります。

これを表示で利用するには、「template」の中に記述します。

<template>

  <h1>{{ message }}</h1>

  <p>Count is: {{ counter.count }}</p>

</template>

この HTML の記述は、やはり標準的な HTML の記述とは少し違っています。 通常の文字を入れる代わりに「{{}}」のように、中括弧を二つで囲んで、先ほど Javascript の中に変数の名前を書きます。ここでは、「message」と「counter.count」を指定しています。

JSON 形式の連想配列の値は、変数名と、そこで使っている「タグ（count）」を組み合わせて指定します。

ステップ２の記述の全容

では、ここでステップ２で学習する記述の全容です。

<script>

export default {

  data() {

    return {

      message: "Hello World!",

      counter: {

        count: 0,

      },

    };

  },

};

</script>

<template>

  <h1>{{ message }}</h1>

  <p>Count is: {{ counter.count }}</p>

</template>

これを、チュートリアルのステップ２のページで書くと表示される様子が体験できます。

今回は、Javascript と言ってもプログラムと言うよりは、変数の使い方という内容です。 ここで、実際にやってみると良いことは三つです。

＊　「message」と「counter」の中身（値）を変えてみる

＊　「counter」に新しい要素を追加する。（例えば、count2 など）

＊　新ししい変数を追加する

変数の要素を追加したり、新しい変数を追加した場合には、表示の枠組みを作っている HTML の方の記述も変えて、どの様に表示が変わるかを目で見て確かめてみてください。

HTML と Javascript の知識は最低限で OK

ここまで、二つのステップを学習してお分かりかと思いますが、Vue を学習する上で、最初は、HTML や Javascript の専門的な知識は必要ないという事です！

やってみて納得された方も多いと思いますが、その都度必要な事を調べて学習する程度で十分に先に進む事ができます。もちろん、実際のアプリを開発するにはそれなりに幅広い知識が必要なのは間違いありません。しかし、最初の段階では、最低限必要な基本と、Vue の仕組みがわかる事の方が優先度が遥かに高いという事です。

まずは、必要最低限の知識で一通り、道具を使う練習をすると、結果的に短期間で道具を使いこなせるようになってきます。そのレベルに行った時にさらに詳しい、HTML や Javascript、CSS の学習をするようにすると、必要なポイントを掴みやすくなります。

まとめ

Vue の英語のサイトの公式チュートリアルを使って、Vue を学びながら、Web 開発の基本を学習する連載の２回目をお届けしました。

まだ、最初で難しい部分は出てきていませんが、HTML や Javascript の基本知識がなくても、その都度必要な事を調べて学習すれば良いことが少しは理解できたのではないかと思います。

この段階で大切なのは、基本の記述を少し変えて見て表示がどう変わって行くかを目で見て確かめながら学習する事です。簡単なうちに、できるだけ色々なパーターンを体験すると理解が深まって「できる」ようになります！

次回は、日本時間の 2022 年 2 月 16 日（水）にお届けします。