<commit_before>---
title: インストール
updated: 2017-06-26 00:00:00
type: guide
order: 1
vue_version: 2.4.1
dev_size: "257.91"
min_size: "79.71"
gz_size: "28.96"
ro_gz_size: "20.18"
---

### 互換性の注意

Vue.js は IE8 でシム化できない ECMAScript 5 の機能を使用するため、IE8 とそれ以下のバージョンをサポートして**いません**。しかしながら、[ECMAScript 5 準拠のブラウザ](http://caniuse.com/#feat=es5) は全てサポートしています。

### リリースノート

各バージョンの詳細なリリースノートは、[GitHub](https://github.com/vuejs/vue/releases) で入手できます。

## `<script>` 直接組み込み

ダウンロードし script タグで読み込んでください。`Vue` はグローバル変数として登録されます。

<p class="tip">開発中は本番バージョンを使用しないでください。 警告や一般的な間違いを見逃す可能性があります!</p>

<div id="downloads">
<a class="button" href="/js/vue.js" download>開発バージョン</a><span class="light info">警告出力とデバッグモードあり </span>

<a class="button" href="/js/vue.min.js" download>本番バージョン</a><span class="light info">警告出力なし、 {{gz_size}}kb min+gzip</span>
</div>

### CDN

推奨: [https://unpkg.com/vue](https://unpkg.com/vue) は、npm に公開されるとすぐに最新バージョンが反映されます。[https://unpkg.com/vue/](https://unpkg.com/vue/) では npm パッケージのソースも確認することができます。

[jsDelivr](https://cdn.jsdelivr.net/vue/latest/vue.min.js) または [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) 上でも利用可能です。(同期に少し時間がかかるため、最新版ではない可能性があります)。

## NPM

Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。 [Webpack](https://webpack.js.org) または [Browserify](http://browserify.org/) のようモジュールハンドラとうまく組み合わせられます。 Vue は[単一ファイルコンポーネント](single-file-components.html)を作成するための、付随するツールも提供しています。

``` bash
# 最新の安定版
$ npm install vue
```

## CLI

Vue.js は意欲的なシングルページアプリケーションをすぐに足場固めするために、[オフィシャル CLI](https://github.com/vuejs/vue-cli) を提供します。それはモダンなフロントエンドのフレームワークのワークフローのための、すぐに利用できるビルド環境のセットアップを提供します。ホットリローディング、保存時のリント、そして本番可能なビルドを実行して準備するのは、わずか数分です。

``` bash
# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack my-project
# 依存関係をインストールしてgo!
$ cd my-project
$ npm install
$ npm run dev
```

<p class="tip">CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしで[ガイド](./)を参照することを強くお勧めします。</p>

## さまざまなビルドについて

[NPM パッケージの `dist/` ディレクトリ](https://unpkg.com/vue@latest/dist/) では Vue.js の多くのさまざまなビルドが見つかります。それらの違いの概要は以下の通りです:

| | UMD | CommonJS | ES Module |
| --- | --- | --- | --- |
| **完全** | vue.js | vue.common.js | vue.esm.js |
| **ランタイム限定** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| **完全 (本番用)** | vue.min.js | - | - |
| **ランタイム限定 (本番用)** | vue.runtime.min.js | - | - |

### 用語

- **完全**: コンパイラとランタイムの両方が含まれたビルドです。

- **コンパイラ**: テンプレート文字列を JavaScript レンダリング関数にコンパイルするためのコードです。

- **ランタイム**: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコードです。基本的にコンパイラを除く全てのものです。

- **[UMD](https://github.com/umdjs/umd)**: UMD ビルドは `<script>` タグによってブラウザに直接利用されます。[https://unpkg.com/vue](https://unpkg.com/vue) の Unpkg CDN からの既定のファイルは ランタイム + コンパイラ UMD ビルド (`vue.js`) です。

- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS ビルドは [browserify](http://browserify.org/) や [webpack 1](https://webpack.github.io) のような古いバンドラでの利用を意図しています。これらのバンドラ (`pkg.main`) のための既定のファイルはランタイム限定 CommonJS ビルド (`vue.runtime.common.js`) です。

- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: ES module ビルドは [webpack 2](https://webpack.js.org) や [rollup](http://rollupjs.org/)のような最新のバンドラでの利用を意図しています。これらのバンドラ (`pkg.module`) のための既定のファイルはランタイム限定 ES Module ビルド (`vue.runtime.esm.js`) です。

### ランタイム + コンパイラとランタイム限定の違い

もしその場でテンプレートをコンパイルする必要がある (例えば、 `template` オプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち完全ビルドが必要です。


``` js
// これはコンパイラが必要です
new Vue({
  template: '<div>{{ hi }}</div>'
})

// これはコンパイラは必要ありません
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```

`vue-loader` や `vueify` を利用する場合、 `*.vue` ファイルに中のテンプレートはビルド時に JavaScript に事前コンパイルされます。最終成果物の中にコンパイラは本当に必要なく、したがってランタイム限定ビルドを利用することが出来ます。

ランタイム限定ビルドは完全ビルドに比べおよそ 30% 軽量なため、利用できるときにはこれを利用したほうが良いでしょう。それでもなお完全ビルドを利用したい場合は、バンドラでエイリアスを設定する必要があります。


#### Webpack

``` js
module.exports = {
  // ...<commit_msg>change on the 'fly' to 'client' to avoid idioms (#299)<commit_after>---
title: インストール
updated: 2017-08-05
type: guide
order: 1
vue_version: 2.4.1
dev_size: "257.91"
min_size: "79.71"
gz_size: "28.96"
ro_gz_size: "20.18"
---

### 互換性の注意

Vue.js は IE8 でシム化できない ECMAScript 5 の機能を使用するため、IE8 とそれ以下のバージョンをサポートして**いません**。しかしながら、[ECMAScript 5 準拠のブラウザ](http://caniuse.com/#feat=es5) は全てサポートしています。

### リリースノート

各バージョンの詳細なリリースノートは、[GitHub](https://github.com/vuejs/vue/releases) で入手できます。

## `<script>` 直接組み込み

ダウンロードし script タグで読み込んでください。`Vue` はグローバル変数として登録されます。

<p class="tip">開発中は本番バージョンを使用しないでください。 警告や一般的な間違いを見逃す可能性があります!</p>

<div id="downloads">
<a class="button" href="/js/vue.js" download>開発バージョン</a><span class="light info">警告出力とデバッグモードあり </span>

<a class="button" href="/js/vue.min.js" download>本番バージョン</a><span class="light info">警告出力なし、 {{gz_size}}kb min+gzip</span>
</div>

### CDN

推奨: [https://unpkg.com/vue](https://unpkg.com/vue) は、npm に公開されるとすぐに最新バージョンが反映されます。[https://unpkg.com/vue/](https://unpkg.com/vue/) では npm パッケージのソースも確認することができます。

[jsDelivr](https://cdn.jsdelivr.net/vue/latest/vue.min.js) または [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) 上でも利用可能です。(同期に少し時間がかかるため、最新版ではない可能性があります)。

## NPM

Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。 [Webpack](https://webpack.js.org) または [Browserify](http://browserify.org/) のようモジュールハンドラとうまく組み合わせられます。 Vue は[単一ファイルコンポーネント](single-file-components.html)を作成するための、付随するツールも提供しています。

``` bash
# 最新の安定版
$ npm install vue
```

## CLI

Vue.js は意欲的なシングルページアプリケーションをすぐに足場固めするために、[オフィシャル CLI](https://github.com/vuejs/vue-cli) を提供します。それはモダンなフロントエンドのフレームワークのワークフローのための、すぐに利用できるビルド環境のセットアップを提供します。ホットリローディング、保存時のリント、そして本番可能なビルドを実行して準備するのは、わずか数分です。

``` bash
# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack my-project
# 依存関係をインストールしてgo!
$ cd my-project
$ npm install
$ npm run dev
```

<p class="tip">CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしで[ガイド](./)を参照することを強くお勧めします。</p>

## さまざまなビルドについて

[NPM パッケージの `dist/` ディレクトリ](https://unpkg.com/vue@latest/dist/) では Vue.js の多くのさまざまなビルドが見つかります。それらの違いの概要は以下の通りです:

| | UMD | CommonJS | ES Module |
| --- | --- | --- | --- |
| **完全** | vue.js | vue.common.js | vue.esm.js |
| **ランタイム限定** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| **完全 (本番用)** | vue.min.js | - | - |
| **ランタイム限定 (本番用)** | vue.runtime.min.js | - | - |

### 用語

- **完全**: コンパイラとランタイムの両方が含まれたビルドです。

- **コンパイラ**: テンプレート文字列を JavaScript レンダリング関数にコンパイルするためのコードです。

- **ランタイム**: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコードです。基本的にコンパイラを除く全てのものです。

- **[UMD](https://github.com/umdjs/umd)**: UMD ビルドは `<script>` タグによってブラウザに直接利用されます。[https://unpkg.com/vue](https://unpkg.com/vue) の Unpkg CDN からの既定のファイルは ランタイム + コンパイラ UMD ビルド (`vue.js`) です。

- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS ビルドは [browserify](http://browserify.org/) や [webpack 1](https://webpack.github.io) のような古いバンドラでの利用を意図しています。これらのバンドラ (`pkg.main`) のための既定のファイルはランタイム限定 CommonJS ビルド (`vue.runtime.common.js`) です。

- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: ES module ビルドは [webpack 2](https://webpack.js.org) や [rollup](http://rollupjs.org/)のような最新のバンドラでの利用を意図しています。これらのバンドラ (`pkg.module`) のための既定のファイルはランタイム限定 ES Module ビルド (`vue.runtime.esm.js`) です。

### ランタイム + コンパイラとランタイム限定の違い

もしクライアントでテンプレートをコンパイルする必要がある (例えば、 `template` オプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち完全ビルドが必要です。


``` js
// これはコンパイラが必要です
new Vue({
  template: '<div>{{ hi }}</div>'
})

// これはコンパイラは必要ありません
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```

`vue-loader` や `vueify` を利用する場合、 `*.vue` ファイルに中のテンプレートはビルド時に JavaScript に事前コンパイルされます。最終成果物の中にコンパイラは本当に必要なく、したがってランタイム限定ビルドを利用することが出来ます。

ランタイム限定ビルドは完全ビルドに比べおよそ 30% 軽量なため、利用できるときにはこれを利用したほうが良いでしょう。それでもなお完全ビルドを利用したい場合は、バンドラでエイリアスを設定する必要があります。


#### Webpack

``` js
module.exports = {
  // ...
{'fraction_non_alphanumeric': 0.1750031498047121, 'fraction_numerical': 0.011465289152072572, 'mean_word_length': 5.576636288318144, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 30, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '898706', 'n_tokens_mistral': 5374, 'n_tokens_neox': 4949, 'n_words': 500}