Vueアプリケーションでは、createApp関数で新しいVueインスタンスを作成するところから始まります。
Vueでアプリケーションを作成する際は、まずはじめにVueインスタンスを作成する必要があります。
ここでは、Vueインスタンスを作成してアプリケーションで使えるようにする方法について紹介します。
目次
Vueインスタンスの作成とマウント
Vue.jsでは、createApp関数を使用して新しいVueのインスタンスを作成します。
作成したインスタンスは、HTML要素（コンテナ）にマウント（mount）して使用します。
Vueインスタンスの作成
Vue.jsを利用してアプリケーションを作成するときは、まずVueインスタンスを作成します。
Vueアプリケーションはこのインスタンスの生成からスタートします。
インスタンスの作成はcreateApp関数を使用して次のように記述します。
|
1 2 3 |
Vue.createApp({ // この中にアプリケーションの機能（状態や振舞い）を定義していきます。 }) |
createApp関数では、引数にデータ(data)や振舞い（method）を定義することで、アプリケーションの機能が実装できます。
createApp関数を使用して作成したインスタンスは、変数を定義して保持することもできます。
|
1 2 3 |
const vm = Vue.createApp({ // ... }) |
Vue.js バージョン2以前
以前のバージョンのVue.jsでは、Vueのインスタンスは以下のようにVue関数を使用して作成していました。
|
1 2 3 4 5 6 7 8 9 10 |
new Vue({ // オプション }) // または変数を定義して var vm = new Vue({ // オプション }) // 変数名の「vm」はViewModel（ビュー・モデル）の略です |
Vueのインスタンスが作成できたら、次はインスタンスをHTMLの要素にマウントします。
Vueインスタンスのマウント
Vueのインスタンスをマウントすることで、マウント先に指定したHTML要素が、Vueが生成するHTML要素に置き換わります。
これによりVueでHTMLの要素（DOM）が管理できるようになります。
Vueインスタンスの有効範囲
Vueのインスタンス内で定義したデータ（data）や振舞い（method）、算出プロパティ（computed）などの機能は、マウントしたHTML要素の中（マウントした要素とその子孫要素）でのみ使用することができます。
例えば以下のようなHTMLがあるとします。
|
1 2 3 |
<div id="app"> </div> |
上記のid属性の値が「app」というdiv要素をVueインスタンスにマウントすると
|
1 2 3 4 5 |
<div id="app"> <!-- ※ この中でのみVueインスタンスで定義した各種機能が利用可能です。 --> </div> |
id属性の値が「app」の中でのみVueインスタンスで定義したデータや処理が利用可能になります。
|
1 2 3 4 5 6 7 8 9 10 |
<!-- ルート（親要素） --> <div id="app"> <!-- 子要素 --> <div id="child"> <!-- 孫要素 --> <div id="grandchild"> </div> </div> </div> |
上記のように要素がネストしている（入れ子になっている）場合でも、ルートとなる親要素とその子孫の要素内で、Vueの機能を使うことができます。
HTML要素をマウントするmountメソッド
VueのインスタンスをHTMLテンプレートの要素にマウントする時は次のように記述します。
|
1 2 3 |
Vue.createApp({ // この中にアプリケーションの機能（状態や振舞い）を定義していきます。 }).mount('#app') |
mountメソッドでHTMLの要素をマウントする際は、メソッドの引数に「CSSセレクタの文字列」、または「DOM要素のオブジェクト」を指定します。
上記の例では「CSSセレクタの文字列」を使用して、id属性の値が「app」の要素を「’#app’」と指定してマウントしています。
Vueのインスタンスを一旦変数に格納してからマウントする場合は、以下のようなコードになります。
|
1 2 3 4 |
const app = Vue.createApp({ // この中にアプリケーションの機能（状態や振舞い）を定義していきます。 }) app.mount('#app') |
マウントする要素が複数ある場合の動作
マウントする要素が複数ある場合は、対象となる要素の先頭の要素がマウント対象となります。
例えば以下のようなHTMLがあるとします。
|
1 2 3 4 5 6 |
<div class="app"> </div> <div class="app"> </div> <div class="app"> </div> |
上記のHTMLに記載されている要素の中でクラス属性が「app」の要素をマウントすると、以下のようになります。
|
1 2 3 |
Vue.createApp({ // この中にアプリケーションの機能（状態や振舞い）を定義していきます。 }).mount('.app') |
マウント対象の要素がHTML内に複数存在する場合は、先頭の要素がマウントの対象となりので
|
1 2 3 4 5 6 7 |
<div class="app"> <!-- この要素がマウントされる --> </div> <div class="app"> </div> <div class="app"> </div> |
最初の <div class=”app”> がマウント対象になります。
HTML内の複数の要素にVueのインスタンスをマウントする場合は、通常複数のインスタンスを生成してマウントします。
Vueインスタンスをマウントする際の注意点
マウントされるHTML要素は、Vueによって生成されたDOMに置き換わるので、Vueのインスタンスをマウントする前にDOMを操作したり、イベントを付与したりすると、意図しない動作になる可能性があります。
Vue.js バージョン2以前
以前のバージョンのVue.jsでは、インスタンスは以下のようにelオプション、または$mount関数を使用してマウントしていました。
|
1 2 3 4 5 6 7 8 9 10 |
// elオプションを使用して new Vue({ el: '#app' }) // または // $mountメソッドを使用して new Vue({ }).$mount('#app') |
まとめ
さいごに「Vue インスタンスの作成」と「インスタンスのマウント」についてポイントを整理しておきます。
- Vue.jsではVueインスタンスを作成することでアプリケーションが始まる
- Vueインスタンスの作成にはcreateAppメソッドを使用する
- createAppメソッドの引数にデータや振舞いなどの機能を定義していく
- 作成したインスタンスはHTML要素にマウントする
- インスタンスをマウントするにはmountメソッドを使用する
- mountメソッドの引数にCSSセレクタの文字列やDOM要素のオブジェクトを指定する
- マウントしたHTML要素はVueが生成するDOMに置き換わる
- Vueインスタンス内の機能はマウントした要素の内部でのみ利用できる
Vue.jsを利用することで、簡単にWebアプリケーションを開発することができます。
以前にjQueryでのDOM操作や、Microsoft MVCでのサーバーサイドレンダリングで苦労した方は、ぜひVue.jsを利用したアプリケーションの開発を行ってみてください。
今までの苦労がウソのように感じられる瞬間が、きっと訪れると思います。
