こんにちは、Ryohei(@ityryohei)です!

本記事では、Vue.jsの利用準備からアプリの実行までをご紹介しています。

これからVue.jsを始めようと思うんだけど、どこから始めればいいの?

上記の疑問にお答えします。

では、解説していきます。

Vue.jsを利用するための準備

Vue.jsを始める最も簡単な方法は、CND経由でライブラリ(Vue.js本体)を読み込む方法です。小規模なアプリケーションであれば、下記のライブラリを読み込むだけでVue.jsをすぐに始めることができます。

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

srcの値にある@2.6.12はVue.jsのバージョンになります。本記事の投稿時点では2.6.12が最新バージョンになります。

Vue.jsはコンテンツの後に読み込む必要があるので、コンテンツの後に読み込むように記述します。

<body>
    <!-- メインコンテンツ -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="/path/to/js/app.js"></script>
</body>

以上でVue.jsの利用準備は完了です。続いて簡単なアプリを実行してみたいと思います。

Vue.jsのアプリを実行する

入門編ということで、今回は「Hello World」という文字を出力するアプリを作成してみます。任意のフォルダを作成して、ファイルを2つ設置します。

  • app.html
  • app.js

ファイルにはそれぞれ下記の内容を記述しましょう。

HTML

//app.html

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="/path/to/js/app.js"></script>
</body>

JS

//app.js

const app = new Vue({ // 1
   el: '#app', //2
   data: { // 3
      message: 'Hello world'
   }
});

CDNで外部からファイルを読み込んでいるため、インターネットにアクセスできる環境で「app.html」をブラウザで開いてみてください。ブラウザ上に「Hello world」と表示されているかと思います。

補足

Vue.jsはVueクラスをインスタンス化することで起動(マウント)します。

new Vue({...})

インスタンス化のタイミングでVueクラスのコンストラクタが走り、引数に指定したオプションによってページ上の要素がVue.jsに置き換えられます。この置き換え処理があるため、ライブラリやVue.jsのスクリプトはコンテンツより下に記述する必要があるわけですね。(HTMLファイルは上から順に内容が読み込まれるため)

ちなみに下記は上でご紹介したスクリプトの番号箇所で実行している内容です。

  1. Vue.jsをインスタンス化する
  2. Vue.jsを適用する要素を指定する
  3. データオブジェクトを指定する

「1」と「2」はそのままですね。インスタンス化してVue.jsでお置き換える要素を指定します。

データオブジェクトというのは、Vue.jsで使用する値を格納したオブジェクトです。プロパティ-名と値の組み合わせで指定します。

データオブジェクトはテンプレート(HTML)からもアクセス可能で、上記の例では{{ message }}でデータオブジェクトのプロパティ-名を囲むことで値を参照しています。これをMustache構文(マスタッシュ構文)と言います。

データオブジェクトを参照したり割り当てたりすることを「データバインディング」というのですが、長くなるので別の記事で改めてご紹介したいと思います!

Vue CLIについて

Vue.jsで中規模以上の本格的な開発を行う場合はテンプレートの生成からビルドまで管理することができるVue CLIを導入しましょう。ただ勉強中であったり小規模なアプリケーションであれば、まずはCDNでVue.jsの基礎を身に着けて、Vue CLIを用いた開発にシフトしていただければと思います。私もまずはCDNでしっかり基礎を身に着けてからVue CLIに移行したいと思っています。

最後に

Vue.jsの入り口に立った気分はどうでしょうか。

私はというと、Vue.jsは1年前くらいに少し触った程度だったのですが、来期はどうやらVue.jsの案件が入ってくるらしい!なので事前に予備知識として何らかのアプリケーションを作りたいところですが、亀よりは少し早いくらいの速度で少しずつ進めていきたいと思います。

以上、Vue.jsで利用準備からアプリの実行までのご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。