Ne:Code道場~Vue.js 事始め②(基礎的なデータバインド)の巻~


Ne:Code道場~Vue.js 事始め②(基礎的なデータバインド)の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsの基礎的なデータバインドにおける学習ポイントについて紹介します。

目次
  1. はじめに
  2. Vue.jsの簡単なコードが見たいニャ
  3. 紐付ける項目を増やしてみたニャ!
  4. Vue.js内の波括弧の書き方について教えてニャ?
  5. 最後に

はじめに

image この記事ではVue.js事始めその②として、JavaScriptでの書き方と比較しつつ、基礎的なデータバインドの書き方について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのはじめの一歩的内容について理解を深めてゆきましょう。

Vue.jsの簡単なコードが見たいニャ

前回の記事では、Vue.jsの始めの一歩として、利用するにあたっての設定まで確認してゆきました。今回は、簡単なVue.jsのコードを見るところから初めてゆきましょう。
まずHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <!-- ニャ?見慣れない波括弧が書いてあるニャ? -->
  <div id="app">{{ text }}</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

コメントにもありますが、波括弧2つの書き方はVue.jsの書き方になります。
これの意味するものの説明は、JavaScript側を見ながら確認してゆきましょう。

// 【師匠】Vue.jsの初期化が行われているニャ
// 【弟子】この丸カッコの中にVue.jsの設定が書かれるのニャ?
new Vue({
  // 【師匠】Vue.jsを適用する領域をしていしているニャ
  // 【弟子】ニャ!この書き方はCSSのセレクタニャ!
  el: "#app",
  data: {
    // 【師匠】このtextがHTML側で用いられていたものになるニャ
    // 【弟子】なんだか波括弧やコロンの書き方が多いニャ!
    text: "はじめてのVue.jsニャ!"
  }
});

弟子のコメントにあった、波括弧の書き方はこの後取り上げるとして、上記のファイルを実行すると、textに書いてある、「はじめてのVue.jsニャ!」という文言が表示されることを確認できるでしょう。とてもシンプルでスッキリしていますね。
比較として、同様の処理をJavaScriptで書く場合を見てゆきましょう。

// DOMの要素を取得しているニャ
let app = document.getElementById("app");
// その要素に直接表示したい文字を設定しているニャ
app.innerHTML = "はじめてのVue.jsニャ!";

行数レベルではこちらの方が少なくなるかも知れませんが、それはこのサンプルコードがとてもシンプルだからです。ただ、この時点で気づけるポイントとして、Vue.jsを用いないJavaScriptで書く場合は、代入(=)が行われているが、Vue.jsの方は代入の記載が無いという点を確認できるでしょう。
では少しVue.jsの書き方に変更を加えてみましょう。
image

紐付ける項目を増やしてみたニャ!

