• トップ
  • ブログ一覧
  • 【第1回】Vue.js 入門 〜Hello World編〜
  • 【第1回】Vue.js 入門 〜Hello World編〜

    広告メディア事業部広告メディア事業部
    2019.11.11

    IT技術

    Vue.js を始めてみよう!

    宮田宮田

    (株) ライトコード Webエンジニアの宮田です。

    今回、 JavaScript のフレームワークの一つであるVue.js(ビュージェイエス) を触ることになったので、学習したことを書いていきたいと思います。

    最終的には Vue.js に基づいたフレームワークの Nuxt.js(ナクストジェイエス) を利用した開発を目標とします。

    まず今回は、入門第1回の定番である"Hello World" プログラムから始めていきたいと思います!

    開発環境

    OSMacOS Catalina 10.15.1
    Vue.js2.6.10

    プロジェクトファイルを作成しよう

    コマンドラインから下記のコマンドを実行し、プロジェクトファイルを作成します。

    1$ mkdir vue-helloworld
    2$ cd vue-helloworld

    プロジェクトファイル直下にhtmlファイルを作成

    引き続き、コマンドラインよりhtmlファイルを作成します。

    1$ touch index.html

    作成した index.html の中身を準備しましょう。

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <meta charset="utf-8">
    5    <title>Hello Worldを表示するプログラム</title>
    6  </head>
    7  <body>
    8    <!--- TODO: "Hello World" を表示する --->
    9  </body>
    10</html>

    CDNを読み込もう

    Vue.js を導入するには、いくつか方法があります。

    例えば、NPMを利用してインストールする方法や、CLIをインストールする方法もあります。

    ですが、今回は CDN を利用します。

    Vue.jsのCDNをhtml内に記述

    Vue.js の CDN は、下記のタグをhtml内に記述するだけで簡単に利用できます!

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

    <body> タグの、閉じタグ手前に記述しましょう。

    1<body>
    2  <!--- TODO: "Hello World" を表示する --->
    3  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    4</body>

    これで、Vue.js を使う準備ができました!

    表示用htmlを書いてみよう

    "Hello World" を表示するための div 要素を用意します。

    今回は、 message という変数に "Hello World" の文字列を入れて表示させようと思います。

    そのために、まず message という変数を {{  }}  で囲ってあげましょう。

    {{  }} のように、二重の波括弧で囲う記法は、マスタッシュ構文と呼ばれます。

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

    TODO コメントがあった位置に記述します。

    1<body>
    2  <div id="app">{{ message }}</div>
    3  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    4</body>

    htmlは、これでOKです。

    Vue関数を使ってみよう

    Vue関数で、新しいVueインスタンスを作成します。

    el の値を'#app' (id属性が 'app' のエレメント)とすることで、<div id="app"> ~~ </div> の範囲にVue関数が使用できるようになります。

    data の値の Object には、エレメント内で使用する変数と値を key: value 形式で記述しましょう。

    今回は、message という変数に "Hello World" の文字列を入れて表示するのでmessage: 'Hello World' となります。

    1const app = new Vue({
    2  el: '#app',
    3  data: {
    4    message: 'Hello World'
    5  }
    6})

    <script> タグで囲って以下のように記述します。

    1<body>
    2  <div id="app">{{ message }}</div>
    3  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    4  <script>
    5    const app = new Vue({
    6      el: '#app',
    7      data: {
    8        message: 'Hello World'
    9      }
    10    })
    11  </script>
    12</body>

    注意点

    Vue.js 関連のスクリプトは、必ずCDNよりあとに読み込むようにしましょう!

    確認

    これでプログラムが完成しました。

    ブラウザで確認して下記のように表示されたらOKです!

    index.html 全文

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <meta charset="utf-8">
    5    <title>Hello Worldを表示するプログラム</title>
    6  </head>
    7  <body>
    8    <div id="app">{{ message }}</div>
    9    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    10    <script>
    11      const app = new Vue({
    12        el: '#app',
    13        data: {
    14          message: 'Hello World'
    15        }
    16      })
    17    </script>
    18  </body>
    19</html>

    第2回へ続く

    ちなみに、ネイティブのJavaScriptで同じように"Hello World"を表示するプログラムを書くと、下記のような記述になります。

    ネイティブのJavaScriptは、Vanilla JS と呼ばれたりもしますね。

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <meta charset="utf-8">
    5    <title>Hello Worldを表示するプログラム</title>
    6  </head>
    7  <body>
    8    <div id="app"></div>
    9    <script>
    10      const app = document.getElementById("app");
    11      const message = "Hello World";
    12      app.innerText = message;
    13    </script>
    14  </body>
    15</html>

    一見すると、「ネイティブJavaScriptの方が記述量が少なくて、わざわざ Vue.js を使わなくてもいいのではないか?」と思いますよね。

    今回は、message で表示するのは "Hello World" の文字列のみ固定の仕様でした。

    では、message の値がユーザからの入力などによって、何度も変更される仕様だとどうなるでしょうか?

    もし、ネイティブのJavaScriptで実装するとなると、データを監視し、その変更に応じてDOMを書き換える処理などが必要になるため、複雑な実装がさらに必要になります。

    Vue.js では、仮想DOMを活用したリアクティブな描画を実装しています。

    そのため、特別な実装をする必要もなく、データの監視や変更を追跡し、その都度DOMに反映することが可能なんです!

    次回以降は、さらに詳しく Vue.js の使い方を見ていきたいと思います!

    次回の記事はこちら

    featureImg2019.11.18【第2回】Vue.js 入門 〜ディレクティブ編〜ディレクティブを使ってみよう!宮田(株) ライトコードの宮田です。前回は、Vueインスタンスを作成し、data に持た...

    こちらの記事もオススメ!

    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事