Translate "useRef" reference by yuta-ike · Pull Request #613 · reactjs/ja.react.dev

yuta-ike · 2023-06-25T01:32:10Z

リファレンスの "useRef" の翻訳です

github-actions · 2023-06-25T01:34:36Z

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

src/content/reference/react/useRef.md

smikitky

ありがとうございます。
細かいものだけですが、対応をお願いします。

smikitky · 2023-06-26T03:40:22Z

src/content/reference/react/useRef.md

 ```

-[See more examples below.](#usage)
+[使用法をもっと見る](#usage)


Suggested change

[使用法をもっと見る](#usage)

[さらに例を見る](#usage)

smikitky · 2023-06-26T03:41:26Z

src/content/reference/react/useRef.md

-* When you change the `ref.current` property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.
-* Do not write _or read_ `ref.current` during rendering, except for [initialization.](#avoiding-recreating-the-ref-contents) This makes your component's behavior unpredictable.
-* In Strict Mode, React will **call your component function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. Each ref object will be created twice, but one of the versions will be discarded. If your component function is pure (as it should be), this should not affect the behavior.
+* state と違い、`ref.current` プロパティは変更することができます（ミュータブル）。ただし、レンダーに利用されるオブジェクト（state の一部など）を保持している場合は、変更すべきではありません。


Suggested change

* state と違い、`ref.current` プロパティは変更することができます（ミュータブル）。ただし、レンダーに利用されるオブジェクト（state の一部など）を保持している場合は、変更すべきではありません。

* `ref.current` プロパティは書き換えが可能です。つまり state と違いミュータブル (mutable) です。ただし、レンダーに利用されるオブジェクト（state の一部など）を保持している場合は、変更すべきではありません。

原文に近づけました。

（原文の後半は、どういうパターンを想定した話なんですかね…そもそもそんなデータは ref に入れるなよと冒頭でも 2 行後でも言ってるのに…）

smikitky · 2023-06-26T03:46:49Z

src/content/reference/react/useRef.md

 ```

-`useRef` returns a <CodeStep step={1}>ref object</CodeStep> with a single <CodeStep step={2}>`current` property</CodeStep> initially set to the <CodeStep step={3}>initial value</CodeStep> you provided.
+`useRef` は、<CodeStep step={2}>`current` プロパティ</CodeStep>に、最初に指定した<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。


Suggested change

`useRef` は、<CodeStep step={2}>`current` プロパティ</CodeStep>に、最初に指定した<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。

`useRef` は、唯一のプロパティである<CodeStep step={2}>`current`</CodeStep>に、指定された<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。

single を訳出してみました

initially は逆にここに「最初に」と書くと混乱しそうですし、"initially set to the initial value" がそもそも冗長なので消しました

smikitky · 2023-06-26T03:49:22Z

src/content/reference/react/useRef.md

+`useRef` は、<CodeStep step={2}>`current` プロパティ</CodeStep>に、最初に指定した<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。

-On the next renders, `useRef` will return the same object. You can change its `current` property to store information and read it later. This might remind you of [state](/reference/react/useState), but there is an important difference.
+次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。これを利用して、データを保存するために `current` プロパティの値を変更し、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。


Suggested change

次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。これを利用して、データを保存するために `current` プロパティの値を変更し、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。

次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。このオブジェクトの `current` プロパティを書き換えることで情報を保存しておき、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。

smikitky · 2023-06-26T03:50:26Z

src/content/reference/react/useRef.md

+次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。これを利用して、データを保存するために `current` プロパティの値を変更し、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。

-**Changing a ref does not trigger a re-render.** This means refs are perfect for storing information that doesn't affect the visual output of your component. For example, if you need to store an [interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) and retrieve it later, you can put it in a ref. To update the value inside the ref, you need to manually change its <CodeStep step={2}>`current` property</CodeStep>:
+それは、**ref を変更しても、再レンダーはトリガされない**ことです。このことから、ref は、コンポーネントの UI に影響しないデータを保存するのに適しています。例えば、[interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) を保持しておき、あとから利用したい場合、ref に保存することができます。ref 内の値を更新するには、<CodeStep step={2}>`current` プロパティ</CodeStep>を手動で変更します。


