Translate #59

source/api/filters.md

@@ -62,7 +62,7 @@ order: 7
 
 ### key
 
-- このフィルタは `v-on` でのみ動作します
+- このフィルタは `v-on` との組み合わせでのみ動作します
 - このフィルタはちょうど1つ引数を必要とします
 
 キーコード(keyCode) が引数と一致するときだけ呼び出されるために、`v-on` に指定されたハンドラ(handler) を Wrap します。少数のよく使われるキーの代わりに、以下のような文字列エイリアスも利用できます。
@@ -84,14 +84,20 @@ order: 7
 
 `doSomething` は Enter キーが押されたときにのみ呼び出されます。
 
+### debounce
+
+- このフィルタは `v-on` との組み合わせでのみ動作します
+- このフィルタは1つ任意な引数を必要とします
+
+X が引数であるとすると、X ミリ秒の間デバウンスするために、指定されたハンドラを Wrap します。デフォルトでは 300ms です。デバウンスされたハンドラは、少なくとも呼び出された瞬間から X ミリ秒経過するまで遅延されます; 遅延期間が終わる前に再びハンドラが呼ばれた場合、遅延期間は X ミリ秒にリセットされます。
+
 ### filterBy
 
-**構文:** `filterBy searchKey [in dataKey]`.
+**構文:** `filterBy searchKey [in dataKey...]`.
 
-- このフィルタは `v-repeat` でのみ動作します
-- これは computed なフィルタです
+- このフィルタは配列の値に対してのみ動作します
 
-`v-repeat` でのみ、元の配列のフィルタされたバージョンを表示させます。`searchkey` 引数は ViewModel コンテキスト上のプロパティキーです。プロパティの値は文字列として検索するために利用されます:
+元の配列のフィルタされたバージョンを返します。`searchkey` 引数は ViewModel コンテキスト上のプロパティキーです。プロパティの値は文字列として検索するために利用されます:
 
 ``` html
 <input v-model="searchText">
@@ -107,32 +113,44 @@ order: 7
 ``` html
 <input v-model="searchText">
 <ul>
-  <li v-repeat="users | filterBy searchText in name">{{name}}</li>
+  <li v-repeat="user in users | filterBy searchText in name">{{name}}</li>
 </ul>
 ```
 
-上記では、今まさに `searchText` の値が `name` プロパティで見つかった場合は、そのアイテムのみが一致します。なので、値 `'555'` な `searchText`は、もはやこのアイテムと一致しませんが、値 `'Jack'` なら一致します。
+上記では、今まさに `searchText` の値が `name` プロパティで見つかった場合は、そのアイテムのみが一致します。文字列リテラルの引数であることを明示するために、`name` をクオートで囲む必要があることに注意してください。この制約により、値 `'555'` な `searchText` は、もはやこのアイテムと一致しませんが、値 `'Jack'` なら一致します。
 
-最後に、リテラル引数を指定するためシングルクオートを利用できます:
+> 0.12.11 以降のみ
+
+0.12.11 からは複数のデータキーを渡すことができます:
 
 ``` html
-<ul>
-  <li v-repeat="users | filterBy '555' in 'phone'">{{name}}</li>
-</ul>
+<li v-repeat="user in users | filterBy searchText in 'name' 'phone'"></li>
+```
+
+または、配列の値で動的に引数を渡すことができます:
+
+``` html
+<!-- fields = ['fieldA', 'fieldB'] -->
+<div v-repeat="user in users | filterBy searchText in fields">
+```
+
+または、1つのカスタムフィルタ関数のみを渡します:
+
+``` html
+<div v-repeat="user in users | filterBy myCustomFilterFunction">
 ```
 
 ### orderBy
 
 **構文:** `orderBy sortKey [reverseKey]`.
 
-- このフィルタは `v-repeat` でのみ動作します
-- これは computed なフィルタです
+- このフィルタは配列の値に対してのみ動作します
 
-`v-repeat` で表示された結果をソートします。`sortKey` 引数は ViewModel コンテキスト上のプロパティキーです。そのプロパティの値は配列のアイテムをソートするためのキーとして利用されます。任意な `reverseKey` 引数もまた、ViewModel コンテキスト上のプロパティキーです。しかし、この値の真偽は、結果が反転されるべきかどうかを決定します。
+入力された配列のソートされたバージョンを返します。`sortKey` 引数は ViewModel コンテキスト上のプロパティキーです。そのプロパティの値は配列のアイテムをソートするためのキーとして利用されます。任意な `reverseKey` 引数もまた、ViewModel コンテキスト上のプロパティキーです。しかし、この値の真偽は、結果が反転されるべきかどうかを決定します。
 
 ``` html
 <ul>
