Vue.jsの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのVue.jsの使い方について現役エンジニアが解説しています。Vue.jsはJavaScriptのフレームワークです。適用する要素、変数や関数の書き方などについて解説します。Jqueryとの違いもサンプルで比較しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのVue.jsの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Vue.jsの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

Vue.js の基本構文

この記事では、JavaScriptのフレームワークであるVue.jsの使い方を確認します。Vue.jsについて、詳しくは公式サイトを参考にしてください。

https://jp.vuejs.org/

また、Vue.jsを使用するにあたっては、 JavaScriptやHTML、CSSの基礎知識が必要となります。併せて確認しておくと良いでしょう。

mozilla.org/ja/docs/Web/JavaScript

Vue.jsを使うにはScriptタグでVueを導入します。

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

 

HTML側のコードは以下のとおりです。

 

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

Vue.js を使ったJavaScriptのコードは、Vueを導入するScriptタグ以降に記述します。

 

var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちは、ビュー(Vue)!'
  }
})

elに書かれた要素配下でVue.jsの機能が有効となります。今回は「#app」と記述しているので、idがappのHTML要素、すなわち「<div id=”app”>?</div>」の中でVue.jsの機能が有効になります。

また「{{ message }}」はMustache(マスタッシュ)構文といい、「{{ … }}」の中でVueのdataオブジェクトや関数を記述することができます。

今回はmessageというオブジェクトを参照しています。ソースコード全体は以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script language="javascript" type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        message: 'こんにちは、ビュー(Vue)!'
      }
    })
  </script>
</body>
</html>

 

実行結果は以下のようになります。「{{ message }}」が「こんにちは、ビュー(Vue)!」に置換されているのが分かりますね。

 

実際に書いてみよう

それでは、もう少し複雑なDOM操作を行うプログラムを例に、 jQueryとVue.jsの違いを比較してみましょう。

今回のサンプルプログラムは、JSONデータを取得してテーブルに表示する例です。JSONデータはサンプルデータ用のサイトから取得しています。

jsonplaceholder.typicode.com

はじめはjQueryのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
</head>
<body>
  <div id="lists"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
  // JSONデータの取得先
  var url = "https://jsonplaceholder.typicode.com/users";

  // 空のテーブルを作成
  var $table = $("<table>");
  // ヘッダーをテーブルに追加
  $table.append(
    $("<thead>").append(
      $("<tr>").append("<th>id</th>").append("<th>name</th>")
  ));
  // 明細をテーブルに追加
  $tbody = $("<tbody>");
  $.getJSON(url, function (data) {
    for (var i=0; i<data.length; i++){
      var $div = $("<tr>");
      $div.append("<td>" + data[i].id + "</td>");
      $div.append("<td>" + data[i].name + "</td>");
      $div.appendTo($tbody);
    }
  });
  // テーブルをDIV要素配下に追加
  $table.append($tbody).appendTo("#lists");
  </script>
</body>
</html>

 

appendやappendToのネストが多く、分かりづらいソースコードになっていますね。

次に Vue.jsで記述した場合です。今回はVue.jsのコンポーネント(テンプレート)という仕組みを使用して実装しています。

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
</head>
<body>
  <div id="app">
    <mytable v-bind:users="users"></mytable>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script language="javascript" type="text/javascript">
  // JSONデータの取得先
  var url = "https://jsonplaceholder.typicode.com/users";

  // テーブルテンプレート
  var myTable = {
    props: {
      users: {
        type: Array,
        requried: true
      }
    },
    template: '
    <table>
      <thead>
        <tr>
        <th>id</th>
        <th>name</th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="user in users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
      </tr>
      </tbody>
    </table>
    '
  };

  var app = new Vue({
    el: '#app',
    components: {
      "mytable": myTable
    },
    data: {
      users: []
    },
    created: function () {
      var vm = this;
      $.getJSON(url, function (data) {
        vm.users = data;
      });
    }
  })
  </script>
</body>
</html>

 

データを取得する部分と、HTMLを表示する部分が分離され見通しが良くなっていることが分かります。実行結果は以下のようになります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。