Vue.jsを学び、実践する
仕事の都合でVue.jsを扱うことになりそうなので、これから勉強していこうと思います。
恥ずかしながらVue.jsはほとんど触ったことがないため、基礎の基礎から学んでいこうと思います。
前提事項および注意事項
こちらの記事を書いていくにあたり、事前の注意事項として、
・筆者はVue.js初心者のため、用語や理解が曖昧で内容に誤りがある可能性がある
ということをお伝えしておきます。こちらについてはご了承いただければと思います。
( = 厳密な情報を得たいという場合、書籍や公式のリファレンスを参照するのが良いかもしれません)
また、Vue.jsのバージョンとしては、2023/4/23時点で最新バージョンである 3.2.47を使用していこうと思います。
参考:JSDELIVRのVue.jsのページ
https://www.jsdelivr.com/package/npm/vue
CDN版とビルド版
Vue.jsはCDNを取得してそれを使用するCDN版と、.vue形式のファイルに全ての情報を記載するビルド版の2種類があります(という理解です)。
ここでは、
・ひとまず慣れるまではCDN版を使う
・高度なことができるようになってきたらビルド版に移行する
としていきたいと思います。
Hello worldしてみる
まずは定番のHello worldをしてみようと思います。
ソースコードと結果イメージ
いきなり結論ですが、htmlファイルを以下のように記載することでHello worldできました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>my vue hello world</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
<script type="module">
const { createApp } = Vue;
createApp({
data(){
return {
message: 'Hello World!'
}
}
}).mount('#app')
</script>
</body>
</html>
こちらのhtmlファイルをブラウザで開くと以下のような感じになります。
![](https://media.igarashisant.com/wp-content/uploads/2023/04/vuestudy01_01-1024x714.png)
簡単な解説
scriptタグ内にてcdnを使用してvueを読み込んでいます。
これによって後続のscriptタグ内で”Vue”を呼び出すことができます。
2個目のsciprtタグではtype=”module”を付与することでVueのモジュールの定義を行うことができます。
ここでは、Vue内の”createAppを呼び出し、データとして”message”の値を定義後に”#app”にマウントしています。”#app”はid=”app”と解釈できます。これはcssのセレクタの記述の仕方と同じですね。
で、遡る形になりますが、bodyタグ内の”<div id=”app”>”がこのマウントを受ける形になります。
“{{ xxx }}”はマスタッシュ(mustache)構文と呼ばれています。createAppにて定義されたデータがバインディングされます。この例においては、”message”に”Hello World!”が定義されているため、この”Hello World!”がセットされるということになります。
このあたりのデータ紐付けの仕組みがVue.jsのミソとなりそうです(※私の予想です)。
まとめ
今回はVue.jsのHello worldを実施しました。
マスタッシュ構文を利用し、js側にて設定した値をhtmlの方に反映することができる、というように理解しました。
引き続き学習を続けてさらに理解を深めていきたいと思います。
参考URL
クイックスタート | Vue.js
Vue アプリケーションの作成 | Vue.js
VueのCDN版を使おう – やわらかVue.js