diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 18a67c457..454add3cd 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: 他のライブラリとのインテグレーション permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React はどのような Web アプリケーションにも適用できます。React は他のアプリケーションに組み込むことができ、また少しだけ気を付ければ、React に他のアプリケーションを組み込むこともできます。ここでは一般的なユースケースである [jQuery](https://jquery.com/) と [Backbone](http://backbonejs.org/) を使った例を紹介しますが、同じ考え方はどのような既存のコードにも適用可能です。 -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## DOM 操作プラグインとのインテグレーション {#integrating-with-dom-manipulation-plugins} -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +React は、React の外で DOM に加えられた変更を認識しません。React は自身の内部表現に基づいて更新を決定します。もし同じ DOM ノードが別のライブラリによって操作された場合、React は混乱してしまい、回復する方法がありません。 -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +とはいえ、React と操作プラグインを組み合わせることが不可能、あるいは必ずしも難しいと言っているのではありません。それぞれがやっていることを正しく認識する必要があるのです。 -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +コンフリクトを回避する最も簡単な方法は、React コンポーネントが更新されないようにすることです。これは、空の`
`のように、React から更新する理由がない要素をレンダーすることで実現できます。 -### How to Approach the Problem {#how-to-approach-the-problem} +### この問題への取り組み方法 {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +上記の方法を実証するために、一般的な jQuery プラグインのラッパーを作ってみましょう。 -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +まず、ルート DOM 要素へ [ref](/docs/refs-and-the-dom.html) をアタッチします。`componentDidMount` を使い、ref へのリファレンスを取得し、jQuery プラグインに渡します。 -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +マウントの後に React が DOM をいじってしまうことを防ぐため、`render()` メソッドからは空の `
` 要素を返すようにします。この空の `
` 要素はプロパティや子要素を持たないので、React はそれを更新する理由がなく、jQuery プラグインの側が DOM のその部分を自由に管理できるのです： ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,21 +39,21 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +`componentDidMount` と `componentWillUnmount` の両方の [ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle) を定義したことに注意してください。多くの jQuery プラグインは DOM にイベントリスナーをアタッチするので、それらを `componentWillUnmount` でデタッチすることが重要です。もしプラグインがクリーンアップの方法を提供していない場合、あなた自身で提供する必要があります。メモリリークを防ぐためにプラグインが登録したイベントリスナを削除することを忘れないでください。 -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### jQuery Chosen プラグインとのインテグレーション {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments `` 要素を拡張する [Chosen](https://harvesthq.github.io/chosen/) プラグインの最小のラッパーを書いてみましょう。 >**Note:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +>それが可能だからといって、それが React アプリケーションに最適なアプローチであるという意味ではありません。可能であれば React コンポーネントを使用することをお勧めします。React コンポーネントは React アプリケーションで簡単に再利用でき、また多くの場合、それらの動作や外観をより細かくコントロールできます。 -First, let's look at what Chosen does to the DOM. +まず、Chosen が DOM に対してどういった操作をしているのか確認しましょう。 -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +`` の直後に独自の視覚表現を持つ別の DOM ノードを追加します。その後に jQuery イベントを発生させて変更を通知します。 -Let's say that this is the API we're striving for with our `` wrapper React component: +我々の `` というラッパー React コンポーネントで作成したい API は以下のようなものであるとしましょう： ```js function Example() { @@ -67,9 +67,9 @@ function Example() { } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +わかりやすくするために[非制御コンポーネント](/docs/uncontrolled-components.html)として実装します。 -First, we will create an empty component with a `render()` method where we return `` を `
` で囲んで返す `render()` メソッドを持った、空のコンポーネントを作成します： ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +余分な `
` で `` の直後に別の DOM 要素を追加するからです。しかし、React からみれば、この `
` は常に 1 つの子要素しか持っていません。これにより React による更新が Chosen によって追加された DOM ノードと確実に競合しないようにできるのです。重要なことは、React フローの外側で DOM を変更する場合は、React がその DOM ノードに触る理由を確実になくす必要がある、ということです。 -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` ノードで Chosen を初期化する必要があります。そして `componentWillUnmount` でそれを破棄します： ```js{2,3,7} componentDidMount() { @@ -102,15 +102,15 @@ componentWillUnmount() { [**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +React からすると `this.el` フィールドに特別な意味はありません。以前に `render()` メソッドの中で `ref` からこれに代入したことによって成り立っています： ```js ` managed by Chosen. +コンポーネントをレンダーするにはこれで十分ですが、値の変更について通知を受ける必要もあります。この通知を実現するために、Chosen が管理する ``, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +Chosen のドキュメントによると元の DOM 要素への変更について通知するための API として jQuery `trigger()` API が使えます。`` children managed by React change. +のようにして Chosen は、React が管理する `