Skip to content

Fix format errors detected by textlint, continued #579

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.

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

Merged
merged 4 commits into from
May 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ December 21, 2020 by [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan

---

サーバコンポーネントの紹介のためのトークとデモを用意しました。休暇期間中にチェックするもよし、来年仕事に戻ってきた時に見てみるのでもよいでしょう
サーバコンポーネントの紹介のためのトークとデモを用意しました。休暇期間中にチェックするもよし、来年仕事に戻ってきたときに見てみるのでもよいでしょう

<YouTubeIframe src="https://www.youtube.com/embed/TQQPAU21ZUw" />

Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/2021/06/08/the-plan-for-react-18.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ React 18 のリリース時点で、自動で有効になるパフォーマン

## 段階的な導入戦略 {/*a-gradual-adoption-strategy*/}

React 18 における並行レンダリングはオプトインになるため、コンポーネントの振る舞いにおいてデフォルトで大きな破壊的変更があるということはなくなります。**いつものメジャーリリースの時に要する労力と大差ないレベルの最小限の書き換えで、あるいは書き換えゼロで、React 18 にアップグレードすることができます**。我々がいくつかのアプリを React 18 に移植した経験から、多くのユーザは半日以内にアップグレード作業を完了できるだろうと考えています。
React 18 における並行レンダリングはオプトインになるため、コンポーネントの振る舞いにおいてデフォルトで大きな破壊的変更があるということはなくなります。**いつものメジャーリリースのときに要する労力と大差ないレベルの最小限の書き換えで、あるいは書き換えゼロで、React 18 にアップグレードすることができます**。我々がいくつかのアプリを React 18 に移植した経験から、多くのユーザは半日以内にアップグレード作業を完了できるだろうと考えています。

Facebook 内では既に数万のコンポーネントを並行レンダリングの機能を用いてリリースすることができました。我々の経験ではほとんどの React コンポーネントは追加の開発なしで「ごく普通に」動作することが分かっています。しかしコミュニティ全体で今回のアップグレードが確実にスムースに行くようにしたいと考えており、そのために本日、React 18 ワーキンググループを発表します。

Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/2021/12/17/react-conf-2021-recap.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ React 18 では、エキスパートや開発者、ライブラリメンテナ

## React ドキュメントキーノート {/*react-docs-keynote*/}

React の学習や React による設計についての一連の発表は [Rachel Nabors](https://twitter.com/rachelnabors) からスタートしました。その中では React の 新ドキュメントに対する我々の注力についてのキーノートがありました([react.dev としてリリース済み](/blog/2023/03/16/introducing-react-dev)):
React の学習や React による設計についての一連の発表は [Rachel Nabors](https://twitter.com/rachelnabors) からスタートしました。その中では React の新ドキュメントに対する我々の注力についてのキーノートがありました([react.dev としてリリース済み](/blog/2023/03/16/introducing-react-dev)):

<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ React Conf 2021 において、React Forget についての[アーリープレ

オフスクリーン機能は、高レベルの機能を実現するための低レベル機能です。`startTransition` のような React の他の並行レンダー機能と同様ですが、大抵の場合、あなたが直接オフスクリーン API を利用することはありません。代わりに、フレームワークが実装する以下のようなパターンを通じて利用することになるでしょう。

* **即時の画面遷移。** 現在でもルーティングフレームワークの中にはナビゲーションを高速化するため、リンクをホバーした際などにデータをプリフェッチするものが存在します。オフスクリーン機能を使えば、さらに後続の画面をバックグラウンドでプリレンダーしておくことが可能になります。
* **ステートの再利用。** 同様に、オフスクリーン機能を使うことで、ページやタブを切り替えた時に前の画面の state を保持しておき、切り替えて戻ってきたときに前の状況を復元できるようになります。
* **リストのレンダーの仮想化。** 大きなリストを表示している際に、リスト仮想化を提供するフレームワークでは現在見えているもの以外にも多くの項目をプリレンダーします。オフスクリーン機能を使えば、見えていない項目をリスト内の見えている項目よりも低優先度でプリレンダーすることができるようになります。
* **背景コンテンツ。** また、モーダルをオーバーレイで表示している場合の背景要素など、非表示でないコンテンツのレンダー優先度を下げるような関連機能についても検討しています。
* **即時の画面遷移**。現在でもルーティングフレームワークの中にはナビゲーションを高速化するため、リンクをホバーした際などにデータをプリフェッチするものが存在します。オフスクリーン機能を使えば、さらに後続の画面をバックグラウンドでプリレンダーしておくことが可能になります。
* **ステートの再利用**。同様に、オフスクリーン機能を使うことで、ページやタブを切り替えたときに前の画面の state を保持しておき、切り替えて戻ってきたときに前の状況を復元できるようになります。
* **リストのレンダーの仮想化**。大きなリストを表示している際に、リスト仮想化を提供するフレームワークでは現在見えているもの以外にも多くの項目をプリレンダーします。オフスクリーン機能を使えば、見えていない項目をリスト内の見えている項目よりも低優先度でプリレンダーすることができるようになります。
* **背景コンテンツ**。また、モーダルをオーバーレイで表示している場合の背景要素など、非表示でないコンテンツのレンダー優先度を下げるような関連機能についても検討しています。

## トランジションのトレース {/*transition-tracing*/}

Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ export default function PackingList() {

`importance` が `0` の場合に `0` が結果として表示されてしまわないよう、`importance && ...` ではなく `importance > 0 && ...` と書く必要があることに注意してください。

この答えでは、名前と重要度ラベルの間にスペースを挿入するために、2 つの条件が使用されています。代わりに、先頭にスペースを入れたフラグメントを使用することができます: `importance > 0 && <> <i>...</i></>` あるいは、`<i>` の直接内側にスペースを追加することもできます: `importance > 0 && <i> ...</i>`。
この答えでは、名前と重要度ラベルの間にスペースを挿入するために、2 つの条件が使用されています。代わりに、先頭にスペースを入れたフラグメントを使用することができます`importance > 0 && <> <i>...</i></>` あるいは、`<i>` の直接内側にスペースを追加することもできます`importance > 0 && <i> ...</i>`。

</Solution>

Expand Down Expand Up @@ -638,7 +638,7 @@ React チームでは、[Rachel Nabors](https://twitter.com/rachelnabors/) が

サイトデザインに感謝します:[Dan Lebowitz](https://twitter.com/lebo)。サンドボックスデザインに感謝します:[Razvan Gradinar](https://dribbble.com/GradinarRazvan)。

開発面では、プロトタイプ開発に感謝します:[Jared Palmer](https://twitter.com/jaredpalmer)。UI 開発のサポートに感謝します:[Dane Grant](https://twitter.com/danecando)、[Dustin Goodman](https://twitter.com/dustinsgoodman) ([ThisDotLabs](https://www.thisdot.co/))。サンドボックス統合に感謝します:[Ives van Hoorne](https://twitter.com/CompuIves)、[Alex Moldovan](https://twitter.com/alexnmoldovan)、[Jasper De Moor](https://twitter.com/JasperDeMoor)、[Danilo Woznica](https://twitter.com/danilowoz) ([CodeSandbox](https://codesandbox.io/))。開発やデザインの手直し、色づけや細かい部分の調整に感謝します:[Rick Hanlon](https://twitter.com/rickhanlonii)。サイトに新機能を追加し、メンテナンスしてくれる [Harish Kumar](https://www.strek.in/)と [Luna Ruan](https://twitter.com/lunaruan) に感謝します。
開発面では、プロトタイプ開発に感謝します:[Jared Palmer](https://twitter.com/jaredpalmer)。UI 開発のサポートに感謝します:[Dane Grant](https://twitter.com/danecando)、[Dustin Goodman](https://twitter.com/dustinsgoodman) ([ThisDotLabs](https://www.thisdot.co/))。サンドボックス統合に感謝します:[Ives van Hoorne](https://twitter.com/CompuIves)、[Alex Moldovan](https://twitter.com/alexnmoldovan)、[Jasper De Moor](https://twitter.com/JasperDeMoor)、[Danilo Woznica](https://twitter.com/danilowoz) ([CodeSandbox](https://codesandbox.io/))。開発やデザインの手直し、色づけや細かい部分の調整に感謝します:[Rick Hanlon](https://twitter.com/rickhanlonii)。サイトに新機能を追加し、メンテナンスしてくれる [Harish Kumar](https://www.strek.in/) と [Luna Ruan](https://twitter.com/lunaruan) に感謝します。

アルファテスト及びベータテストプログラムに参加してくださった皆さんに心から感謝します。皆さんの情熱と貴重なフィードバックによって、このドキュメントを形作ることができました。そして React Conf 2021 で自身の経験をもとに React ドキュメントについて語っていただいた、ベータテスタの [Debbie O'Brien](https://twitter.com/debs_obrien) に特別な感謝を送ります。

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/queueing-a-series-of-state-updates.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);
```

もっと長いコードが好きな場合、別の一般的な慣習としては、`setEnabled(enabled => !enabled)` のように完全な state 変数名を繰り返すか、`setEnabled(prevEnabled => !prevEnabled)` のようなプレフィクスを使用することがあります
もっと長いコードが好きな場合、別の一般的な慣習としては、`setEnabled(enabled => !enabled)` のように完全な state 変数名を繰り返すか、`setEnabled(prevEnabled => !prevEnabled)` のようなプレフィックスを使用することがあります

<Recap>

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/responding-to-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,7 @@ export default function App() {

まずはイベントハンドラを追加する必要があります。`<button onClick={onChangeColor}>` のようになります。

ただし、これによりカウンターが増加する問題が発生します。同僚が主張している通り `onChangeColor` がこれをやっているのでないのであれば、このイベントが上に伝播して、どこかのハンドラがそれを行っているのでしょう。この問題を解決するには、伝播を停止する必要があります。ただし `onChangeColor` を呼び出すことを忘れないでください。
ただし、これによりカウンタが増加する問題が発生します。同僚が主張している通り `onChangeColor` がこれをやっているのでないのであれば、このイベントが上に伝播して、どこかのハンドラがそれを行っているのでしょう。この問題を解決するには、伝播を停止する必要があります。ただし `onChangeColor` を呼び出すことを忘れないでください。

<Sandpack>

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/start-a-new-react-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Expo は [Expo(社名)](https://expo.dev/about) によってメンテナン

**これらの問題は React に固有のものではありません。まさにこれが、Svelte には SvelteKit、Vue には Nuxt といったフレームワークが存在する理由です**。これらの問題を自力で解決するには、ルータやデータ取得ライブラリをバンドラに結合する作業を自分で行う必要があります。最初のセットアップをひとまず動作させることは難しくありませんが、時間が経ってアプリが成長してもなお素早く読み込めるサイトを作るためには、数々の細々とした問題に対処する必要が出てきます。アプリに必要な最小限のコードを 1 回のクライアント・サーバ間の往復で送信しつつ、並行してページ表示に必要なデータも送信したい、と思い始めるでしょう。ページが段階的に読み込まれ、JavaScript コードが実行すらされないうちから操作可能であってほしくなるでしょう。どこにでもホストでき JavaScript が無効になっていても動作する、マーケティングページのための完全に静的な HTML ファイルが入ったフォルダを生成したい、と考え始めるでしょう。これらの機能を自分で構築するには、大変な労力が必要です。

**このページで紹介する React フレームワークは、これらの問題をデフォルトで解決しているため、あなたが余計な作業をする必要はありません**。これらのフレームワークを使用することで、非常にスリムに始めて、ニーズに応じてアプリをスケーリングできます。各 React フレームワークにはコミュニティがあるため、質問に対する回答を見つけたり、ツールのアップグレードをしたりすることもより簡単に行えます。フレームワークはあなたのコードに構造を与えるので、あなたや他の人が異なるプロジェクト間でコンテキストとスキルを保持するのにも役立ちます。逆に、カスタムセットアップを行った場合、サポートされなくなった依存関係バージョンにハマる可能性が高まり、いずれ実質的には独自フレームワークのようなものを作成する羽目に陥ります。ただしそのようなフレームワークにはコミュニティもアップグレードパスもなく、仮に過去に作成されていたものに近かったとしても、行き当たりばったりで設計されたものに過ぎないわけですが。
**このページで紹介する React フレームワークは、これらの問題をデフォルトで解決しているため、あなたが余計な作業をする必要はありません**。これらのフレームワークを使用することで、非常にスリムに始めて、ニーズに応じてアプリをスケーリングできます。各 React フレームワークにはコミュニティがあるため、質問に対する回答を見つけたり、ツールのアップグレードをしたりすることもより簡単に行えます。フレームワークはあなたのコードに構造を与えるので、あなたや他の人が複数のプロジェクト間でコンテクストやスキルを保持するのにも役立ちます。逆に、カスタムセットアップを行った場合、サポートされなくなった依存関係バージョンにハマる可能性が高まり、いずれ実質的には独自フレームワークのようなものを作成する羽目に陥ります。ただしそのようなフレームワークにはコミュニティもアップグレードパスもなく、仮に過去に作成されていたものに近かったとしても、行き当たりばったりで設計されたものに過ぎないわけですが。

これでも納得できないという場合、またはフレームワークでは対処しきれない特殊な制約があって自分独自のセットアップを行いたい、という場合は、止めはしませんのでどうぞそうしてください! npm から `react` と `react-dom` を入手し、[Vite](https://vitejs.dev/) や [Parcel](https://parceljs.org/) のようなバンドラを使ってカスタムビルドプロセスをセットアップし、ルーティング、静的ファイル生成、サーバーサイドレンダリングなどのための各種ツールを必要に応じて追加していってください。
</DeepDive>
Expand Down
Loading