<commit_before>---
title: Introduction
type: guide
order: 2
---

## Vue.js とは？

Vue (発音は / v j u ː / 、 **view** と同様）はユーザーインターフェイスを構築するための**プログレッシブフレームワーク**です。他のモノリシックなフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。コアとなるライブラリは view レイヤだけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合することはとても簡単です。一方、[モダンなツール](application.html)や[サポートライブラリ](https://github.com/vuejs/awesome-vue#libraries--plugins)と併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。

あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、[他のフレームワークとの比較](comparison.html)をチェックしてください。

## はじめに

Vue.js を試すには、[JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/) が最も簡単です。自由に他のタブを開いて、基本的な例を試してみましょう。もしパッケージマネージャからダウンロード/インストールする方を好むなら、[インストール](/guide/installation.html)のページをチェックしてください。

## 宣言的レンダリング

Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM にレンダリングすることを可能にするシステムです:

``` html
<div id="app">
  {{ message }}
</div>
```
``` js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```
{% raw %}
<div id="app" class="demo">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
{% endraw %}

これで初めての Vue アプリケーションが作成できました！一見するとただテンプレートをレンダリングしているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM はリンクされ、そして全てが**リアクティブ**になっています。しかし、どうしてそれが分かるのでしょうか？ブラウザの JavaScript コンソールを開いて、`app.message` の値を変えてみましょう。レンダリングされたサンプルが、上記に応じて更新されるのが確認できるでしょう。

文字列の展開に加えて、このように要素の属性をバインドすることもできます:

``` html
<div id="app-2">
  <span v-bind:id="id">Inspect me</span>
</div>
```
``` js
var app2 = new Vue({
  el: '#app-2',
  data: {
    id: 'inspect-me'
  }
})
```
{% raw %}
<div id="app-2" class="demo">
  <span v-bind:id="id">Inspect me</span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    id: 'inspect-me'
  }
})
</script>
{% endraw %}

ここには、何か新しいものがあります。`v-bind` 属性はディレクティブと呼ばれています。ディレクティブは Vue.js によって提供された特別な属性を示すために `v-` が接頭辞がついており、あなたが推測したように、レンダリングされた DOM に特定のリアクティブな振舞いを与えます。ここで宣言されているのは、「この要素の `id` 属性を Vue インスタンスの `id` プロパティにバインドする」ということになります。

ブラウザの開発者ツールを使って上の要素を調べてみましょう。`inspect-me` という id を持っているのが見えるはずです。そして、コンソールから `app2.id` を変更すれば更新されるでしょう。

## 条件分岐とループ

要素の有無を切り替えることも非常にシンプルにできます:

``` html
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
```

``` js
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
```

{% raw %}
<div id="app-3" class="demo">
  <span v-if="seen">Now you see me</span>
</div>
<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>
{% endraw %}

コンソールから `app3.seen = false` を入力してみましょう。メッセージが消えるはずです。

この2つ目の例は、テキストをデータにバインドできるだけではなく、 DOM の**構造**にデータをバインドできることを示しています。さらに Vue は、要素が Vue によって挿入/更新/削除されたとき、自動的に[トランジションエフェクト(遷移効果)](transitions.html)を適用できる強力なトランジションエフェクトシステムも提供します。<commit_msg>update introduction.md<commit_after>---
title: Introduction
type: guide
order: 2
---

## Vue.js とは？

Vue (発音は / v j u ː / 、 **view** と同様）はユーザーインターフェイスを構築するための**プログレッシブフレームワーク**です。他のモノリシックなフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。コアとなるライブラリは view レイヤだけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合することはとても簡単です。一方、[モダンなツール](application.html)や[サポートライブラリ](https://github.com/vuejs/awesome-vue#libraries--plugins)と併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。

あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、[他のフレームワークとの比較](comparison.html)をチェックしてください。

## はじめに

Vue.js を試すには、[JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/) が最も簡単です。自由に他のタブを開いて、基本的な例を試してみましょう。もしパッケージマネージャからダウンロード/インストールする方を好むなら、[インストール](/guide/installation.html)のページをチェックしてください。

## 宣言的レンダリング

Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM にレンダリングすることを可能にするシステムです:

``` html
<div id="app">
  {{ message }}
</div>
```
``` js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```
{% raw %}
<div id="app" class="demo">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
{% endraw %}

これで初めての Vue アプリケーションが作成できました！一見するとただテンプレートをレンダリングしているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM はリンクされ、そして全てが**リアクティブ**になっています。しかし、どうしてそれが分かるのでしょうか？ブラウザの JavaScript コンソールを開いて、`app.message` の値を変えてみましょう。レンダリングされたサンプルが、上記に応じて更新されるのが確認できるでしょう。

文字列の展開に加えて、このように要素の属性をバインドすることもできます:

``` html
<div id="app-2">
  <span v-bind:id="id">Inspect me</span>
</div>
```
``` js
var app2 = new Vue({
  el: '#app-2',
  data: {
    id: 'inspect-me'
  }
})
```
{% raw %}
<div id="app-2" class="demo">
  <span v-bind:id="id">Inspect me</span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    id: 'inspect-me'
  }
})
</script>
{% endraw %}

ここには、何か新しいものがあります。`v-bind` 属性はディレクティブと呼ばれています。ディレクティブは Vue.js によって提供された特別な属性を示すために `v-` が接頭辞がついており、あなたが推測したように、レンダリングされた DOM に特定のリアクティブな振舞いを与えます。ここで宣言されているのは、「この要素の `id` 属性を Vue インスタンスの `id` プロパティにバインドする」ということになります。

ブラウザの開発者ツールを使って上の要素を調べてみましょう。`inspect-me` という id を持っているのが見えるはずです。そして、コンソールから `app2.id` を変更すれば更新されるでしょう。

## 条件分岐とループ

要素の有無を切り替えることも非常にシンプルにできます:

``` html
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
```

``` js
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
```

{% raw %}
<div id="app-3" class="demo">
  <span v-if="seen">Now you see me</span>
</div>
<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>
{% endraw %}

コンソールから `app3.seen = false` を入力してみましょう。メッセージが消えるはずです。

この例は、テキストをデータにバインドできるだけではなく、 DOM の**構造**にデータをバインドできることを示しています。さらに Vue は、要素が Vue によって挿入/更新/削除されたとき、自動的に[トランジションエフェクト(遷移効果)](transitions.html)を適用できる強力なトランジションエフェクトシステムも提供します。
{'fraction_non_alphanumeric': 0.16894477856752324, 'fraction_numerical': 0.006743211226535447, 'mean_word_length': 5.572455089820359, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, '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': '2713071', 'n_tokens_mistral': 3902, 'n_tokens_neox': 3613, 'n_words': 386}