fix: update ja docs (#3214)

kazupon · ktsn · web-flow · commit c05f741cd642 · 2020-06-07T20:07:57.000+09:00
* docs(ja): update NOTE: fdf5756 * docs(ja): pick NOTE: a55ae44 * docs(ja): pick NOTE: a8fe4fc * docs(ja): pick NOTE: 039bd8f * docs(ja): translate * docs(ja): remove NOTE: 41b9ac8 * docs(ja): update NOTE: 5c5b8ab * docs(ja): update NOTE: e014630 * docs(ja): translate * docs(ja): update NOTE: 23d87d8 * docs(ja): update NOTE: 8fdd9c5 * docs(ja): pick NOTE: 6ec0ee5 * docs(ja): translate * docs(ja): pick NOTE: f11e531 * docs(ja): translate * docs(ja): update NOTE: 231f4a5 * docs(ja): add sponsor links * Update docs/ja/api/README.md Co-authored-by: Katashin <ktsn55@gmail.com> * Update docs/ja/installation.md Co-authored-by: Katashin <ktsn55@gmail.com> * fix: fixed miss take translation Co-authored-by: Katashin <ktsn55@gmail.com>
diff --git a/docs/ja/README.md b/docs/ja/README.md
@@ -4,6 +4,8 @@
 TypeScriptユーザの場合、 `vue-router@3.0+` は `vue@2.5+` を必須とし、逆もまた同様です。
 :::
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 Vue Router は [Vue.js](http://vuejs.org) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです:
 
 - ネストされたルート/ビューマッピング
diff --git a/docs/ja/api/README.md b/docs/ja/api/README.md
@@ -16,17 +16,49 @@ sidebar: auto
 
 - HTML5 history モードで `base` オプションを使っている時に、 `to` プロパティの URL にそれを含める必要がありません。
 
-### 外側の要素へのアクティブクラスの適用
+### `v-slot` API (3.1.0 以降)
 
-アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `<router-link>` を使って外側の要素を描画して、その内側に生の `<a>` タグをラップすることができます。
+`router-link` は[スコープ付きスロット](https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88)を通して低レベルなカスタマイズを提供しています。これは、主にライブラリ作者をターゲットにした高度な API ですが、ほとんどの場合 _NavLink_ などのようなカスタムコンポーネントでも同様に開発者にとっても大変便利です。
 
-``` html
-<router-link tag="li" to="/foo">
-  <a>/foo</a>
+**`v-slot` API を使うとき、それは単一の子を `router-link` に通す必要がります。**そうしない場合は、 `router-linke` は `span` 要素で子をラップします。
+
+```html
+<router-link
+  to="/about"
+  v-slot="{ href, route, navigate, isActive, isExactActive }"
+>
+  <NavLink :active="isActive" :href="href" @click="navigate"
+    >{{ route.fullPath }}</NavLink
+  >
+</router-link>
+```
+
+- `href`: 解決された url。これは、`a` 要素の `href` 属性になります
+- `route`: 解決された正規化済みロケーション
+- `navigate`: ナビゲーションをトリガーするための関数。`router-link` と同じように、**必要なときに自動的にイベントが起こらないようにします。**
+- `isActive`: [アクティブクラス (active class)](#active-class) が適用されるとき、`true` になります。任意のクラスを適用できます。
+- `isExactActive`: `true` if the [正確なアクティブクラス (exact active class)](#exact-active-class) が適用されるとき、`true` になります。 任意のクラスを適用できます。
+
+#### 例: アクティブクラスを外部要素へ適用
+
+アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、`<router-link>` 内の要素を `v-slot` を使ってリンクを作成することでラップできます。
+
+```html
+<router-link
+  to="/foo"
+  v-slot="{ href, route, navigate, isActive, isExactActive }"
+>
+  <li
+    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
+  >
+    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
+  </li>
 </router-link>
 ```
 
-この時、 `<a>` は実際のリンクになります (そして正しい `href` が得られます)。しかし、アクティブクラスは外側の `<li>` に適用されます。
+:::tip
+`target="_blank"` を `a` 要素に追加する場合、`@click="navigate"` ハンドラを省略しなければなりません。
+:::
 
 ## `<router-link>` Props
 
@@ -112,7 +144,7 @@ sidebar: auto
 
   ``` html
   <!-- このリンクは `/` だけにアクティブになります -->
-  <router-link to="/" exact>
+  <router-link to="/" exact></router-link>
   ```
 
   アクティブリンククラスをより説明している例としてこちらの [動作](https://jsfiddle.net/8xrk1n9f/) を確認してください。
@@ -131,6 +163,13 @@ sidebar: auto
 
   完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。
 
+### aria-current-value
+
+- 型: `'page' | 'step' | 'location' | 'date' | 'time'`
+- デフォルト: `"page"`
+
+  完全一致によってリンクがアクティブになっているときに `aria-current` の値を設定します。ARIA spec において[aria-current で許可されている値](https://www.w3.org/TR/wai-aria-1.2/#aria-current)の1つでなければなりません。ほとんどの場合、デフォルト`page` が最適です。
+
 ## `<router-view>`
 
 `<router-view>` コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです。`<router-view>` の中で描画されるコンポーネント自身もまた、ネストされたパスに対してコンポーネントを描画するための `<router-view>` を持つことができます。
@@ -164,8 +203,8 @@ name ではないプロパティも描画されるコンポーネントに渡さ
 
   `RouteConfig` の型宣言:
 
-  ``` js
-  declare type RouteConfig = {
+  ``` ts
+  interface RouteConfig = {
     path: string;
     component?: Component;
     name?: string; // 名前付きルート用
@@ -313,7 +352,9 @@ router.afterEach((to, from) => {})
 
 ``` js
 router.push(location, onComplete?, onAbort?)
+router.push(location).then(onComplete).catch(onAbort)
 router.replace(location, onComplete?, onAbort?)
+router.replace(location).then(onComplete).catch(onAbort)
 router.go(n)
 router.back()
 router.forward()
@@ -462,7 +503,8 @@ router.onError(callback)
   const router = new VueRouter({
     routes: [
       // 以下のオブジェクトがルートレコード
-      { path: '/foo', component: Foo,
+      { path: '/foo',
+        component: Foo,
         children: [
           // こちらもルートレコード
           { path: 'bar', component: Bar }
diff --git a/docs/ja/guide/README.md b/docs/ja/guide/README.md
@@ -6,6 +6,8 @@
 すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。
 :::
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこで描画するかを知らせるだけです。以下が基本的な例です。
 
 ## HTML
diff --git a/docs/ja/guide/advanced/data-fetching.md b/docs/ja/guide/advanced/data-fetching.md
@@ -1,5 +1,7 @@
 # データ取得
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールを描画する前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。
 
 - **ナビゲーション後の取得**: ナビゲーションを先に実行し、その後次に入ってくるコンポーネントのライフサイクルフック内でデータを取得します。データ取得中にローディングを表示します。
@@ -17,7 +19,7 @@
 ``` html
 <template>
   <div class="post">
-    <div class="loading" v-if="loading">
+    <div v-if="loading" class="loading">
       Loading...
     </div>
 
diff --git a/docs/ja/guide/advanced/lazy-loading.md b/docs/ja/guide/advanced/lazy-loading.md
@@ -1,5 +1,7 @@
 # 遅延ローディングルート
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。
 
 Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント) と webpack の [コード分割機能](https://webpack.js.org/guides/code-splitting-async/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。
diff --git a/docs/ja/guide/advanced/meta.md b/docs/ja/guide/advanced/meta.md
@@ -1,5 +1,7 @@
 # ルートメタフィールド
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 ルートの定義をする際に `meta` フィールドを含めることができます。
 
 ``` js
diff --git a/docs/ja/guide/advanced/navigation-guards.md b/docs/ja/guide/advanced/navigation-guards.md
@@ -1,5 +1,7 @@
 # ナビゲーションガード
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。
 
 **パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます。
@@ -34,7 +36,24 @@ router.beforeEach((to, from, next) => {
 
   - **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。
 
-  **常に `next` 関数を呼び出すようにしてください。そうでなければ、フックは決して解決されません。**
+  **与えられたナビゲーションガードを通過する任意のパスにおいて、常に 1 回だけ `next` 関数が呼び出されるようにしてください。それは 1 回以上出現することがありますが、論理パスが重ならないときだけで、そうしないないとフックは決して解決されない、またはエラーが発生します。** 以下は、ユーザーが認証されていない場合、`/login` にリダレクトするための例です:
+
+```js
+// BAD
+router.beforeEach((to, from, next) => {
+  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
+  // ユーザーが認証されていない場合、 `next` は2回呼ばれる
+  next()
+})
+```
+
+```js
+// GOOD
+router.beforeEach((to, from, next) => {
+  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
+  else next()
+})
+```
 
 ## グローバル解決ガード
 
@@ -140,7 +159,7 @@ beforeRouteLeave (to, from, next) {
 
 ## 完全なナビゲーション解決フロー
 1. ナビゲーションがトリガされる
-2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ
+2. 非アクティブ化されたコンポーネントで `beforeRouteLeave` ガードを呼ぶ
 3. グローバル `beforeEach` ガードを呼ぶ
 4. 再利用されるコンポーネントで `beforeRouteUpdate` ガードを呼ぶ (2.2 以降)
 5. ルート設定内の `beforeEnter` を呼ぶ
diff --git a/docs/ja/guide/advanced/scroll-behavior.md b/docs/ja/guide/advanced/scroll-behavior.md
@@ -1,5 +1,7 @@
 # スクロールの振る舞い
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 クライアントサイドのルーティングを使っている時に、新しいルートに対してスクロールをトップへ移動させたいかもしれません、もしくは実際のページリロードがしているように history 要素のスクロールポジションを保持したいこともあるかもしれません。 `vue-router` ではこれらをさらによく実現できます。ルートナビゲーションにおけるスクロールの挙動を完全にカスタマイズすることができます。
 
 **注意: この機能は ブラウザが `history.pushState` をサポートしている場合のみ動作します。**
diff --git a/docs/ja/guide/advanced/transitions.md b/docs/ja/guide/advanced/transitions.md
@@ -1,5 +1,7 @@
 # トランジション
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 基本的に `<router-view>` は動的コンポーネントなので、 `<transition>` コンポーネントを使うのと同じ方法でトランジションを適用することができます。
 
 ``` html
diff --git a/docs/ja/guide/essentials/dynamic-matching.md b/docs/ja/guide/essentials/dynamic-matching.md
@@ -1,5 +1,7 @@
 # 動的ルートマッチング
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 `User` コンポーネントは全てのユーザーに対して描画されるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。`vue-router` ではパスの中の動的なセグメントを使用して実現できます。
 
 ``` js
diff --git a/docs/ja/guide/essentials/history-mode.md b/docs/ja/guide/essentials/history-mode.md
@@ -1,5 +1,7 @@
 # HTML5 History モード
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 `vue-router` のデフォルトは _hash モード_ です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。
 
 その hash を取り除くために、ページのリロード無しに URL 遷移を実現する `history.pushState` API を利用したルーターの **history モード** を使うことができます。
@@ -50,9 +52,9 @@ const fs = require('fs')
 const httpPort = 80
 
 http.createServer((req, res) => {
-  fs.readFile('index.htm', 'utf-8', (err, content) => {
+  fs.readFile('index.html', 'utf-8', (err, content) => {
     if (err) {
-      console.log('We cannot open "index.htm" file.')
+      console.log('We cannot open "index.html" file.')
     }
 
     res.writeHead(200, {
diff --git a/docs/ja/guide/essentials/named-routes.md b/docs/ja/guide/essentials/named-routes.md
@@ -1,5 +1,7 @@
 # 名前付きルート
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 しばしば、名前を使ってルートを特定できるとより便利です。特にルートにリンクするときやナビゲーションを実行するときなどです。Router インスタンスを作成するときに `routes` オプションの中でルートに名前を付けることができます。
 
 ``` js
diff --git a/docs/ja/guide/essentials/named-views.md b/docs/ja/guide/essentials/named-views.md
@@ -1,5 +1,7 @@
 # 名前付きビュー
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 しばしば、ネストをさせずに同時に複数の view を表示する必要があるでしょう。例えば、`sidebar` view と `main` view を使ったレイアウトを作成する時です。そんな時に名前付きビューは便利です。あなたの view に 1 つのアウトレットを持つのではなく、複数のそれぞれが名前付きの view を持つことができます。名前を持たない `router-view` はその名前として `default` が付与されます。
 
 ``` html
diff --git a/docs/ja/guide/essentials/navigation.md b/docs/ja/guide/essentials/navigation.md
@@ -1,5 +1,7 @@
 # プログラムによるナビゲーション
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 宣言的なナビゲーションとしてアンカータグを作成する `<router-link>` がありますが、ルーターのインスタンスメソッドを使ったプログラムによる方法でもそれは可能です。
 
 #### `router.push(location, onComplete?, onAbort?)`
diff --git a/docs/ja/guide/essentials/nested-routes.md b/docs/ja/guide/essentials/nested-routes.md
@@ -1,5 +1,7 @@
 # ネストされたルート
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 実際のアプリケーションの UI では通常複数のレベルの階層的にネストしたコンポーネントで構成されます。ネストされたコンポーネントの特定の構造に対して URL のセグメントを対応させることはよくあります。例:
 
 ```
diff --git a/docs/ja/guide/essentials/passing-props.md b/docs/ja/guide/essentials/passing-props.md
@@ -1,5 +1,7 @@
 # ルートコンポーネントにプロパティを渡す
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 コンポーネントで `$route` を使うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定のURLでしか使用できないなど柔軟性が制限されます。
 
 コンポーネントをルーターから分離するために `props` オプションを使います:
diff --git a/docs/ja/guide/essentials/redirect-and-alias.md b/docs/ja/guide/essentials/redirect-and-alias.md
diff --git a/docs/ja/installation.md b/docs/ja/installation.md
