Polish "Adding Interacrtivity" and pages below #666

honey32 · 2023-08-26T08:48:22Z

Adding Interactivity 以下で、伝わりにくくなっている表現および、ページ間で不整合がある箇所を改善しました。

Instead of doing の訳しかた見直し

「A する代わりに B する」には、「A しない。その代替として B する。」だけでなく、「A することの代償として B する。」という解釈の余地が残ると思います。解釈の曖昧さを排すれば楽に読めることに繋がりそうなので、「A せず、(代わりに) B する」のような明示的な表現に改めました。

長い修飾語の読みとりにくさを改善

「主語 + 動詞句を含む長い修飾語 + 述語」の形だと構文を読み取りづらいので、適当な接続語を補って「主語 + 述語 + "であり、" + 長い説明」のような構文に書き換えました。

例: Before

イベントハンドラは、 (主部)
クリック、ホバー、フォーム入力へのフォーカスなどのユーザインタラクションに応答して起動する (動詞句を含む長い連体修飾語)
独自の関数です。 (述部)

After

イベントハンドラはあなた自身で書く関数であり、(主語 + 述語)
クリック、ホバー、フォーム入力へのフォーカスといったユーザインタラクションに応答してトリガされます。 (詳しい説明)

連用修飾か連体修飾か

英文の前置詞を連用修飾として訳すべきところを、誤って連体修飾として誤訳になっていると見られる（あるいはその逆）箇所がいくつかあったので、正しいと思われるほうに修正しました。

訳の揺れを少し直しました

set の訳が「設定」「セット」で揺れていたので「セット」にそろえました。
"adding interactivity" ページと各ページの間で、同じ文の訳が揃っていなかったり、Alt が英語のままだったりしたので、適切なほうに揃えました。
"as you like" は見つかった範囲で「自由な/自由に」に直しました。「好き」という単語は避けています。
a prop を "Props" としていた箇所を「Props の一部」に直しました。

github-actions · 2023-08-26T08:50:49Z

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

smikitky · 2023-08-26T09:04:50Z

助かります。まだ draft のようですのでレビューはしませんが、多分 95% くらいはそのまま採用する感じになりそうです。

honey32 · 2023-08-26T08:51:39Z

src/content/learn/render-and-commit.md


 </YouWillLearn>

-コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。注文を受けて UI 要素を「配膳」するプロセスには、次の 3 つのステップが存在します：
+コンポーネントが料理人として厨房に立ち、食材を調理して美味しい料理を作っている様子をイメージしてみてください。このシナリオにおいて React はウェイターです。お客様の注文を伝えて、できた料理をお客様に渡します。この UI の「注文」と「提供」のプロセスは、次の 3 つのステップからなります：


「注文を受けて」 → 「お客様の注文を伝えて」と変更しました。

原文の「puts in request from customers」は「(厨房に)お客様の注文を伝える」と訳すのが正しいはず。

src/content/learn/render-and-commit.md

honey32 · 2023-08-26T09:09:41Z

src/content/learn/render-and-commit.md


 </Pitfall>

 <DeepDive>

 #### パフォーマンスの最適化 {/*optimizing-performance*/}

