<commit_before>---
title: 他のフレームワークとの比較
type: guide
order: 29
---

これは確かにガイドの中では最も書くことが難しいページですが、私たちはこれが重要だと感じています。きっと、あなたは解決したい問題を抱えていて、その問題を解決するために他のライブラリを使ったことがあるでしょう。あなたがこのページを読んでいるのは Vue があなた特有の問題をよりよく解決することができるかどうかを知りたいからでしょう。それは私たちがあなたに答えを示したいことです。

また、私たちは偏見を避けるために多くの努力を費やしています。Vue のコアチームですので、私たちは明らかに Vue がとても好きです。私たちはいくつかの問題については Vue が世の中に存在する他のものよりもより良く解決すると考えています。もし私達がそれを信じることができなかったら、Vue のために作業をすることはなかったでしょう。しかし、私たちは公平で間違いのないようにしたいと考えています。React の代替レンダラの巨大なエコシステムや Knockout の IE6 からのブラウザサポートのように、他のライブラリが著しく優れていると示される部分に関して、私たちはそれらをできる限り載せるようにしています。

さらに、私たちは**あなた**がこのドキュメントを最新の情報に保っていただけることを望みます。なぜなら、JavaScript の世界は速く動いているからです！もし、あなたが正確ではない部分や、あまり正しくないように見える部分に気がついたら、[Issue を開いて](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide)教えてください。

## React

React と Vue には多くの類似点があります。それらは両方とも：

- 仮想 DOM を活用しています
- リアクティブで組み合わせ可能なビューのコンポーネントを提供しています
- コアライブラリに焦点をあわせることに努めており、ルーティングやグローバルの状態管理のような関心事は関連ライブラリに担当させています

スコープがとてもよく似ているため、この比較の改善に他よりも多くの時間をかけています。私たちは技術的な正確さだけでなく、バランスも保証したいと考えています。例えば、React のエコシステムの豊かさや、カスタムレンダラの豊富さのように、私たちは React が Vue よりも優れている点を示します。

ですので、調査対象の多くはある程度主観的なため、ある React ユーザーには、比較が Vue に偏っているようにみえるのはそれは必然です。私たちは様々な技術的な好みが存在することを認め、そしてあなたの好みが私たちのものと一致する場合は、Vue は潜在的によりフィットする可能性があるため、この比較は主に理由を概説することを目的としています。

