Vue:ゼロから始めるWebアプリ開発第2回開発環境とHello Vue.js

こんにちは！TakahiRoyteです。今回は前回の予告通り、早速コーディングを開始していきますが、その前に！開発環境を揃える必要があります。開発環境構築と聞いて身構えました？安心してください。エディタとブラウザさえ用意すればもう始められます！

推奨エディタとブラウザはコレ

本連載ではエディタにVisual Studio Code、ブラウザにChromeを用いて解説していきます。VSCodeはMicrosoftが無料のOSSとして出しているエディタで、2016年にバージョン1がリリースされました。AtomやSublime Textなどの他の有名なエディタに引けを取らない高機能と、はじめから日本語化されているなどの導入ハードルの低さからVSCodeを推奨エディタとします。

ブラウザはChrome推奨です。理由はVue.jsの開発ツール拡張機能がChrome向けにリリースされているというポイントがあります。後はシェアがNo.1だったり、デバッグツールが使いやすかったり、新しい標準に対応するのが早かったりと色々優れている点は多いです。

ちなみに両ツールに共通して、クロスプラットフォームですのでOSは問いません。

もし上記以外でお気に入りのエディタやIDEがあればそちらを使っていただいても構いません。

コーディング

今回のコーディングでは下記を実際に試していきます。

データバインディング
リスト
メソッド

どんなに大きなアプリケーションでもこの基本の3つを利用します。これをいかに組み合わせていくかが鍵となっているので、早速マスターしていきましょう。

データバインディング

以下の通りの構成でファイルを作成してください。

app
|---index.html
|---app.js

ファイルが作成できたらサンプルコードを見ながら同じように実装してみてください。

データバインディングデモ1

注目するべきポイントは、HTMLファイルには直接Hello Vue.js!という文字が無いのにも関わらず画面下の結果には文字が表示されている点です。Hello Vue.js!はHTMLではなくJS上にデータとして存在します。このJS上のデータとHTMLを結びつけるのがデータバインディングなのです。

ソースについて順を追って説明します。

まずVue.jsは外部ライブラリなので読み込む必要があります。読み込みをしているのがHTMLの最下段から一つ上にあるscriptタグで囲まれているURLを指定している行です。

このURLはContent Delivery Network (CDN)といって、負荷分散のために外部サイトがライブラリを保管&公開してくれているのを利用しています。とりあえずは「インターネットからvue.jsをダウンロードしてきている」という認識があればOKです。

その下の一行は、index.htmlと同じディレクトリに作成してもらったapp.jsを読み込むための相対パス指定のscriptタグです。

次に1行目のid="app"という部分です。これはapp.js側と絡んでくるのですが、Vue.jsはライブラリが適用される範囲をID指定により設定します。app.jsではnew Vue()の中でプロパティとしてelを持っています。これはnew Vue()で作った新しいVueインスタンスとHTMLのどこを結びつけるかを指定するためのものです。試しにHTML側でもJS側でもどちらでも良いのでappという単語を変えてみてください。表示が崩れるのが確認できるかと思います。

次にHTMLに記載されている{{ message }}という部分ですが、ここは表示結果にはHello Vue.js!となって表示されています。勘の良い方はもう気付いているかもしれませんが、これはJS側のdataのmessageと紐付いているのです。{{}}はマスタッシュ記法と言い、elで指定された範囲内の{{}}はJS式として演算が行われます。演算が行われるというのは、単にデータと紐付けるだけではありません。{{ message }}を{{ 1 + 2 }}に変えて是非その便利さを実感してください。

驚くべきなのはこれだけに留まりません。データの変更はリアルタイムで反映されるのです。前回紹介したデモをもう一度見てみましょう。

データバインディングデモ2

今度はnameという変数がJSのdataと{{}}内の他に、inputタグのv-modelという属性にも記載されているのが分かるかと思います。v-model属性での指定により、inputタグ内のデータはJSのdataと紐付きます。そしてdataの変更は即{{}}へ反映されるのです。

HTMLに{{}}は一つしかありませんが、表示結果は複数並んでいます。このカギを握るのがv-forで、これはリスト形式のデータを繰り返して表示する時に使う属性です。v-forに定義されているuser in usersのusersは、JSのdata内にあるusersというリストと紐付いています。userはusersリスト内の各オブジェクトをfor in文で順番に取り出しているイメージです。userはv-for属性のスコープ内で定義されているので、そのタグより外に{{ user }}と定義しても表示されません。なお、わかりやすくするためにusersリストの中のuserと定義しましたが、定義名自体は自由なのでxxx in usersという様になっていれば問題ありません。

ファンクション（関数）

最後に動作の要となるファンクションの登録方法についても見ていきましょう。

ファンクションデモ

まずはJavaScriptを見てみてください。Vueインスタンスへ新たにmethodsオブジェクトとその中でaddファンクションが追加されていると思います。このmethodsに登録したいファンクションを定義してあげることで、Vueのアプリで利用できるようになります。今回はnumをインクリメントする処理にしました。注目するべきなのはnumをmethods内で利用する際はthis.numと指定しなければならない点です。Vueは自動的にthisの中にdataに定義されたプロパティやmethodsに定義されたファンクションを格納します。それらを利用するときはthis.propertyNameやthis.methodName()と記述する必要があります。
続いてHTMLを見てみましょう。HTMLでは新たにbuttonタグとその中にv-on:click="add"属性が追加されています。これはbuttonがクリックされた際にaddファンクションを実行するための記述です。実際クリックするとaddファンクション内の処理が走り数値がインクリメントされます。今回はaddとしていますが、add()と書いても問題ないですし、ファンクションに引数がある場合はadd(3)のように書くことももちろんできます。ちなみにv-on:clickは略記法で@clickとも書くこともできます。