【Vue.js】 #1 はじめに

ホーム
BLOG
【Vue.js】
【Vue.js】 #1 はじめに

【Vue.js】
2022.03.04

Vue.jsとは
サンプルコード Hello Vue.js
サンプルコード解説
補足

Vue.jsとは

Vue.jsとは、JavaScriptでのシステム開発を便利してくれるフレームワークの1つです。
最近ではWebページ自体を遷移させず、1つのページ内で処理を完結させる Single Page Applicationでのシステム開発が増え、DOM（HTML側の要素）の操作が複雑になってきたため、以前まで人気のフレームワークだったjQueryに代わり、Vue.jsのようなDOM操作を効率よく行ってくれるフレームワークが人気を集めています。

使い方 Hello Vue.js

それでは、さっそくサンプルを作成してVeu.jsを使っていきたいと思います。
下記に学習で使用するVue.jsのバージョンと”Hello Vue.js”というメッセージが表示されるプログラムを作成します。

See the Pen Hello Vue by kenichiro ikeuchi (@ken_ikeuchi) on CodePen.

サンプルコード解説

<!-- 公式サイトから学習に使用するVue.jsのライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script>

<!--Vue.jsのマウント部分 (id名app)のdivタグ内 -->
<div id="app">
  <p>Vue.js Version: {{version}}</p>
  <p>{{message}}</p>
</div>

// 学習で使用するVue.jsのバージョンを取得
let vue_version = Vue.version; 

// Vueインスタンスの作成
const app = Vue.createApp({
// この中にアプリケーションの機能（状態や振舞い）を
// 定義していきます。
  data: () => ({
    // 取得したVue.jsのバージョンを設定
    version: vue_version, 
    
    // 表示するメッセージを設定
    message:'Hello Veu.js' 
  })
});
// 設定した情報をHTML側(id名app)にマウントする
app.mount('#app');

１．ルートテンプレートの作成

はじめにHTMLの入力欄にルートのテンプレートを記載します。
テンプレートとは、HTMLのテンプレート構文を使用した描画部分に関する記述のことです。
MVCモデルやMVVMモデルでいわれる所のV(View)に相当します。

Vue.jsはMVVMと呼ばれる設計パターンを採用しています。
MVVMモデルではModel、View、ViewModelの3つでアプリケーションを構築します。
※MVVMモデルはVueに問わず、様々なフレームワークで導入されている考え方で、レイアウト等の表示部分と動作に必要なプログラム部分をなるべく分けることにより、コードがより分かりやすくなり、可読性、開発効率の向上に役立ちます。詳しくはこちら

１-１．ライブラリの読み込み

まずはVue.jsを使用できるようHTML側に下記のように<script>タグを設定して、Vue.jsのライブラリを読み込みます。
※今回の学習ではCDNを使用して、Vue.jsはバージョン3.1.5で学習を進めます。CDNやその他のインストール方法につきまして、詳しくは公式ドキュメント(CDN)を参考にしていただければと思います。

<!-- 公式サイトから学習に使用するVue.jsのライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script>

１-２．マウント範囲の設定

次にdivタグに下記のようにid名を付与して、Vue.jsのマウント先を設定します。
※ここではid名をappとします。これによりid名appのdivタグ内がVue.jsのマウント先になります。

<!--Vue.jsのマウント部分 (id名app)のdivタグ内 -->
<div id="app">

</div>

これでJavaScript側でVueのインスタンスを作成してマウントする時に、id名をappと指定すれば、マウント先のHTML要素(マウントした要素とその子孫要素)が、Vueが生成するHTML要素に置き換わります。
これによりVueでHTMLの要素（DOM）が管理できるようになります。

２．Vueインスタンスの作成

次にJavaScript側を見ていきます。
Vue.jsでアプリケーションを作成するには、まずVueインスタンスを作成します。
Vueアプリケーションはこのインスタンスの生成からスタートします。
インスタンスの作成は下記のようにcreateApp関数を使用して行います。

// Vueインスタンスの作成
const app = Vue.createApp({
  // この中にアプリケーションの機能（状態や振舞い）を
  // 定義していきます。

});

２-１．Vueインスタンスのマウント

VueのインスタンスをHTML側にマウントする時は下記のように記述します。
mountメソッドの引数に「CSSセレクタの文字列」、もしくは「DOM要素のオブジェクト」を指定します。
下記の例では「CSSセレクタの文字列」を使用して、id属性値が「app」の要素を「’#app’」と指定してマウントしています。
これにより、HTML側のテンプレートと紐づけることができます。

// 設定した情報をHTML側(id名app)にマウントする
app.mount('#app');

３．テキストのデータバインディングを行う

インスタンスが作成出来たら、次にテキストのデータバインディングを行います。
データバインディングとはデータと描画部分を同期する仕組みになります。
まず、表示するテキストのデータを定義します。

アプリケーションで使用するデータを定義するにはJavaScript側に下記のようなdataオプションを作成します。
dataオプションはテンプレート側から参照できる値を格納したオブジェクトになります。

// Vueインスタンスの作成
const app = Vue.createApp({
  // dataオプションを作成
  data: () => ({  
    // 表示するメッセージを設定
    message:'Hello Veu.js' 
  })
});

次にHTML側のテンプレートに下記のように記述して、JavaScriptのdataオプションに定義したmessageプロパティの値を表示する設定を行います。

<!--Vue.jsのマウント部分 (id名app)のdivタグ内 -->
<div id="app">
  <p>{{message}}</p>
</div>

上の記述ではpタグのコンテンツに{{　}}という記号で囲まれた部分があります。
これは「Mustache（マスタッシュ）タグ」と呼ばれる記号で、「Mustache」というテンプレートエンジンで使われている特殊なタグになります。
Mustacheタグは、{{○○}}というように、前後を {{　}} という二重のブレース記号を使って記述されます。
この{{ message }}という部分を、JavaScript側で実際のメッセージに置き換えます。
上の記述の場合だとmustacheタグは、JavaScript側のdataオプションのmessageプロパティの値に置き換えられます。
以上の作業で、データのバインディングが行われ、JavaScript側のデータとHTML側の描画部分が同期され下記のように”Hello Vue.js”と表示されるようになります。

【実行結果】

補足

今回、サンプルコード内のdataオプションは下記のようにアロー関数を使って記述しています。アロー関数は関数式を簡潔にした代替構文になりますので、簡単にですが紹介します。

const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js'
  })
})

アロー関数はJavaScriptのES2015(ES6)で登場した書き方になり、JavaScriptを学習したタイミングによっては、見慣れない書き方だと感じる方もいると思います。
従来の関数式で書いた場合は次のようになります。

const app = Vue.createApp({
   data: function() {
     return {
       message: 'Hello Vue.js'
     }
   }
})

基本的にはどちらを使って書いても構いません。どちらで書くか迷った場合はよりシンプルに記述できるアロー関数を使ってもよいですが、実際の開発現場によってはコーディング規約等でルールが指定されている場合もありますので、現場に確認して合わせていただいたら大丈夫だと思います。

アロー関数にはシンプルに記述できる以外にも、thisの値を関数定義時に決めることができ、thisに予測しない値が入ることを防げる等のメリットがありますので、詳しく知りたい方は下記の記事等を参考にしてもらえればと思います。
また、より詳細なdataプロパティな内容につきましては下記を参照いただければと思います。
【参考記事】
・Qiita アロー関数が便利な理由と使いどころ
 ・Vue3 公式ドキュメント－data－