1.はじめに。
今回は、Vue解説第三弾でVue.jsの基本的な操作のうちscriptの部分に記述する部分をいくつかまとめていきます。
2.基本的な書き方
Vueコンポーネントに関する説明を第一弾の方に追記しました。
概要
<template>
<!-- HTMLを書く場所：画面に表示する内容 -->
</template>
<script>
// 今回はこちらの中に書くことをまとめていきます。
export default {
// JavaScriptを書く場所：動きやデータの処理を書く
};
</script>
<style>
/* CSSを書く場所：見た目のデザインを設定 */
</style>
今回は下記の概念についてまとめていきます。
| 項目 | 説明 |
|---|---|
| data() | この部品（コンポーネント）が持ってるデータ（数字や文字） |
| methods | この部品にどんな操作を加えられるか（ボタンを押すと何が起きるか） |
| computed | 部品の中のデータから自動的に計算される値 |
| watch | 部品の中のデータが変わった瞬間の動き |
3.解説
①data()
data()とは、Vueコンポーネント内で使うデータの「初期状態（初期値）」を定義する場所です。
たとえば、カウントの数字やフォームの入力値など、画面に表示したり処理に使ったりする変化するデータはここに書きます。
＜基本的な書き方＞
// data()の中に「カウント」用の変数（count）を用意している
data() {
return {
count: 0
};
}
＜テストコード＞
<template>
<div>
<h2>カウント：{{ count }}</h2>
<!-- ボタンをクリックするとcountが1増える -->
<button @click="count++">1増やす</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
}
};
</script>
最初に表示されるのは、data内にあるcountの変数の値を見るため、「カウント：0」で表示されます。
ボタンをクリックすると count++ によりcountの値が増えていくため、「カウント：1」「カウント：2」…と変化します
②methods
methodsとは、Vueコンポーネントでイベントに応じて実行したい処理（関数）を書く場所です。
ボタンを押したとき、データを加工したいときなどに使います。
＜基本的な書き方＞
methods: {
関数名() {
// 実行したい処理を書く
}
}
＜テストコード＞
<template>
<div>
<h2>カウント：{{ count }}</h2>
<!-- ボタンをクリックでaddCountメソッドが実行される -->
<button @click="addCount">1増やす</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
addCount() {
this.count++;
}
}
};
</script>
最初に表示されるのは、data内にあるcountの変数の値を見るため、「カウント：0」で表示されます。
ボタンをクリックすると addCount() が呼ばれ、countの値が増える処理が実行されるため、「カウント：1」「カウント：2」…と増加します
③computed
computedとは、Vueで使う 「計算された値」を定義する場所 です。
dataの値を元にして、自動的に計算してくれる（処理結果を出してくれる）便利なプロパティです。
＜基本的な書き方＞
computed: {
新しいプロパティ名() {
return 計算式;
}
}
🔍methodとの違い
methodとの違いは「 人が何もしなくてもdataの値の変更を検知して、自動的に処理結果を出してくれる 」という点です。
たとえば、以下のようなケースを考えてみましょう。
- 名前の「姓」と「名」がある（firstName と lastName）
- この2つを合体させて「フルネーム」にしたい（fullName）
これを画面で表示するとします。
たしかに、下記のように methods で合体させてもできますが…
methods: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
これだと、毎回呼び出さないと更新されないため、手間がかかりますし、毎回firstNameとlastNameデータを読み込んで処理を行う必要があります。
そこで、出てくるのがcomputedです。
＜テストコード＞
<template>
<div>
<h2>firstName：{{ firstName }} </h2>
<h2>lastName：{{ lastName }}</h2>
<h3>フルネーム（computed）：{{ fullName }}</h3>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "山田",
lastName: "太郎"
};
},
computed: {
fullName() {
return this.firstName + " " + this.lastName;
}
}
};
</script>
初期表示では firstName と lastName を組み合わせた「フルネーム」が表示されます
firstName または lastName を変更すれば、何もしなくても自動で fullName が更新されます
④watch
watchとは、Vueの特定のdataやcomputedの値が変化したときに処理を実行する機能です。
フォームの値が変わったときに何か処理をしたい場合などに使います。
＜基本的な書き方＞
watch: {
監視したい変数名(newVal, oldVal) {
// 値が変わった時に実行する処理
}
}
🔍computedとの違い
computedとの違いは値そのものを更新するか、値の更新に基づき別の処理を実行（API呼び出し、ログ出力、他の変数の更新など）するか です。
<template>
<div>
<h2>watch と computed の違い</h2>
<input v-model="num" type="number" />
<p>元の値: {{ num }}</p>
<p>computed 値（numの2倍）: {{ doubleComputed }}</p>
<p>watch 値（numの2倍、watchでセット）: {{ doubleWatched }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
doubleWatched: 0
};
},
computed: {
doubleComputed() {
// numの2倍を計算して返すだけ
return this.num * 2;
}
},
watch: {
num(newVal) {
// numの更新に合わせてdoubleWatchedの値を更新する
this.doubleWatched = newVal * 2;
}
}
};
</script>
computedの場合はnumの値を2倍して返すだけですが、watchの場合はnumの更新に合わせて、doubleWatchedの変数の値を2倍に更新する処理を行っています。
＜テストコード＞
<template>
<div>
<input v-model="keyword" placeholder="文字を入力してください" />
<p>入力内容：{{ keyword }}</p>
<p>ログ：{{ log }}</p>
</div>
</template>
<script>
export default {
data() {
return {
keyword: "",
log: ""
};
},
watch: {
keyword(newVal, oldVal) {
this.log = `入力が変わりました：「${oldVal}」→「${newVal}」`;
}
}
};
</script>
keyword に文字を入力するたびに watch が発火し、変更内容を log に記録します
たとえば「abc」と入力すれば、ログには「入力が変わりました：「ab」→「abc」」のように変化が表示されます
4.さいごに
今回はdata()・methods・computed・watchを紹介しました。
次回もscriptタグ内に書くことをまとめていきたいと思います。