TECHNOLOGY Minato

Vue.js超入門【Vue.jsの基本的な使い方】

Vue超入門_1

こんにちはMinatoです。

今回は人気のJavaScriptフレームワーク「Vue.js」についてご紹介したいと思います。

本記事は、Vue.jsの細かい点を学ぶというよりも、実際にコードを書くことで、Vue.jsの全体像をなんとなく理解していただくことを目的としています。

本記事は、以下のような初心者の方を対象としています。

本記事が対象とする読者
  • これからWebエンジニアを目指したい
  • jQueryからモダンなフレームワークへ移行したい
  • HTML&CSS&JavaScriptの基本的知識がある

Vue.jsとは

Vue.jsとは、ユーザーインターフェースを構築するためのJavaScriptフレームワークです。

Webアプリケーションを開発をするために必要な機能をまとめて提供してくれる雛形のようなもので、Vue.jsを利用することで開発の効率を上げることができます。

Vue.jsはSPA(Single Page Application)の開発に利用されることが多いです。

SPAとは単一のページでJavaScriptによってコンテンツの切り替えを行うアプリケーションのことです。
従来のWebアプリケーションのように毎回ページ遷移のたびに全ての要素をサーバーから取得し直す必要がないため、パフォーマンスが向上し、より優れたUX（ユーザー体験）を実現できます。

Vue.jsのメリット

Vue.jsのメリットはたくさんありますが、代表的なメリットは以下の通りです。

Vue.jsのメリット
  • 手軽に使い始めることができる
  • 学習コストが低い
  • DOM操作を自動的に行ってくれる

手軽に使い始めることができる

Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。
Vue.jsの導入方法はいくつかありますが、scriptタグで読み込むだけで、利用可能なので、誰でも手軽に利用できます。

学習コストが低い

ReactやAngularなど他にも人気のフレームワークが存在します。

Vue.jsはその中でも学習コストが低く、初心者には特にオススメのフレームワークです。
また、初心者だけでなく多くの有名な企業でも利用されています。

DOM操作を自動的に行ってくれる

JavaScriptのフレームワークや有名なライブラリとして jQuery があります。
jQueryは導入もしやすく、多くのWebアプリケーションで利用されています。

しかし、 jQueryにはDOM操作を自分で行わなければならないなどのデメリットがあり、開発規模が大きくなるにつれ、管理が煩雑になります。

Vue.jsでは、HTML側の要素とJavaScript側のデータやイベントとの関連づけを自動で行ってくれます。
これにより、jQueryよりも簡潔に分かりやすくコードを記述することができ、開発がスムーズに行えるようになります。

Vue.jsの読み込み

ここからは、実際にコードを書きながら、Vue.jsの使い方について学んでいきましょう。

まずはVue.jsの読み込み方法についてご紹介します。

Vue.jsの読み込み方法には、以下のような方法があります。

Vue.jsの読み込み方法
  • CDNから読み込む
  • 直接組み込む（ダウンロードして読み込む）
  • NPM（パッケージマネージャ）を利用してインストールする

本記事は、初めてVue.jsを利用する初心者の方を対象としておりますので、最も簡単に利用を開始できるCDNを用いた読み込みを行います。

まずは以下のような構造でディレクトリとファイルを作成してください。

hello/
　├ index.html
　├ js/
　　├ main.js
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>hello, world</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  </body>
</html>

Vue.jsを読み込む際は、HTMLの</body>の直前に以下の<script>タグを追加します。
今回は、バージョン2.6.12の開発バージョンを読み込んでいます。

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

本番バージョンを読み込むには、以下のようにvue.min.jsとしてください。

開発バージョンと本番バージョンの違いは以下となります。

  • 開発バージョンは、警告・デバッグ出力がある代わりに、スピードが遅い。
  • 本番バージョンは、警告・デバッグ出力がない代わりに、スピードが早い。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>

Vue.jsで「hello, world」を実装する

続いて、Vue.jsを利用して、画面に「hello, world」と表示するプログラムを実装します。
最終的なコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>hello, world</title>
  </head>
  <body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
new Vue({
  el: '#app',
  data: {
      message: 'hello, world'
  }
})

Vueインスタンスの作成

以下の記述がVueインスタンスを作成している箇所です。
中に各種オプションを記述していきます。

new Vue({
  // option
})

ルートテンプレート

テンプレートとは、HTML構文を利用して、描画部分に関する記述を行う要素のことです。
MVCモデルにおけるVに相当する箇所です。

以下のようにid="app"と指定し、Vueインスタンス側で紐付けの設定を行います。
appの部分は任意の値で問題ありません。

<div id="app">
</div>

Vueインスタンスのオプションは、キー: 値のフォーマットで指定します。

Vueインスタンスのelオプションにアプリケーションを紐付ける要素セレクタを指定します。
el: '#app'とすることで、Vue.jsが適用される要素をidがappの要素に指定することができます。つまり、id=”app”配下でVue.jsが有効となります。

new Vue({
  el: '#app'
})

データバインディング

テキストのデータバインディングにより、画面に「hello, world」と表示させます。

データバインディングとは、データと描画を同期する仕組みのことです。

new Vue({
  el: '#app',
  data: {
      message: 'hello, world'
  }
})

最後にindex.htmlに{{ message }}を追加して、値を表示します。
{{}}は、Mustache構文と言い、この部分はデータの値がテキストとして展開されます。

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

ここまで、実装が完了したら、ブラウザでindex.htmlを表示してください。
画面に「hello, world」と表示されていれば、OKです。

まとめ

今回は、Vue.jsの読み込み方法からデータの表示方法までの流れを確認しました。

次回は、条件分岐や繰り返しを行う「ディレクティブ」や「コンポーネント」についてご紹介したいと思いますので、興味がある方は、次回の記事もご確認ください。

この記事が、「面白いな」、「勉強になったな」という方は、ぜひ、SNSでシェアしていただけると嬉しいです。

Vue.js超入門【Vue.jsの基本的な使い方②】

2021年5月28日

RECOMMENDこちらの記事も人気です。