-  <li v-repeat="users | orderBy field reverse">{{name}}</li>
+  <li v-repeat="user in users | orderBy field reverse">{{name}}</li>
 </ul>
 ```
 
@@ -150,6 +168,6 @@ new Vue({
 
 ``` html
 <ul>
-  <li v-repeat="users | orderBy 'name' -1">{{name}}</li>
+  <li v-repeat="user in users | orderBy 'name' -1">{{name}}</li>
 </ul>
 ```

source/api/options.md

@@ -30,6 +30,8 @@ data.a = 3
 vm.a   // -> 3
 ```
 
+Vue の内部的なプロパティや API メソッドと衝突する可能性があるため、`_` または `$` から始まるプロパティは Vue インスタンスにプロキシされないことに注意してください。それらは `vm.$data._property` としてアクセスできます。
+
 このオブジェクトは JSON の仕様に準拠する必要があります（循環参照はありません）。普通のオブジェクトと同じように使うことができ、`JSON.stringify` でシリアライズしたときと全く同じになります。複数の Vue インスタンス間で共有することも可能です。
 
 `Vue.extend()` 内の `data` オプションを使うときは特別です。ネストされたオブジェクトが、すべての継承されたコンストラクタから作られたインスタンスによって共有されないようにするため、デフォルトのデータの最新のコピーを返す関数を提供する必要があります。
@@ -47,7 +49,7 @@ var MyComponent = Vue.extend({
 })
 ```
 
-<p class="tip">内部実装的には、Vue.js は隠しプロパティ `__ob__` を備えており、依存関係の修正を可能にするために、オブジェクトの数えられるプロパティを getter と setter に再帰的に変換します。`$` や `_` で始まるキーをもつプロパティは、スキップされます。</p>
+<p class="tip">内部実装的には、Vue.js は隠しプロパティ `__ob__` を備えており、依存関係の修正を可能にするために、オブジェクトの数えられるプロパティを getter と setter に再帰的に変換します。</p>
 
 ### props
 

source/guide/components.md

@@ -586,7 +586,7 @@ MyComponent
 
 ### アセットの命名規則
 
-コンポーネントやディレクティブのようなあるアセットは、HTML 属性または HTML カスタムタグの形でテンプレートに表示されます。HTML 属性名とタグ名は**大文字と小文字を区別しない**ため、私達はしばしばキャメルケースの代わりにダッシュケースを使用して私達のアセットに名前をつける必要があります。**0.12.9** 以降では、キャメルケースを使用してアセットに名前をつけるのをサポートし、テンプレートでダッシュケースでそれらを使用します。
+コンポーネントやディレクティブのようなあるアセットは、HTML 属性または HTML カスタムタグの形でテンプレートに表示されます。HTML 属性名とタグ名は**大文字と小文字を区別しない**ため、私達はしばしばキャメルケースの代わりにダッシュケースを使用して私達のアセットに名前をつける必要があります。**0.12.11** 以降では、キャメルケース (camelCase) またはパスカルケース (PascalCase) を使用してアセットに名前をつけるのをサポートし、テンプレートでダッシュケースでそれらを使用します。
 
 **例**
 
@@ -606,14 +606,15 @@ components: {
 これは [ES6 object literal shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_6) でうまく動作します: 
 
 ``` js
