VueJS - インスタンス

こんにちは、Web開発者を目指している皆さん！今日は、Vue.jsインスタンスの素晴らしい世界に飛び込みます。プログラミングが初めてであっても心配しないでください。私はこれまでに多くの生徒を指導してきましたので、ステップバイステップで説明します。コーヒー（または、あなたが好きなお茶）を手に取り、始めましょう！

VueJS - Instances

Vueインスタンスとは？

コードに飛び込む前に、Vueインスタンスとは何かを理解しましょう。家を建てているとしましょう。Vueインスタンスはその家の基盤のようなものです。すべての始まりの場であり、あなたのVueアプリケーション全体をコントロールする核です。

シntax

Vueインスタンスを作成するのは非常に簡単です。以下は基本的なシntaxです：

new Vue({
// オプション
})

簡単ですね！newキーワードに続けてVue()を使用し、括弧の中に様々なオプションを含むオブジェクトを渡します。これらのオプションは、私たちの家の設計図のようなものです。Vueにアプリケーションがどのように振る舞うかを伝えます。

最初のVueインスタンス

一緒に最初のVueインスタンスを作成してみましょう。すぐに全てを理解する必要はありません。一つ一つ分解していきます。

例1

<!DOCTYPE html>
<html>
<head>
<title>私の最初のVueアプリ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

出力

Hello, Vue!

これを分解すると：

Vue.jsライブラリをHTMLファイルにインクルードします。
IDが"app"の<div>を作成します。これが私たちのVueアプリケーションの住む場所です。
<div>内で{{ message }}を使用します。これはインンターポレーションと呼ばれ、Vueでデータを表示する方法です。
<script>タグ内で新しいVueインスタンスを作成します。
el: '#app'を使用して、Vueがどの要素をコントロールするかを伝えます（IDが"app"のdivです）。
dataオブジェクト内でmessageプロパティを定義し、値を'Hello, Vue!'に設定します。

VueがHTML内の{{ message }}を見つけると、それをデータのmessageの値に置き換えます。魔法ですね？

データとメソッド

Vueインスタンスはデータだけでなく、メソッドも持つことができます。メソッドはアクションや計算を行う関数です。

例2

<!DOCTYPE html>
<html>
<head>
<title>Vueメソッドの例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">メッセージを反転</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

出力

最初は"Hello, Vue!"とボタンが表示され、ボタンをクリックするとメッセージが"!euV ,olleH"に反転します。

この例では：

ボタンにv-on:click="reverseMessage"を追加し、ボタンがクリックされたときにreverseMessageメソッドを呼び出すように伝えます。
Vueインスタンス内でmethodsオブジェクトにreverseMessage関数を追加します。
この関数はメッセージを文字列の配列に分割し、反転して再結合します。
this.messageを使用してデータプロパティをアクセスおよび修正します。

ライフサイクルフック

Vueインスタンスにはライフサイクルがあります。作成され、DOMにマウントされ、更新され、最終的に破棄されます。Vueは、このライフサイクルの特定の段階でコードを実行できるフックを提供しています。

例

<!DOCTYPE html>
<html>
<head>
<title>Vueライフサイクルフック</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
created: function() {
console.log('Vueインスタンスが作成されました！')
},
mounted: function() {
console.log('VueインスタンスがDOMにマウントされました！')
this.message = 'Welcome to Vue!'
}
})
</script>
</body>
</html>

出力

ブラウザでは"Welcome to Vue!"が表示され、コンソールには以下のメッセージが表示されます：

Vueインスタンスが作成されました！
VueインスタンスがDOMにマウントされました！

ここで何が起こっているか：

createdフックはVueインスタンスが作成されたときに実行され、コンソールにメッセージをログします。
mountedフックはVueインスタンスがDOMにマウントされたときに実行され、別のメッセージをログし、messageデータプロパティを変更します。

これらのフックは、アプリケーションのライフサイクルの特定のポイントでコードを実行するのに非常に有用です。

Vueインスタンスのプロパティとメソッド

Vueインスタンスには、ビルトインのプロパティとメソッドもあります。いくつか見てみましょう。

例

<!DOCTYPE html>
<html>
<head>
<title>Vueインスタンスのプロパティとメソッド</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">メッセージを更新</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'メッセージが更新されました！'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOMが更新されました！')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

この例では：

this.$dataを使用してデータオブジェクトを直接アクセスします。
this.$elを使用してVueインスタンスのルートDOM要素をログします。
this.$nextTickを使用してDOMの更新後に行う関数を遅延実行します。
Vueインスタンスの外側でapp.$dataを使用してプロパティにアクセスします。

以下に、よく使われるVueインスタンスのプロパティとメソッドの表を示します：

プロパティ/メソッド	説明
$data	Vueインスタンスが監視しているデータオブジェクト
$el	Vueインスタンスが管理している要素
$watch	Vueインスタンスのプロパティの変更を監視
$set	オブジェクトにプロパティを設定し、ビューの更新をトリガー
$nextTick	次のDOM更新サイクル後にコールバックを実行

これらはただの例です。Vue.jsには多くの機能と能力があり、今後のレッスンでさらに深く掘り下げます。

Vueインスタンスに関するこの紹介が役立つことを願っています！コードを学ぶことは新しい言語を学ぶのと同じです。時間と練習がかかります。すぐに全てを理解できない場合も、落胆しないでください。実験を続け、コードを書き続け、最も重要なのは、楽しむことです！次回のレッスンで会いましょう！

Credits: Image by storyset