<commit_before>---
title: Vue インスタンス
type: guide
order: 3
---

## コンストラクタ

全ての Vue vm は、`Vue` コンストラクタ関数で**ルート Vue インスタンス(root Vue instance)**を作成することによって起動されます:

``` js
var vm = new Vue({
  // オプション
})
```

厳密な定義とは異なりますが、Vue のデザインは、[MVVM パターン](https://en.wikipedia.org/wiki/Model_View_ViewModel)の影響を部分的に触発されています。慣例として、よく `vm` (ViewModel の略) を Vue インスタンスの変数名として、よく利用します。

Vue インスタンスを生成するには、**オプションオブジェクト**を渡す必要があります。これには、データ、テンプレート、マウントさせる要素、メソッド、ライフサイクルコールバックなどをオプションとして指定することができます。全てのオプションの一覧は[API リファレンス](../api)で参照できます。

`Vue` コンストラクタは、あらかじめ定義されたオプションを伴った再利用可能な**コンポーネントコンストラクタ**を生成するために拡張できます:

``` js
var MyComponent = Vue.extend({
  // 拡張オプション
})

// `MyComponent` から生成された全てのインスタンスは、あらかじめ定義された拡張オプションを利用して生成されます
var myComponentInstance = new MyComponent()
```

プログラムから命令的に拡張されたインスタンスを生成できますが、ほとんどの場合は、カスタムエレメントとしてテンプレートに宣言的に組み立てることをおすすめします。後ほど [コンポーネントシステム](components.html) で詳細を説明します。今は、全ての Vue コンポーネントは、本質的に Vue インスタンスを拡張したと理解しておけば十分です。

## プロパティとメソッド

Vue インスタンスは、自身の `data` オブジェクトの全てのプロパティを**プロキシ**します:

``` js
var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// プロパティへの代入は、元のデータにも反映されます
vm.a = 2
data.a // -> 2

// ... そして、その逆もまたしかりです
data.a = 3
vm.a // -> 3
```

これらのプロキシされたプロパティだけが**リアクティブ**なことに注意しましょう。もし、インスタンスを生成した後にインスタンスに新しいプロパティを追加した場合には、ビューの更新は起こりません。後ほど、リアクティブシステムの章で詳細を説明します。

data プロパティに加えて、Vue インスタンスは、いくつかの便利なプロパティとメソッドを持っています。

``` js
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch はインスタンスメソッドです
vm.$watch('a', function (newVal, oldVal) {
  // このコールバックは `vm.a` の値が変わる時に呼ばれます
})
```


<p class="tip">インスタンスプロパティまたはコールバック(例: `vm.$watch('a', newval => this.myMethod())`) 上で[アロー関数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) を使用しないでください。アロー関数は親コンテキストに束縛されるため、`this` は期待どおりに Vue インスタンスにならず、そして `this.myMethod` は undefined になります。</p>

インスタンスの全てのプロパティとメソッドのリストは、 [API リファレンス](../api) を参照してください。

## インスタンスライフサイクルフック

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、カスタムロジックの実行を可能にする、いくつかの **ライフサイクルフック(lifecycle hooks)** を呼び出します。例えば、`created` フックはインスタンスが生成された後に呼ばれます。

``` js
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` は vm インスタンスを指します
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"
```

この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、`mounted`, `updated`, `destroyed` があります。全てのライフサイクル フックは、`this` が Vue インスタンスを指す形で実行さます。Vue の世界における "コントローラ" の概念について知りたい方もいるかもしれません。その答えとしては「コントローラはない」です。コンポーネントのためのカスタムロジックは、これらのライフサイクルフックの中に分割されることになります。

## ライフサイクルダイアグラム

以下は、インスタンスライフサイクルのダイアグラムです。
今はこのダイアグラムを完全に理解する必要はありませんが、将来役に立つことでしょう。

![Lifecycle](/images/lifecycle.png)<commit_msg>fix guide/instance (#200)<commit_after>---
title: Vue インスタンス
type: guide
order: 3
---

## コンストラクタ

全ての Vue vm は、`Vue` コンストラクタ関数で**ルート Vue インスタンス(root Vue instance)**を作成することによって起動されます:

``` js
var vm = new Vue({
  // オプション
})
```

Vue のデザインは、[MVVM パターン](https://en.wikipedia.org/wiki/Model_View_ViewModel)と厳密には関連が無いものの、部分的には影響を受けています。慣例として、よく `vm` (ViewModel の略) を Vue インスタンスの変数名として、よく利用します。

Vue インスタンスを生成するには、**オプションオブジェクト**を渡す必要があります。これには、データ、テンプレート、マウントさせる要素、メソッド、ライフサイクルコールバックなどをオプションとして指定することができます。全てのオプションの一覧は[API リファレンス](../api)で参照できます。

`Vue` コンストラクタを拡張することで、あらかじめ定義されたオプションを伴う再利用可能な**コンポーネントコンストラクタ**を生成できます:

``` js
var MyComponent = Vue.extend({
  // 拡張オプション
})

// `MyComponent` から生成された全てのインスタンスは、あらかじめ定義された拡張オプションを利用して生成されます
var myComponentInstance = new MyComponent()
```

プログラムから命令的に拡張されたインスタンスを生成できますが、ほとんどの場合は、カスタムエレメントとしてテンプレートに宣言的に組み立てることをおすすめします。後ほど [コンポーネントシステム](components.html) で詳細を説明します。今は、全ての Vue コンポーネントは、本質的に Vue インスタンスを拡張したと理解しておけば十分です。

## プロパティとメソッド

Vue インスタンスは、自身の `data` オブジェクトの全てのプロパティを**プロキシ**します:

``` js
var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// プロパティへの代入は、元のデータにも反映されます
vm.a = 2
data.a // -> 2

// ... そして、その逆もまたしかりです
data.a = 3
vm.a // -> 3
```

これらのプロキシされたプロパティだけが**リアクティブ**なことに注意しましょう。もし、インスタンスを生成した後にインスタンスに新しいプロパティを追加した場合には、ビューの更新は起こりません。後ほど、リアクティブシステムの章で詳細を説明します。

data プロパティに加えて、Vue インスタンスは、いくつかの便利なプロパティとメソッドを持っています。

``` js
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch はインスタンスメソッドです
vm.$watch('a', function (newVal, oldVal) {
  // このコールバックは `vm.a` の値が変わる時に呼ばれます
})
```


<p class="tip">インスタンスプロパティまたはコールバック(例: `vm.$watch('a', newval => this.myMethod())`) 上で[アロー関数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) を使用しないでください。アロー関数は親コンテキストに束縛されるため、`this` は期待どおりに Vue インスタンスにならず、そして `this.myMethod` は undefined になります。</p>

インスタンスの全てのプロパティとメソッドのリストは、 [API リファレンス](../api) を参照してください。

## インスタンスライフサイクルフック

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、カスタムロジックの実行を可能にする、いくつかの **ライフサイクルフック(lifecycle hooks)** を呼び出します。例えば、`created` フックはインスタンスが生成された後に呼ばれます。

``` js
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` は vm インスタンスを指します
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"
```

この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、`mounted`, `updated`, `destroyed` があります。全てのライフサイクルフックは、`this` が Vue インスタンスを指す形で実行されます。Vue の世界における "コントローラ" の概念について知りたい方もいるかもしれません。その答えとしては「コントローラはない」です。コンポーネントのためのカスタムロジックは、これらのライフサイクルフックの中に分割されることになります。

## ライフサイクルダイアグラム

以下は、インスタンスライフサイクルのダイアグラムです。
今はこのダイアグラムを完全に理解する必要はありませんが、将来役に立つことでしょう。

![Lifecycle](/images/lifecycle.png)
{'fraction_non_alphanumeric': 0.14688664183076106, 'fraction_numerical': 0.0037253858435337944, 'mean_word_length': 6.056320400500626, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 21, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6685500', 'n_tokens_mistral': 4179, 'n_tokens_neox': 3806, 'n_words': 362}