React のコミュニティは、私たちがこのバランスを達成するのを[手助けしてくださいました](https://github.com/vuejs/vuejs.org/issues/364)。React チームの <NAME> 氏には心から感謝いたします。彼にはとても寛容に時間を費やしていただき、私たちが[お互いに最終結果に満足するまで](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740)このドキュメントを改善するための数多くの助言をいただきました。

下記で私たちがこれらの 2 つのライブラリの違いを探求したように、あなたが確かに公平な考察だと感じることができるのを願います。

### 性能分析

私たちがこれまでにテストした現実世界と同様のシナリオのすべてにおいて、Vue は React よりもかなり優れた性能を発揮しました。あなたが直ちに驚きたい場合は、ぜひ読んでください。私たちは (React チームと協力して開発されたベンチマークも含めて) ブレークダウンしています。

#### 描画性能

UI を描画する時、DOM 操作は通常最も高いコストのかかる操作になり、また、残念ながら、そういった低レベルの操作をより速くするライブラリは存在しません。私たちができる最良の方法は：

1. 必要な DOM 操作の回数を最小にします。React と Vue は両者ともこれを果たすために仮想 DOM による抽象化を用いており、どちらの実装もほぼ同様によく動いています。
2. これらの DOM 操作の上に乗るオーバーヘッド(純粋な JavaScript 評価)をできる限り小さくします。これが Vue と React で異なる点です。

JavaScript オーバーヘッドは、必要な DOM 操作を計算するメカニズムに直接関係しています。Vue と React の両方が Virtual DOM を利用していますが、Vue の仮想 DOM 実装([snabbdom](https://github.com/snabbdom/snabbdom) の fork) は、はるかに軽量なため、React よりもオーバーヘッドが少なくなります。

これが意味するのは、コンポーネントよりも DOM 要素がより多く描画されるような通常のアプリケーションにおいて、Vue は React よりも大きく優れた性能を発揮するということです。しかしながら、1 つの普通のコンポーネントがそれぞれの要素を描画するような極端なケースでは、Vue は大抵もっと遅くなってしまうでしょう。しかし、これでこの話は終わりではありません。

Vue と React は両者ともに、状態を持たず、インスタンス化できない関数型コンポーネントを提供しています - そしてこれにより、オーバーヘッドはより少なくなります。これが性能が重要な状況で使用された時、Vue は再び React よりも速くなります。これをデモするために、私たちは 10,000 個のリスト要素を 100 回描画するだけのシンプルな[ベンチマークプロジェクト](https://github.com/chrisvfritz/vue-render-performance-comparisons)を構築しました。このベンチマークの結果はハードウェアやブラウザ - 特に実行している JavaScript エンジンの性質によっても異なりますので、あなた自身で試してみることをおすすめします。

しかし、もしあなたが面倒に感じるのなら、以下に 2014 MacBook Air 上の Chrome 52 で実行した時の結果を載せます。恣意的な結果の選択を避けるために、2 つのベンチマークは実際に独立して 20 回実行され、最も良い結果を採用しています。

{% raw %}
<table class="benchmark-table">
  <thead>
    <tr>
      <th></th>
      <th>Vue</th>
      <th>React</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>最速値</th>
      <td>23ms</td>
      <td>63ms</td>
    </tr>
    <tr>
      <th>中央値</th>
      <td>42ms</td>
      <td>81ms</td>
    </tr>
    <tr>
      <th>平均値</th>
      <td>51ms</td>
      <td>94ms</td>
    </tr>
    <tr>
      <th>95 パーセンタイル</th>
      <td>73ms</td>
      <td>164ms</td>
    </tr>
    <tr>
      <th>最遅値</th>
      <td>343ms</td>
      <td>453ms</td>
    </tr>
  </tbody>
</table>
{% endraw %}

#### 更新性能

React では、コンポーネントの状態が変化するとそのコンポーネントをルートとしてコンポーネントのサブツリー全体を再描画します。完全に最適化された再描画を実現するために、あなたは `shouldComponentUpdate` をすべての場所で実装し、イミュータブルなデータ構造を使用する必要があります。Vue では、描画中にシステムは実際に再描画する必要があるコンポーネントを正確に認識します。

これが意味するのは、最適化されていない Vue の更新処理は、最適化されていない React よりもとても速く、特に Vue の改善された描画性能によって、完全に最適化された React ですらも大抵の場合は最適化されていない Vue よりも遅いです。

#### 開発時

本番環境での性能は、エンドユーザーエクスペリエンスに直接関係しているためより重要な指標ですが、開発時における性能は開発者の経験に関連付けられているため、依然として重要です。

Vue と React の両方は、ほとんどの通常のアプリケーションの開発には十分に速いです。しかし、フレームレートの高いデータの視覚化やアニメーションのプロトタイプを作成する場合、React は 1 fps に処理が落ちている間に、開発時に Vue の処理が 10 fps のケースを確認しています。

これは開発モードにおいて React の多くの厳密な不変条件のチェックによるもので、多くの素晴らしい警告やエラーメッセージを提供するのに役立っています。私たちはこれが Vue においてまた重要なことは同意できますが、これらのチェックを実装する一方で、性能に関しても注意深く気にすることに努めています。

### HTML & CSS

React では、すべてのものは単なる JavaScript で、これはとてもシンプルで洗練されているように聞こえます - それを深く知るまでは。悲しいことに、HTML や CSS を JavaScript の中で再発明することは伝統的なモデルのいくつかの問題を解決しながら、それ自身の痛みを引き起こす可能性もあります。Vue はそうではなく、Web の技術を利用し、また Web の技術の上に構築されています。これが意味することをあなたに見せるために、いくつかの例をお見せしましょう。

#### JSX vs Templates

React では、すべてのコンポーネントは JSX を用いた 描画関数 (render) の中でそれらの UI を表現します。JSX とは JavaScript の中で用いることのできる、宣言的で XML のような構文です。ここに [React のコミュニティによって吟味された](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244582684)例があります：

``` jsx
render () {
  let { items } = this.props

  let children
  if (items.length > 0) {
    children = (
      <ul>
        {items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>No items found.</p>
  }

  return (
    <div className='list-container'>
      {children}
    </div>
  )
}
```

JSX を伴う 描画関数にはいくつかの優位な点があります：

- あなたはビューを構築するために完全なプログラミング言語（JavaScript）の力を使うことができます。
- JSX のためのツールのサポート（例えば、Lint、型チェック、エディタのオートコンプリート）は現在 Vue のテンプレートで利用可能なものよりもいくつかの点で優れています。

Vue は、[描画関数](render-function.html)と、さらに [JSX のサポート](render-function.html#JSX)を備えています、なぜなら、あなたは時折その力を必要とするためです。しかしながら、デフォルトのエクスペリエンスとして、より単純な代替手段としてテンプレートを提供しています:

その代わりに、私たちはテンプレートをより単純な代替方法として提供しています：

``` html
<template>
  <div class="list-container">
    <ul v-if="items.length">
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>項目は見つかりませんでした。</p>
  </div>
</template>
```

ここにいくつかの優位な点を示します：

- テンプレートを書く上で必要となる実装やコーディングスタイルの決定は少ないです
- テンプレートは常に宣言的になります
- すべての正しい HTML はテンプレートとしても正しくなります
- それはより英語らしく読めます（例えば、for each item in items - 訳注：items の中のそれぞれの item）
- より読みやすくするための上位版の JavaScript は必要としません

これは、それを書いている開発者がもっと簡単にできるというだけではなく、デザイナーや経験の浅い開発者がもっと簡単に理解することができ、コードに貢献することができることでしょう。

HTML 準拠したテンプレートのもう 1 つの利点は、Pug (以前は Jade として知られていた) のようなプリプロセッサを使って Vue テンプレートを作成できることです:

``` pug
div.list-container
  ul(v-if="items.length")
    li(v-for="item in items") {{ item.name }}
  p(v-else) No items found.
```

#### コンポーネントスコープ CSS（Scoped CSS）<commit_msg>Add key to v-for in template example (#851)<commit_after>---
title: 他のフレームワークとの比較
type: guide
order: 29
---

これは確かにガイドの中では最も書くことが難しいページですが、私たちはこれが重要だと感じています。きっと、あなたは解決したい問題を抱えていて、その問題を解決するために他のライブラリを使ったことがあるでしょう。あなたがこのページを読んでいるのは Vue があなた特有の問題をよりよく解決することができるかどうかを知りたいからでしょう。それは私たちがあなたに答えを示したいことです。

また、私たちは偏見を避けるために多くの努力を費やしています。Vue のコアチームですので、私たちは明らかに Vue がとても好きです。私たちはいくつかの問題については Vue が世の中に存在する他のものよりもより良く解決すると考えています。もし私達がそれを信じることができなかったら、Vue のために作業をすることはなかったでしょう。しかし、私たちは公平で間違いのないようにしたいと考えています。React の代替レンダラの巨大なエコシステムや Knockout の IE6 からのブラウザサポートのように、他のライブラリが著しく優れていると示される部分に関して、私たちはそれらをできる限り載せるようにしています。

さらに、私たちは**あなた**がこのドキュメントを最新の情報に保っていただけることを望みます。なぜなら、JavaScript の世界は速く動いているからです！もし、あなたが正確ではない部分や、あまり正しくないように見える部分に気がついたら、[Issue を開いて](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide)教えてください。

## React

React と Vue には多くの類似点があります。それらは両方とも：

- 仮想 DOM を活用しています
- リアクティブで組み合わせ可能なビューのコンポーネントを提供しています
- コアライブラリに焦点をあわせることに努めており、ルーティングやグローバルの状態管理のような関心事は関連ライブラリに担当させています

スコープがとてもよく似ているため、この比較の改善に他よりも多くの時間をかけています。私たちは技術的な正確さだけでなく、バランスも保証したいと考えています。例えば、React のエコシステムの豊かさや、カスタムレンダラの豊富さのように、私たちは React が Vue よりも優れている点を示します。

ですので、調査対象の多くはある程度主観的なため、ある React ユーザーには、比較が Vue に偏っているようにみえるのはそれは必然です。私たちは様々な技術的な好みが存在することを認め、そしてあなたの好みが私たちのものと一致する場合は、Vue は潜在的によりフィットする可能性があるため、この比較は主に理由を概説することを目的としています。

React のコミュニティは、私たちがこのバランスを達成するのを[手助けしてくださいました](https://github.com/vuejs/vuejs.org/issues/364)。React チームの <NAME> 氏には心から感謝いたします。彼にはとても寛容に時間を費やしていただき、私たちが[お互いに最終結果に満足するまで](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740)このドキュメントを改善するための数多くの助言をいただきました。

下記で私たちがこれらの 2 つのライブラリの違いを探求したように、あなたが確かに公平な考察だと感じることができるのを願います。

### 性能分析

私たちがこれまでにテストした現実世界と同様のシナリオのすべてにおいて、Vue は React よりもかなり優れた性能を発揮しました。あなたが直ちに驚きたい場合は、ぜひ読んでください。私たちは (React チームと協力して開発されたベンチマークも含めて) ブレークダウンしています。

#### 描画性能

UI を描画する時、DOM 操作は通常最も高いコストのかかる操作になり、また、残念ながら、そういった低レベルの操作をより速くするライブラリは存在しません。私たちができる最良の方法は：

1. 必要な DOM 操作の回数を最小にします。React と Vue は両者ともこれを果たすために仮想 DOM による抽象化を用いており、どちらの実装もほぼ同様によく動いています。
2. これらの DOM 操作の上に乗るオーバーヘッド(純粋な JavaScript 評価)をできる限り小さくします。これが Vue と React で異なる点です。

JavaScript オーバーヘッドは、必要な DOM 操作を計算するメカニズムに直接関係しています。Vue と React の両方が Virtual DOM を利用していますが、Vue の仮想 DOM 実装([snabbdom](https://github.com/snabbdom/snabbdom) の fork) は、はるかに軽量なため、React よりもオーバーヘッドが少なくなります。

これが意味するのは、コンポーネントよりも DOM 要素がより多く描画されるような通常のアプリケーションにおいて、Vue は React よりも大きく優れた性能を発揮するということです。しかしながら、1 つの普通のコンポーネントがそれぞれの要素を描画するような極端なケースでは、Vue は大抵もっと遅くなってしまうでしょう。しかし、これでこの話は終わりではありません。

Vue と React は両者ともに、状態を持たず、インスタンス化できない関数型コンポーネントを提供しています - そしてこれにより、オーバーヘッドはより少なくなります。これが性能が重要な状況で使用された時、Vue は再び React よりも速くなります。これをデモするために、私たちは 10,000 個のリスト要素を 100 回描画するだけのシンプルな[ベンチマークプロジェクト](https://github.com/chrisvfritz/vue-render-performance-comparisons)を構築しました。このベンチマークの結果はハードウェアやブラウザ - 特に実行している JavaScript エンジンの性質によっても異なりますので、あなた自身で試してみることをおすすめします。

しかし、もしあなたが面倒に感じるのなら、以下に 2014 MacBook Air 上の Chrome 52 で実行した時の結果を載せます。恣意的な結果の選択を避けるために、2 つのベンチマークは実際に独立して 20 回実行され、最も良い結果を採用しています。

{% raw %}
<table class="benchmark-table">
  <thead>
    <tr>
      <th></th>
      <th>Vue</th>
      <th>React</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>最速値</th>
      <td>23ms</td>
      <td>63ms</td>
    </tr>
    <tr>
      <th>中央値</th>
      <td>42ms</td>
      <td>81ms</td>
    </tr>
    <tr>
      <th>平均値</th>
      <td>51ms</td>
      <td>94ms</td>
    </tr>
    <tr>
      <th>95 パーセンタイル</th>
      <td>73ms</td>
      <td>164ms</td>
    </tr>
    <tr>
      <th>最遅値</th>
      <td>343ms</td>
      <td>453ms</td>
    </tr>
  </tbody>
</table>
{% endraw %}

#### 更新性能

React では、コンポーネントの状態が変化するとそのコンポーネントをルートとしてコンポーネントのサブツリー全体を再描画します。完全に最適化された再描画を実現するために、あなたは `shouldComponentUpdate` をすべての場所で実装し、イミュータブルなデータ構造を使用する必要があります。Vue では、描画中にシステムは実際に再描画する必要があるコンポーネントを正確に認識します。

これが意味するのは、最適化されていない Vue の更新処理は、最適化されていない React よりもとても速く、特に Vue の改善された描画性能によって、完全に最適化された React ですらも大抵の場合は最適化されていない Vue よりも遅いです。

#### 開発時

本番環境での性能は、エンドユーザーエクスペリエンスに直接関係しているためより重要な指標ですが、開発時における性能は開発者の経験に関連付けられているため、依然として重要です。

Vue と React の両方は、ほとんどの通常のアプリケーションの開発には十分に速いです。しかし、フレームレートの高いデータの視覚化やアニメーションのプロトタイプを作成する場合、React は 1 fps に処理が落ちている間に、開発時に Vue の処理が 10 fps のケースを確認しています。

これは開発モードにおいて React の多くの厳密な不変条件のチェックによるもので、多くの素晴らしい警告やエラーメッセージを提供するのに役立っています。私たちはこれが Vue においてまた重要なことは同意できますが、これらのチェックを実装する一方で、性能に関しても注意深く気にすることに努めています。

### HTML & CSS

React では、すべてのものは単なる JavaScript で、これはとてもシンプルで洗練されているように聞こえます - それを深く知るまでは。悲しいことに、HTML や CSS を JavaScript の中で再発明することは伝統的なモデルのいくつかの問題を解決しながら、それ自身の痛みを引き起こす可能性もあります。Vue はそうではなく、Web の技術を利用し、また Web の技術の上に構築されています。これが意味することをあなたに見せるために、いくつかの例をお見せしましょう。

#### JSX vs Templates

React では、すべてのコンポーネントは JSX を用いた 描画関数 (render) の中でそれらの UI を表現します。JSX とは JavaScript の中で用いることのできる、宣言的で XML のような構文です。ここに [React のコミュニティによって吟味された](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244582684)例があります：

``` jsx
render () {
  let { items } = this.props

  let children
  if (items.length > 0) {
    children = (
      <ul>
        {items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>No items found.</p>
  }

  return (
    <div className='list-container'>
      {children}
    </div>
  )
}
```

JSX を伴う 描画関数にはいくつかの優位な点があります：

- あなたはビューを構築するために完全なプログラミング言語（JavaScript）の力を使うことができます。
- JSX のためのツールのサポート（例えば、Lint、型チェック、エディタのオートコンプリート）は現在 Vue のテンプレートで利用可能なものよりもいくつかの点で優れています。

Vue は、[描画関数](render-function.html)と、さらに [JSX のサポート](render-function.html#JSX)を備えています、なぜなら、あなたは時折その力を必要とするためです。しかしながら、デフォルトのエクスペリエンスとして、より単純な代替手段としてテンプレートを提供しています:

その代わりに、私たちはテンプレートをより単純な代替方法として提供しています：

``` html
<template>
  <div class="list-container">
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>項目は見つかりませんでした。</p>
  </div>
</template>
```

ここにいくつかの優位な点を示します：

- テンプレートを書く上で必要となる実装やコーディングスタイルの決定は少ないです
- テンプレートは常に宣言的になります
- すべての正しい HTML はテンプレートとしても正しくなります
- それはより英語らしく読めます（例えば、for each item in items - 訳注：items の中のそれぞれの item）
- より読みやすくするための上位版の JavaScript は必要としません

これは、それを書いている開発者がもっと簡単にできるというだけではなく、デザイナーや経験の浅い開発者がもっと簡単に理解することができ、コードに貢献することができることでしょう。

HTML 準拠したテンプレートのもう 1 つの利点は、Pug (以前は Jade として知られていた) のようなプリプロセッサを使って Vue テンプレートを作成できることです:

``` pug
div.list-container
  ul(v-if="items.length")
    li(v-for="item in items") {{ item.name }}
  p(v-else) No items found.
```

#### コンポーネントスコープ CSS（Scoped CSS）
{'fraction_non_alphanumeric': 0.10277711844291479, 'fraction_numerical': 0.013054830287206266, 'mean_word_length': 6.260195290063182, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 153, 'https://': 12, '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': '5419148', 'n_tokens_mistral': 10114, 'n_tokens_neox': 9179, 'n_words': 701}