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

JavaScript
スポンサーリンク

ゴール

今回は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種類あります。

  1. 公式サイトからファイルをダウンロードして使う
  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コンポーネントが持つウォッチャを定義する。

elでは、index.htmlのid=appにVue.jsのインスタンスを結び付けることを定義しています。つまりどこの要素にVue.jsを使うかということです。

dataではmessageというプロパティがありますが、ここの値がindex.htmlに渡されて画面に自動で描画されます。

画面を表示

ではindex.htmlをブラウザで開いてみましょう。このように画面に「Hello!」と表示されれば成功です。

何も表示されなかったり、{{message}}がそのまま表示されていたらVue.jsがうまく機能していません。

Vue.jsが読み込めているか、HTMLでタグが閉じられているか、jsに打ち間違えがないかなど確認してください。

まとめ

最後に簡単に手順を書きます。

  1. Vue.jsをサイトからダウンロードする。
  2. htmlを記載する。
  3. jsにコンポーネントを記載する。
  4. このときにelプロパティは最低限設定する。

これでVue.jsを使うことができました。

Vue.jsは今回説明していないプロパティによって様々な処理ができる他、dataプロパティが変更するたびに自動で画面も変更するので書いていて楽しいです。

もし興味があるなら、公式サイトがとても分かりやすいので公式サイトを見ながら少しずつ実装してみてください。

この2サイトがわかりやすかったのでオススメです。

https://jp.vuejs.org/v2/guide/instance.html

https://cr-vue.mio3io.com/guide/chapter1.html#s04-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

スポンサーリンク
JavaScript Vue.js プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました