Merge pull request vuejs#30 from kazupon/translation

Translation for japanese

Author: yyx990803

docs/LANGS.md

@@ -1,2 +1,3 @@
 * [English](en/)
 * [简体中文](zh-cn/)
+* [日本語](ja/)

docs/ja/README.md

@@ -0,0 +1 @@
+SUMMARY.md

docs/ja/SUMMARY.md

@@ -0,0 +1,15 @@
+# Table of Contents
+
+- [Vuex は何ですか？](intro.md)
+- [中核概念](concepts.md)
+  - [ステート](state.md)
+  - [ミューテーション](mutations.md)
+  - [アクション](actions.md)
+- [データフロー](data-flow.md)
+- [アプリケーションの構造](structure.md)
+- [ミドルウェア](middlewares.md)
+- [厳格モード](strict.md)
+- [フォームのハンドリング](forms.md)
+- [テスト](testing.md)
+- [ホットリローディング](hot-reload.md)
+- [API リファレンス](api.md)

docs/ja/actions.md

@@ -0,0 +1,137 @@
+# アクション
+
+アクションはミューテーションをディスパッチする機能です。アクションは非同期にすることができ、単一アクションは複数のミューテーションをディスパッチできます。
+
+アクションは何かが起こるための意向を表しており、それを呼び出すコンポーネントから離れて詳細を抽象化します。コンポーネントが何かしたい場合アクション呼び出します。アクションはステート変化をもたらすため、コールバックまたは戻り値について心配する必要はなく、そしてステート変化は更新するコンポーネントの DOM をトリガします。コンポーネントは、アクションが実際に行われている方法から、完全に切り離されます。
+
+それゆえ、通常アクション内部のデータエンドポイントへの API 呼び出しを行い、そしてアクションを呼び出すコンポーネントの両方から非同期に詳細を隠し、さらにミューテーションはアクションによってトリガされます。
+
+> Vuex のアクションは純粋な Flux の定義では実際には "アクションクリエータ (action creators)" ですが、私はその用語は便利よりも混乱していると見ています。
+
+### 単純なアクション
+
+アクションは単純に単一のミューテーションをトリガするのが一般的です。Vuex はそのようなアクションの定義するために省略記法を提供します:
+
+``` js
+const store = new Vuex.Store({
+  state: {
+    count: 1
+  },
+  mutations: {
+    INCREMENT (state, x) {
+      state.count += x
+    }
+  },
+  actions: {
+    // 省略記法
+    // ミューテーション名を提供する
+    increment: 'INCREMENT'
+  }
+})
+```
+
+今、アクションを呼び出すとき:
+
+``` js
+store.actions.increment(1)
+```
+
+単純に私たちに対して以下を呼び出します:
+
+``` js
+store.dispatch('INCREMENT', 1)
+```
+
+アクションに渡される任意の引数は、ミューテーションハンドラに渡されることに注意してください。
+
+### 標準なアクション
+
+現在のステートに依存しているロジック、または非同期な操作を必要とするアクションについては、それらを関数として定義します。アクション関数は常に第1引数として呼び出す store を取得します:
+
+``` js
+const vuex = new Vuex({
+  state: {
+    count: 1
+  },
+  mutations: {
+    INCREMENT (state, x) {
+      state += x
+    }
+  },
+  actions: {
+    incrementIfOdd: (store, x) => {
+      if ((store.state.count + 1) % 2 === 0) {
+        store.dispatch('INCREMENT', x)
+      }
+    }
+  }
+})
+```
+
+
+関数本体それほど冗長にしない ES6 の argument destructuring を使用するのが一般的です(ここでは、`dispatch` 関数は store インスタンスに事前にバインドされているように、それをメソッドとして呼び出す必要はありません):
+
+``` js
+// ...
+actions: {
+  incrementIfOdd: ({ dispatch, state }, x) => {
+    if ((state.count + 1) % 2 === 0) {
+      dispatch('INCREMENT', x)
+    }
+  }
+}
+```
+
+以下のように、文字列省略記法は基本的に糖衣構文 (syntax sugar) です:
+
+``` js
+actions: {
+  increment: 'INCREMENT'
+}
+// 以下に相当 ... :
+actions: {
+  increment: ({ dispatch }, ...payload) => {
+    dispatch('INCREMENT', ...payload)
+  }
+}
+```
+
+### 非同期なアクション
+
+非同期なアクションの定義に対して同じ構文を使用することができます:
+
+``` js
+// ...
+actions: {
+  incrementAsync: ({ dispatch }, x) => {
+    setTimeout(() => {
+      dispatch('INCREMENT', x)
+    }, 1000)
+  }
+}
+```
+
+より実践的な例はショッピングカートをチェックアウトする場合です。複数のミューテーションをトリガする必要がある場合があります。チェックアウトを開始されたとき、成功、そして失敗の例を示します:
+
+``` js
+// ...
+actions: {
+  checkout: ({ dispatch, state }, products) => {
+    // カートアイテムで現在のアイテムを保存する
+    const savedCartItems = [...state.cart.added]
+    // チェックアウトリクエストを送り出し、
+    // 楽観的にカートをクリアします
+    dispatch(types.CHECKOUT_REQUEST)
+    // shop API は成功コールバックと失敗コールバックを受け入れます
+    shop.buyProducts(
+      products,
+      // 成功処理
+      () => dispatch(types.CHECKOUT_SUCCESS),
+      // 失敗処理
+      () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
+    )
+  }
+}
+```
+
+また、全てのコンポーネントは全体のチェックアウトを行うために `vuex.actions.checkout(products)` を呼び出す必要があります。

docs/ja/api.md

@@ -0,0 +1,93 @@
+# API リファレンス
+
+### Vuex.Store
+
+``` js
+import Vuex from 'vuex'
+
+const store = new Vuex.Store({ ...options })
+```
+
+### Vuex.Store コンストラクタオプション
+
+- **state**
+  
+  - 型: `Object`
+
+    Vuex store 向けの root なステートオブジェクト
+
+    [詳細](state.md)
+
+- **mutations**
+
+  - 型: `Object | Array<Object>`
+
+    各エントリキーがミューテーション名とその値がミューテーションハンドラ関数である値であるオブジェクト。ハンドラ関数は常に第1引数として`state` を受信し、そして次のディスパッチ呼び出しに渡される全ての引数を受信する
+
+    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
+
+    [詳細](mutations.md)
+
+- **actions**
+
+  - 型: `Object | Array<Object>`
+
+    各エントリキーがアクション名とその値のいずれかであるオブジェクト
+
+    1. ミューテーション名の文字列。または、
+    2. 第1引数として store を受信する関数、第2引数以降は追加されたペイロード引数
+
+    Vuex はこれらエントリを処理し、そして実際に呼び出し可能なアクション関数を作成し、さらに store の `actions` プロパティを公開する
+
+    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
+
+    [詳細](actions.md)
+
+- **middlewares**
+
+  - 型: `Array<Object>`
+
+    ミドルウェアオブジェクトの配列で以下のような形式であること:
+
+    ``` js
+    {
+      snapshot: Boolean, // default: false
+      onInit: Function,
+      onMutation: Function
+    }
+    ```
+
+    全てのフィールドは任意 [詳細](middlewares.md)
+
+- **strict**
+
+  - 型: `Boolean`
+  - デフォルト値: `false`
+
+    Vuex store を 厳格モードに強制する。厳格モードではミューテーションハンドラの外側の Vuex ステートに任意に変異するとき、エラーを投げる
+
+    [詳細](strict.md)
+
+### Vuex.Store インスタンスプロパティ
+
+- **state**
+
+  - 型: `Object`
+
+    root なステート。読み取り専用
+
+- **actions**
+
+  - 型: `Object`
+
+    呼び出し可能なアクション関数
+
+### Vuex.Store インスタンスメソッド
+
+- **dispatch(mutationName: String, ...args)**
+
+  直接ミューテーションをディスパッチする。これは一般的には、アプリケーションコードでアクションを使用するほうが必要な場合のような、特定の状況で有用
+
+- **hotUpdate(newOptions: Object)**
+
+  ホットスワップな新しいアクションとミューテーション [詳細](hot-reload.md)