-import compA from './components/a';
-import compB from './components/b';
+// PascalCase
+import TextBox from './components/text-box';
+import DropdownMenu from './components/dropdown-menu';
 
 export default {
   components: {
-    // <comp-a> そして <comp-b> としてテンプレートで使用
-    compA,
-    compB
+    // <text-box> そして <dropdown-menu> としてテンプレートで使用
+    TextBox
+    DropdownMenu
   }
 }
 ```

source/guide/computed.md

@@ -7,45 +7,107 @@ Vue.js のインライン expression は非常に便利ですが、最良のユ
 
 Vue.js では `computed` オプションを使って computed properties を定義します。
 
+computed property は他の値に依存する値を宣言的に記述するために利用されます。テンプレート内で computed property にデータバインドすると、Vue は computed property が依存する値のどれかが変化したときに DOM を更新することを知ります。これは非常にパワフルにでき、かつより宣言的でデータドリブンなコードになり、それによってメンテナンスが容易になります。
+
+多くの場合 computed property を使うことは命令的な `$watch` コールバックを使うよりも良いアイデアです。この例を考えてみます:
+
+``` html
+<div id="demo">{{fullName}}</div>
+```
+
+``` js
+var vm = new Vue({
+  data: {
+    firstName: 'Foo',
+    lastName: 'Bar',
+    fullName: 'Foo Bar'
+  }
+})
+
+vm.$watch('firstName', function (val) {
+  this.fullName = val + ' ' + this.lastName
+})
+
+vm.$watch('lastName', function (val) {
+  this.fullName = this.firstName + ' ' + val
+})
+```
+
+上記のコードは命令的で扱いにくいです。computed property によるバージョンと比べてみましょう:
+
 ``` js
 var demo = new Vue({
   data: {
     firstName: 'Foo',
     lastName: 'Bar'
   },
   computed: {
-    fullName: {
-      // getter で望む値を返します
-      get: function () {
-        return this.firstName + ' ' + this.lastName
-      },
-      // setter は任意です
-      set: function (newValue) {
-        var names = newValue.split(' ')
-        this.firstName = names[0]
-        this.lastName = names[names.length - 1]
-      }
+    fullName: function () {
+      return this.firstName + ' ' + this.lastName
     }
   }
 })
-
-demo.fullName // 'Foo Bar'
 ```
 
-getter のみしか必要がない場合は、オブジェクトの代わりに関数を一つ渡すこともできます:
+ずっと良いでしょう。加えて、computed property による setter も定義できます。
 
 ``` js
 // ...
 computed: {
-  fullName: function () {
-    return this.firstName + ' ' + this.lastName 
-  }    
+  fullName: {
+    // getter
+    get: function () {
+      return this.firstName + ' ' + this.lastName
+    },
+    // setter
+    set: function (newValue) {
+      var names = newValue.split(' ')
+      this.firstName = names[0]
+      this.lastName = names[names.length - 1]
+    }
+  }
 }
 // ...
 ```
 
-要するに computed property は getter/setter 関数を定義したプロパティです。あたかも通常のプロパティとして使用することができますが、実際にアクセスした時は getter 関数によって値が返されます。また、値を変更した時は、その新しい値を引数として setter 関数をトリガします。
+### computed property のキャッシュ
+
+0.12.8 より前は、computed properties は getter のように振舞っていました - アクセスするたびに getter 関数は再評価されていました。0.12.8 ではこれが改善され、computed properties はキャッシュされて reactive dependencies のうち1つでも変化した場合にのみ再評価されます。
+
+巨大な配列のループと多くの計算を必要とする高価な computed property A を持っているとします。そして、他に A に依存する computed properties を持っているとします。キャッシュが無いと、A の getter が必要以上に多く呼び出され、潜在的なパフォーマンスの問題の原因になります。キャッシュがあると、A の値は依存するものの値が変化しない限りキャッシュされ、繰り返しアクセスしても必要のない計算を引き起こしません。
+
+しかしながら、"reactive dependency" がどのように考えられているのか理解することは重要です:
+
+``` js
+var vm = new Vue({
+  data: {
+    msg: 'hi'
+  },
+  computed: {
+    example: {
+      return Date.now() + this.msg
+    }
+  }
+})
+```
+
+上記の例では、computed property は `vm.msg` を頼っています。これは Vue インスタンス上で監視されているデータプロパティであるため、reactive dependency であるとされます。`vm.msg` が変化したときは、`vm.example` の値は再評価されます。
+
+しかし、Vue のデータ監視システムとの間で何もしないため、`Date.now()` は reactive dependency **ではありません**。そのため、プログラムで `vm.example` にアクセスしたとき、`vm.msg` の再評価が行われない限りは同じタイムスタンプが残り続けるでしょう。
+
+アクセスするたびに `vm.example` を単純に再評価して欲しいというような、シンプルな getter のような挙動を保ちたいという場合もあるでしょう。0.12.11 からは、特定の computed property のキャッシュを無効化できます。
+
+``` js
+computed: {
+  example: {
+    cache: false,
+    get: function () {
+      return Date.now() + this.msg
+    }
+  }
+}
+```
 
-0.12.8 より前は、computed properties は getter のように振舞います。それにアクセスするたびに、getter 関数は再評価されます。0.12.8 ではこれは改善されました。computed properties はキャッシュされ、必要なときにだけ、lazily に再評価されます。
+これで、`vm.example` にアクセスするたびにタイムスタンプは更新されるでしょう。しかし、これは JavaScript 内でのプログラムでのアクセスにのみ影響します; データバインディングは依然として依存関係ドリブンです。テンプレート内で `{% raw %}{{example}}{% endraw %}` として computed property をバインドした場合、DOM は reactive dependency が変化したときのみ更新されるでしょう。
 
 次: [カスタムディレクティブ](/guide/custom-directive.html)

source/guide/custom-filter.md

@@ -36,19 +36,50 @@ Vue.filter('wrap', function (value, begin, end) {
 これまでフィルタはモデルから渡される値をビューに表示される前に変換するために使用していました。しかし、input 要素などのビューからモデルに書き込みがされる前に値を変換するフィルタの定義も可能です。
 
 ``` js
-Vue.filter('check-email', {
-  // read は任意のもので、
-  // ここではデモ用に記載します
-  read: function (val) {
-    return val
+Vue.filter('currencyDisplay', {
+  currencyDisplay: {
+    // model -> view
+    // input 要素が更新される際に値を変換します。
+    read: function(val) {
+      return '$'+val.toFixed(2)
+    },
+    // view -> model
+    // データが更新される際に値を変換します。
+    write: function(val, oldVal) {
+      var number = +val.replace(/[^\d.]/g, '')
+      return isNaN(number) ? 0 : number
+    }
+  }
+}
+```
+
+デモ:
+
+{% raw %}
+<div id="two-way-filter-demo" class="demo">
+  <input type="text" v-model="money | currencyDisplay">
+  <p>Model value: {{money}}</p>
+</div>
+<script>
+new Vue({
+  el: '#two-way-filter-demo',
+  data: {
+    money: 123.45
   },
-  // モデルへの書き出しが行われる前に
-  // 呼び出されます
-  write: function (val, oldVal) {
-    return isEmail(val) ? val : oldVal
+  filters: {
+    currencyDisplay: {
+      read: function(val) {
+        return '$'+val.toFixed(2)
+      },
+      write: function(val, oldVal) {
+        var number = +val.replace(/[^\d.]/g, '')
+        return isNaN(number) ? 0 : number
+      }
+    }
   }
 })
-```
+</script>
+{% endraw %}
 
 ## 動的な引数