【Vue.js】入門！利用準備からアプリの実行まで

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsの利用準備からアプリの実行までをご紹介しています。

これからVue.jsを始めようと思うんだけど、どこから始めればいいの？

上記の疑問にお答えします。

では、解説していきます。

Vue.jsを利用するための準備

Vue.jsを始める最も簡単な方法は、CND経由でライブラリ（Vue.js本体）を読み込む方法です。小規模なアプリケーションであれば、下記のライブラリを読み込むだけでVue.jsをすぐに始めることができます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

※srcの値にある@2.6.12はVue.jsのバージョンになります。本記事の投稿時点では2.6.12が最新バージョンになります。

Vue.jsはコンテンツの後に読み込む必要があるので、コンテンツの後に読み込むように記述します。

<body>
    <!-- メインコンテンツ -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="/path/to/js/app.js"></script>
</body>

以上でVue.jsの利用準備は完了です。続いて簡単なアプリを実行してみたいと思います。

Vue.jsのアプリを実行する

入門編ということで、今回は「Hello World」という文字を出力するアプリを作成してみます。任意のフォルダを作成して、ファイルを2つ設置します。

app.html
app.js

ファイルにはそれぞれ下記の内容を記述しましょう。

HTML

//app.html

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="/path/to/js/app.js"></script>
</body>

JS

//app.js

const app = new Vue({ // 1
   el: '#app', //2
   data: { // 3
      message: 'Hello world'
   }
});

CDNで外部からファイルを読み込んでいるため、インターネットにアクセスできる環境で「app.html」をブラウザで開いてみてください。ブラウザ上に「Hello world」と表示されているかと思います。

補足

Vue.jsはVueクラスをインスタンス化することで起動（マウント）します。

new Vue({...})

インスタンス化のタイミングでVueクラスのコンストラクタが走り、引数に指定したオプションによってページ上の要素がVue.jsに置き換えられます。この置き換え処理があるため、ライブラリやVue.jsのスクリプトはコンテンツより下に記述する必要があるわけですね。（HTMLファイルは上から順に内容が読み込まれるため）

ちなみに下記は上でご紹介したスクリプトの番号箇所で実行している内容です。

Vue.jsをインスタンス化する
Vue.jsを適用する要素を指定する
データオブジェクトを指定する

「1」と「2」はそのままですね。インスタンス化してVue.jsでお置き換える要素を指定します。

データオブジェクトというのは、Vue.jsで使用する値を格納したオブジェクトです。プロパティ－名と値の組み合わせで指定します。

データオブジェクトはテンプレート（HTML）からもアクセス可能で、上記の例では{{ message }}でデータオブジェクトのプロパティ－名を囲むことで値を参照しています。これをMustache構文（マスタッシュ構文）と言います。

データオブジェクトを参照したり割り当てたりすることを「データバインディング」というのですが、長くなるので別の記事で改めてご紹介したいと思います！

Vue CLIについて

Vue.jsで中規模以上の本格的な開発を行う場合はテンプレートの生成からビルドまで管理することができるVue CLIを導入しましょう。ただ勉強中であったり小規模なアプリケーションであれば、まずはCDNでVue.jsの基礎を身に着けて、Vue CLIを用いた開発にシフトしていただければと思います。私もまずはCDNでしっかり基礎を身に着けてからVue CLIに移行したいと思っています。