今話題のJavaScriptフレームワーク「Vue.js」の簡単な始め方

ゴール
Vue.jsとは
Vue.jsの使い方
まとめ

ゴール

今回はVue.jsの簡単な利用方法をご説明します。

Vue.jsが使える準備ができたらVue.jsの機能を使って画面に「Hello!」と表示する簡単なプログラムを書いていきます。

Vue.jsとは

今回はVue.jsの使い方をメインで書いていこうと思うので、Vue.jsそのものの説明については簡単にご説明します。

Vue.jsとはオープンソースなJavaScriptのフレームワークです。

フレームワークとは、アプリケーションの開発が効率的に行えるように用意された枠組みのことです。

現在フレームワークによるwebアプリケーション開発が流行しています。特にJavaScriptのフレームワークではVue.js、React、AngularJSが有名です。

この中でVue.jsの特徴として「環境設定が簡単で学習のコストが低い」があげられます。

実際、開発時に環境設定に時間をとられると厄介ですが、Vue.jsは簡単に環境設定ができるということでご説明していきます。

Vue.jsの使い方

Vue.jsを利用するための方法は大きく分けて2種類あります。

公式サイトからファイルをダウンロードして使う
CDNを使ってインターネットから読み込む

CDNはインターネットがつながっている環境でしか動かないので、1の公式サイトからファイルをダウンロードして使う方法をご紹介します。

公式サイトからVue.jsのダウンロード

こちらのサイトを開きます。このサイトでは最新版のVue.jsがダウンロードできます。

ここから「開発バージョン」をクリックしてVue.jsをダウンロードします。

https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt-%E7%9B%B4%E6%8E%A5%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF

Vue.jsをダウンロードしたら任意のフォルダに移動します。

あとは作成したHTMLで配置したVue.jsを読み込めば完了です。

画面の作成

先ほどVue.jsを配置したフォルダにindex.htmlとindex.jsを作成します。

index.htmlは画面を作成します。

index.jsはVueのコンポーネントを実装します。

では実際に書いていきます。

index.html

以下のプログラムを書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="vue.js"></script>
    <script src="index.js"></script>
</body>
</html>

ここで重要なのは以下の部分です。

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

このapp内にVue.jsが描画されます。

{{message}}はindex.jsで宣言したmessageの中身を自動でバインディングしてくれます。

また以下の部分で先ほどダウンロードしたVue.jsを読み込んでいます。

<script src="vue.js"></script>

index.js

以下のプログラムを書いてください。

const app = new Vue({
    el: '#app',
    data : {
        message: 'Hello!'
    }
});

このnew Vueを使っているオブジェクトをコンポーネントと言い、今回はappと言う変数に入れています。

コンポーネントで宣言できるプロパティは決まっていて今回はelとdataを使用しています。

どんな種類があるのか一覧で簡単にご紹介します。

プロパティ名	役割
el	コンポーネントのインスタンスをどのHTML要素に結び付けるかを定義する。
data	コンポーネントが保持するデータを定義する。
methods	コンポーネントが持つメソッドを定義する。
filters	コンポーネントが持つフィルターを定義する。
computed	コンポーネントが持つ算出プロパティを定義する。
watch	コンポーネントが持つウォッチャを定義する。