Translate "createElement" by smikitky · Pull Request #688 · reactjs/ja.react.dev
Expand Up
@@ -4,7 +4,7 @@ title: createElement
<Intro>
`createElement` lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-with-jsx) `createElement` によって React 要素を作成できます。これは [JSX](/learn/writing-markup-with-jsx) を書く代わりの手段として利用できます。
```js const element = createElement(type, props, ...children) Expand All @@ -16,11 +16,11 @@ const element = createElement(type, props, ...children)
---
## Reference {/*reference*/} ## リファレンス {/*reference*/}
### `createElement(type, props, ...children)` {/*createelement*/}
Call `createElement` to create a React element with the given `type`, `props`, and `children`. `createElement` を呼び出して、指定した `type`、`props`、`children` を持った React 要素を作成します。
```js import { createElement } from 'react'; Expand All @@ -34,44 +34,44 @@ function Greeting({ name }) { } ```
[See more examples below.](#usage) [さらに例を見る](#usage)
#### Parameters {/*parameters*/} #### 引数 {/*parameters*/}
* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)). * `type`: `type` 引数は有効な React のコンポーネント型でなければなりません。例えば、タグ名の文字列（`'div'` や `'span'`）や、React コンポーネント（関数、クラス、または [`Fragment`](/reference/react/Fragment) のような特別なコンポーネント）が該当します。
* `props`: The `props` argument must either be an object or `null`. If you pass `null`, it will be treated the same as an empty object. React will create an element with props matching the `props` you have passed. Note that `ref` and `key` from your `props` object are special and will *not* be available as `element.props.ref` and `element.props.key` on the returned `element`. They will be available as `element.ref` and `element.key`. * `props`: `props` 引数はオブジェクトか `null` でなければなりません。`null` を渡すと、空のオブジェクトと同じように扱われます。React は、渡された `props` と同じ props を持った要素を作成します。`props` オブジェクトの `ref` と `key` は特別であり、返された `element` の `element.props.ref` や `element.props.key` として*利用できません*。`element.ref` ないし `element.key` となります。
* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. * **省略可能** `...children`: ゼロ個以上の子ノード。これらは React ノード、つまり、React 要素、文字列、数値、[ポータル](/reference/react-dom/createPortal)、空ノード（`null`、`undefined`、`true`、`false`）、あるいは React ノードの配列となります。
#### Returns {/*returns*/} #### 返り値 {/*returns*/}
`createElement` returns a React element object with a few properties: `createElement` は以下のプロパティを持つ React 要素オブジェクトを返します。
* `type`: The `type` you have passed. * `props`: The `props` you have passed except for `ref` and `key`. If the `type` is a component with legacy `type.defaultProps`, then any missing or undefined `props` will get the values from `type.defaultProps`. * `ref`: The `ref` you have passed. If missing, `null`. * `key`: The `key` you have passed, coerced to a string. If missing, `null`. * `type`: 指定した `type`。 * `props`: 指定した `props`、ただし `ref` と `key` は除く。もし `type` がレガシーの `type.defaultProps` を持つコンポーネントであれば、欠けているか undefined となっている `props` は `type.defaultProps` から値を取得します。 * `ref`: 指定した `ref`。未指定の場合は `null`。 * `key`: 指定した `key`。強制的に文字列に変換されます。未指定の場合は `null`。
Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it. 通常、この要素をコンポーネントから返すか、他の要素の子として用います。要素のプロパティを読み取ることは可能ですが、作成後は要素の構造を非公開 (opaque) として扱い、レンダーのみ行うようにするべきです。
#### Caveats {/*caveats*/} #### 注意点 {/*caveats*/}
* You must **treat React elements and their props as [immutable](https://en.wikipedia.org/wiki/Immutable_object)** and never change their contents after creation. In development, React will [freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) the returned element and its `props` property shallowly to enforce this. * **React 要素とその props は[イミュータブル (immutable)](https://en.wikipedia.org/wiki/Immutable_object) として扱い**、作成後にその内容を変更してはなりません。これを強制するために、React は開発環境において、返された要素とその `props` プロパティを浅く[凍結 (freeze)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) します。
* When you use JSX, **you must start a tag with a capital letter to render your own custom component.** In other words, `<Something />` is equivalent to `createElement(Something)`, but `<something />` (lowercase) is equivalent to `createElement('something')` (note it's a string, so it will be treated as a built-in HTML tag). * JSX を使用する場合、**独自のカスタムコンポーネントをレンダーするためにはタグを大文字で始める必要があります**。つまり、`<Something />` は `createElement(Something)` と同等ですが、`<something />`（小文字）は `createElement('something')` と同等です（文字列なので、組み込みの HTML タグとして扱われます）。
* You should only **pass children as multiple arguments to `createElement` if they are all statically known,** like `createElement('h1', {}, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `createElement('ul', {}, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder. * **複数の子の内容がすべて静的に分かっている場合**、`createElement` には子を `createElement('h1', {}, child1, child2, child3)` のように**複数の引数として渡してください**。子が動的な場合は、配列全体を第 3 引数として `createElement('ul', {}, listItems)` のように渡してください。これにより、React は動的なリストに `key` が欠けている場合に[警告を出す](/learn/rendering-lists#keeping-list-items-in-order-with-key)ようになります。静的なリストでは並び替えは決して発生しないため、key は必要ありません。
---
## Usage {/*usage*/} ## 使用法 {/*usage*/}
### Creating an element without JSX {/*creating-an-element-without-jsx*/} ### JSX を使わずに要素を作成する {/*creating-an-element-without-jsx*/}
If you don't like [JSX](/learn/writing-markup-with-jsx) or can't use it in your project, you can use `createElement` as an alternative. [JSX](/learn/writing-markup-with-jsx) が好きでない場合や、プロジェクトで使用できない場合には、代わりに `createElement` を使用できます。
To create an element without JSX, call `createElement` with some <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep>, and <CodeStep step={3}>children</CodeStep>: JSX を使わずに要素を作成するには、`createElement` を呼び出して、何らかの <CodeStep step={1}>type</CodeStep>、<CodeStep step={2}>props</CodeStep>、<CodeStep step={3}>children</CodeStep> を引数として渡します。
```js [[1, 5, "'h1'"], [2, 6, "{ className: 'greeting' }"], [3, 7, "'Hello ',"], [3, 8, "createElement('i', null, name),"], [3, 9, "'. Welcome!'"]] import { createElement } from 'react'; Expand All @@ -87,7 +87,7 @@ function Greeting({ name }) { } ```
The <CodeStep step={3}>children</CodeStep> are optional, and you can pass as many as you need (the example above has three children). This code will display a `<h1>` header with a greeting. For comparison, here is the same example rewritten with JSX: <CodeStep step={3}>children</CodeStep> はオプションで、必要なだけ渡すことができます（上記の例では子が 3 つあります）。このコードは、`<h1>` ヘッダに挨拶文字列を入れて表示します。比較のため、以下に JSX を使って書き直した同じ例を示します。
```js [[1, 3, "h1"], [2, 3, "className=\\"greeting\\""], [3, 4, "Hello <i>{name}</i>. Welcome!"], [1, 5, "h1"]] function Greeting({ name }) { Expand All @@ -99,23 +99,23 @@ function Greeting({ name }) { } ```
To render your own React component, pass a function like `Greeting` as the <CodeStep step={1}>type</CodeStep> instead of a string like `'h1'`: 自身のカスタム React コンポーネントをレンダーするには、`'h1'` のような文字列ではなく `Greeting` のような関数を <CodeStep step={1}>type</CodeStep> として渡します。
```js [[1, 2, "Greeting"], [2, 2, "{ name: 'Taylor' }"]] export default function App() { return createElement(Greeting, { name: 'Taylor' }); } ```
With JSX, it would look like this: JSX を使用した場合は以下のようになります。
```js [[1, 2, "Greeting"], [2, 2, "name=\\"Taylor\\""]] export default function App() { return <Greeting name="Taylor" />; } ```
Here is a complete example written with `createElement`: 以下は、`createElement` を使用して書かれたフルのサンプルです。
<Sandpack>
Expand Down Expand Up @@ -149,7 +149,7 @@ export default function App() {
</Sandpack>
And here is the same example written using JSX: 同じものを JSX で書くと以下のようになります。
<Sandpack>
Expand All @@ -176,13 +176,13 @@ export default function App() {
</Sandpack>
Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to `createElement` is that it's easy to see which closing tag corresponds to which opening tag. どちらのコーディングスタイルも問題ありませんので、プロジェクトに合わせて好きな方を使用してください。`createElement` と比較して JSX を使用する場合の主な利点は、どの閉じタグがどの開きタグに対応しているかが簡単にわかることです。
<DeepDive>
#### What is a React element, exactly? {/*what-is-a-react-element-exactly*/} #### React 要素とは要するに何なのか？ {/*what-is-a-react-element-exactly*/}
An element is a lightweight description of a piece of the user interface. For example, both `<Greeting name="Taylor" />` and `createElement(Greeting, { name: 'Taylor' })` produce an object like this: 要素 (element) とは、ユーザインターフェースの軽量な説明書きのことです。例えば、`<Greeting name="Taylor" />` と `createElement(Greeting, { name: 'Taylor' })` はいずれも、次のようなオブジェクトを生成します。
```js // Slightly simplified Expand All @@ -196,10 +196,10 @@ An element is a lightweight description of a piece of the user interface. For ex } ```
**Note that creating this object does not render the `Greeting` component or create any DOM elements.** **このオブジェクトを作成しただけでは、`Greeting` コンポーネントがレンダーされたり、DOM 要素が作成されたりするわけではないことに注意してください**。
A React element is more like a description--an instruction for React to later render the `Greeting` component. By returning this object from your `App` component, you tell React what to do next. React 要素とは、むしろ指示書のようなものです。React に後で `Greeting` コンポーネントをレンダーするよう指示するものです。このオブジェクトを `App` コンポーネントから返すことで、React に次に何をすべきかを伝えるのです。
Creating elements is extremely cheap so you don't need to try to optimize or avoid it. 要素の作成は非常に安価であるため、最適化したり避けたりする必要はありません。
</DeepDive>
<Intro>
`createElement` lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-with-jsx) `createElement` によって React 要素を作成できます。これは [JSX](/learn/writing-markup-with-jsx) を書く代わりの手段として利用できます。
```js const element = createElement(type, props, ...children) Expand All @@ -16,11 +16,11 @@ const element = createElement(type, props, ...children)
---
## Reference {/*reference*/} ## リファレンス {/*reference*/}
### `createElement(type, props, ...children)` {/*createelement*/}
Call `createElement` to create a React element with the given `type`, `props`, and `children`. `createElement` を呼び出して、指定した `type`、`props`、`children` を持った React 要素を作成します。
```js import { createElement } from 'react'; Expand All @@ -34,44 +34,44 @@ function Greeting({ name }) { } ```
[See more examples below.](#usage) [さらに例を見る](#usage)
#### Parameters {/*parameters*/} #### 引数 {/*parameters*/}
* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)). * `type`: `type` 引数は有効な React のコンポーネント型でなければなりません。例えば、タグ名の文字列（`'div'` や `'span'`）や、React コンポーネント（関数、クラス、または [`Fragment`](/reference/react/Fragment) のような特別なコンポーネント）が該当します。
* `props`: The `props` argument must either be an object or `null`. If you pass `null`, it will be treated the same as an empty object. React will create an element with props matching the `props` you have passed. Note that `ref` and `key` from your `props` object are special and will *not* be available as `element.props.ref` and `element.props.key` on the returned `element`. They will be available as `element.ref` and `element.key`. * `props`: `props` 引数はオブジェクトか `null` でなければなりません。`null` を渡すと、空のオブジェクトと同じように扱われます。React は、渡された `props` と同じ props を持った要素を作成します。`props` オブジェクトの `ref` と `key` は特別であり、返された `element` の `element.props.ref` や `element.props.key` として*利用できません*。`element.ref` ないし `element.key` となります。
* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. * **省略可能** `...children`: ゼロ個以上の子ノード。これらは React ノード、つまり、React 要素、文字列、数値、[ポータル](/reference/react-dom/createPortal)、空ノード（`null`、`undefined`、`true`、`false`）、あるいは React ノードの配列となります。
#### Returns {/*returns*/} #### 返り値 {/*returns*/}
`createElement` returns a React element object with a few properties: `createElement` は以下のプロパティを持つ React 要素オブジェクトを返します。
* `type`: The `type` you have passed. * `props`: The `props` you have passed except for `ref` and `key`. If the `type` is a component with legacy `type.defaultProps`, then any missing or undefined `props` will get the values from `type.defaultProps`. * `ref`: The `ref` you have passed. If missing, `null`. * `key`: The `key` you have passed, coerced to a string. If missing, `null`. * `type`: 指定した `type`。 * `props`: 指定した `props`、ただし `ref` と `key` は除く。もし `type` がレガシーの `type.defaultProps` を持つコンポーネントであれば、欠けているか undefined となっている `props` は `type.defaultProps` から値を取得します。 * `ref`: 指定した `ref`。未指定の場合は `null`。 * `key`: 指定した `key`。強制的に文字列に変換されます。未指定の場合は `null`。
Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it. 通常、この要素をコンポーネントから返すか、他の要素の子として用います。要素のプロパティを読み取ることは可能ですが、作成後は要素の構造を非公開 (opaque) として扱い、レンダーのみ行うようにするべきです。
#### Caveats {/*caveats*/} #### 注意点 {/*caveats*/}
* You must **treat React elements and their props as [immutable](https://en.wikipedia.org/wiki/Immutable_object)** and never change their contents after creation. In development, React will [freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) the returned element and its `props` property shallowly to enforce this. * **React 要素とその props は[イミュータブル (immutable)](https://en.wikipedia.org/wiki/Immutable_object) として扱い**、作成後にその内容を変更してはなりません。これを強制するために、React は開発環境において、返された要素とその `props` プロパティを浅く[凍結 (freeze)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) します。
* When you use JSX, **you must start a tag with a capital letter to render your own custom component.** In other words, `<Something />` is equivalent to `createElement(Something)`, but `<something />` (lowercase) is equivalent to `createElement('something')` (note it's a string, so it will be treated as a built-in HTML tag). * JSX を使用する場合、**独自のカスタムコンポーネントをレンダーするためにはタグを大文字で始める必要があります**。つまり、`<Something />` は `createElement(Something)` と同等ですが、`<something />`（小文字）は `createElement('something')` と同等です（文字列なので、組み込みの HTML タグとして扱われます）。
* You should only **pass children as multiple arguments to `createElement` if they are all statically known,** like `createElement('h1', {}, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `createElement('ul', {}, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder. * **複数の子の内容がすべて静的に分かっている場合**、`createElement` には子を `createElement('h1', {}, child1, child2, child3)` のように**複数の引数として渡してください**。子が動的な場合は、配列全体を第 3 引数として `createElement('ul', {}, listItems)` のように渡してください。これにより、React は動的なリストに `key` が欠けている場合に[警告を出す](/learn/rendering-lists#keeping-list-items-in-order-with-key)ようになります。静的なリストでは並び替えは決して発生しないため、key は必要ありません。
---
## Usage {/*usage*/} ## 使用法 {/*usage*/}
### Creating an element without JSX {/*creating-an-element-without-jsx*/} ### JSX を使わずに要素を作成する {/*creating-an-element-without-jsx*/}
If you don't like [JSX](/learn/writing-markup-with-jsx) or can't use it in your project, you can use `createElement` as an alternative. [JSX](/learn/writing-markup-with-jsx) が好きでない場合や、プロジェクトで使用できない場合には、代わりに `createElement` を使用できます。
To create an element without JSX, call `createElement` with some <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep>, and <CodeStep step={3}>children</CodeStep>: JSX を使わずに要素を作成するには、`createElement` を呼び出して、何らかの <CodeStep step={1}>type</CodeStep>、<CodeStep step={2}>props</CodeStep>、<CodeStep step={3}>children</CodeStep> を引数として渡します。
```js [[1, 5, "'h1'"], [2, 6, "{ className: 'greeting' }"], [3, 7, "'Hello ',"], [3, 8, "createElement('i', null, name),"], [3, 9, "'. Welcome!'"]] import { createElement } from 'react'; Expand All @@ -87,7 +87,7 @@ function Greeting({ name }) { } ```
The <CodeStep step={3}>children</CodeStep> are optional, and you can pass as many as you need (the example above has three children). This code will display a `<h1>` header with a greeting. For comparison, here is the same example rewritten with JSX: <CodeStep step={3}>children</CodeStep> はオプションで、必要なだけ渡すことができます（上記の例では子が 3 つあります）。このコードは、`<h1>` ヘッダに挨拶文字列を入れて表示します。比較のため、以下に JSX を使って書き直した同じ例を示します。
```js [[1, 3, "h1"], [2, 3, "className=\\"greeting\\""], [3, 4, "Hello <i>{name}</i>. Welcome!"], [1, 5, "h1"]] function Greeting({ name }) { Expand All @@ -99,23 +99,23 @@ function Greeting({ name }) { } ```
To render your own React component, pass a function like `Greeting` as the <CodeStep step={1}>type</CodeStep> instead of a string like `'h1'`: 自身のカスタム React コンポーネントをレンダーするには、`'h1'` のような文字列ではなく `Greeting` のような関数を <CodeStep step={1}>type</CodeStep> として渡します。
```js [[1, 2, "Greeting"], [2, 2, "{ name: 'Taylor' }"]] export default function App() { return createElement(Greeting, { name: 'Taylor' }); } ```
With JSX, it would look like this: JSX を使用した場合は以下のようになります。
```js [[1, 2, "Greeting"], [2, 2, "name=\\"Taylor\\""]] export default function App() { return <Greeting name="Taylor" />; } ```
Here is a complete example written with `createElement`: 以下は、`createElement` を使用して書かれたフルのサンプルです。
<Sandpack>
Expand Down Expand Up @@ -149,7 +149,7 @@ export default function App() {
</Sandpack>
And here is the same example written using JSX: 同じものを JSX で書くと以下のようになります。
<Sandpack>
Expand All @@ -176,13 +176,13 @@ export default function App() {
</Sandpack>
Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to `createElement` is that it's easy to see which closing tag corresponds to which opening tag. どちらのコーディングスタイルも問題ありませんので、プロジェクトに合わせて好きな方を使用してください。`createElement` と比較して JSX を使用する場合の主な利点は、どの閉じタグがどの開きタグに対応しているかが簡単にわかることです。
<DeepDive>
#### What is a React element, exactly? {/*what-is-a-react-element-exactly*/} #### React 要素とは要するに何なのか？ {/*what-is-a-react-element-exactly*/}
An element is a lightweight description of a piece of the user interface. For example, both `<Greeting name="Taylor" />` and `createElement(Greeting, { name: 'Taylor' })` produce an object like this: 要素 (element) とは、ユーザインターフェースの軽量な説明書きのことです。例えば、`<Greeting name="Taylor" />` と `createElement(Greeting, { name: 'Taylor' })` はいずれも、次のようなオブジェクトを生成します。
```js // Slightly simplified Expand All @@ -196,10 +196,10 @@ An element is a lightweight description of a piece of the user interface. For ex } ```
**Note that creating this object does not render the `Greeting` component or create any DOM elements.** **このオブジェクトを作成しただけでは、`Greeting` コンポーネントがレンダーされたり、DOM 要素が作成されたりするわけではないことに注意してください**。
A React element is more like a description--an instruction for React to later render the `Greeting` component. By returning this object from your `App` component, you tell React what to do next. React 要素とは、むしろ指示書のようなものです。React に後で `Greeting` コンポーネントをレンダーするよう指示するものです。このオブジェクトを `App` コンポーネントから返すことで、React に次に何をすべきかを伝えるのです。
Creating elements is extremely cheap so you don't need to try to optimize or avoid it. 要素の作成は非常に安価であるため、最適化したり避けたりする必要はありません。
</DeepDive>