docs/ja/book.json

@@ -0,0 +1 @@
+../book.json

docs/ja/concepts.md

@@ -0,0 +1,31 @@
+# 中核概念
+
+Vuex Store を作成するために `Vuex.Store` コンストラクタを使用できます。ほとんどの場合、各アプリケーション毎に単独の store だけが必要になります。各 Vuex Store は 3 種類の "構成要素" からなります:
+
+- **ステート**: アプリケーション状態を表すプレーンなオブジェクト
+
+- **ミューテーション**: 状態を変異させる関数。ミューテーションは**同期**必須
+
+- **アクション**: ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
+
+どうして、状態を操作する単純な機能よりもむしろ、*ミューテーション*と*アクション*を区別したいのでしょうか？その理由は、**ミューテーションを分離したいのと非同期**のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
+
+> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の**アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の **アクション (actions)** に相当します。
+
+### Vuex Store の作成
+
+> **NOTE:** 残りのドキュメント向けのコード例に対して ES2015 シンタックスを使用します。それについて理解できない場合は、[ここで](https://babeljs.io/docs/learn-es2015/)で学習してください！ドキュメントは既に[大規模アプリケーションの構築](http://vuejs.org/guide/application.html)で説明した概念にに精通している前提としています。
+
+Vuex Store を作成することは非常に簡単です。上記の構成要素を一緒に入れると下記になります:
+
+``` js
+import Vuex from 'vuex'
+
+const store = new Vuex.Store({
+  state: { ... },
+  actions: { ... },
+  mutations: { ... }
+})
+```
+
+一度作成すると、ステートは `store.state` 経由、アクションは `store.actions` 経由でアクセスすることができます。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは `store.dispatch()` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。

docs/ja/data-flow.md

@@ -0,0 +1,92 @@
+# データフロー
+
+Vuex アプリケーション内部のデータフローをより理解を得るために、Vuex で単純にカウンタするアプリケーションを構築してみましょう。これは概念を説明する目的のための簡単な例であることに注意してください。実際には、このような単純なタスクのために Vuex は必要ありません。
+
+### セットアップ
+
+``` js
+// store.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+```
+
+### アプリケーションのステートを定義
+
+``` js
+const state = {
+  count: 0
+}
+```
+
+### ステート可能なミューテーションを定義
+
+``` js
+const mutations = {
+  INCREMENT (state) {
+    state.count++
+  },
+  DECREMENT (state) {
+    state.count--
+  }
+}
+```
+
+### 呼び出し可能なアクションを定義
+
+``` js
+const actions = {
+  increment: 'INCREMENT',
+  decrement: 'DECREMENT'
+}
+```
+
+### Vuex Store を作成
+
+``` js
+export default new Vuex.Store({
+  state,
+  mutations,
+  actions
+})
+```
+
+### Vue コンポーネントでの使用
+
+**テンプレート**
+
+``` html
+<div>
+  Clicked: {{ count }} times
+  <button v-on:click="increment">+</button>
+  <button v-on:click="decrement">-</button>
+</div>
+```
+
+**スクリプト**
+
+``` js
+import store from './store.js'
+
+export default {
+  computed: {
+    // 算出プロパティ(computed property) を使用してステートにバインド
+    count () {
+      return store.state.count
+    }
+  },
+  methods: {
+    increment: store.actions.increment,
+    decrement: store.actions.decrement
+  }
+}
+```
+
+ここでは、コンポーネントが非常に単純であることに注意しましょう。それは単に Vuex store からいくつかのステートを表示し(データそれ自身でさえ所有しません)、そしてユーザー入力イベントでいくつかの store のアクションを呼び出します。
+
+Flux であるような、データの流れが一方向であることに注意しましょう:
+
+<p align="center">
+  <img width="700px" src="vuex.png">
+</p>