Translate Japanese

docs/LANGS.md

@@ -1,4 +1,5 @@
 * [English](en/)
 * [한국어](kr/)
 * [Русский](ru/)
-* [Português](pt_BR/)
+* [Português](pt_BR/)
+* [日本語](ja/)

docs/ja/README.md

@@ -0,0 +1,38 @@
+# はじめに
+
+### `vue-loader` とは ?
+
+`vue-loader` とは以下の形式で記述された Vue コンポーネントをプレーンな JavaScript モジュールに変換する Webpack の loader です。
+
+![screenshot](http://blog.evanyou.me/images/vue-component.png)
+
+`vue-loader` によって多くのクールな機能が提供されます：
+
+- デフォルトで ES2015 が有効；
+- `<style>` には SASS、 `<template>` には Jade など、Vue コンポーネントの各パーツに他の Webpack の loader が使用可能；
+ カスタム loader チェーンを適用できる .vue ファイルのカスタムセクションを追加可能；
+- `<style>` と `<template>` で参照される静的なアセットをモジュールの依存として扱い、Webpack の loader で処理可能；
+- 各コンポーネントで scoped CSS をシミュレートすることが可能；
+- 開発時のコンポーネントのホットリロードをサポート
+
+つまり、Webpack と `vue-loader` の組み合わせは Vue.js アプリケーションを作成するための、現代的で柔軟かつとても強力なフロントエンドワークフローを実現することが可能になります。
+
+### Webpack とは?
+
+すでに Webpack に精通している場合は、次の説明を省略してもかまいません。しかし、Webpack を初めて使う人のために、ここで簡単な紹介を行います。
+
+[Webpack](http://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。
+
+![webpack](http://webpack.github.io/assets/what-is-webpack.png)
+
+基本的な例として、CommonJS モジュールが多数あるとします。これらはブラウザで直接実行できません。なのでそれらを `<script>` タグを介して読み込むことのできる単一のファイルに "バンドル" する必要があります。Webpack は `require()` での依存性解決と実行を行うことが出来ます。
+
+しかし Webpack はそれ以上のことが出来ます。 "loader" を用いることで、最終的なバンドルしたファイルを出力する前に Webpack に様々な方法で全てのタイプのファイルを変換できるように設定することが出来ます。いくつかの例をあげると：
+
+- ES2015、CoffeeScript、TypeScript のモジュールをプレーンな ES5 の CommonJS モジュールにトランスパイル；
+- オプションでコンパイルを行う前にソースコードを linter に通すことが可能；
+- Jade テンプレートをプレーンな HTML にトランスパイルし、JavaScript の文字列として展開；
+- SASS ファイルをプレーンな CSS にトランスパイルし、`<style>` タグとして挿入する JavaScript スニペットに変換；
+- HTML または CSS で参照されるイメージファイルを処理し、パスの設定に基づいた目的の場所に移動し、md5 ハッシュを使用して名前付け；
+
+Webpack は非常に強力です。どのように動作するか理解すれば、フロントエンド開発のワークフローを劇的に向上させることが出来ます。欠点としては冗長で複雑な構成です。しかし、このガイドでは Vue.js と `vue-loader` での Webpack を使用する際に一般的な問題の解決策を見つけることができるはずです。

docs/ja/SUMMARY.md

@@ -0,0 +1,21 @@
+- 入門
+  - [Vue Component の仕様](start/spec.md)
+  - [プロジェクトのセットアップ](start/setup.md)
+- 機能
+  - [ES2015](features/es2015.md)
+  - [スコープ付き CSS](features/scoped-css.md)
+  - [CSS モジュール](features/css-modules.md)
+  - [PostCSS](features/postcss.md)
+  - [ホットリロード](features/hot-reload.md)
+- 構成
+  - [プリプロセッサの使用](configurations/pre-processors.md)
+  - [アセット URL ハンドリング](configurations/asset-url.md)
+  - [高度な loader の設定](configurations/advanced.md)
+  - [CSS を単一のファイルに抽出する](configurations/extract-css.md)
+  - [カスタムブロック](configurations/custom-blocks.md)
+- ワークフロー
+  - [プロダクションビルド](workflow/production.md)
+  - [Linting](workflow/linting.md)
+  - [テスト](workflow/testing.md)
+  - [モックを使用したテスト](workflow/testing-with-mocks.md)
+- [オプションリファレンス](options.md)

docs/ja/configurations/advanced.md

@@ -0,0 +1,80 @@
+# 高度な loader の設定
+
+時折こうしたくなるかもしれません：
+
+1. `vue-loader` が推測するのではなく、カスタム loader の文字列を言語に適用する。
+2. デフォルトの言語の組み込み loader の設定の上書き。
+3. 特定の言語ブロックをカスタム loader で前処理か後処理をする。
+
+そうするためには、`vue-loader` に `loaders` オプションを指定してください：
+
+> メモ： `preLoaders` と `postLoaders` は 10.3.0 以上でのみサポートされます
+
+### Webpack 2.x
+
+``` js
+module.exports = {
+  // 他のオプション
+  module: {
+    // module.rules は 1.x での module.loaders と同じです
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          // `loaders` はデフォルトの loaderを上書きします。
+          // 次の設定では、"lang" 属性のない全ての <script> タグに
+          // coffee-loader が適用されます。
+          loaders: {
+            js: 'coffee-loader'
+          },
+
+          // `preLoaders` はデフォルトの loader の前に付加されます。
+          // これを使用して言語ブロックを前処理することができます。
+          // 一般的な使用例はビルドタイム i18n です。
+          preLoaders: {
+            js: '/path/to/custom/loader'
+          },
+
+          // `postLoaders` はデフォルトの loader の後につけられます。
+          //
+          // - `html` の場合、デフォルトの loader によって返される結果は、
+          //   コンパイルされた JavaScript レンダリング関数コードになります。
+          //
+          // - `css` の場合、結果は vue-style-loader によって返されます。
+          //   しかしこれはほとんどの場合特に有用ではありません。
+          //   postcss プラグインを使用する方が良い選択になります。
+          postLoaders: {
+            html: 'babel-loader'
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+### Webpack 1.x
+
+``` js
+// webpack.config.js
+module.exports = {
+  // ほかのオプション
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      }
+    ]
+  },
+  // vue-loader の設定
+  vue: {
+    loaders: {
+      // 上記の設定と同じ
+    }
+  }
+}
+```
+
+高度な loader の設定のより実用的な使用方法は、[CSS を単一のファイルに抽出する](./expression-css.md)にあります。

docs/ja/configurations/asset-url.md

@@ -0,0 +1,22 @@
+# アセット URL ハンドリング
+
+デフォルトで `vue-loader` は [css-loader](https://github.com/webpack/css-loader) と Vue テンプレートコンパイラーでスタイルとテンプレートファイルは自動で処理されます。このコンパイル処理中で全ての `<img src="...">` 、`background: url(...)` や CSS の `@import` のようなアセットの URL は **モジュールの依存関係として処理されます**。
+
+例えば、`url(./image.png)` は `require('./image.png')` に変換され、そして
+
+``` html
+<img src="../image.png">
+```
+
+このようにコンパイルされます：
+
+``` js
+createElement('img', { attrs: { src: require('../image.png') }})
+```
+もちろん `.png` ファイルは JavaScript のファイルではありません。[file-loader](https://github.com/webpack/file-loader) または [url-loader](https://github.com/webpack/url-loader) を使用して Webpack を設定する必要があります。`vue-cli` でスキャフォールドされたプロジェクトでは同じような設定がなされています。
+
+利点の全ては次の通りです：
+
+1. `file-loader` はアセットファイルのコピー先や配置先を制定したり、バージョンハッシュを利用してキャッシングを改善する方法を指定する事が出来ます。さらに、これは、単に**あなたの `* .vue` ファイルの隣にイメージを置くことができ、配備するURLを心配するのではなくフォルダ構造に基づいて相対パスを使用する**ことを意味します。
+
+2. `url-loader` は、指定されたしきい値よりも小さい場合、条件付きでファイルを base-64 データ URL としてインライン化することができます。これにより、単純なファイルに対する HTTP リクエストの量を減らすことができます。 ファイルがしきい値より大きい場合、自動的に `file-loader` にフォールバックします。

docs/ja/configurations/custom-blocks.md

@@ -0,0 +1,67 @@
+# カスタムブロック
+
+> 10.2.0 以上で動作します
+
+`*.vue` ファイル内にカスタム言語ブロックを定義することが出来ます。カスタムブロックの内容は `vue-loader` のオブジェクトで指定された loader によって処理され、次にコンポーネントモジュールによって要求されます。この設定は `lang` 属性の代わりにタグ名を使用する点をのぞいて[高度な loader の設定](../configurations/advanced.md)に記載されたものと似ています。
+
+もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。
+
+## 例
+
+全ての `<docs>` カスタムブロックを一つのドキュメントファイルに展開する例を示します：
+
+#### component.vue
+
+``` html
+<docs>
+## これは example component です
+</docs>
+
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            // 全ての <docs> の内容は raw text として展開されます
+            'docs': ExtractTextPlugin.extract('raw-loader'),
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    // 全ての docs は一つのファイルに出力されます
+    new ExtractTextPlugin('docs.md')
+  ]
+}
+```

docs/ja/configurations/extract-css.md

@@ -0,0 +1,70 @@
+# CSS を単一のファイルに抽出する
+
+すべての Vue コンポーネントで処理されたすべての CSS を1つの CSS ファイルに抽出する例：
+
+### Webpack 2.x
+
+``` bash
+npm install extract-text-webpack-plugin@2.x --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // 他の設定
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              use: 'css-loader',
+              fallback: 'vue-style-loader' // <- これは vue-loader の依存ですので、npm3 を使用している場合は明示的にインストールする必要はありません
+            })
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```
+
+### Webpack 1.x
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // 他の設定
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+    ]
+  },
+  vue: {
+    loaders: {
+      css: ExtractTextPlugin.extract("css"),
+      // <style lang="less">　または他の言語も含めることができます
+      less: ExtractTextPlugin.extract("css!less")
+    }
+  },
+  plugins: [
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```

