Translate 2.0 docs for essentials (ja) (#685)

tejitak · posva · commit 821df0c44181 · 2016-09-29T09:54:31.000+02:00
* Translate 2.0 docs for summary and essentials (ja) * reflect translation review comments * fix Japanese typo * fix typo according to PR #693
diff --git a/docs/ja/README.md b/docs/ja/README.md
@@ -0,0 +1 @@
+SUMMARY.md
diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md
@@ -0,0 +1,30 @@
+# vue-router 2
+
+> 注意: vue-router@2.x は Vue 2.x のみで動作します。
+
+- [0.7 のドキュメントをお探しですか?](https://github.com/vuejs/vue-router/tree/1.0/docs/en)
+- [リリースノート](https://github.com/vuejs/vue-router/releases)
+- [インストール](installation.md)
+- 基本的な使い方
+  - [はじめに](essentials/getting-started.md)
+  - [動的ルートマッチング](essentials/dynamic-matching.md)
+  - [ネストされたルート](essentials/nested-routes.md)
+  - [プログラムによるナビゲーション](essentials/navigation.md)
+  - [名前付きルート](essentials/named-routes.md)
+  - [名前付きビュー](essentials/named-views.md)
+  - [リダイレクトとエイリアス](essentials/redirect-and-alias.md)
+  - [HTML5 History モード](essentials/history-mode.md)
+- 高度な使い方
+  - [ナビゲーションガード](advanced/navigation-guards.md)
+  - [ルートメタフィールド](advanced/meta.md)
+  - [トランジション](advanced/transitions.md)
+  - [データの取得](advanced/data-fetching.md)
+  - [スクロールの振る舞い](advanced/scroll-behavior.md)
+  - [遅延ローディング](advanced/lazy-loading.md)
+- API リファレンス
+  - [router-link](api/router-link.md)
+  - [router-view](api/router-view.md)
+  - [ルートオブジェクト](api/route-object.md)
+  - [ルートコンストラクタオプション](api/options.md)
+  - [ルートインスタンス](api/router-instance.md)
+  - [コンポーネント注入](api/component-injections.md)
diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md
@@ -0,0 +1,62 @@
+# 動的ルートマッチング
+
+パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 `User` コンポーネントは全てのユーザーに対してレンダリングされるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。`vue-router` ではパスの中の動的なセグメントを使用して実現できます。
+
+``` js
+const User = {
+  template: '<div>User</div>'
+}
+
+const router = new VueRouter({
+  routes: [
+    // コロンで始まる動的セグメント
+    { path: '/user/:id', component: User }
+  ]
+})
+```
+
+これで `/user/foo` や `/user/bar` などの URL 両方とも同じルートにマッチします。
+
+動的セグメントはコロン `:` を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポーネント内で `this.$route.params` として利用可能になります。したがって、現在の `User' のテンプレートを次のように更新することで現在のユーザー ID を表示することができます。
+
+``` js
+const User = {
+  template: '<div>User {{ $route.params.id }}</div>'
+}
+```
+
+[こちら](http://jsfiddle.net/yyx990803/4xfa2f19/) のデモの例も確認してみてください。
+
+1 つのルートが複数の動的なセグメントを持つこともできます。そして、それらは `$route.params` の一致したフィールドとマップされます。例:
+
+| パターン | マッチしたパス | $route.params |
+|---------|------|--------|
+| /user/:username | /user/evan | `{ username: 'evan' }` |
+| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` |
+
+`$route.params` に加えて、`$route` オブジェクトでは `$route.query` (もし URL 上にクエリがあるなら) や `$route.hash` など便利な情報も利用可能です。それらの詳細については [API リファレンス](../api/route-object.md) でご確認ください。
+
+### パラメーター変更の検知
+
+ルートのパラメーターを使う際に特筆すべき点は、ユーザーが `/user/foo` から `/user/bar` へ遷移するときに**同じコンポーネントインスタンスが再利用される**ということです。 両方のルートが同じコンポーネントをレンダリングするため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。**しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。**
+
+同じコンポーネントでパラメーター変更を検知するためには、 `$route` オブジェクトを watch するだけです。
+
+``` js
+const User = {
+  template: '...',
+  watch: {
+    '$route' (to, from) {
+      // ルートの変更の検知...
+    }
+  }
+}
+```
+
+### 高度なマッチングパターン
+
+`vue-router` はパスのマッチングエンジンとして [path-to-regexp](https://github.com/pillarjs/path-to-regexp) を使っています。これは Optional による動的なセグメント、Zero or more / One or more に対する要求、また、カスタム正規表現パターンまでもサポートしています。 これらの高度なパターンについてはこちらの [ドキュメンテーション](https://github.com/pillarjs/path-to-regexp#parameters) または、 `vue-router` の中でそれらを使っている [こちらの例](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) をご参照ください。
+
+### マッチングの優先度
+
+しばしば同じURLで複数のルートがマッチすることがあります。そのようなケースではマッチングの優先度はルートの定義された順番によって決定されます。先に定義されたルートほど優先度が高くなります。
diff --git a/docs/ja/essentials/getting-started.md b/docs/ja/essentials/getting-started.md
@@ -0,0 +1,65 @@
+# はじめに
+
+> ガイド内のコードのサンプルは [ES2015](https://github.com/lukehoban/es6features) を使っています。
+
+Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこでレンダリングするかを知らせるだけです。以下が基本的な例です。
+
+### HTML
+
+``` html
+<div id="app">
+  <h1>Hello App!</h1>
+  <p>
+    <!-- ナビゲーションに router-link コンポーネントを使う -->
+    <!-- リンク先を `to` プロパティに指定します -->
+    <!-- デフォルトで <router-link> は `<a>` タグとしてレンダリングされます -->
+    <router-link to="/foo">Go to Foo</router-link>
+    <router-link to="/bar">Go to Bar</router-link>
+  </p>
+  <!-- ルートアウトレット -->
+  <!-- ルートとマッチしたコンポーネントがここへレンダリングされます -->
+  <router-view></router-view>
+</div>
+```
+
+### JavaScript
+
+``` js
+// 0. モジュールシステムを使っている場合、 Vue.use(VueRouter) を呼び出します
+
+// 1. ルートコンポーネントを定義します
+// 他のファイルからインポートすることもできます
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+// 2. ルートをいくつか定義します
+// 各ルートは 1 つのコンポーネントとマッピングされる必要があります。
+// このコンポーネントは実際の Vue.extend() によって作られたコンポーネントコンストラクタでも
+// コンポーネントオプションのオブジェクトでも構いません
+// ネストされたルートに関しては後で説明します
+const routes = [
+  { path: '/foo', component: Foo },
+  { path: '/bar', component: Bar }
+]
+
+// 3. ルーターインスタンスを作成して、ルートオプションを渡します
+// 追加のオプションをここで指定できますが、
+// この例ではシンプルにしましょう
+const router = new VueRouter({
+  routes // routes: routes の短縮表記
+})
+
+// 4. root となるインスタンスを作成してマウントします
+// アプリケーション全体がルーターを認知できるように、
+// ルーターをインジェクトすることを忘れないでください。
+const app = new Vue({
+  router
+}).$mount('#app')
+
+// これで開始です!
+```
+
+[動作](http://jsfiddle.net/yyx990803/xgrjzsup/) の例も確認してみてください.
+
+`<router-link>` は対象のルートがマッチした時に自動的に `.router-link-active` が付与されるのにお気づきでしょうか。
+より詳細については [API リファレンス](../api/router-link.md) をご参照ください。
diff --git a/docs/ja/essentials/history-mode.md b/docs/ja/essentials/history-mode.md
@@ -0,0 +1,60 @@
+# HTML5 History モード
+
+`vue-router` のデフォルトは _hash モード_ です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。
+
+その hash を取り除くために、ページのリロード無しに URL 遷移を実現する `history.pushState` API を利用したルーターの **history モード** を使うことができます。
+
+``` js
+const router = new VueRouter({
+  mode: 'history',
+  routes: [...]
+})
+```
+
+history モードを使用する時は、URL は "普通" に見えます e.g. `http://oursite.com/user/id`。美しいですね!
+
+しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直接 `http://oursite.com/user/id` にアクセスした場合に 404 エラーが発生します。
+
+心配する必要はありません。この問題を直すためには、単純な catch-all フォールバックのためのルートをサーバー側で追加するだけです。もし URL がどの静的なアセットにもマッチしなかった時はあなたのアプリケーションが動作しているのと同じ `index.html` ページで受け付けましょう。これも美しいですね!
+
+## サーバーの設定例
+
+#### Apache
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
+
+#### nginx
+
+```nginx
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+#### Node.js (Express)
+
+Node.js/Express では [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback) の利用を検討してください。
+
+## 注意
+
+この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。
+
+``` js
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '*', component: NotFoundComponent }
+  ]
+})
+```
+
+他の方法として、もしあなたが Node.js サーバーを使っている場合、入ってきた URL とマッチさせて、マッチしなかった場合に 404 を返答するサーバーサイドのルーターを使って fallback を実装することもできます。
diff --git a/docs/ja/essentials/named-routes.md b/docs/ja/essentials/named-routes.md
@@ -0,0 +1,31 @@
+# 名前付きルート
+
+しばしば、名前を使ってルートを特定できるとより便利です。特にルートにリンクするときやナビゲーションを実行するときなどです。Router インスタンスを作成するときに `routes` オプションの中でルートに名前を付けることができます。
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/user/:id',
+      name: 'user',
+      component: User
+    }
+  ]
+})
+```
+
+名前を付けたルートにリンクするには、 `router-link` コンポーネントの `to` プロパティにオブジェクトを渡します。
+
+``` html
+<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
+```
+
+これはプログラムで `router.push()` を呼び出すときに使われるオブジェクトと全く同じです。
+
+``` js
+router.push({ name: 'user', params: { userId: 123 }})
+```
+
+どちらのケースもルーターは `/user/123` のパスにナビゲーションします。
+
+完全な例は [こちら](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js) です。
diff --git a/docs/ja/essentials/named-views.md b/docs/ja/essentials/named-views.md
@@ -0,0 +1,29 @@
+# 名前付きビュー
+
+しばしば、ネストをさせずに同時に複数の view を表示する必要があるでしょう。例えば、`sidebar` view と `main` view を使ったレイアウトを作成する時です。そんな時に名前付きビューは便利です。あなたの view に 1 つのアウトレットを持つのではなく、複数のそれぞれが名前付きの view を持つことができます。名前を持たない `router-view` はその名前として `default` が付与されます。
+
+``` html
+<router-view class="view one"></router-view>
+<router-view class="view two" name="a"></router-view>
+<router-view class="view three" name="b"></router-view>
+```
+
+1 つの view は 1 つのコンポーネントを使ってレンダリングされます。したがって、同じルートに対する複数の view には複数のコンポーネントが必須になります。この `components` (s が付いている) オプションに注意してください。
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      components: {
+        default: Foo,
+        a: Bar,
+        b: Baz
+      }
+    }
+  ]
+})
+```
+
+この例の動作しているデモは 
+[こちら](https://jsfiddle.net/posva/9b80nxx1/) です。
diff --git a/docs/ja/essentials/navigation.md b/docs/ja/essentials/navigation.md
@@ -0,0 +1,68 @@
+# プログラムによるナビゲーション
+
+宣言的なナビゲーションとしてアンカータグを作成する `<router-link>` がありますが、ルーターのインスタンスメソッドを使ったプログラムによる方法でもそれは可能です。
+
+#### `router.push(location)`
+
+異なる URL へ遷移するときに `router.push` が使えます。このメソッドは history スタックに新しいエントリを追加します。それによってユーザーがブラウザの戻るボタンをクリックした時に前の URL に戻れるようになります。
+
+
+このメソッドは `<router-link>` をクリックした時に内部的に呼ばれています。つまり `<router-link :to="...">` をクリックすることは `router.push(...)` を呼ぶことと等価です。
+
+| 宣言的 | プログラム的 |
+|-------------|--------------|
+| `<router-link :to="...">` | `router.push(...)` |
+
+引数は文字列のパス、もしくは、location を記述するオブジェクトが使えます。例:
+
+``` js
+// 文字列
+router.push('home')
+
+// オブジェクト
+router.push({ path: 'home' })
+
+// 名前付きルート
+router.push({ name: 'user', params: { userId: 123 }})
+
+// 結果的に /register?plan=private になる query
+router.push({ path: 'register', query: { plan: 'private' }})
+```
+
+#### `router.replace(location)`
+
+これは `router.push` のように動作しますが、異なる点は新しい history エントリを追加しないで遷移することです。この名前から推定されるように、現在のエントリを置換します。
+
+| 宣言的 | プログラム的 |
+|-------------|--------------|
+| `<router-link :to="..." replace>` | `router.replace(...)` |
+
+
+#### `router.go(n)`
+
+このメソッドは、history スタックの中でどのくらいステップを進めるか、もしくは戻るのか、を表す 1 つの integer をパラメーターとして受け取ります。`window.history.go(n)` と類似しています。
+
+例
+
+``` js
+// 1 つレコードを進める。history.forward() と同じ
+router.go(1)
+
+// 1 つレコードを戻す。history.back() と同じ
+router.go(-1)
+
+// 3 つレコードを進める
+router.go(3)
+
+// もし多くのレコードが存在しない場合、サイレントに失敗します
+router.go(-100)
+router.go(100)
+```
+
+#### History 操作
+
+もしかすると `router.push`、`router.replace`、`router.go` は [`window.history.pushState`、`window.history.replaceState`、`window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History) と対応することにお気づきかもしれません。これらは `window.history` API を模倣しています。
+
+したがって、もしあなたが既に [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API) について詳しい場合は、vue-router による History 操作はとても簡単です。
+
+vue-router のナビゲーションメソッド (`push`、`replace`、`go`) は全てのモード (`history`、`hash`、`abstract`) で一貫して動作することは特筆すべき点です。
diff --git a/docs/ja/essentials/nested-routes.md b/docs/ja/essentials/nested-routes.md
diff --git a/docs/ja/essentials/redirect-and-alias.md b/docs/ja/essentials/redirect-and-alias.md
diff --git a/docs/ja/installation.md b/docs/ja/installation.md