-更新されたコンポーネントがツリー内で非常に高い位置にある場合、その内部にネストされたすべてのコンポーネントを再レンダーするというデフォルトの挙動は、パフォーマンスにとって理想的ではありません。パフォーマンスの問題に遭遇した場合、[パフォーマンス](https://reactjs.org/docs/optimizing-performance.html)セクションで述べられているいくつかのオプトインによる解決方法があります。**最適化は急いでやってはいけません！**
+更新されたコンポーネントがツリー内で非常に高い位置にある場合、その内部にネストされたすべてのコンポーネントを再レンダーするというデフォルトの挙動は、パフォーマンスにとって理想的ではありません。パフォーマンスの問題に遭遇した場合、[パフォーマンス](https://reactjs.org/docs/optimizing-performance.html)セクションで述べられているいくつかのオプトインによる解決方法があります。**早まった最適化をしてしまってはいけません！**


"premature optimization" は「早まった最適化」あるいは「時期尚早な最適化」と訳されるのが一般的なので、前者を踏まえた訳にしました。

honey32 · 2023-08-26T09:14:14Z

src/content/learn/responding-to-events.md

@@ -312,7 +312,7 @@ button { margin-right: 10px; }

 </Sandpack>

-`App` コンポーネントは、`Toolbar` が `onPlayMovie` や `onUploadImage` に対して*何*を行うかを知る必要がないことに注意してください。それは `Toolbar` の実装の詳細です。ここでは、`Toolbar` はそれらを `Button` の `onClick` ハンドラとして渡していますが、後でキーボードショートカットでもそれらをトリガするようにすることができます。`onPlayMovie` のようなアプリ固有のインタラクションに基づいて props を名付けることで、後でどのように使用されるかを変更できるという柔軟性が得られます。
+`Toolbar` が `onPlayMovie` や `onUploadImage` を*どう扱う*のかを、`App` コンポーネントが知る必要がないことに注意してください。それは `Toolbar` の実装の詳細です。ここでは、`Toolbar` はそれらを `Button` の `onClick` ハンドラとして渡していますが、後でキーボードショートカットでもそれらをトリガするようにすることができます。`onPlayMovie` のようなアプリ固有のインタラクションに基づいて props を名付けることで、後でどのように使用されるかを変更できるという柔軟性が得られます。


コールバック引数を目的語とすると違和感のある表現だったので、「に対して何を行うか」→「をどう扱うか」に変更しました。

honey32 · 2023-08-26T09:15:45Z

src/content/learn/responding-to-events.md

@@ -511,7 +511,7 @@ button { margin-left: 5px; }

 </Sandpack>

-`e.stopPropagation()` と `e.preventDefault()` を混同しないでください。どちらも有用ですが、無関係です。
+`e.stopPropagation()` と `e.preventDefault()` を混同しないでください。どちらも有用ですが、両者は無関係です。


「無関係」だと、「共にいま述べているトピックとは無関係」のようなニュアンスがしてしまうので「両者は」を補いました。

honey32 · 2023-08-26T09:36:55Z

src/content/learn/render-and-commit.md

+1. レンダーの**トリガ**（お客様の注文を厨房に伝える）
+2. コンポーネントの**レンダー**（厨房で注文の品を料理する）
+3. DOM への**コミット**（テーブルに注文の品を提供する）


ここをはじめ、以下の単語は日本語に訳すときに「レストランでの行為」という文脈を踏まえて訳さないといけないので、かなり大胆に訳を見直しています。

「料理する」

assemble dishes / prepare

「注文品 / できた料理」

order

「注文(する行為 / の内容)」

request / order

order は「注文品」のほうの意味でも使われる

「提供する」

serve / deliver

「注文の品」については完全に仰るとおりです…

honey32 · 2023-08-26T09:37:22Z

src/content/learn/render-and-commit.md

+  <Illustration caption="state の更新が..." alt="レストランのウェイター役の React が Card UI を提供したところ。矢印頭の顧客は、黒ではなく、ピンクのカードが欲しいのだと注文している。" src="/images/docs/illustrations/i_rerender1.png" />
+  <Illustration caption="... トリガになって ..." alt="React はコンポーネントの厨房に戻り、ピンクの Card が必要だと Card シェフに伝える。" src="/images/docs/illustrations/i_rerender2.png" />
+  <Illustration caption="... レンダーされる！" alt="Card シェフはピンクのカードを React に渡している。" src="/images/docs/illustrations/i_rerender3.png" />


"State update / triggers / render." (ステートの更新がレンダーをトリガする)

の意味を保ったままで、日本語として無理のない語順に言い換えてみました。

honey32 · 2023-08-26T09:40:25Z

@smikitky ありがとうございます！

あとから気になった点・作業漏れの部分を修正 (8e7e0ed) して、 ready for review にしました！

smikitky

ありがとうございます。自分では問題に気づけないもんですね…。
数カ所だけ確認いただけますでしょうか。

src/content/learn/adding-interactivity.md

src/content/learn/render-and-commit.md

src/content/learn/updating-arrays-in-state.md

src/content/learn/updating-objects-in-state.md

smikitky · 2023-08-26T10:37:44Z

src/content/learn/render-and-commit.md

+1. レンダーの**トリガ**（お客様の注文を厨房に伝える）
+2. コンポーネントの**レンダー**（厨房で注文の品を料理する）
+3. DOM への**コミット**（テーブルに注文の品を提供する）


「注文の品」については完全に仰るとおりです…

Co-authored-by: Soichiro Miki <[email protected]>

honey32

suggestion 取り込みました！

src/content/learn/updating-arrays-in-state.md

src/content/learn/adding-interactivity.md

src/content/learn/render-and-commit.md

smikitky

ありがとうございました！
大変だとは思いますが、お時間があるのであれば他の部分もガンガン変えていただいて大丈夫です！

honey32 · 2023-08-26T11:51:35Z

了解です！

koba04

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

honey32 added 8 commits August 26, 2023 17:47

render and commit の日本語文を推敲

e901dac

responding to events の日本語訳を推敲

0ea6bd6

state a components memory の日本語訳を推敲

821ae64

state as a snapshot の日本語訳を推敲

661a7ca

queueing a series of state updates の日本語訳を推敲

5b7f12e

updating objects in state の日本語訳を推敲

9c3a585

updating arrays in state の日本語訳を推敲

d9bffc4

adding interactivity の日本語訳を推敲

0b9771d

vercel bot deployed to Preview – ja-react-dev August 26, 2023 08:49 View deployment

一部の訳の見直し

8e7e0ed

vercel bot deployed to Preview – ja-react-dev August 26, 2023 09:32 View deployment

honey32 commented Aug 26, 2023

View reviewed changes

honey32 marked this pull request as ready for review August 26, 2023 09:40

smikitky reviewed Aug 26, 2023

View reviewed changes

smikitky requested review from koba04 and potato4d August 26, 2023 10:45

Apply suggestions from code review

1aa48b2

Co-authored-by: Soichiro Miki <[email protected]>

honey32 commented Aug 26, 2023

View reviewed changes

src/content/learn/updating-arrays-in-state.md Outdated Show resolved Hide resolved

src/content/learn/adding-interactivity.md Outdated Show resolved Hide resolved

src/content/learn/render-and-commit.md Outdated Show resolved Hide resolved

vercel bot deployed to Preview – ja-react-dev August 26, 2023 11:39 View deployment

smikitky approved these changes Aug 26, 2023

View reviewed changes

koba04 approved these changes Sep 7, 2023

View reviewed changes

koba04 merged commit c928061 into reactjs:main Sep 7, 2023

honey32 deleted the 23-0825-expression-tweaks branch September 8, 2023 02:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polish "Adding Interacrtivity" and pages below #666

Polish "Adding Interacrtivity" and pages below #666

honey32 commented Aug 26, 2023

github-actions bot commented Aug 26, 2023 •

edited

Loading

📦 Next.js Bundle Analysis for react-dev

smikitky commented Aug 26, 2023

honey32 Aug 26, 2023 •

edited

Loading

honey32 Aug 26, 2023

honey32 Aug 26, 2023

honey32 Aug 26, 2023 •

edited

Loading

honey32 Aug 26, 2023

smikitky Aug 26, 2023

honey32 Aug 26, 2023

honey32 commented Aug 26, 2023 •

edited

Loading

smikitky left a comment

smikitky Aug 26, 2023

honey32 left a comment

smikitky left a comment

honey32 commented Aug 26, 2023

koba04 left a comment

Polish "Adding Interacrtivity" and pages below #666

Polish "Adding Interacrtivity" and pages below #666

Conversation

honey32 commented Aug 26, 2023

Instead of doing の訳しかた見直し

長い修飾語の読みとりにくさを改善

連用修飾か連体修飾か

訳の揺れを少し直しました

github-actions bot commented Aug 26, 2023 • edited Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

smikitky commented Aug 26, 2023

honey32 Aug 26, 2023 • edited Loading

Choose a reason for hiding this comment

honey32 Aug 26, 2023

Choose a reason for hiding this comment

honey32 Aug 26, 2023

Choose a reason for hiding this comment

honey32 Aug 26, 2023 • edited Loading

Choose a reason for hiding this comment

honey32 Aug 26, 2023

Choose a reason for hiding this comment

smikitky Aug 26, 2023

Choose a reason for hiding this comment

honey32 Aug 26, 2023

Choose a reason for hiding this comment

honey32 commented Aug 26, 2023 • edited Loading

smikitky left a comment

Choose a reason for hiding this comment

smikitky Aug 26, 2023

Choose a reason for hiding this comment

honey32 left a comment

Choose a reason for hiding this comment

smikitky left a comment

Choose a reason for hiding this comment

honey32 commented Aug 26, 2023

koba04 left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 26, 2023 •

edited

Loading

honey32 Aug 26, 2023 •

edited

Loading

honey32 Aug 26, 2023 •

edited

Loading

honey32 commented Aug 26, 2023 •

edited

Loading