Vue3の基本的な仕組み
こんにちはあっくんです。 朝起きたら、必ずやることに祈りと筋トレをいれています。一日の自分の源になっています。そして、祈りと筋トレはサボりやすくやるまでにエネルギーが必要なので、朝起きたらすぐにするというif then ルールを使っています。今日は、Vue3の基本的な仕組みです。
基本コードをチェックしよう
index.htmlファイルを１つだけのVue3アプリケーションを使って基本を覚えていきましょう。
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h1>Vue3</h1>
<div id="app">
{{message}}
</div>
<script>
const appdata = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(appdata).mount('#app')
</script>
</body>
</html>Code language: HTML, XML (xml)
Vue3が利用する2つの部分
Vue3が利用する部分を取り出すと、↓の2つの部分になります。
表示のためのタグ {{message}}
Vue3のスクリプト
Vue3の基本的な考え方は「JavaScriptのスクリプトを使って、HTMLのタグを操作する」というものです。したがって、Vue3は「スクリプトの部分」と「操作する表示の部分」の2つの部分が必ず用意されます。
表示の部分について
<div id=”app”>というタグはid=”app”のIDなどを使って操作の対象のタグを指定します。
HTMLにある{{message}}という表示は「messageという名前の値がここに埋め込まれている」と考えましょう。
Vue3の基本コードについて
const appdata = {
data() {
return {
message: 'Hello Vue!'
}
}
}Code language: JavaScript (javascript)data()はVueのオブジェクトで使われる値をまとめて扱うための特別な役割を持った関数です。中で必要な値をreturnすることで、その値を持つオブジェクトと同じような役割を果たします。
アプリケーション・オブジェクトを作成し、マウントする
このuppdata定数は、Vue3で作成されるオブジェクトで利用するデータとなるものです。Vue3のオブジェクトを作成してHTMLの中に組み込みます。
Vue.createApp(appdata).mount('#app')
VueとういうのがVue3のオブジェクトです。Vue3の処理はこのVue3オブジェクトにあるメソッドなどを利用して行います。
ここで「createApp」メソッドでアプリケーションとなるオブジェクトを生成しています。
変数 = Vue.createApp(データ)
引数にデータを扱うオブジェクトを指定します。先程appdata定数に作成したものです。こうしてアプリケーションが生成されたら、そこから「mount」メソッドを呼び出して、指定のエレメントにアプリケーションをマウントします。
アプリケーション.mount(ルートコンテナ)
mountの引数にしてするルートコンテナはVue3のアプリケーションを割り当てられたHTMLです。ここでは’#app’という値はid=”app”の要素の値です。
CSSセレクタについて
この’#app’という値はCSSセレクタと呼ばれるものです。スタイルシートで使われているもので、タグ名やID、クラス名などを使って対象となるタグを指定するものです。
データの橋渡し
createAppの引数message:’Hello Vue!’は{{message}}の部分に置き換えれます。createAppのデータで用意したオブジェクトのdata関数でreturnされている値はそのまま対象となるタグ内の{{}}で指定された部分に当てはめられます。
Vue3のデータは活きている
Vue3による値の設定は表示されだけではなく、その値はリアルタイムにチェックされ、常に状態が保持されているのです。
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h1>Vue3</h1>
<div id="app">
{{message}}
</div>
<script>
const appdata = {
data() {
return {
message: 'Hello Vue!',
count:0
}
},
mounted() {
setInterval(() => {
this.count++
this.message = 'Count:' + this.count
}, 1000)
}
}
Vue.createApp(appdata).mount('#app')
</script>
</body>
</html>Code language: HTML, XML (xml)
↑は時間の経過とともに「Count:○○」という数字が増えています。Vue3では表示された値は、変更されると表示も更新されます。こうした機能を「リアクティブ」と呼ばれています。
mountedについて
mountedはVue3オブジェクトがWebページに組み込まれた際に実行される処理を用意するものです。
mounted() { ….処理…. }
今回の処理は↓のようになっています。
setInterval(() => {
this.count++
this.message = 'Count:' + this.count
}, 1000)Code language: JavaScript (javascript)「setInterval」はJavaScriptの関数で、一定時間ごとに処理を実行するためのものです。いわゆるタイマーです。
setInterval(関数, ミリ秒)
ここでは、countとmessageの値を変更する処理を行っています。
this.count++
this.message = 'Count:' + this.countCode language: JavaScript (javascript)これで、{{message}}の部分も更新されます。
データのアクセス
データの作成
data() {
return { ○○ : 値
}Code language: JavaScript (javascript)データのアクセス
変数= this.○○
this.○○ = 値Code language: JavaScript (javascript)アロー関数について
アロー関数の記述
() => {….処理….}
JavaScriptの関数の記述
function 関数名 (引数) {….処理….}
値として関数を用意する場合は関数名を省略できます。
function (引数) {…..処理….}
この書き方をさらに短くしたのがアロー関数です。
(引数) => {….処理….}
タイマーを停止する
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h1>Vue3</h1>
<div id="app">
<p>{{message + "[" + new Date().toLocaleString() + "]" }}</p>
<hr />
<button onclick="doAction()">Stop</button>
</div>
<script>
let timer = null;
function doAction() {
clearInterval(timer);
}
const appdata = {
data() {
return {
message: "",
};
},
created() {
this.message = "Hello Vue!";
this.count = 0;
},
mounted() {
timer = setInterval(() => {
this.count++;
this.message = "Count:" + this.count;
}, 1000);
},
};
Vue.createApp(appdata).mount("#app");
</script>
</body>
</html>
Code language: HTML, XML (xml)
タイマーとclearInterval
let timer = null
function doAction() {
clearInterval(timer)
}Code language: JavaScript (javascript)timerにはtimerのIDを保管します。doActionでは、「clearInterval」という関数をつかってタイマーを停止します。このdoActionは、ボタンをクリックすると呼び出されます。
onclickはクリックしたときに呼び出す処理を指定するもので、doActionを実行しています。これでタイマーが停止します。
createdで初期化する
created() {
this.message = 'Hello Vue!'
this.count = 0
}, Code language: JavaScript (javascript)createdは、アプリケーション・オブジェクトが生成された際に実行される処理です。さきほどのmountedはオブジェクトを組み込んだときの処理です。createdオブジェクトが生成された時の処理なので、こちらが先に実行されます。
createdは、アプリケーション・オブジェクトの初期化を行うのに用いられます。ここで、値を初期化しておきmountedでタイマーを実行しています。
なぜ、countはdataになくてもいいの？
画面に表示されているかどうかの違いです。つまり、dataでreturnされる値は、画面内に{{}}で埋め込まれており、表示を更新する必要があります。messageは表示を更新する必要があります。countは内部的に数字をカウントしているだけで画面に表示されていません。なので、dataにcountを置く必要がないのです。
必要なものはすべて内部に用意する！
「Vue3で使うものは、すべて『マウントした要素』内になければならない」 つまり、マウントした要素というのはcreateApp.mountで組み込み先に指定したHTML要素のことです。ここではmount(#app)のです。
{{}}は値だけじゃない
{{}}はJavaScriptの式を記述することもできます。
{{message.toUpperCase() }}
↑countが大文字なっています。
計算結果を表示する
{{}}の部分に↓のように記述します。
{message + "[" + new Date().toLocaleString()"]"}} Code language: JavaScript (javascript)
↑現在の日時を表示します。
ただし、記述できるのは１つの式にまとめれるものだけです。
ここまで読んでいただいてありがとうございます。
掌田津耶乃さんのVue.js3超入門で勉強をしています。語りかけるような文章ですごいわかりやすいです。
