ざっくりVue.js 〜【その1】テキストのバインディング〜

こんにちは、サイオステクノロジー技術部武井です。今回は、Vue.jsの概要をざっくりしてみたいと思います。

何回かに分けて、Vue.jsの概要をご説明しようと思うのですが、難しい説明は抜きにして、Vue.jsで最低限のことができるようにするというのが本記事の目的にございます。具体的には、以前、「JavaScriptフレームワーク「Angular」による掲示板システム構築」でご紹介した掲示板アプリを作ることをゴールとします。

1 Vue.jsとは？
2 まずはハロワ
3 コードの解説
4 まとめ

Vue.jsとは？

いわゆるAngularやReactのようなクライアントサイドのフレームワークです。今、最も巷で熱くてなういクライアントサイドフレームワークといえるのではないでしょうか？Vue.jsは学習コストが少なくて済み、さくっと小さく簡単に始めることができるフレームワークです。AngularはVue.jsよりも大規模なアプリケーションで適用されるようなイメージと個人的には考えていますが、Vue.jsはもうちょっと規模が小さめのアプリケーションに特化したフレームワークといった表現が適切かもしれません。

まずはハロワ

細かいことは抜きにして、早速始めてみましょう。テキストバインディングでハロワ(Hello World)してみます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World!!</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>

  <div id="app">
    <h1>{{ greet }}</h1>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        greet: 'Hello World!!',
      }
    })
  </script>

</body>

</html>

なんとなくコードから想像がつくとは思いますが、上記のコードの実行結果は、ブラウザに「Hello World!!」と表示されます。

コードの解説

基本的にVue.jsのコーディングは以下の流れで進むこととなります。

Vue.js本体を読み込む → Vue.js本体の読み込み
<script>〜</script>タグ内にVueインスタンスを定義し、データを定義 → データの定義
2で定義したデータをHTMLで表示 → データの表示

では、コードを一つずつ説明していきたいと思います。

Vue.js本体の読み込み

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

こちらはCDNからVue.js本体をダウンロードする記述になります。Vue.jsはwebpackなど他にも色々な実行形態がありますが、上記のようにCDN(コンテンツを配信するための専用のインターネット環境のようなものです)からダウンロードして始めるのが一番お手軽です。まずは、今の時点では、上記のような記述をすれば、Vue.jsを始める準備が整ったのだという理解で問題ございません。

データの定義

  <script>
    new Vue({ // Vueインスタンス
      el: '#app', // マウントする要素
      data: { // データ
        greet: 'Hello World!!',
      }
    })
  </script>

順番は前後しますが、<script>〜</script>で囲われている部分をご説明致します。

Vueインスタンス

まずはVueインスタンスを作成します。その記述がnew Vueの部分になり、この中にVue.jsを動作させるために必要な記述を色々と書いていくこととなります。書式は以下のようになります。

new Vue({
〜ここにVue.jsを動作させるために必要な記述をしていく〜
})

マウントする要素

el: ‘#app’の部分です。後のご説明するHTMLの部分で、ここで指定した値をidとして定義した<div id=“app”>〜</div>で囲われたところだけ、Moustacheで定義したテキストのバインディングが有効になります。この説明だけでは何を言っているかはわからないかと思いますので、詳しいことは後述します。

データ

HTML内に表示させたいデータを定義します。以下のようにdataプロパティの中に様々なデータを記述していきます。

data: {
〜 ここにデータを記述していく 〜
}

このdataプロパティの中に「変数名:データ」の形式でデータを定義していきます。今回のコードでは。「greet」という変数名に「Hello World!!」といデータを定義しています。この変数をHTMLで表示させるための方法は後述します。

データの表示

定義したデータをHTML内で表示するのは下記の部分のコードになります。

  <div id="app">
    <h1>{{ greet }}</h1>
  </div>

<div id=”app”>〜</app>は、「マウントする要素」のところで定義した「app」という文字列を指定します。このdivタグで囲まれた範囲のみ、「データの定義」で定義したデータの表示が有効になります。

そして、「データの定義」で定義したデータを表示するためには、以下のように記述します。

{{ 変数名 }}

変数名とは、「データの定義」で記述した「greeting」になります。なので、{{ greeting }}の部分は「Hello World!!」に置き換わります。つまり、実際に表示されるHTMLは以下のようになります。

<div id="app">
  <h1>Hello World!!</h1>
</div>

こんな感じでハロワが完了です。

まとめ

今回はVue.jsの最も基本的な部分であるテキストのバインディングについてご説明しました。次回以降も、ざっくりVue.jsを学ぶために必要なTipsについて、ドシドシ書いていきたいと思います(^o^)

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

0人がこの投稿は役に立ったと言っています。