Merge pull request #663 from reactjs/tr/render

Translate "render"

Author: smikitky

Diff for: src/content/reference/react-dom/render.md

@@ -1,18 +1,18 @@
 ---
-title: render
+title: レンダー
 ---
 
 <Deprecated>
 
-This API will be removed in a future major version of React.
+この API は、今後のメジャーバージョンの React で削除される予定です。
 
-In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
+React 18 では、`render` は [`createRoot`](/reference/react-dom/client/createRoot) に置き換えられました。React 18 で `render` を使用すると、アプリは React 17 を実行しているかのような振る舞いになるとの警告が表示されます。詳細は[こちらをご覧ください。](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
 
 </Deprecated>
 
 <Intro>
 
-`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
+`render` は、ブラウザの DOM ノードに [JSX](/learn/writing-markup-with-jsx)（"React ノード"）をレンダーします。
 
 ```js
 render(reactNode, domNode, callback?)
@@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `render(reactNode, domNode, callback?)` {/*render*/}
 
-Call `render` to display a React component inside a browser DOM element.
+`render` を呼び出して、ブラウザの DOM 要素に React コンポーネントを表示します。
 
 ```js
 import { render } from 'react-dom';
@@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
 
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+React は `domNode` 内に `<App />` を表示し、その内部の DOM の管理を行います。
 
-An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
+React で完全に構築されたアプリには、ルートコンポーネントを引数にした `render` 呼び出しが通常 1 つのみ存在します。ページ内に React を「散りばめて」使用するページの場合は、必要なだけ `render` を呼び出すことができます。
 
-[See more examples below.](#usage)
+[さらに例を見る](#usage)
 
-#### Parameters {/*parameters*/}
+#### 引数 {/*parameters*/}
 
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. 
+* `reactNode`: 表示したい *React ノード*。通常は `<App />` のような JSX ですが、[`createElement()`](/reference/react/createElement) で構築した React 要素や、文字列、数値、`null`、または `undefined` を渡すこともできます。
 
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
+* `domNode`: [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。React は、渡された `reactNode` をこの DOM 要素内に表示します。この瞬間から、React は `domNode` 内の DOM を管理し、React ツリーが変更されたときにそれを更新するようになります。
 
-* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
+* **省略可能** `callback`: 関数。渡された場合、React はコンポーネントが DOM に配置された後にそれを呼び出します。
 
 
-#### Returns {/*returns*/}
+#### 返り値 {/*returns*/}
 
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+`render` は通常 `null` を返します。ただし、渡す `reactNode` が*クラスコンポーネント*の場合、そのコンポーネントのインスタンスを返します。
 
-#### Caveats {/*caveats*/}
+#### 注意点 {/*caveats*/}
 
-* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+* React 18 では、`render` は [`createRoot`](/reference/react-dom/client/createRoot) に置き換えられました。React 18 以降では `createRoot` を使用してください。
 
-* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
+* `render` を初めて呼び出したとき、React は React ルート内の既存の HTML コンテンツをすべてクリアしてから、React コンポーネントをレンダーします。`domNode` がサーバ上であるいはビルド中に React によって生成された HTML を含んでいる場合は、代わりに既存の HTML にイベントハンドラをアタッチできる [`hydrate()`](/reference/react-dom/hydrate) を使用してください。
 
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+* 同じ `domNode` に対して `render` を複数回呼び出すと、React は最新の JSX を反映するために必要なだけの DOM の更新を行います。React は、渡された JSX を以前にレンダーしたツリーと[「マッチング」](/learn/preserving-and-resetting-state)して、DOM のどの部分が再利用でき、どの部分を再作成する必要があるのかを決定します。同じ `domNode` に対して複数回 `render` を呼び出すことは、ルートコンポーネントで [`set` 関数](/reference/react/useState#setstate)を呼び出すことに似ており、React は不必要な DOM 更新を回避します。
 
-* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
+* アプリが完全に React で構築されている場合、アプリ内で `render` を呼び出すのは通常 1 回だけです。（フレームワークを使用している場合、この呼び出しはフレームワークが行うかもしれません。）DOM ツリー内の、コンポーネントの子ではない別の部分に JSX をレンダーしたい場合（例えばモーダルやツールチップ）、`createRoot` の代わりに [`createPortal`](/reference/react-dom/createPortal) を使用してください。
 
 ---
 
-## Usage {/*usage*/}
+## 使用法 {/*usage*/}
 
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+`render` を呼び出して、<CodeStep step={1}>React コンポーネント</CodeStep>を<CodeStep step={2}>ブラウザの DOM ノード</CodeStep>内に表示します。
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
 import { render } from 'react-dom';
@@ -79,9 +79,9 @@ import App from './App.js';
 render(<App />, document.getElementById('root'));
 ```
 
-### Rendering the root component {/*rendering-the-root-component*/}
+### ルートコンポーネントのレンダー {/*rendering-the-root-component*/}
 
-In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
+React で完全に構築されたアプリでは通常、"ルート" コンポーネントをレンダーするためにスタートアップ時に**これを一度だけ行います**。
 
 <Sandpack>
 
@@ -101,13 +101,13 @@ export default function App() {
 
 </Sandpack>
 
-Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
+通常、`render` を再度呼び出したり複数の場所で呼び出したりする必要はありません。この時点から、React はアプリケーションの DOM を管理します。UI を更新するには、コンポーネントが [state を使用します](/reference/react/useState)。
 
 ---
 
-### Rendering multiple roots {/*rendering-multiple-roots*/}
+### 複数のルートのレンダー {/*rendering-multiple-roots*/}
 
-If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
+ページが[完全には React で構築されていない](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page)場合、React に管理させたいトップレベルの UI パーツに対してそれぞれ `render` を呼び出すことができます。
 
 <Sandpack>
 
@@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 </Sandpack>
 
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
+レンダーされたツリーは [`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode) で破棄することができます。
 
 ---
 
-### Updating the rendered tree {/*updating-the-rendered-tree*/}
+### レンダーされたツリーの更新 {/*updating-the-rendered-tree*/}
 
-You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
+同じ DOM ノードに対して `render` を複数回呼び出すことができます。コンポーネントツリーの構造が以前にレンダーされたものと一致していれば、React は [state を保持します](/learn/preserving-and-resetting-state)。以下の例で入力フィールドにタイプできることに着目してください。つまり毎秒 `render` が繰り返し呼び出されていますが、更新により DOM が破壊されていないということです。
 
 <Sandpack>
 
@@ -215,4 +215,4 @@ export default function App({counter}) {
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
+`render` を複数回呼び出すことは滅多にありません。通常、代わりにコンポーネントで [state の更新](/reference/react/useState)を行います。