From 92b7a677bbfa289d6545094353e0f97608d5dd5f Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 11 May 2024 13:46:52 +0900 Subject: [PATCH 1/3] Translate "React 19 upgrade guide" --- .../blog/2024/04/25/react-19-upgrade-guide.md | 296 +++++++++--------- src/content/blog/index.md | 4 +- src/sidebarBlog.json | 4 +- 3 files changed, 152 insertions(+), 152 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 84ef768cd..63b4fe52d 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -1,8 +1,8 @@ --- -title: "React 19 Beta Upgrade Guide" +title: "React 19 ベータアップグレードガイド" author: Ricky Hanlon date: 2024/04/25 -description: The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 beta. +description: React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。この投稿では、ライブラリを React 19 ベータにアップグレードする手順をご案内します。 --- April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii) @@ -11,52 +11,52 @@ April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii) -This beta release is for libraries to prepare for React 19. App developers should upgrade to 18.3.0 and wait for React 19 stable as we work with libraries and make changes based on feedback. +このベータリリースは、ライブラリが React 19 に備えるためのものです。アプリ開発者は、私たちがライブラリと協力してフィードバックに基づいた修正を行う間、18.3.0 にアップグレードしたうえで、React 19 の安定版をお待ちください。 -The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. +React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。 -To help make the upgrade easier, today we are also publishing React 18.3. +アップグレードを容易にするために、本日 React 18.3 も公開します。 -#### React 18.3 has also been published {/*react-18-3*/} +#### React 18.3 も公開されました {/*react-18-3*/} -To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. +React 19 へのアップグレードを容易にするため、`react@18.3` リリースを公開しました。これは 18.2 とほぼ同一ですが、非推奨化 API や React 19 に向けて必要なその他の変更に対する警告が追加されています。 -We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. +React 19 にアップグレードする前に、問題点を見つけるためにまず React 18.3 にアップグレードすることをお勧めします。 -For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md). +18.3 における変更点については、[リリースノート](https://github.com/facebook/react/blob/main/CHANGELOG.md)をご覧ください。 -In this post, we will guide you through the steps for upgrading libraries to React 19 beta: +この投稿では、ライブラリを React 19 ベータ版にアップグレードする手順をご案内します。 -- [Installing](#installing) -- [Breaking changes](#breaking-changes) -- [New deprecations](#new-deprecations) -- [Notable changes](#notable-changes) -- [TypeScript changes](#typescript-changes) +- [インストール](#installing) +- [破壊的変更](#breaking-changes) +- [新たな非推奨化](#new-deprecations) +- [注目すべき変更点](#notable-changes) +- [TypeScript 関連の変更](#typescript-changes) - [Changelog](#changelog) -If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19 beta, see the [React 19 release post](/blog/2024/04/25/react-19). +React 19 をテストしていただける方は、このアップグレードガイドに従い、遭遇した[問題を報告](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D)してください。React 19 ベータ版に追加された新機能のリストについては、[React 19 リリースのお知らせ](/blog/2024/04/25/react-19)をご覧ください。 --- -## Installing {/*installing*/} +## インストール {/*installing*/} -#### New JSX Transform is now required {/*new-jsx-transform-is-now-required*/} +#### 新しい JSX トランスフォームの必須化 {/*new-jsx-transform-is-now-required*/} -We introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we're adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform. +2020 年に、バンドルサイズを改善し、React をインポートせずに JSX を使用できるようにするための[新しい JSX トランスフォーム](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)を導入しました。React 19 では、ref を props として使用できるようにしたり JSX の速度を向上させたりといった追加の改善を行っており、これらには新しいトランスフォームが必須です。 -If the new transform is not enabled, you will see this warning: +新しいトランスフォームが有効になっていない場合、次の警告が表示されます。 @@ -69,18 +69,18 @@ Your app (or one of its dependencies) is using an outdated JSX transform. Update -We expect most apps will not be affected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the [announcement post](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). +ほとんどの環境ではこのトランスフォームがすでに有効になっているため、ほとんどのアプリは影響を受けないと予想されます。手動でアップグレードする方法については、[告知記事](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)をご覧ください。 -To install the latest version of React and React DOM: +React と React DOM の最新バージョンをインストールするには以下のようにします。 ```bash npm install react@beta react-dom@beta ``` -If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`. During the beta period, the types are available in different packages which need to be enforced in your `package.json`: +TypeScript を使用している場合は、型も更新する必要があります。React 19 が安定版としてリリースされた後は、通常通り `@types/react` と `@types/react-dom` から型をインストールできます。ベータ期間中は `package.json` で強制的に別のパッケージを指定することで、新しい型を利用できます。 ```json { @@ -95,21 +95,21 @@ If you're using TypeScript, you also need to update the types. Once React 19 is } ``` -We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below. +また、最も一般的な書き換えのための codemod も含まれています。下記の [TypeScript 関連の変更](#typescript-changes)を参照してください。 -## Breaking changes {/*breaking-changes*/} +## 破壊的変更 {/*breaking-changes*/} -### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/} +### レンダー中のエラーは再スローされない {/*errors-in-render-are-not-re-thrown*/} -In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. +これまでのバージョンの React では、レンダー中にスローされたエラーはキャッチされた後に再スローされていました。開発環境では、`console.error` にもログを出力していたため、エラーログの重複が発生していました。 -In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing: +React 19 では、重複を減らすためにエラーの扱いを[改善し](/blog/2024/04/25/react-19#error-handling)、再スローは行わないようになりました。 -- **Uncaught Errors**: Errors that are not caught by an Error Boundary are reported to `window.reportError`. -- **Caught Errors**: Errors that are caught by an Error Boundary are reported to `console.error`. +- **キャッチされないエラー**：エラーバウンダリによってキャッチされないエラーは `window.reportError` に報告されます。 +- **キャッチされたエラー**：エラーバウンダリによってキャッチされたエラーは `console.error` に報告されます。 -This change should not impact most apps, but if your production error reporting relies on errors being re-thrown, you may need to update your error handling. To support this, we've added new methods to `createRoot` and `hydrateRoot` for custom error handling: +この変更はほとんどのアプリに影響を与えないはずですが、本番環境におけるエラーレポートシステムが再スローの挙動に依存している場合は、エラー処理を更新する必要があります。これをサポートするために、カスタムのエラー処理を行うための新しい手段を `createRoot` と `hydrateRoot` に追加しました。 ```js [[1, 2, "onUncaughtError"], [2, 5, "onCaughtError"]] const root = createRoot(container, { @@ -122,17 +122,17 @@ const root = createRoot(container, { }); ``` -For more info, see the docs for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot). +詳細は、[`createRoot`](https://react.dev/reference/react-dom/client/createRoot) と [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot) のドキュメントを参照してください。 -### Removed deprecated React APIs {/*removed-deprecated-react-apis*/} +### 非推奨化 React API の削除 {/*removed-deprecated-react-apis*/} -#### Removed: `propTypes` and `defaultProps` for functions {/*removed-proptypes-and-defaultprops*/} -`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). +#### 廃止：関数コンポーネントの `propTypes` と `defaultProps` {/*removed-proptypes-and-defaultprops*/} +`PropTypes` は [2017 年 4 月 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings) に非推奨化されました。 -In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution. +React 19 では、React パッケージから `propTypes` チェックが削除されており、使用しても無視されるようになります。`propTypes` を使用している場合は、TypeScript または他の型チェックソリューションへの移行をお勧めします。 -We're also removing `defaultProps` from function components in place of ES6 default parameters. Class components will continue to support `defaultProps` since there is no ES6 alternative. +また、関数コンポーネントから `defaultProps` を削除します。ES6 のデフォルトパラメータを代わりに使用してください。クラスコンポーネントでは ES6 による代替手段がないため、`defaultProps` を引き続きサポートします。 ```js // Before @@ -158,13 +158,13 @@ function Heading({text = 'Hello, world!'}: Props) { } ``` -#### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/} +#### 廃止：`contextTypes` と `getChildContext` を使用したレガシーコンテクスト {/*removed-removing-legacy-context*/} -Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html). +レガシーコンテクストは [2018 年 10 月 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html) に非推奨化されました。 -Legacy Context was only available in class components using the APIs `contextTypes` and `getChildContext`, and was replaced with `contextType` due to subtle bugs that were easy to miss. In React 19, we're removing Legacy Context to make React slightly smaller and faster. +レガシーコンテクストは、`contextTypes` と `getChildContext` を使用するクラスコンポーネントでのみ利用可能であり、見逃しやすい微妙なバグのため、のちに `contextType` に置き換えられました。React 19 では、React を少し小さく、速くするためにレガシーコンテクストを削除しています。 -If you're still using Legacy Context in class components, you'll need to migrate to the new `contextType` API: +クラスコンポーネントでまだレガシーコンテクストを使用している場合、新しい `contextType` API に移行する必要があります。 ```js {5-11,19-21} // Before @@ -218,12 +218,12 @@ class Child extends React.Component { } ``` -#### Removed: string refs {/*removed-string-refs*/} -String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html). +#### 削除：文字列形式の ref {/*removed-string-refs*/} +文字列形式の ref は [2018 年 3 月 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html) に非推奨化されました。 -Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. +[いくつかの問題](https://github.com/facebook/react/issues/1373)のためコールバック形式の ref に置き換えられるまで、クラスコンポーネントは文字列形式の ref をサポートしていました。React 19 では、React をよりシンプルで理解しやすくするため、文字列形式の ref を削除します。 -If you're still using string refs in class components, you'll need to migrate to ref callbacks: +クラスコンポーネントでまだ文字列形式の ref を使用している場合は、コールバック形式の ref に移行する必要があります。 ```js {4,8} // Before @@ -253,14 +253,14 @@ class MyComponent extends React.Component { -To help with the migration, we will be publishing a [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) to automatically replace string refs with `ref` callbacks. Follow [this PR](https://github.com/reactjs/react-codemod/pull/309) for updates and to try it out. +移行を支援するために、文字列 ref を `ref` コールバックに自動的に置き換える [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) を公開する予定です。最新情報や試用については[この PR](https://github.com/reactjs/react-codemod/pull/309) をフォローしてください。 -#### Removed: Module pattern factories {/*removed-module-pattern-factories*/} -Module pattern factories were deprecated in [August 2019 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories). +#### 削除：モジュールパターンファクトリ {/*removed-module-pattern-factories*/} +モジュールパターンファクトリは [2019 年 8 月 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories) に非推奨化されました。 -This pattern was rarely used and supporting it causes React to be slightly larger and slower than necessary. In React 19, we're removing support for module pattern factories, and you'll need to migrate to regular functions: +このパターンはほとんど使用されておらず、サポートすることで React がわずかに大きく、遅くなる原因となっています。React 19 ではモジュールパターンファクトリのサポートが削除されており、通常の関数に移行する必要があります。 ```js // Before @@ -276,10 +276,10 @@ function FactoryComponent() { } ``` -#### Removed: `React.createFactory` {/*removed-createfactory*/} -`createFactory` was deprecated in [February 2020 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory). +#### 削除：`React.createFactory` {/*removed-createfactory*/} +`createFactory` は [2020 年 2 月 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory) に非推奨化されました。 -Using `createFactory` was common before broad support for JSX, but it's rarely used today and can be replaced with JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX: +JSX が広範にサポートされる以前は `createFactory` の使用が一般的でしたが、今ではほとんど使用されておらず、JSX に置き換えることができます。React 19 では `createFactory` が削除されており、JSX に移行する必要があります。 ```js // Before @@ -293,9 +293,9 @@ const button = createFactory('button'); const button =