Vue.jsのテンプレート構文とコンパイルについてのまとめ

諸事情でVue.jsを触ることになったのでまずはドキュメントの読み込みからはじめました。
完全に理解出来ているのかどうかを確認するため、内容を忘れないためにも記事としてまとめました。

ちなみに今のVue熟練度は1(過去にチュートリアルレベルの作品を途中で投げ出したことがある)です。

はじめに

この記事は超初心者向けの記事となっています。

ドキュメントの中の、インストールページの解説で、対応バージョンはv2.xです。

Vue.jsとは

公式のガイドに大きく、

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

と記載がありました。ふむふむ。
プログレッシブフレームワークとはなんだろう?

プログレッシブフレームワーク

仕様変更や機能追加を繰り返すアプリケーションの変化に柔軟に対応できるのが、プログレッシブフレームワークと呼ばれるものです。

Vue自体はview層だけに焦点を当てたライブラリですがサポートライブラリなどの導入により、アプリケーション規模に合わせた機能を提供できるようになっています。

必要な機能を必要な時に足していき、無駄なものは省く。そんなイメージでしょうか。
なんだかワクワクしてきましたね!

導入方法

まずVueを使うための3種類の利用方法を確認しておきます。

scriptタグで直接組み込む

開発モード/本番モードでファイルが分かれているので、状況に応じて公式サイトからダウンロードし読み込んで下さい。
開発モードでは警告出力とデバッグモードがありますが、本番モードでは警告出力なしかつ圧縮されています。

もしくはCDNを使用することでVueのソースが参照可能になります。

1
2
3
4
5
<!-- 略 -->
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<!-- 略 -->

CLI

VueではオフィシャルCLIが用意されています。
すぐに環境構築ができるので楽なのですが、右も左も分からない初心者さん(私)にはオススメしていないのでこんなのもあるよぐらいにしておきます。

NPM

公式サイトでも推奨されている方法で、私もこの方法を使用しています。
Vueのみのインストールは公式に記述されている通りで問題ないですが、加えて使用するモジュールバンドラにそったloaderなどをインストールする必要があります。

1
2
3
4
5
// vueだけインストール
npm i -S vue

// webpackを使う場合
npm i -D vue-loader

Vueのコンパイルについて知る

コンパイルについて詳しく解説する前に、まずVueのテンプレート構文3種類について説明します。
事前にどのような記述方法があるのかを知っておくことで、後述するコンパイルについて理解し易くなると思います。

テンプレート構文

1.文字列テンプレート

公式の一番最初にスッと出てくる記述で、文字列でコンポーネントを定義します。
下記の例は一行ですが、複数行で書くことも出来ます。

1
2
3
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})

2.直接render関数で書く

こちらはrender関数に直接定義しています。
あ、ちょっと読みにくい…。

1
2
3
4
5
6
7
8
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement( 'h' + this.level )
},
props: {
//省略
}
})

3.単一ファイルコンポーネント

一つのファイルにtemplate、script、styleをまとめています。
一番よく見る書き方です。

単一ファイルコンポーネントを扱う場合は、webpackやBrowserifyなどのビルドツールが必要です。

1
2
3
4
5
6
7
8
9
10
11
<template>
<div>Hello world!!</div>
</template>

<script>
// 省略
</script>

<style>
<!-- 省略 -->
</style>

テンプレートのコンパイルとレンダリング

Vueはrendar関数(描画関数)に表示したい内容を渡すことでレンダリングするしくみのようです。
そのためtemplateを使用した場合は、定義したtemplateをrendar関数が読み取れるように変換(コンパイル)を行う必要があります。

直接render関数で書いた場合は描画したいものをすでにrendar関数に渡しているので、コンパイルする必要はありません。


ビルドのつかいわけ

templateを使用した場合コンパイルが必要なので、完全ビルドが必要となります。
文字列テンプレートや、単一ファイルコンポーネントの構文がこれにあたります。

完全ビルドとは?

コンパイルに必要なコンパイラとランタイム※の両方が含まれたビルドになります。
※ランタイムとは、Vueインスタンスの作成やレンダリングなどコンパイラ以外の機能のことを言います。




rendar関数に直接書いた場合は、コンパイルは必要ないのでランタイム限定ビルドで十分です。

ランタイム限定ビルドとは?

ランタイムのみが含まれています。
完全ビルドに比べておよそ30%ほど軽量です。

ちなみにCDNからVueを導入した場合は、完全ビルド用のvue.jsが読み込まれます。

Vueのコンパイルのタイミング

次にこの公式ドキュメントを読んでみてください。

DOM内のテンプレートまたはJavaScript内のテンプレート文字列を使用する場合、テンプレートから描画関数へのコンパイルはその場 (on the fly) で実行されます。

通常、ほとんどの場合、これは十分高速ですが、アプリケーションのパフォーマンスが重要な場合は避けるのが最善です。


簡単に説明すると、テンプレートをコンパイルするタイミングはブラウザ上で実行した瞬間だよと言っているのです。
続けて、パフォーマンスが重要な場面では避けたほうがいいよと言っています。

そこで、Vueでは事前にコンパイルを行うしくみが用意されています。

事前にコンパイルする方法

webpackやBrowserifyなどのビルドツールにより実現されたvue拡張子の単一ファイルコンポーネントを使用するときは、vue-loaderなどを通して事前コンパイルが可能です。

これにより、事前にコンパイルしておけば実行時はランタイム限定ビルドで事足りるのです。


つらつら文字で説明しましたが、実際にソースを見た方が分かりやすいと思います。
私のgithubにリポジトリを作りましたので、興味があれば読んでみてください。

それぞれのパターンでファイルを分けています。

  • 文字列テンプレート+完全ビルド
  • render関数+ランタイム限定ビルド
  • 単一ファイルコンポーネント+ランタイム限定ビルド

まとめ

  • Vueはサポートライブラリが豊富で、どんな規模のアプリケーションにも対応しやすい
  • webpackなどのビルドツールを用いることで、単一ファイルコンポーネントが使えるようになるかつ軽量化されたVueを使うことができる

おわりに

Vueは珍しく日本語ドキュメントが用意されているものの、読んでいるとどういう意味だろう?と思う点が何度もありました。
特にコンパイル云々の話は苦手な部分だったので、今回で大分理解が深まりました。