update ja docs (#1182)

* docs(ja): update valid option

ref: 069bc31

* docs(ja): add hot reload docs

ref: 14921e4

* docs(ja): translate hot reload docs

* docs(ja): Webpack -> webpack

* docs(ja): update hot reload and scoped css docs

ref: d89bd3c

* docs(ja): translate hot reload and scoped css section

* docs(ja): http -> https

ref: c39ba70

* docs(ja): add cacheBusting option

* docs(ja): translate cacheBusting option

* docs(ja): update workflow/testing0-with-mock section

ref: 21809a0

* docs(ja): update postcss related docs

ref: 2db8c0a

* docs(ja): translate postcss related docs

* docs(ja): remove cacheBusting option

ref: 26cad3d

* docs(ja): update configrations/asset-url docs

ref: 781df8c

* docs(ja): translate configrations/asset-url docs

* docs(ja):  remove webpack 1 reference, refer new cli

ref: 7fb1cd8

* docs(ja): remove workflow/testing-with-mocks docs

ref: 611fda8

* docs(ja): add notice to esmodule option

ref: 96635ea

* docs(ja): translate esmodule option doc

* docs(ja): udpate configrations/asset-url doc

* docs(ja): add new options

ref: a945fca

* docs(ja): add hotRealod option (leak option ... orz)

* docs(ja): adjust option doc layouting

* docs(ja): translate otpions

* docs(ja): fix review comments

Author: kazupon

docs/ja/README.md

@@ -20,9 +20,9 @@
 
 すでに webpack に精通している場合は、次の説明を省略してもかまいません。しかし、webpack を初めて使う人のために、ここで簡単な紹介を行います。
 
-[webpack](http://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。
+[webpack](https://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。
 
-![webpack](http://webpack.github.io/assets/what-is-webpack.png)
+![webpack](https://webpack.github.io/assets/what-is-webpack.png)
 
 基本的な例として、CommonJS モジュールが多数あるとします。これらはブラウザで直接実行できません。なのでそれらを `<script>` タグを介して読み込むことのできる単一のファイルに "バンドル" する必要があります。webpack は `require()` での依存性解決と実行を行うことが出来ます。
 

docs/ja/SUMMARY.md

@@ -18,13 +18,14 @@
   - [プロダクションビルド](workflow/production.md)
   - [リント](workflow/linting.md)
   - [テスト](workflow/testing.md)
-  - [モックを使用したテスト](workflow/testing-with-mocks.md)
 - [オプションリファレンス](options.md)
   - [loaders](options.md#loaders)
   - [preLoaders](options.md#preloaders)
   - [postLoaders](options.md#postloaders)
   - [postcss](options.md#postcss)
   - [postcss.config](options.md#postcssconfig)
+  - [postcss.useConfigFile](options.md#postcssuseconfigfile)
+  - [postcss.cascade](options.md#postcsscascade)
   - [cssSourceMap](options.md#csssourcemap)
   - [esModule](options.md#esmodule)
   - [preserveWhitespace](options.md#preservewhitespace)
@@ -33,4 +34,4 @@
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)
-  - [optimizeSSR](options.md#optimizessr)
+  - [optimizeSSR](options.md#optimizessr)

docs/ja/configurations/advanced.md

@@ -10,8 +10,6 @@
 
 > メモ: `preLoaders` と `postLoaders` は 10.3.0 以降でのみサポートされます
 
-### webpack 2.x
-
 ``` js
 module.exports = {
   // 他のオプション
@@ -57,27 +55,4 @@ module.exports = {
 }
 ```
 
-### 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

@@ -13,8 +13,27 @@
 ``` js
 createElement('img', { attrs: { src: require('../image.png') }})
 ```
+
+### 変換ルール
+
+- URL が絶対パス (例: `./images/foo.png`) の場合、そのままの状態で維持されます。
+
+- URL が `.` による開始である場合、相対的なモジュール要求として解釈され、ファイルシステムのフォルダ構造に基いて解決されます。
+
+- URL が `~` による開始である場合、モジュール要求として解釈された後、何もしません。これは、Node モジュール内部でアセットを参照することもできます:
+
+  ``` html
+  <img src="~some-npm-package/foo.png">
+  ```
+
+- (13.7.0以降) URL が `@` による開始である場合、モジュール要求として解釈されます。これは、webpack 設定ファイルに `@` のエイリアスがある場合は、便利です。デフォルトでは、`vue-cli` によって作成されたプロジェクトでは `./src` を指します。
+
+### 関連ローダー
+
 もちろん `.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を心配するのではなくフォルダ構造に基づいて相対パスを使用する**ことを意味します。

docs/ja/configurations/custom-blocks.md

@@ -41,7 +41,6 @@ comp-a h2 {
 #### webpack.config.js
 
 ``` js
-// webpack 2.x
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {

docs/ja/configurations/extract-css.md

@@ -39,8 +39,6 @@ module.exports = {
 
 すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
 
-### webpack 2.x
-
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -68,36 +66,3 @@ module.exports = {
   ]
 }
 ```
-
-### 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/features/css-modules.md

@@ -89,17 +89,6 @@ CSS モジュールは [css-loader](https://github.com/webpack/css-loader) に
 vue-loader の `cssModules`オプションを使って` css-loader`に追加のクエリオプションを提供することができます:
 
 ``` js
-// webpack 1
-vue: {
-  cssModules: {
-    // ローカルID名を上書きする
-    localIdentName: '[path][name]---[local]---[hash:base64:5]',
-    // キャメルケースを有効にする
-    camelCase: true
-  }
-}
-
-// webpack 2
 module: {
   rules: [
     {

docs/ja/features/hot-reload.md

@@ -4,4 +4,42 @@
 
 ![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
 
+## 状態維持ルール
+
+- コンポーネントの `<template>` を編集するとき、編集されたコンポーネントのインスタンスは、そのまま再描画し、全て現在のプライベートな状態に維持します。これは、テンプレートが副作用を発生させない新しい描画関数にコンパイルされるため可能です。
+
+- コンポーネントの `<script>` 部分を編集するとき、編集されたコンポーネントのインスタンスは破棄され、そのまま再作成されます。(アプリケーション内の他のコンポーネントの状態は維持されています。) これは、`<script>` が副作用を生むかもしれないライフサイクルフックを含むことができるため、一貫性のある動作を保証するためには再描画の代わりに"リロード"が必要です。これはまた、コンポーネントライフサイクルフック内のタイマーのようなグローバルな副作用に注意する必要があることを意味します。場合によっては、コンポーネントでグローバルな副作用が発生する場合は、フルページリロードの必要があるかもしれません。
+
+- `<style>` ホットリロードは `vue-style-loader` を介して単独で動作するため、アプリケーションの状態に影響しません。
+
+## Usage
+
 `vue-cli` を使ってプロジェクトをスキャホールドすると、ホットリロードはすぐに使えるようになります。
+
+プロジェクトを手動で設定するときは、ホットリロードは、`webpack-dev-server --hot` によってプロジェクトを提供するとき、自動的に有効なります。
+
+上級者は、`vue-loader` によって内部的に使用されいてる [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api) を確認することができます。
+
+## ホットリロードの無効
+
+ホットリロードは以下の状況を除いて常に有効です:
+
+ * webpack の `target` が `node` (SSR)
+ * webpack ミニファイコード
+ * `process.env.NODE_ENV === 'production'`
+  
+ホットリロードを明示的に無効にするためには、`hotReload: false` オプションを使用してください:
+
+``` js
+module: {
+  rules: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        hotReload: false // ホットリロードを無効
+      }
+    }
+  ]
+}
+```

docs/ja/features/postcss.md

@@ -4,32 +4,30 @@
 
 ## 設定ファイルの使用
 
-バージョン 11.0 以降、 `vue-loader` は [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) でサポートされているものと同じ PostCss の設定ファイルのオートロードをサポートします:
+`vue-loader` は [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) でサポートされているものと同じ PostCss の設定ファイルのオートロードをサポートします:
 
 - `postcss.config.js`
 - `.postcssrc`
 - `package.json` 内の `postcss`
 
 設定ファイルを使用すると `postcss-loader` で処理された通常の CSS ファイルと `*.vue` ファイル内の CSS で同じ設定を共有することができます。
 
-## インラインオプション
+## `postcss-loader` の使用
 
-あるいは、 `vue-loader` の `postcss` オプションを使用して `*.vue` ファイル用の PostCSS の設定を指定することが出来ます。
+`vue-loader` は内部的にはスタイルで PostCSS を扱うため、スタンドアロンの CSS ファイルに `postcss-loader` を適用する必要あります。プロジェクトに PostCSS 設定ファイルがある場合は、style ブロックに `lang="postcss"` を指定する必要はありません。
 
-webpack 1.x の例:
+時々、ユーザーはシンタックスハイライトを目的のみに `lang="postcss"`を使用することもあります。13.6.0 から、以下の一般的な PostCSS 拡張 (`vue-loader` 自身の `loaders` オプションを介して)のためにローダーが明示的に指定されていない場合は、それらは `vue-loader` のデフォルト PostCSS 変換を単に追加します:
 
-``` js
-// webpack.config.js
-module.exports = {
-  // 他の設定
-  vue: {
-    // カスタムされた PostCSS プラグインを使用します
-    postcss: [require('postcss-cssnext')()]
-  }
-}
-```
+- `postcss`
+- `pcss`
+- `sugarss`
+- `sss`
+
+## インラインオプション
+
+あるいは、 `vue-loader` の `postcss` オプションを使用して `*.vue` ファイル用の PostCSS の設定を指定することが出来ます。
 
-webpack 2.x の例:
+例:
 
 ``` js
 // webpack.config.js
@@ -61,7 +59,21 @@ module.exports = {
   postcss: {
     plugins: [...], // プラグインのリスト
     options: {
-      parser: sugarss // sugarss パーサーを使用します
+      parser: 'sugarss' // sugarss パーサーを使用します
     }
   }
   ```
+
+### 自動設定ファイルの読み込みを無効にする
+
+`13.6.0 以降`では、`postcss.useConfigFile: false` を指定することによって自動 postcss 設定ファイルの読み込みが無効化されます:
+
+``` js
+postcss: {
+  useConfigFile: false,
+  plugins: [/* ... */],
+  options: {/* ... */}
+}
+```
+
+これにより `*.vue` ファイル内の postcss 設定をインライン設定で完全に制御することができます。

docs/ja/features/scoped-css.md

@@ -1,5 +1,7 @@
 # スコープ付き CSS
 
+**再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。# スコープ付き CSS
+
 `scoped` 属性をもつ `<style>` タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。PostCSS を使用して以下を変換することによって実現しています:
 
 ``` html
@@ -28,40 +30,49 @@
 </template>
 ```
 
-#### 注意
+## 秘訣
+
+### ローカルスタイルとグローバルスタイルの混在
+
+同じコンポーネントでスコープ付き、そして非スコープ付きスタイル両方を含むことができます:
+
+``` html
+<style>
+/* グローバルスタイル */
+</style>
 
-1. 同じコンポーネント内にスコープで区切られてものとそうでないスタイルを含むことが出来ます：
+<style scoped>
+/* ローカルスタイル */
+</style>
+```
 
-  ``` html
-  <style>
-  /* グローバルスタイル */
-  </style>
+### 子コンポーネントのルート要素
 
-  <style scoped>
-  /* ローカルスタイル */
-  </style>
-  ```
+`scoped` によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。
 
-2. 子コンポーネントのルートノードは親のスコープの CSS と子のスコープの CSS の両方の影響をうけます。
+### ディープセレクタ
+
+`scoped` スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、`>>>` コンビネータを使用することができます:
+
+``` html
+<style scoped>
+.a >>> .b { /* ... */ }
+</style>
+```
+
+上記は以下にコンパイルされます:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
 
-3. パーシャルはスコープ付きスタイルの影響をうけません。
+SASS のようないくつかのプリプロセッサは、`>>>` を適切に解析できないかもしれません。そのようなケースでは `/deep/` コンビネータを代わりに使用することができます。それは、`>>>` のエイリアスで、全く同じような動作します。
 
-4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
+### 動的に生成されるコンテンツ
 
-5. **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。
+`v-html` によって作成された DOM コンテンツは、スコープ付きスタイルにの影響を受けませんが、ディープセレクタを使用してスタイルを設定することはできます。
 
-6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります:
+### 留意すること
 
-    ``` html
-    <style scoped>
-    .a >>> .b {
-    
-    }
-    </style>
-    
-    <style lang="scss" scoped>
-    .a /deep/ .b {
-    
-    }
-    </style>
-    ```
+- **スコープ付きスタイルでは class は必要です。** ブラウザが様々な CSS セレクタを描画するため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](https://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
+- **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。