【 Vue.js 】逃げてたけどやってみたら簡単だった ♯１　FIREへの旅路 ♯427

S.A.P.Studio

2022年6月6日 18:13

今回から数回に渡り、Vue.jsを学習したいと思います。

私自身が、学びながら、書きますから、
初学者が疑問に思うことを、フォローできると思います。

共に、学びましょう！！

【 Vue.js 】

VueはJavaScriptのライブラリです。
jQueryなどと同じものです。JavaScriptを簡単に扱いやすくしたものという理解で良いでしょう。

何ができるのかを、具体的に見ていきます。

◆ できること　#1 要素を置き換える ◆

このように、{{ message }} が「メッセージ」に置き換わりました。
このコードがこちら

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <div id="app"><!-- ① id名を "app" にする -->
    {{ message }}<!-- ② 　{{ }} 中カッコを二重して囲む -->
  </div>


  <!-- ③ 　VueのCDNを貼り付けて、Vueを使えるようにする -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


  <!-- <　④　script>タグで囲んでVueのコードを書く -->
  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が"メッセージ"に置き換わる
      }
    });
  </script>
</body>

</html>

▶︎ コード解説

コメントアウトの番号順に解説します。

① id名を "app" にする

  <div id="app"><!-- ① id名を "app" にする -->
    {{ message }}<!-- ② 　{{ }} 中カッコを二重して囲む -->
  </div>

HTMLのコードです。
Vueを機能させたい箇所に、ID名を指定します。
"app"という名前にするという決まりがあります。

② {{ }} 中カッコを二重して囲む

  <div id="app"><!-- ① id名を "app" にする -->
    {{ message }}<!-- ② 　{{ }} 中カッコを二重して囲む -->
  </div>

今回は、{{ message }}　としています。
このように、二重になった中カッコを、マスタッシュと呼びます、
口髭の意味ですね。マリオのような髭のことです。

このマスタッシュで囲んだ要素を、Vueで指定して制御することができます。

③ VueのCDNを貼り付けて、Vueを使えるようにする

 <!-- ③ 　VueのCDNを貼り付けて、Vueを使えるようにする -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Vueを使うために、CDNを使います。
サイトから最新版をコピペしましょう。

2022年6月時点はこちら

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

CDNをコピーして貼り付けます。

④　<script>タグで囲んでVueのコードを書く

<!-- <　④　script>タグで囲んでVueのコードを書く -->
  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が""メッセージ"に置き換わる
      }
    });
  </script>

VueはJavaScriptのライブラリですから、JavaScript同様に、
<script>タグ内で動きます。

⑤　 Vueのインスタンスを作る

  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が"メッセージ"に置き換わる
      }
    });
  </script>

インスタンスを作るという意味がよくわかりませんね。

この辺りは、オブジェクト思考という非常に何とも説明できない思考を理解する必要があります。（私もわかっていません。笑）

しかし、
スマホが動く仕組み・理論を知らずとも、
スマホを使いこなせれば良いのです。

なので、理解だけしておきましょう。

まず、Vueというクラス（設計図）があり、
そのクラス（設計図）を元に、作った実体＝インスタンスです。
そして、この両方を意味するのが、オブジェクトです。

・・・・まだ、よくわかりませんね。

このようにイメージしましょう。

クラス：スマホ
インスタンス：iPhoneSE、iPhone13、iPhone13Pro
オブジェクト：携帯電話

スマホという設計図（クラス）があり、
それをもとに、作れるものは、
iPhoneなどの様々なスマホ実機（インスタンス）で、
その両方を指すのが、携帯電話（オブジェクト）である。

「new Vue」と書くことで、
Vueの設計図を使った、新しい実体＝実例を作ります
と、宣言しているということです。

⑥ elはelementの略 Vueの効果範囲を指定

  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が"メッセージ"に置き換わる
      }
    });
  </script>

el は elementの略です。
elementは要素などの意味の単語です、
ここでは、「どの要素にVueを効かせるのか」を指定しています。

今回のコードでは、#appにVueの効果を指定するということです。
#appとは、HTMLコードの<div id="app">のことですね。

⑦　dataの中にVueで扱うデータを定義する

  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が"メッセージ"に置き換わる
      }
    });
  </script>

data { } の中で、Vueで扱うデータを定義していきます。

⑧ 　messageを"メッセージ"と定義するこれで、{{message}}が"メッセージ"に置き換わる

  <script>
    var app = new Vue({  //　　⑤　 Vueのインスタンスを作る 
      el: "#app",     //　　⑥　elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //　　⑦　dataの中にVueで扱うデータを定義する 
        message: "メッセージ"  //　　　⑧ 　messageを"メッセージ"と定義する これで、{{message}}が"メッセージ"に置き換わる
      }
    });
  </script>

今回の場合は、マスタッシュで囲んだ、
「message」を、"メッセージ"と定義しています。

HTMLファイルをブラウザで開くと、
{{ message }}　の部分が、メッセージと表示されます。

【まとめ】

今回は、Vueを使って、要素を置き換えるコードを学びました。

何かを置き換えて表示するという実装が非常に簡単にできることがわかりました。

これを、如何に応用して、WEBサイトの制作に使うかがポイントですね。

次回以降は、さらに細かい指定を見ていきます！！

この記事が気に入ったらサポートをしてみませんか？

【 Vue.js 】 逃げてたけどやってみたら簡単だった ♯１ FIREへの旅路 ♯427

【 Vue.js 】

◆ できること #1 要素を置き換える ◆