最初の例では、textのみ紐付けるものとして用意していました。ここでは、それにあわせてtitleを追加しています。まずHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- 今回の例では要素が増えているニャ! →
    <!-- でも、書き方は最初のtextと同じ、シンプルな書き方だニャ♪ -->
    <h1>{{ title }}</h1>
    <p>{{ text }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

特にid属性などが増えることは無く、idがappとなっているdiv要素の中に波括弧2つの書き方が増えていることを確認できますね。
Vue.jsの設定を行っているJavaScript側の変更もシンプルです。コードで確認してゆきましょう。

new Vue({
  // ニャ!この書き方はさっきと変わらないニャ!
  el: "#app",
  data: {
    // dataの中身が増えているニャ!
    // HTML側と同じで、元のtextの書き方と同じ、シンプルな書き方だニャ♪
    title: "見出しだニャ!"
    text: "はじめてのVue.jsニャ!"
  }
});

これをもしも、Vue.jsではなく、JavaScriptだけを用いて書く場合は、HTMLのh1やpを識別するためにid属性を追加したりなどして、h1、pそれぞれをDOM要素として取得し、値を設定してゆく必要がありますね。
Vue.jsでは、dataの中の変数を経由して値を設定してゆくので、HTML側に余計な属性などを設けなくても、容易に値を渡すことができるのですね。
image

Vue.js内の波括弧の書き方について教えてニャ?

この波括弧の書き方は、JavaScriptのオブジェクトの書き方になります。
Vue.jsはフレームワークとして、システム作成時の土台に用いますが、あくまでそこで記載する言葉はJavaScriptをベースにしていますので、どこまではVue.jsの書き方で、どこはJavaScriptでも同様の書き方になるのかを意識しながら書いてゆくと、より深く理解してゆくことが可能になります。
 
オブジェクトの書き方の基本的な文法は「{ key : 値 }」となり、keyと値をワンセットで保持することができる書き方です。複数のkey: 値を組み合わせる場合は、配列の時と同様、カンマを用います。
 
サンプルコード内では、大きく2つのオブジェクトを書いているのが確認できますね。
一つは、①new Vue()の引数に渡しているもの。

{
  el: "#app",
  data:  // 一旦ここは省略ニャ
}

もう一つは、②dataの値として設定しているもの。

{
    title: "見出しだニャ!"
    text: "はじめてのVue.jsニャ!"
}

まず、①については、Vue.jsの初期化時に渡す情報なので、keyはVue.jsの方で用意しているものを、それぞれの用途にそって利用してゆく必要があります。
ここでは、elにはVue.jsを適用する範囲を指定し、dataはHTML側に表示したい値を設定してゆきます。
例えば、elの部分をelementと変えた場合は、Vue.jsの適用範囲が正しく指定されなくなり、結果動作しなくなっていることを確認できるでしょう。
(他にもいろいろなkeyとして設定できるものがありますが、それはこの後の記事を通じて少しづつ確認してゆきましょう)
 
そして②のdataの中に記載するオブジェクトは、keyも、その値も自由に作成することができます。dataの値には、オブジェクトを渡しさえすれば、そのオブジェクトの中身は好きに作ることができるというのが特徴です。
(この箇所について軽微な補足事項がありますが、それは最後に猫師匠が簡単に取り上げる予定です)
なので、今回の例では、textやtilteのように好きな名前をkeyに設定し、それぞれに値を設けました。後は、HTML側から、keyに記載した文言と同じものを{{}}の中に書くことで、紐付けが完成します。
なので、例えばtextをmessageに変えたいと思った場合は、JavaScriptファイル、及びHTMLファイルの両方を変更すれば、変更前と同じ様に動作することを確認できるでしょう。
image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

Vue.js事始めについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. Vue.jsを用いてゆくときの初期設定は、new Vue()からニャ
    1. 記事内では初期化処理と簡単に補足したニャ
    2. 厳密に言うと、Vueのコンストラクタを実行して、インスタンスを生成しているニャ(ここであげられている横文字は別の記事で補足してゆくニャ~)
  2. new Vue()の引数にVueの設定情報を渡すニャ
    1. elに指定した範囲がVueの管轄下になるニャ
    2. dataに書いてあるものをHTMLに設定してゆくことができるニャ(このことはバインドと言うニャ)
    3. dataの値の書き方は、Vueを拡張してコンポーネントをしっかり作るようになると、少し書き方変わってくるニャ(心の片隅に留めておくニャ)
  3. JavaScriptのオブジェクトの書き方を確認したニャ
    1. keyと値をペアで保持することができる書き方ニャ
    2. 配列と書き方レベルではよく似ているニャ。配列は角カッコで、オブジェクトでは波カッコを用いるニャ。複数のものがある場合はカンマで区切るのは同じニャ
    3. オブジェクトを書く場合に、Vue.jsのルールに則って書く必要がある箇所や、dataの値の様に好きに書くことができる部分があるなどの違いを取り上げたニャ

Vue.jsの記事最初の2つ目として、Vue.jsの基礎的なデータバインドについて学びました。見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp