Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate "createFactory" #690

Merged
merged 1 commit into from
Oct 10, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/content/reference/react/createFactory.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: createFactory

<Deprecated>

This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
この API は、将来の React のメジャーバージョンで削除される予定です。[代替手段についてはこちらをご覧ください](#alternatives)

</Deprecated>

<Intro>

`createFactory` lets you create a function that produces React elements of a given type.
`createFactory` は、指定したタイプの React 要素を生成するための関数を作成します。

```js
const factory = createFactory(type)
Expand All @@ -22,19 +22,19 @@ const factory = createFactory(type)

---

## Reference {/*reference*/}
## リファレンス {/*reference*/}

### `createFactory(type)` {/*createfactory*/}

Call `createFactory(type)` to create a factory function which produces React elements of a given `type`.
`createFactory(type)` を呼び出して、指定した `type` の React 要素を生成するためのファクトリ関数を作成します。

```js
import { createFactory } from 'react';

const button = createFactory('button');
```

Then you can use it to create React elements without JSX:
この後、JSX を使わずに React 要素を作成することができます。

```js
export default function App() {
Expand All @@ -46,33 +46,33 @@ export default function App() {
}
```

[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) のような特別なコンポーネント)が該当します。

#### Returns {/*returns*/}
#### 返り値 {/*returns*/}

Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`.
ファクトリ関数を返します。そのファクトリ関数は、最初の引数として `props` オブジェクトを受け取り、その後に `...children` 引数のリストを受け取り、指定した `type``props``children` を持った React 要素を返します。

---

## Usage {/*usage*/}
## 使用法 {/*usage*/}

### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/}
### ファクトリ関数を使って React 要素を作成する {/*creating-react-elements-with-a-factory*/}

Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX.
ほとんどの React プロジェクトではユーザインターフェースを記述するために [JSX](/learn/writing-markup-with-jsx) を使用していますが、JSX は必須ではありません。過去には `createFactory` が、JSX を使わずにユーザインターフェースを記述するための方法のひとつでした。

Call `createFactory` to create a *factory function* for a specific element type like `'button'`:
`createFactory` を呼び出して、`'button'` のような特定の要素タイプの*ファクトリ関数*を作成します。

```js
import { createFactory } from 'react';

const button = createFactory('button');
```

Calling that factory function will produce React elements with the props and children you have provided:
そのファクトリ関数を呼び出すと、指定した props children を持つ React 要素が生成されます。

<Sandpack>

Expand All @@ -92,15 +92,15 @@ export default function App() {

</Sandpack>

This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below.
このようにして `createFactory` JSX の代替として使用されていました。しかし、`createFactory` は非推奨であり、新しいコードでは `createFactory` を呼び出すべきではありません。`createFactory` から移行する方法については下記をご覧ください。

---

## Alternatives {/*alternatives*/}
## 代替手段 {/*alternatives*/}

### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/}
### `createFactory` をプロジェクトにコピーする {/*copying-createfactory-into-your-project*/}

If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project:
プロジェクト内で多くの `createFactory` 呼び出しがある場合は、この `createFactory.js` の実装をプロジェクトにコピーします:

<Sandpack>

Expand Down Expand Up @@ -128,13 +128,13 @@ export function createFactory(type) {

</Sandpack>

This lets you keep all of your code unchanged except the imports.
これにより、インポートを除くすべてのコードを変更せずに保持できます。

---

### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/}
### `createFactory` `createElement` に置き換える {/*replacing-createfactory-with-createelement*/}

If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code:
少数の `createFactory` の呼び出しがあり手動で移植しても構わず、かつ JSX を使用したくない、という場合、ファクトリ関数のすべての呼び出しを [`createElement`](/reference/react/createElement) の呼び出しに置き換えることができます。例えば以下のコードは:

```js {1,3,6}
import { createFactory } from 'react';
Expand All @@ -150,7 +150,7 @@ export default function App() {
}
```

with this code:
以下のコードに置き換えが可能です:


```js {1,4}
Expand All @@ -165,7 +165,7 @@ export default function App() {
}
```

Here is a complete example of using React without JSX:
以下は、JSX を使用せずに React を使用する完全な例です。

<Sandpack>

Expand All @@ -185,9 +185,9 @@ export default function App() {

---

### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/}
### `createFactory` JSX に置き換える {/*replacing-createfactory-with-jsx*/}

Finally, you can use JSX instead of `createFactory`. This is the most common way to use React:
最後に、`createFactory` の代わりに JSX を使用することができます。これが React を使用する最も一般的な方法です。

<Sandpack>

Expand All @@ -207,7 +207,7 @@ export default function App() {

<Pitfall>

Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`:
既存のコードには、`'button'` のような定数ではなく変数を用いて `type` を指定するものがあるかもしれません。

```js {3}
function Heading({ isSubheading, ...props }) {
Expand All @@ -217,7 +217,7 @@ function Heading({ isSubheading, ...props }) {
}
```

To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`:
JSX で同じことをする場合、変数の名前を `Type` のように大文字で始まるように変更する必要があります。

```js {2,3}
function Heading({ isSubheading, ...props }) {
Expand All @@ -226,6 +226,6 @@ function Heading({ isSubheading, ...props }) {
}
```

Otherwise React will interpret `<type>` as a built-in HTML tag because it is lowercase.
さもないと、React `<type>` を(小文字なので)組み込みの HTML タグと解釈してしまいます。

</Pitfall>