From 3f51d0a178dc4d1531da01ff5ce8068b723bca1c Mon Sep 17 00:00:00 2001 From: Naoki Sekiguchi Date: Sat, 13 May 2023 00:04:22 +0900 Subject: [PATCH 1/3] Translate useDebugValue into Japanese --- src/content/reference/react/useDebugValue.md | 40 ++++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 8826665e7..3115b5663 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools) +`useDebugValue` は React フックであり、[React DevTools](/learn/react-developer-tools) でカスタムフックにラベルを追加できるようにします。 ```js useDebugValue(value, format?) @@ -16,11 +16,11 @@ useDebugValue(value, format?) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value: +[カスタムフック](/learn/reusing-logic-with-custom-hooks)のトップレベルで `useDebugValue` を呼び出して、読みやすいデバッグ値を表示します。 ```js import { useDebugValue } from 'react'; @@ -32,22 +32,22 @@ function useOnlineStatus() { } ``` -[See more examples below.](#usage) +[以下にさらに例を示します。](#usage) -#### Parameters {/*parameters*/} +#### パラメータ {/*parameters*/} -* `value`: The value you want to display in React DevTools. It can have any type. -* **optional** `format`: A formatting function. When the component is inspected, React DevTools will call the formatting function with the `value` as the argument, and then display the returned formatted value (which may have any type). If you don't specify the formatting function, the original `value` itself will be displayed. +* `value`: React DevTools に表示したい値。任意の型が使えます。 +* **省略可能** `format`: フォーマッタ関数。コンポーネントが検証されると、React DevTools は `value` を引数としてフォーマッタ関数を呼び出し、返されたフォーマット済みの値（任意の型が使えます）を表示します。フォーマッタ関数を指定しない場合、元の `value` 自体が表示されます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`useDebugValue` does not return anything. +`useDebugValue` は何も返しません。 -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/} +### カスタムフックにラベルを追加する {/*adding-a-label-to-a-custom-hook*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value for [React DevTools.](/learn/react-developer-tools) +[カスタムフック](/learn/reusing-logic-with-custom-hooks)のトップレベルで `useDebugValue` を呼び出し、[React DevTools](/learn/react-developer-tools) に対して読みやすいデバッグ値を表示します。 ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,11 +59,11 @@ function useOnlineStatus() { } ``` -This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them: +これにより、`useOnlineStatus` を呼び出すコンポーネントを検証すると `OnlineStatus: "Online"` のようなラベルが付きます。 -![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png) +![React DevTools がデバッグ値を表示するスクリーンショット](/images/docs/react-devtools-usedebugvalue.png) -Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed. +`useDebugValue` の呼び出しがない場合、基本となるデータ（この例では `true`）のみが表示されます。 @@ -103,20 +103,20 @@ function subscribe(callback) { -Don't add debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries and that have a complex internal data structure that's difficult to inspect. +すべてのカスタムフックにデバッグ値を追加しないでください。デバッグ値が最も有用なのは、共有ライブラリの一部であり、内部のデータ構造が複雑で検証が難しいカスタムフックです。 --- -### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/} +### デバッグ値のフォーマットを遅延させる {/*deferring-formatting-of-a-debug-value*/} -You can also pass a formatting function as the second argument to `useDebugValue`: +`useDebugValue` の第 2 引数としてフォーマッタ関数も渡すことができます: ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString()); ``` -Your formatting function will receive the debug value as a parameter and should return a formatted display value. When your component is inspected, React DevTools will call this function and display its result. +あなたのフォーマッタ関数は、デバッグ値をパラメータとして受け取り、フォーマットされた表示値を返す必要があります。コンポーネントが検証されると、React DevTools はこの関数を呼び出し、その結果を表示します。 -This lets you avoid running potentially expensive formatting logic unless the component is actually inspected. For example, if `date` is a Date value, this avoids calling `toDateString()` on it for every render. +これにより、コンポーネントが実際に検証されない限り、コストがかかる可能性があるフォーマットロジックを実行することは回避できます。例えば、`date` が Date 値の場合、レンダーの度に `toDateString()` を呼び出すことを回避できます。 \ No newline at end of file From 79a23aa6ba4942d2c54c39e69852d9abd0867525 Mon Sep 17 00:00:00 2001 From: Naoki Sekiguchi Date: Sat, 13 May 2023 17:20:03 +0900 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Soichiro Miki --- src/content/reference/react/useDebugValue.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 3115b5663..1b57ef771 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -32,9 +32,9 @@ function useOnlineStatus() { } ``` -[以下にさらに例を示します。](#usage) +[さらに例を見る](#usage) -#### パラメータ {/*parameters*/} +#### 引数 {/*parameters*/} * `value`: React DevTools に表示したい値。任意の型が使えます。 * **省略可能** `format`: フォーマッタ関数。コンポーネントが検証されると、React DevTools は `value` を引数としてフォーマッタ関数を呼び出し、返されたフォーマット済みの値（任意の型が使えます）を表示します。フォーマッタ関数を指定しない場合、元の `value` 自体が表示されます。 @@ -63,7 +63,7 @@ function useOnlineStatus() { ![React DevTools がデバッグ値を表示するスクリーンショット](/images/docs/react-devtools-usedebugvalue.png) -`useDebugValue` の呼び出しがない場合、基本となるデータ（この例では `true`）のみが表示されます。 +`useDebugValue` の呼び出しがない場合、元のデータ（この例では `true`）のみが表示されます。 @@ -103,7 +103,7 @@ function subscribe(callback) { -すべてのカスタムフックにデバッグ値を追加しないでください。デバッグ値が最も有用なのは、共有ライブラリの一部であり、内部のデータ構造が複雑で検証が難しいカスタムフックです。 +すべてのカスタムフックにデバッグ値を追加しないでください。デバッグ値が最も有用なのは、共有ライブラリの一部であり、内部のデータ構造が複雑で調査が難しいカスタムフックです。 @@ -111,12 +111,12 @@ function subscribe(callback) { ### デバッグ値のフォーマットを遅延させる {/*deferring-formatting-of-a-debug-value*/} -`useDebugValue` の第 2 引数としてフォーマッタ関数も渡すことができます: +`useDebugValue` の第 2 引数としてフォーマッタ関数も渡すことができます： ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString()); ``` -あなたのフォーマッタ関数は、デバッグ値をパラメータとして受け取り、フォーマットされた表示値を返す必要があります。コンポーネントが検証されると、React DevTools はこの関数を呼び出し、その結果を表示します。 +あなたのフォーマッタ関数は、デバッグ値をパラメータとして受け取り、フォーマットされた表示値を返す必要があります。コンポーネントがインスペクトされると、React DevTools はこの関数を呼び出し、その結果を表示します。 -これにより、コンポーネントが実際に検証されない限り、コストがかかる可能性があるフォーマットロジックを実行することは回避できます。例えば、`date` が Date 値の場合、レンダーの度に `toDateString()` を呼び出すことを回避できます。 \ No newline at end of file +これにより、コンポーネントが実際にインスペクトされない限り、コストがかかる可能性があるフォーマットロジックを実行することを回避できます。例えば、`date` が Date 値の場合、レンダーの度に `toDateString()` を呼び出すことを回避できます。 \ No newline at end of file From 83abe0a9e21cd50d3a99a82dce354b754bed54ac Mon Sep 17 00:00:00 2001 From: Naoki Sekiguchi Date: Sat, 13 May 2023 19:24:46 +0900 Subject: [PATCH 3/3] Apply suggestions about "inspect" from code review --- src/content/reference/react/useDebugValue.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 1b57ef771..0d5617090 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -37,7 +37,7 @@ function useOnlineStatus() { #### 引数 {/*parameters*/} * `value`: React DevTools に表示したい値。任意の型が使えます。 -* **省略可能** `format`: フォーマッタ関数。コンポーネントが検証されると、React DevTools は `value` を引数としてフォーマッタ関数を呼び出し、返されたフォーマット済みの値（任意の型が使えます）を表示します。フォーマッタ関数を指定しない場合、元の `value` 自体が表示されます。 +* **省略可能** `format`: フォーマッタ関数。コンポーネントがインスペクト (inspect, 調査) されると、React DevTools は `value` を引数としてフォーマッタ関数を呼び出し、返されたフォーマット済みの値（任意の型が使えます）を表示します。フォーマッタ関数を指定しない場合、元の `value` 自体が表示されます。 #### 返り値 {/*returns*/} @@ -59,7 +59,7 @@ function useOnlineStatus() { } ``` -これにより、`useOnlineStatus` を呼び出すコンポーネントを検証すると `OnlineStatus: "Online"` のようなラベルが付きます。 +これにより、`useOnlineStatus` を呼び出すコンポーネントをインスペクトすると `OnlineStatus: "Online"` のようなラベルが付きます。 ![React DevTools がデバッグ値を表示するスクリーンショット](/images/docs/react-devtools-usedebugvalue.png)