diff --git a/docs/08-working-with-the-browser.ja-JP.md b/docs/08-working-with-the-browser.ja-JP.md new file mode 100644 index 00000000..f801ed34 --- /dev/null +++ b/docs/08-working-with-the-browser.ja-JP.md @@ -0,0 +1,137 @@ +--- +id: working-with-the-browser +title: ブラウザと動くこと +permalink: working-with-the-browser-ja-JP.html +prev: forms-ja-JP.html +next: more-about-refs-ja-JP.html +--- + +Reactはほとんどのケースで、DOMを直接触ることからあなたを解放するパワフルな抽象性を提供します。しかし、単純に根本的なAPIにアクセスする必要がある場合もあります。サードパーティのライブラリや現存するコードと動かす必要があるかもしれません。 + +## 仮想DOM + +ReactはDOMと直接対話を行わないため、とても速いです。Reactは速いメモリ上のDOMの表現を持っています。 `render()` メソッドはDOMの *記述* をリターンします。Reactはこの記述とメモリ上の表現のdiffをとることができ、ブラウザを更新する最速の方法を計算することができます。 + +加えて、Reactはブラウザ依存があるにも関わらず、W3Cの使用に則っていると保証されているイベントオブジェクトのような、完全に合成されたイベントシステムを実行します。HTML5のイベントをIE8で使うこともできます! + +パフォーマンスが優れており、簡単であると思われるので、ほとんどの場合、Reactの「偽のブラウザ」を使うべきです。しかし、jQueryプラグインのようなサードパーティのライブラリと動かすかもしれません。基本的なAPIに単純にアクセスする必要がある時もあります。Reactは基本的なDOMのAPIを直接使うための脱出口を提供しています。 + +## 参照とfindDOMNode() + +ブラウザと相互に影響するために、DOMノードへの参照が必要になるでしょう。ReactはコンポーネントのDOMノードへの参照を得ることができる `React.findDOMNode(component)` 関数を持っています。 + +> 注意: +> `findDOMNode()` はマウントされたコンポーネントの上でのみ動きます(これは、DOMに配置されたコンポーネントという意味です)。まだマウントされていない(まだ作成されていないコンポーネントの上で `render()` の `findDOMNode()` を呼ぶようなものです)コンポーネントの上でこれを呼ぼうとした場合、例外がスローされます。 + +Reactのコンポーネントへの参照を得るためには、現在のReactコンポーネントを得るために `this` を使ったり、あなたがオーナーのコンポーネントを表す参照を使ったりできます。それらは、以下のように動きます。 + +```javascript +var MyComponent = React.createClass({ + handleClick: function() { + // 生のDOMのAPIを使ってテキスト入力に明確にフォーカスします。 + React.findDOMNode(this.refs.myTextInput).focus(); + }, + render: function() { + // この参照属性はコンポーネントがマウントされた時に、 + // this.refs のコンポーネントへの参照を追加します。 + return ( +