Suggested change

それは、**ref を変更しても、再レンダーはトリガされない**ことです。このことから、ref は、コンポーネントの UI に影響しないデータを保存するのに適しています。例えば、[interval ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) を保持しておき、あとから利用したい場合、ref に保存することができます。ref 内の値を更新するには、<CodeStep step={2}>`current` プロパティ</CodeStep>を手動で変更します。

それは、**ref を変更しても、再レンダーはトリガされない**ということです。このことから、ref は、出力されるコンポーネントの外見に影響しないデータを保存するのに適しています。例えば、[インターバルの ID](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) を保持しておき、あとから利用したい場合、ref に保存することができます。ref 内の値を更新するには、<CodeStep step={2}>`current` プロパティ</CodeStep>を手動で変更します。

本来は "UI" は "visual output" よりはもう少し包括的な概念のような気がします。エフェクトやイベントハンドラも UI の一部というか。

smikitky · 2023-06-26T04:30:03Z

src/content/reference/react/useRef.md

+## トラブルシューティング {/*troubleshooting*/}

-### I can't get a ref to a custom component {/*i-cant-get-a-ref-to-a-custom-component*/}
+### 独自コンポーネントへの参照 (ref) を取得できない {/*i-cant-get-a-ref-to-a-custom-component*/}


Suggested change

### 独自コンポーネントへの参照 (ref) を取得できない {/*i-cant-get-a-ref-to-a-custom-component*/}

### 独自コンポーネントへの ref を取得できない {/*i-cant-get-a-ref-to-a-custom-component*/}

smikitky · 2023-06-26T04:30:35Z

src/content/reference/react/useRef.md

+デフォルトでは、独自コンポーネントは、内部の DOM ノードへの参照を公開していません。

-To fix this, find the component that you want to get a ref to:
+これを修正するには、まず、参照を取得したいコンポーネントを探します。


Suggested change

これを修正するには、まず、参照を取得したいコンポーネントを探します。

これを修正するには、まず、ref を取得したいコンポーネントを探します。

smikitky · 2023-06-26T04:30:46Z

src/content/reference/react/useRef.md

 </ConsoleBlock>

-By default, your own components don't expose refs to the DOM nodes inside them.
+デフォルトでは、独自コンポーネントは、内部の DOM ノードへの参照を公開していません。


Suggested change

デフォルトでは、独自コンポーネントは、内部の DOM ノードへの参照を公開していません。

デフォルトでは、独自コンポーネントは、内部の DOM ノードへの ref を公開していません。

smikitky · 2023-06-26T04:31:05Z