docs/ja/configurations/pre-processors.md

@@ -0,0 +1,81 @@
+# プリプロセッサの使用
+
+Webpack において、全てのプリプロセッサは対応する loader を適用する必要があります。 `vue-loader` は他の Webpack の loader を使って Vue コンポーネントを処理することが出来ます。言語ブロックの `lang` 属性から適切な loader を自動的に推論します。
+
+### CSS
+
+例えば、SASS で `<style>` タグをコンパイルしましょう：
+
+``` bash
+npm install sass-loader node-sass --save-dev
+```
+
+``` html
+<style lang="sass">
+  /* ここにSASSを書きます */
+</style>
+```
+
+ `<style>` タグ内のテキストコンテンツは、`sass-loader` によって最初にコンパイルされ、その後の処理のために渡されます。
+
+#### sass-loader 使用時の注意
+
+その名前が示すものとは対照的に、[* sass * -loader](https://github.com/jtangelder/sass-loader) はデフォルトで *SCSS* の構文を解析します。インデントされた *SASS* 構文を実際に使用する場合は、それに応じて sass-loader へ vue-loader のオプションを設定する必要があります。
+
+```javascript
+{
+  test: /\.vue$/,
+  loader: 'vue-loader',
+  options: {
+    loaders: {
+      scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss">
+      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
+    }
+  }
+}
+```
+
+vue-loader を構成する方法の詳細については、[高度な loader の設定](./advanced.md)セクションを参照してください。
+
+### JavaScript
+
+全てのVueコンポーネントのJavaScriptはデフォルトで `babel-loader` によって処理されます。しかしもちろんそれは変更することが可能です：
+
+``` bash
+npm install coffee-loader --save-dev
+```
+
+``` html
+<script lang="coffee">
+  # coffeescript を書いてください!
+</script>
+```
+
+### テンプレート
+
+`pug-loader` のようなほとんどのWebpackテンプレート loader は、コンパイルされたHTML文字列の代わりにテンプレート関数を返すので、template の処理は少し異なります。`pug-loader` を使う代わりに、オリジナルの `pug` をインストールをするだけです：
+
+``` bash
+npm install pug --save-dev
+```
+
+``` html
+<template lang="pug">
+div
+  h1 Hello world!
+</template>
+```
+
+> **重要:** もし `vue-loader@<8.2.0` を使うのであれば、`template-html-loader` が必要になります。
+
+### インラインローダーリクエスト
+
+`lang` 属性で [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) を使用することが可能です：
+
+``` html
+<style lang="sass?outputStyle=expanded">
+  /* ここでは拡張出力で sass を使用します */
+</style>
+```
+
+ただこれにより Vue コンポーネントが Webpack 固有となり Browserify および [vueify](https://github.com/vuejs/vueify) と互換性がなくなります。 **Vue コンポーネントを再利用可能なサードパーティコンポーネントとして提供する場合は、この構文を使用しないでください。**