まるわかり!Vue.jsの導入と基本的な 使い方!

カテゴリ

Vue.jsをWebサイトで使うときに、私が引っ掛かったポイントを含め、導入方法と基本的な使い方をご紹介します。本記事は、Vue.js 2についての記事になります。

HTML/CSSを学び、JavaScriptへの理解がある、マークアップエンジニアやデザイナーが対象です。

Vue.jsの導入方法

Vue.jsの導入方法イメージ

Vue.jsの導入方法はいくつかありますが、ダウンロードしたVue.jsのファイルを、scriptタグで読み込むこともできます。公式ドキュメント(https://jp.vuejs.org/v2/guide/installation.html)から、ファイルをダウンロードして、ファイルを設置後、scriptタグを使って読み込んでください。

Vue.jsのファイルは、開発バージョンと本番バージョンがあります。バージョンによる違いがありますので、用途に合わせて読み込んでください。

開発バージョン

  • 警告出力とデバッグモードあり
  • デベロッパーツール有効
  • スピードが遅い
  • コンソール上に、「Vueを開発モードで実行」と英語で表示

本番バージョン

  • 警告出力とデバッグモードなし
  • デベロッパーツール無効
  • スピードが速い

デベロッパーツールを導入しましょう

Vue.jsデベロッパーツールを使用すると、インターフェース上で、どんなデータを持っているかなどがリアルタイムで監視できるため、インストールしておくことをお勧めします。
Google Chromeの拡張機能で、「 Vue.js devtools 」というデベロッパーツールがあります。導入後、開発者ツールのタブに「 Vue 」という項目が追加されます。

対応ブラウザの拡張が必要なケースがあります

Vue.jsは、Internet Explorer 9(IE9)以降のブラウザに対応しています。
ただコンパイルしない(CDNやscriptタグで、そのままVue.jsを読み込む)場合、IEでエラー発生することがありますので注意しましょう。

公式ドキュメントは、ES2015(IEがサポートしていない記法)が含まれているため、エラーの際は、読み込める記述になっているか確認しましょう。

よくあるエラー例

エラーの例イメージ

上記画像のエラーは、ES2015の関数を省略した記述でかかれているためエラーになっています。対応ブラウザにIEも含まれている場合、開発者ツールのコンソール上にエラーが出ていないか確認しておきましょう。
※polyfilll.io を使っていた場合でも、アロー関数がサポート外のためエラーになります。

上記のエラーは、省略記述を下記のように変更することで対応できます。

変更前のコード

mounted() {
  // 処理
}

変更後のコード

mounted: function() {
  // 処理
}

Vue.jsの基本的な使い方

準備ができましたら、次に基本的な使い方を見ていきましょう。
こちらは最もシンプルなVue.jsを使った記述です。

HTML

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

JavaScript

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

ブラウザで確認すると、「 Hello Vue! 」と画面に表示され、Vue.jsを動作させることができました。
以下は、オプションと呼ばれていて、それぞれ意味を持っています。

  • el: ‘#app’
  • data: { message: ‘Hello Vue!’}

オプションの説明

オプションを、一つずつ見ていきましょう。

{
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
}

el

elは、どのHTML要素にVueを適用するか指定するものです。「id="app"」 に紐づけるように指定しているため、#appとその子要素に対して、Vueが適用されます。

data

dataは、インスタンスがどのようなデータを持つのか指定します。今回はmessage という名前のデータを持っていて、画面に表示しています。

テンプレート構文について

HTML側を見てみると、{{message}}と記載されています。
この記述で、dataのmessageというデータを表示しています。

これはマスタッシュ構文と呼ばれる書き方です。
二重波カッコで囲い、データの名前を指定することで、値を画面表示できます。
この構文が適用される範囲は、elで指定した要素内に限定されています。

また、データを書き換えることで、リアルタイムに画面反映されます。
たとえば、ユーザーアクションが起こったときに、データを書き換えることで、画面表示されている文章を書き換えることができます。

まとめ

今回は、2つのオプションについてご紹介しましたが、他にも様々なオプションがあります。
よく使うオプションを覚えることで、Vueが扱いやすくなってくると思います。
公式ドキュメントなどでどのようなオプションがあるか見ていくと、他に何ができるのかわかるのでご覧ください。
ご紹介した内容をまとめると下記の4つです。

  • Vue.jsは簡単に導入が可能
  • デベロッパーツールを使うことで、デバッグ・調査のサポートができる
  • 対応ブラウザはIE9以降だが、IEでは注意が必要
  • オプションを渡すことで、どのように処理を行うか操作ができる

Vue.jsは、シンプルな作りで、覚えることもそこまで多くないので、挑戦してみてください。
快適な開発ライフを目指していきましょう!

Share on

お問い合わせはこちら

クーシーの制作実績

すべての制作実績をみる

システム開発に役立つ記事はこちら

カテゴリ一覧

COOSY BLOG TOP