src/content/reference/react/useRef.md

 ```

-Then the parent component can get a ref to it.
+これで、親コンポーネントから参照を取得できるようになります。


Suggested change

これで、親コンポーネントから参照を取得できるようになります。

これで、親コンポーネントから ref を取得できるようになります。

smikitky · 2023-06-29T05:40:46Z

src/content/reference/react/useRef.md

+#### スクロールして画像を表示 {/*scrolling-an-image-into-view*/}

-In this example, clicking the button will scroll an image into view. It uses a ref to the list DOM node, and then calls DOM [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API to find the image we want to scroll to.
+この例では、ボタンがクリックされると、その画像が画面に表示されるようにスクロールします。ref を使用してリストの DOM ノードを取得し、DOM の [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API を呼び出して、スクロールしたい画像を探しています。


Suggested change

この例では、ボタンがクリックされると、その画像が画面に表示されるようにスクロールします。ref を使用してリストの DOM ノードを取得し、DOM の [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API を呼び出して、スクロールしたい画像を探しています。

この例では、ボタンがクリックされると、その画像が画面に表示されるようにスクロールします。ref を使用してリストの DOM ノードを取得し、DOM の [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API を呼び出して、スクロール先の画像を探しています。

yuta-ike · 2023-07-04T05:07:38Z

レビューありがとうございます！修正 done です。

smikitky

ありがとうございます！

koba04

👍 ありがとうございます！

yuta-ike added 2 commits June 24, 2023 17:43

Translate: "useRef"

e6c66f5

fix: "useRef" translation

1769d44

vercel bot deployed to Preview – ja-react-dev June 25, 2023 01:32 View deployment

yuta-ike commented Jun 25, 2023

View reviewed changes

src/content/reference/react/useRef.md Outdated Show resolved Hide resolved

fix: link anchor id in "useRef" page

b1d05b0

vercel bot deployed to Preview – ja-react-dev June 27, 2023 08:00 View deployment

smikitky requested changes Jun 29, 2023

View reviewed changes

fix: "useRef" translation

2a614a4

vercel bot deployed to Preview – ja-react-dev July 4, 2023 05:02 View deployment

Merge branch 'main' into tr/hooks-use-ref

38d00b5

vercel bot deployed to Preview – ja-react-dev July 4, 2023 05:07 View deployment

yuta-ike requested a review from smikitky July 4, 2023 05:07

smikitky approved these changes Jul 4, 2023

View reviewed changes

koba04 approved these changes Jul 7, 2023

View reviewed changes

koba04 merged commit aff743b into reactjs:main Jul 7, 2023

koba04 mentioned this pull request Jul 7, 2023

New Translation Progress Checklist #452

Open

	[使用法をもっと見る](#usage)
	[さらに例を見る](#usage)

	* state と違い、`ref.current` プロパティは変更することができます（ミュータブル）。ただし、レンダーに利用されるオブジェクト（state の一部など）を保持している場合は、変更すべきではありません。
	* `ref.current` プロパティは書き換えが可能です。つまり state と違いミュータブル (mutable) です。ただし、レンダーに利用されるオブジェクト（state の一部など）を保持している場合は、変更すべきではありません。

	`useRef` は、<CodeStep step={2}>`current` プロパティ</CodeStep>に、最初に指定した<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。
	`useRef` は、唯一のプロパティである<CodeStep step={2}>`current`</CodeStep>に、指定された<CodeStep step={3}>初期値</CodeStep>が設定された状態の <CodeStep step={1}>ref オブジェクト</CodeStep>を返します。

	次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。これを利用して、データを保存するために `current` プロパティの値を変更し、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。
	次回以降のレンダーでも、`useRef` は同じオブジェクトを返します。このオブジェクトの `current` プロパティを書き換えることで情報を保存しておき、あとからその値を読み出すことができます。これは [state](/reference/react/useState) と似ていますが、大きく違う点があります。

	### 独自コンポーネントへの参照 (ref) を取得できない {/i-cant-get-a-ref-to-a-custom-component/}
	### 独自コンポーネントへの ref を取得できない {/i-cant-get-a-ref-to-a-custom-component/}

	これを修正するには、まず、参照を取得したいコンポーネントを探します。
	これを修正するには、まず、ref を取得したいコンポーネントを探します。

	デフォルトでは、独自コンポーネントは、内部の DOM ノードへの参照を公開していません。
	デフォルトでは、独自コンポーネントは、内部の DOM ノードへの ref を公開していません。

	これで、親コンポーネントから参照を取得できるようになります。
	これで、親コンポーネントから ref を取得できるようになります。

	この例では、ボタンがクリックされると、その画像が画面に表示されるようにスクロールします。ref を使用してリストの DOM ノードを取得し、DOM の [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API を呼び出して、スクロールしたい画像を探しています。
	この例では、ボタンがクリックされると、その画像が画面に表示されるようにスクロールします。ref を使用してリストの DOM ノードを取得し、DOM の [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) API を呼び出して、スクロール先の画像を探しています。

Conversation

yuta-ike commented Jun 25, 2023

Uh oh!

github-actions bot commented Jun 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes

📦 Next.js Bundle Analysis for react-dev

Uh oh!

Uh oh!

smikitky left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuta-ike commented Jul 4, 2023

Uh oh!

smikitky left a comment

Choose a reason for hiding this comment

Uh oh!

koba04 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Jun 25, 2023 •

edited

Loading

smikitky left a comment •

edited

Loading