Translate 2.0 docs for advanced & api (ja) (#691)

* Translate 2.0 docs for advanced (ja)

* Translate 2.0 docs for api (ja)

* Add 2.0 Japanese translated doc link

* fix Japanese translation for functional component

Author: tejitak

docs/LANGS.md

@@ -1,2 +1,3 @@
 * [2.0 - English](en/)
+* [2.0 - Japanese](ja/)
 * [0.7 Docs](old/)

docs/ja/advanced/data-fetching.md

@@ -0,0 +1,112 @@
+# データ取得
+
+ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールをレンダリングする前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。
+
+- **ナビゲーション後の取得**: ナビゲーションを先に実行し、その後次に入ってくるコンポーネントのライフサイクルフック内でデータを取得します。データ取得中にローディングを表示します。
+
+- **ナビゲーション前の取得**: ルートに入るガード内でナビゲーション前にデータ取得をします。そして、データ取得後にナビゲーションを実行します。
+
+技術的にはどちらも正当な選択肢です。究極的にはあなたが目指しているユーザーエクスペリエンスに依存します。
+
+## ナビゲーション後の取得
+
+このアプローチを取る時は次に来るコンポーネントが即座にナビゲーションされ、レンダリングされます。そして、コンポーネントの `created` フックの中でデータを取得します。この方法ではネットワーク越しにデータを取得している間にローディング状態を表示する機会があります。また、各 view に対して、異なるローディングの対応をすることもできます。
+
+`$route.params.id` を元にポストのデータを取得する必要がある `Post` コンポーネントを想定してみましょう。
+
+``` html
+<template>
+  <div class="post">
+    <div class="loading" v-if="loading">
+      Loading...
+    </div>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+``` js
+export default {
+  data () {
+    return {
+      loading: false,
+      post: null,
+      error: null
+    }
+  },
+  created () {
+    // view が作られた時にデータを取得し、
+    // そのデータは既に監視されています
+    this.fetchData()
+  },
+  watch: {
+    // ルートが変更されたらこのメソッドを再び呼び出します
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData () {
+      this.error = this.post = null
+      this.loading = true
+      // getPost をあなたのデータ取得用 util や API ラッパーに置き換えてください
+      getPost(this.$route.params.id, (err, post) => {
+        this.loading = false
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+## ナビゲーション前の取得
+
+こちらのアプローチでは新しいルートへ実際にナビゲーションする前にデータを取得します。次に入ってくるコンポーネント内の  `beforeRouteEnter` ガードでデータ取得を実行できます。データ取得が完了したら `next` を呼ぶだけです。
+
+``` js
+export default {
+  data () {
+    return {
+      post: null,
+      error: null
+    }
+  },
+  beforeRouteEnter (route, redirect, next) {
+    getPost(route.params.id, (err, post) => {
+      if (err) {
+        // 何らかのグローバルエラーメッセージを表示する
+      } else {
+        next(vm => {
+          vm.post = post
+        })
+      }
+    })
+  },
+  // コンポーネントが既にレンダリングされている際のルート変更時は
+  // ロジックが少し異なります
+  watch: {
+    $route () {
+      this.post = null
+      getPost(this.$route.params.id, (err, post) => {
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+次に入ってくる view へのリソースを取得している間、ユーザーは現在の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。

docs/ja/advanced/lazy-loading.md

@@ -0,0 +1,44 @@
+# 遅延ローディングルート
+
+バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。
+
+Vue の [非同期コンポーネント機能](http://vuejs.org/guide/components.html#Async-Components) と Webpack の [コード分割機能](https://webpack.github.io/docs/code-splitting.html) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。
+
+必要なことは非同期のルートコンポーネントを定義するだけです。
+
+``` js
+const Foo = resolve => {
+  // require.ensure はコード分割のための Webpack の特殊な文法です。
+  require.ensure(['./Foo.vue'], () => {
+    resolve(require('./Foo.vue'))
+  })
+}
+```
+
+コード分割の文法の代替として、 AMD 形式の require もあります。これを使うと次のように簡略されます。
+
+``` js
+const Foo = resolve => require(['./Foo.vue'], resolve)
+```
+
+特にルート設定を変更する必要はなく、普段のように `Foo` を使用するだけです。
+
+``` js
+const router = new VueRouter({
+  routes: [
+    { path: '/foo', component: Foo }
+  ]
+})
+```
+
+### 同じチャンク内でのコンポーネントグループ化
+
+しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 `require.ensure` の第 3 引数にチャンクの名前を提供する [名前付きチャンク](https://webpack.github.io/docs/code-splitting.html#named-chunks) を使う必要があります。
+
+``` js
+const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
+const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
+const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
+```
+
+Webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。つまり、 `require.ensure` に対して明示的に依存関係をリストする必要がありません (したがって空の配列を渡しています)。

docs/ja/advanced/meta.md

@@ -0,0 +1,51 @@
+# ルートメタフィールド
+
+ルートの定義をする際に `meta` フィールドを含めることができます。
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      children: [
+        {
+          path: 'bar',
+          component: Bar,
+          // メタフィールド
+          meta: { requiresAuth: true }
+        }
+      ]
+    }
+  ]
+})
+```
+
+ではどのように `meta` フィールドにアクセスしましょう？
+
+まず、 `routes` 設定の中の各ルートオブジェクトは**ルートレコード**と呼ばれます。ルートレコードはネストされているかもしれません。したがって、ルートがマッチした時に、潜在的には 1 つ以上のルートレコードがマッチされる可能性があります。
+
+例えば上記のルート設定で、 `/foo/bar` という URL は親のルートレコードにも子のルートレコードにもマッチします。
+
+ルートにマッチした全てのルートレコードは `$route.matched` 配列として `$route` オブジェクト上で (また、ナビゲーションガード上のルートオブジェクトでも) アクセス可能になります。
+
+メタフィールドをグローバルナビゲーションガードで確認するユースケースの例:
+
+``` js
+router.beforeEach((route, redirect, next) => {
+  if (route.matched.some(record => record.meta.requiresAuth)) {
+    // このルートはログインされているかどうか認証が必要です。
+    // もしされていないならば、ログインページにリダイレクトします。
+    if (!auth.loggedIn()) {
+      redirect({
+        path: '/login',
+        query: { redirect: route.fullPath }
+      })
+    } else {
+      next()
+    }
+  } else {
+    next()
+  }
+})
+```

docs/ja/advanced/navigation-guards.md

@@ -0,0 +1,89 @@
+# ナビゲーションガード
+
+この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。
+
+### グローバルガード
+
+`router.beforeEach` を使ってグローバル before ガードを登録できます。
+
+``` js
+const router = new VueRouter({ ... })
+
+router.beforeEach((route, redirect, next) => {
+  // ...
+})
+```
+
+いつナビゲーションがトリガーされようとも、グローバル before ガードは作られた順番で呼び出されます。ガードは非同期に解決されるかもしれません。そしてそのナビゲーションは全てのフックが解決されるまで **未解決状態** として扱われます。
+
+全てのガード関数は 3 つの引数を受け取ります。
+
+- `route: Route`: 次にナビゲーションされる対象の [ルートオブジェクト](../api/route-object.md)。
+
+- `redirect: Function`: この関数を呼び出すことで現在のナビゲーションを中止してリダイレクト対象先の新しいナビゲーションが始まります。
+
+- `next: Function`: このガードを解決し、パイプラインの次のガードに進みます。もしフックが残っていない場合は、このナビゲーションは **確立** されます。
+
+**もし `redirect` も `next` も呼ばれない場合、そのナビゲーションはキャンセルされます。**
+
+グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックはより単純で、ナビゲーションに影響を与えることはできません。
+
+``` js
+router.afterEach(route => {
+  // ...
+})
+```
+
+### ルート単位ガード
+
+直接ルート設定オブジェクトの `beforeEnter` ガードを定義することができます。
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      beforeEnter: (route, redirect, next) => {
+        // ...
+      }
+    }
+  ]
+})
+```
+
+これらのガードはグローバル before ガードと全く同じシグネチャを持ちます。
+
+### コンポーネント内ガード
+
+最後に、 `beforeRouteEnter` と `beforeRouteLeave` を使ってルートコンポーネント内側でルートナビゲーションガードを直接定義することができます。
+
+``` js
+const Foo = {
+  template: `...`,
+  beforeRouteEnter (route, redirect, next) {
+    // このコンポーネントをレンダリングするルートが確立する前に呼ばれます。
+    // `this` でのこのコンポーネントへのアクセスはできません。
+    // なぜならばこのガードが呼び出される時にまだ作られていないからです!
+  },
+  beforeRouteLeave (route, redirect, next) {
+    // このコンポーネントをレンダリングするルートが間もなく
+    // ナビゲーションから離れていく時に呼ばれます。
+    // `this` でのコンポーネントインスタンスへのアクセスができます。
+  }
+}
+```
+
+この `beforeRouteEnter` ガードは `this` へのアクセスは**できない**です。なぜならば、ナビゲーションが確立する前にガードが呼び出されるからです。したがって、新しく入ってくるコンポーネントはまだ作られていないです。
+
+しかしながら、 `next` にコールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。
+
+``` js
+beforeRouteEnter (route, redirect, next) {
+  next(vm => {
+    // `vm` を通じてコンポーネントインスタンスにアクセス
+  })
+}
+```
+
+`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは単純に `next` もしくは `redirect` を呼ばなければキャンセルされます。

docs/ja/advanced/scroll-behavior.md

@@ -0,0 +1,61 @@
+# スクロールの振る舞い
+
+クライアントサイドのルーティングを使っている時に、新しいルートに対してスクロールをトップへ移動させたいかもしれません、もしくは実際のページリロードがしているように history 要素のスクロールポジションを保持したいこともあるかもしれません。 `vue-router` ではこれらをさらによく実現できます。ルートナビゲーションにおけるスクロールの挙動を完全にカスタマイズすることができます。
+
+**注意: この機能は HTML5 history モードでのみ動作します。**
+
+ルートインスタンスを作る時に、 `scrollBehavior` 関数を提供できます。
+
+``` js
+const router = new VueRouter({
+  routes: [...],
+  scrollBehavior (to, from, savedPosition) {
+    // 望みのポジションを返す
+  }
+})
+```
+
+`scrollBehavior` 関数は  `to` と `from` のルートオブジェクトを受け取ります。第 3 引数の `savedPosition` は `popstate` ナビゲーション (ブラウザの戻る/進むボタンがトリガーされた) 時のみ利用可能です。
+
+この関数はスクロールポジションオブジェクトを返すことができます。そのオブジェクトは以下のような形式です。
+
+- `{ x: number, y: number }`
+- `{ selector: string }`
+
+もし falsy な値や空のオブジェクトが返った場合、何もスクロールは起きません。
+
+例:
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+  return { x: 0, y: 0 }
+}
+```
+
+これは単純に全てのルートナビゲーションに対してページスクロールをトップにします。
+
+`savedPosition` を返すことは結果的に戻る/進むボタンを押してナビゲーションした時にネイティブのような挙動になります。
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+  if (savedPosition) {
+    return savedPosition
+  } else {
+    return { x: 0, y: 0 }
+  }
+}
+```
+
+もし"アンカーへスクロール"の振る舞いをシミュレートしたい場合は以下のようにしてください。
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+  if (to.hash) {
+    return {
+      selector: to.hash
+    }
+  }
+}
+```
+
+きめの細かいスクロールの挙動コントロールを実装するために [ルートメタフィールド](meta.md) も利用可能です。詳細な例は [こちら](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js) をご参照ください。