Vue.js入門１

JavaScriptのフレームワーク

Webアプリのフロントエンド開発に、今やJavaScriptは欠かすことができない存在である。

中規模以上の本格的なフロントエンド開発にはAngular、より小規模な開発にはVue.js、ライブラリの組み合わせによって規模に応じた柔軟な構成にできるのがReactというところで、今回はJavaScriptのビューに特化したシンプルなフレームワークのVue.jsについて学んでいく。

Vue.jsのイントール方法

Vue.jsを利用するには、以下の方法がある。

  1. CDNからの取得
  2. npmコマンドによるインストール
  3. vue-cliによる雛形の生成

npmとは

npmはNode.jsで提供されるパッケージ管理ツール。あらかじめNode.jsをインストールしておく必要がある。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org

vue-cliとは

Vue.jsによるアプリの雛形を自動生成、ビルドまでを管理してくれるコマンドラインツール。

npmのコマンドツールのインストールやvue-cliを利用する場合は中規模以上のアプリ開発に向いたアプローチである。
今回はVue.jsにまず取り組みたいので、CDN(Control Delivery Network)経由でライブラリをインストールしていく。CDNであればscriptダグに埋め込むだけで問題ない。

Hello vue.jsの表示

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速習Vue.js</title>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>

</body>

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

</html>

Vue.jsのコアはVueクラス

Vue.jsの核となるのは、その名の通り、Vueクラスである。
Vue.jsを起動するには、このVueクラスをインスタンス化するだけである。

あとで生成したインスタンスを参照できるように、変数appに格納しているが、参照する用途がないのであれば省略しても構まわない。
よって、ここでは単に「newVue({…})」としても同じ意味となる。

Vue(options)
  options:動作オプション

引数optionsにはVue.jsを動作するためのオプションを「オプション名:値」のハッシュ形式で指定できる。
ここで利用しているのは以下です。

el：Vue.jsを適用する要素

data：データオブジェクト

elオプションは、Vue.jsを有効化する範囲（要素）を表す。
この例では「#app」としているので、id=”app”である要素の配下でVue.jsが有効になる。

データオブジェクト（dataオプション）は、テンプレート（HTML）から参照できる値を格納したオブジェクト。
「プロパティ名:値」形式で列記する。

Vue.jsでは、アプリで利用する値をデータオブジェクトで用意しておいて、テンプレート側でこれを参照する、という役割分担が基本である。

この仕組をデータバインディングという。

データオブジェクトにアクセスする

テンプレート側でデータオブジェクトにアクセスするには、{{…}}という構文を利用します。これをMustache構文と言う。

今回は{{message}}で、データオブジェクトのmessageプロパティの値をそのまま引用している。
{{…}}には任意のJavaScript式を表すことも可能である。

終わりに

今回はVue.jsでHello Worldサンプルを作成してみた。今後も自分のアプリケーションを作成できるまで学習を続けていくつもりである。

コメント