Skip to content

Commit a8f8a9f

Browse files
smikitkyhoney32
andauthored
Partially apply suggestions from code review
Co-authored-by: honey32 <[email protected]>
1 parent 278aef4 commit a8f8a9f

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const deferred = useDeferredValue(value);
8585
</Suspense>
8686
```
8787

88-
デフォルトでは、これらのアニメーションは[ビュー遷移のためのデフォルト CSS アニメーション](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) を使用します(通常はスムースなクロスフェード)。アニメーションの実行方法を定義するために[ビュー遷移関連の擬似セレクタ](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree)を使用できます。たとえば、すべてのビュー遷移についてデフォルトのアニメーションを変更するには `*` を使用できます。
88+
デフォルトでは、これらのアニメーションは[ビュー遷移のためのデフォルト CSS アニメーション](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) を使用します(通常はスムースなクロスフェード)。「どんな」アニメーションが発生するかを定義するために[ビュー遷移関連の擬似セレクタ](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree)を使用できます。たとえば、すべてのビュー遷移についてデフォルトのアニメーションを変更するには `*` を使用できます。
8989

9090
```
9191
// "how" to animate.
@@ -4900,7 +4900,7 @@ root.render(
49004900

49014901
### 起因別のアニメーション {/*animating-based-on-cause*/}
49024902

4903-
場合によっては、アニメーションがトリガされた起因 (cause) に基づいて、要素を異なる方法でアニメーションさせたいことがあります。このユースケースのために、ビュー遷移の起因を指定するための新しい API である `addTransitionType` を追加しました。
4903+
場合によっては、起因 (cause) に基づいてアニメーションを変えたいことがあります。このユースケースのために、ビュー遷移の起因を指定するための新しい API である `addTransitionType` を追加しました。
49044904

49054905
```js {4,11}
49064906
function navigate(url) {
@@ -14255,7 +14255,7 @@ Activity の別のモードとして我々が考慮しているのは、メモ
1425514255
フックをリリースしたとき、私たちには 3 つの動機がありました。
1425614256

1425714257
- **コンポーネント間でのコード共有**:フックがレンダープロップや高階コンポーネントといったパターンを置き換えたことで、コンポーネントの階層構造を変更せずにステートフルなロジックを再利用できるようになりました。
14258-
- **ライフサイクルではなく関数指向で考える**コンポーネントのコードをライフサイクルメソッドに基づいて無理矢理分割する代わりに、フックのおかげでコードの意味的な関連性(サブスクリプションの設定やデータフェッチ)に基づいて 1 つのコンポーネントをより小さな関数に分割できるようになりました
14258+
- **ライフサイクルではなく関数指向で考える**フックのおかげで、1 つのコンポーネントを、ライフサイクルメソッドに基づいて無理矢理分割するのではなく、コードの意味的な関連性(サブスクリプションの設定やデータフェッチ)に基づいて小さな関数へと分割できるようになりました
1425914259
- **事前コンパイルのサポート**:フックは、事前コンパイルをサポートし、ライフサイクルメソッドやクラスの制限によって引き起こされる最適化漏れといった落とし穴を減らせるように設計されました。
1426014260

1426114261
リリース以来、フックは*コンポーネント間でのコード共有*という点では成功しています。フックは、コンポーネント間でロジックを共有するための望ましい方法となり、レンダープロップや高階コンポーネントの使用例は減少しています。フックはまた、クラスコンポーネントでは不可能だった Fast Refresh のような機能をサポートすることにも成功しています。
@@ -14302,9 +14302,9 @@ useEffect(() => {
1430214302
}); // compiler inserted dependencies.
1430314303
```
1430414304

14305-
このコードでは、React Compiler が依存配列を自動的に推論して挿入するため、見る必要も書く必要もありません[IDE 拡張](#compiler-ide-extension)[`useEffectEvent`](/reference/react/useEffectEvent) のような機能を使用することで、デバッグが必要なときや依存値を削除して最適化したい時のために、コンパイラが挿入したものを表示する CodeLens を提供できます。これにより、エフェクトを書くための正しいメンタルモデルが強化され、コンポーネントやフックの state を他のものと同期させるために任意のタイミングで実行できるエフェクトが書けるようになるでしょう。
14305+
このコードでは、依存配列を React Compiler が自動的に推論して挿入するため、見たり書いたりする必要がありません[IDE 拡張](#compiler-ide-extension)[`useEffectEvent`](/reference/react/useEffectEvent) のような機能を使用することで、デバッグが必要なときや依存値を削除して最適化したい時のために、コンパイラが挿入したものを表示する CodeLens を提供できます。これにより、エフェクトを書くための正しいメンタルモデルが強化され、コンポーネントやフックの state を他のものと同期させるために任意のタイミングで実行できるエフェクトが書けるようになるでしょう。
1430614306

14307-
依存配列を自動的に挿入することにより我々が期待しているのは、ただ書きやすくなるというだけのことではありません。コンポーネントのライフサイクルではなく「エフェクトが何をするのか」という視点で考えることを強制し、理解がしやすくなることを期待しています。
14307+
依存配列の自動挿入について我々が期待しているのは、ただ書きやすくなるというだけのことではありません。コンポーネントのライフサイクルではなく「エフェクトが何をするのか」という視点で考えることを強制し、理解がしやすくなることを期待しています。
1430814308

1430914309
---
1431014310

@@ -14346,7 +14346,7 @@ IDE 拡張はまだ初期の探求段階ですが、今後の更新で進捗を
1434614346

1434714347
## 並行ストア {/*concurrent-stores*/}
1434814348

14349-
React 18 を並行レンダー (concurrent rendering) 機能と共にリリースした際、`useSyncExternalStore` もリリースしました。これは、React の state やコンテクストを使用しない外部ストアライブラリが、当該ストアが更新されたときに同期レンダーを強制することで、[並列レンダーをサポート](https://github.com/reactwg/react-18/discussions/70)できるようにするためのものでした
14349+
React 18 を並行レンダー (concurrent rendering) 機能と共にリリースした際、`useSyncExternalStore` もリリースしました。これによって、React の state やコンテクストを使用しない外部ストアライブラリは、当該ストアが更新されたときに同期レンダーを強制することで、[並列レンダーをサポート](https://github.com/reactwg/react-18/discussions/70)できるようになりました
1435014350

1435114351
しかし `useSyncExternalStore` の使用にはコストが伴います。トランジションのような並行レンダー機能からの離脱を強制し、既存のコンテンツにサスペンスのフォールバックを表示させてしまうからです。
1435214352

@@ -14356,7 +14356,7 @@ React 19 がリリースされましたので、`use` API を使用して並行
1435614356
const value = use(store);
1435714357
```
1435814358

14359-
私たちの目標は、レンダー中に不整合 (tearing) を起こさず外部状態を読み取れるようにし、React が提供するすべての並行レンダー機能とシームレスに連携できるようにすることです。
14359+
私たちの目標は、外部の状態を、レンダー中に不整合 (tearing) を起こさず読み取ることができ、React が提供するすべての並行レンダー機能とシームレスに連携できるようにすることです。
1436014360

1436114361
この研究はまだ初期段階です。進展があれば、どのような新しい API になるかを共有する予定です。
1436214362

0 commit comments

Comments
 (0)