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.

Sign up for GitHub

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

Jump to bottom

Translate useImperativeHandle reference #614

Merged

koba04 merged 5 commits into reactjs:main from sbasken:useImperativeHandle

Jul 19, 2023

Contributor

sbasken commented Jun 29, 2023

No description provided.

vercel bot deployed to Preview – ja-react-dev

June 29, 2023 17:47

View deployment

Member

smikitky commented Jul 1, 2023 •

edited

Loading

レビューは順に行いますが、先に rebase -i main と push -f でコミットをまとめていただけるようお願いします。

github-actions bot commented Jul 1, 2023 •

edited

Loading

Size changes

📦 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! 🙌

Contributor Author

sbasken commented Jul 5, 2023

@smikitky すみませんまだ初心者で申し訳ないのですが、useImeprativeHandleのブランチで、git rebase -i main をして、その後と git push -fを main からすればいいですか？やってみたのですが、何も変わった様子がないので、教えていただけると幸いです。

Member

smikitky commented Jul 6, 2023 •

edited

Loading

git rebase の前にブランチをチェックアウトしているか確認してください。

また、main にいる状態で git push とすると現在のブランチである main を push することになりますが、それは許可されていませんのでエラーが出ます。git push -f origin useImperativeHandle のようにブランチ名を指定しながら push するか、ブランチをチェックアウトしている状態で git push -f してください。

git checkout useImperativeHandle # ブランチをチェックアウト
git rebase main -i # 現在のブランチを main から生えているかのように再構成せよ、その際にコミットを統合したり入れ替えたりするための対話モード (-i) に入れ
git push -f # 現在のブランチを強制プッシュせよ

で、どうでしょう。


          Complete translation

a12e4d0

Translate up to line 289

sbasken force-pushed the useImperativeHandle branch from fe1c146 to a12e4d0 Compare

July 6, 2023 14:51

vercel bot deployed to Preview – ja-react-dev

July 6, 2023 14:51

View deployment

Contributor Author

sbasken commented Jul 6, 2023

@smikitky 丁寧に教えてくださってありがとうございました！！なんとかできたと思うので、お手隙の際にご確認よろしくお願いします。

smikitky mentioned this pull request

New Translation Progress Checklist #452

Open

smikitky requested changes

View reviewed changes

Member

smikitky left a comment

遅くなりましたがこちらの対応をよろしくお願いします。

src/content/reference/react/useImperativeHandle.md Outdated

    
              * `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function)

              * `ref`: [`forwardRef` render 関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。

Member

smikitky Jul 15, 2023

Suggested change

      
            * `ref`: [`forwardRef` render 関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。
          
            * `ref`: [`forwardRef` レンダー関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。

src/content/reference/react/useImperativeHandle.md Outdated

               ---
-              ## Usage {/*usage*/}
+              ## 使用方 {/*usage*/}

Member

smikitky Jul 15, 2023

Suggested change

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

src/content/reference/react/useImperativeHandle.md Outdated

    
              By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `<input>` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef)

              デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) にオプトインする必要があります。

Member

smikitky Jul 15, 2023

Suggested change

      
            デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) にオプトインする必要があります。 
          
            デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります。

src/content/reference/react/useImperativeHandle.md Outdated

               ```js {4-8}
               import { forwardRef, useImperativeHandle } from 'react';
               const MyInput = forwardRef(function MyInput(props, ref) {
                 useImperativeHandle(ref, () => {
                   return {
-                    // ... your methods ...
+                    // ... あなたのメソッド ...

Member

smikitky Jul 15, 2023

Suggested change

      
                  // ... あなたのメソッド ...
          
                  // ... your methods ...

よほど理解に支障のある長文などでない限りは訳さないルールにしています

src/content/reference/react/useImperativeHandle.md Outdated

    
              For example, suppose you don't want to expose the entire `<input>` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call:

              例えば、`<input>` DOM ノード全体を公開するのではなく、その 2 つのメソッド、`focus` と `scrollIntoView` を公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持します。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出したいメソッドのみを含むハンドルを公開します。

Member

smikitky Jul 15, 2023

Suggested change

      
            例えば、`<input>` DOM ノード全体を公開するのではなく、その 2 つのメソッド、`focus` と `scrollIntoView` を公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持します。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出したいメソッドのみを含むハンドルを公開します。
          
            例えば、`<input>` DOM ノード全体を公開したくはないが、その 2 つのメソッド、`focus` と `scrollIntoView` は公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持しておきます。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出してほしいメソッドのみを含むハンドルを公開します。

src/content/reference/react/useImperativeHandle.md Outdated

    
            @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
          
              });

              ```

              Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `<input>` DOM node.

              これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは基礎となる `<input>` DOM ノードへの完全なアクセス権は持ちません。

Member

smikitky Jul 15, 2023

Suggested change

      
            これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは基礎となる `<input>` DOM ノードへの完全なアクセス権は持ちません。
          
            これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは背後にある `<input>` DOM ノードへの完全なアクセス権は持ちません。

src/content/reference/react/useImperativeHandle.md Outdated

    
            @@ -118,7 +118,7 @@ export default function Form() {
          
                function handleClick() {

                  ref.current.focus();

                  // This won't work because the DOM node isn't exposed:

                  // DOM ノードが公開されていないため、これでは機能しません。

Member

smikitky Jul 15, 2023

Suggested change

      
                // DOM ノードが公開されていないため、これでは機能しません。
          
                // This won't work because the DOM node isn't exposed:

src/content/reference/react/useImperativeHandle.md Outdated

@@ @@ -281,8 +281,8 @@ export default AddComment; @@
               <Pitfall>
-              **Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
+              **ref の過度な使用に注意してください。**ref は、prop として表現できない、*命令形式*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。

Member

smikitky Jul 15, 2023

Suggested change

      
            **ref の過度な使用に注意してください。**ref は、prop として表現できない、*命令形式*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。
          
            **ref の過度な使用に注意してください。**ref は、props として表現できない、*命令型*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。

src/content/reference/react/useImperativeHandle.md Outdated

    
              **If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.

              **何かを prop として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令形式のハンドルを公開するのではなく、`<Modal isOpen={isOpen} />`のように、`isOpen` を prop として受け取る方が良いでしょう。[エフェクト](/learn/synchronizing-with-effects)を使用することで、命令形式の動作をプロップとして公開することができます。

Member

smikitky Jul 15, 2023

Suggested change

      
            **何かを prop として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令形式のハンドルを公開するのではなく、`<Modal isOpen={isOpen} />`のように、`isOpen` を prop として受け取る方が良いでしょう。[エフェクト](/learn/synchronizing-with-effects)を使用することで、命令形式の動作をプロップとして公開することができます。
          
            **何かを props として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令型のハンドルを公開するのではなく、`<Modal isOpen={isOpen} />` のように、`isOpen` を props として受け取る方が良いでしょう。命令型の動作を props として公開する際には[エフェクト](/learn/synchronizing-with-effects)が役立ちます。

この文脈ではあくまでエフェクトは補助的な道具に過ぎないので最後の部分は "help" のニュアンスを加えました。

src/content/reference/react/useImperativeHandle.md Outdated

    
              * **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref.

              * **オプション** `dependencies`: `createHandle` のコード内でリファレンスされるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、およびコンポーネント内で直接宣言された変数と関数が含まれます。もし linter が [React 向けに設定](/learn/editor-setup#linting)されている場合、linter がすべてのリアクティブな値が依存関係として正しく指定されているかを確認します。依存関係のリストは、一定数の項目があり、[dep1, dep2, dep3]のようにインラインで記述される必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) の比較メソッドを使用して、各依存関係を以前の値と比較します。もし再レンダーが依存関係のいずれかに変更をもたらした場合、またはその引数を省略した場合、`createHandle` 関数が再実行され、新しく作成されたハンドルが ref に割り当てられます。

Member

smikitky Jul 15, 2023

Suggested change

      
            * **オプション** `dependencies`: `createHandle` のコード内でリファレンスされるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、およびコンポーネント内で直接宣言された変数と関数が含まれます。もし linter が [React 向けに設定](/learn/editor-setup#linting)されている場合、linter がすべてのリアクティブな値が依存関係として正しく指定されているかを確認します。依存関係のリストは、一定数の項目があり、[dep1, dep2, dep3]のようにインラインで記述される必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) の比較メソッドを使用して、各依存関係を以前の値と比較します。もし再レンダーが依存関係のいずれかに変更をもたらした場合、またはその引数を省略した場合、`createHandle` 関数が再実行され、新しく作成されたハンドルが ref に割り当てられます。
          
            * **省略可能** `dependencies`: `createHandle` コード内で参照されるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、コンポーネント本体に直接宣言されたすべての変数および関数が含まれます。リンタが [React 用に設定されている場合](/learn/editor-setup#linting)、すべてのリアクティブな値が依存値として正しく指定されているか確認できます。依存値のリストは要素数が一定である必要があり、`[dep1, dep2, dep3]` のようにインラインで記述する必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を使った比較で、それぞれの依存値を以前の値と比較します。再レンダーにより依存値のいずれかが変更された場合、または引数自体を省略した場合、`createHandle` 関数は再実行され、新しく作成されたハンドルが ref に割り当てられます。

useEffect などすでに翻訳済みのほうと訳文を合わせました

vercel bot deployed to Preview – ja-react-dev

July 17, 2023 15:51

View deployment

vercel bot deployed to Preview – ja-react-dev

July 17, 2023 15:57

View deployment


          Update with suggestions

03a32e6

sbasken force-pushed the useImperativeHandle branch from 57ee44e to 03a32e6 Compare

July 17, 2023 15:59

vercel bot deployed to Preview – ja-react-dev

July 17, 2023 16:00

View deployment

Contributor Author

sbasken commented Jul 17, 2023

@smikitky アップデート完了しました😊


          Merge branch 'reactjs:main' into useImperativeHandle

6cc9bff

vercel bot deployed to Preview – ja-react-dev

July 17, 2023 16:03

View deployment


          Fix markup errors

vercel bot deployed to Preview – ja-react-dev

July 18, 2023 07:52

View deployment


          Fix URL

f0f9659

vercel bot deployed to Preview – ja-react-dev

July 18, 2023 07:56

View deployment

smikitky approved these changes

View reviewed changes

Member

smikitky left a comment

ありがとうございました！

小さな URL エラーやマークアップエラーがあったのでこちらで修正させていただきました。

koba04 approved these changes

View reviewed changes

Member

koba04 left a comment

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

koba04 merged commit b68e540 into reactjs:main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet