これまでフロントエンドというかSPAは触り程度しか経験なかったので、仕事で本格的に導入する前の勉強としてvueに触れてみようと思う。なるべくサンプルコードと思考の過程を言語化してみる。
私の経歴としては、古くはASPやJScriptだったり、JavaやJSP、JavaScriptで業務系webアプリの開発が一番経歴の中で長い。他にも.net系やSalesforceやAWSやAzureのAPIやらサービス使ってゴニョゴニョしたりしてきた。
なお、今回は Visual Studio Code の利用を前提としておきます。（拡張機能の Live Server があるとコード書きながら動作確認する手間がだいぶ省けるので）
はじめに
公式のガイド（https://v3.ja.vuejs.org/guide/introduction.html）にザっと目を通す。
最初にHelloWorldを試す。HTMLファイルを新規作成して、インストール（https://v3.ja.vuejs.org/guide/installation.html）のページにあるCDNを利用してVueを利用できるようにscriptタグを挿入しておく。
study01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue3 Study01</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
</body>
</html>次にJSファイルを作成。メッセージ ”Hello World” を data として持つVueオブジェクトを定義して、id が app の divエレメントにマウントするように定義する。
study01.jp
const HelloWorldApp = {
data() {
return {
message: "Hello World"
}
}
}
Vue.createApp(HelloWorldApp).mount('#app')HTMLに id が app の divタグを追加して、メッセージを出力するように中括弧二つで囲った命令文を記述する。
study01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue3 Study01</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./study01.js"></script>
</body>
</html>ブラウザで動作チェック。message にセットした文字列が表示されることを確認。
ここまでは 宣言的レンダリング の例。次にもう少しVueっぽいことをしてみる。
mounted を試す
Vueインスタンスに mounted を追加して、１秒（1,000ミリ秒）ごとにカウントアップしてみる。
study01.js
const HelloWorldApp = {
data() {
return {
message: "Hello World",
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(HelloWorldApp).mount('#app')HTMLにカウンターを表示するように追記する
study01.html
HTMLにカウンターを表示するように追記する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue3 Study01</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }} : {{ counter }}
</div>
<script src="./study01.js"></script>
</body>
</html>ボタンをクリックすると message を alertで表示することができた。
とりあえず、今回はここまで。
0 Comments