@@ -47,7 +47,7 @@ React Conf 2018 にて Sophie Alpert と Dan Abramov がフックについての
47
47
48
48
** React からクラス型コンポーネントを削除する予定はありません。** このページの[ 下部] ( #gradual-adoption-strategy ) で段階的にフックを採用していく方法について読むことができます。
49
49
50
- ** Hooks は既にあなたが知っている React のコンセプトを置き換えるものではありません。** むしろ、フックはあなたが既に知っている props、state、コンテキスト 、ref、ライフサイクルといったコンセプトに対してより直接的な API を提供するものです。後でお見せするように、フックによって、これらを組み合わせるパワフルな手段も得ることができます。
50
+ ** Hooks は既にあなたが知っている React のコンセプトを置き換えるものではありません。** むしろ、フックはあなたが既に知っている props、state、コンテクスト 、ref、ライフサイクルといったコンセプトに対してより直接的な API を提供するものです。後でお見せするように、フックによって、これらを組み合わせるパワフルな手段も得ることができます。
51
51
52
52
** とにかくフックを学び始めたいという方は、どうぞ[ 直接次のページに進んでください] ( /docs/hooks-overview.html ) !** 以下には、なぜ React にフックを導入することにしたのか、アプリケーションを書き換えずにどのようにしてフックを使い始めることができるのかについて解説しています。
53
53
@@ -57,7 +57,7 @@ React Conf 2018 にて Sophie Alpert と Dan Abramov がフックについての
57
57
58
58
### ステートフルなロジックをコンポーネント間で再利用するのは難しい
59
59
60
- React は再利用可能な振る舞いをコンポーネントに「付加する」方法(例えばストアオブジェクトを connect するなど)を提供していません。React をしばらく使った事があれば、この問題を解決するための[レンダープロップ](/docs/render-props.html)や[高階コンポーネント](/docs/higher-order-components.html)といったパターンをご存じかもしれません。しかしこれらのパターンを使おうとするとコンポーネントの書き換えが必要であり 、面倒なうえにコードを追うのが難しくなります。典型的な React アプリを React DevTools で見てみると、おそらくプロバイダやらコンシューマやら高階コンポーネントやらレンダープロップやら、その他諸々の抽象化が多層に積み重なった『ラッパー地獄』を見ることになるでしょう。[DevTools でそれらをフィルタして隠す](https://github.com/facebook/react-devtools/pull/503)ことはできますが、この背景にはもっと根本的な問題があるということがわかります:React にはステートフルなロジックを共有するためのよりよい基本機能が必要なのです。
60
+ React は再利用可能な振る舞いをコンポーネントに「付加する」方法(例えばストアオブジェクトを connect するなど)を提供していません。React をしばらく使った事があれば、この問題を解決するための[レンダープロップ](/docs/render-props.html)や[高階コンポーネント](/docs/higher-order-components.html)といったパターンをご存じかもしれません。しかしこれらのパターンを使おうとするとコンポーネントの再構成が必要であり 、面倒なうえにコードを追うのが難しくなります。典型的な React アプリを React DevTools で見てみると、おそらくプロバイダやらコンシューマやら高階コンポーネントやらレンダープロップやら、その他諸々の抽象化が多層に積み重なった『ラッパー地獄』を見ることになるでしょう。[DevTools でそれらをフィルタして隠す](https://github.com/facebook/react-devtools/pull/503)ことはできますが、この背景にはもっと根本的な問題があるということがわかります:React にはステートフルなロジックを共有するためのよりよい基本機能が必要なのです。
61
61
62
62
フックを使えば、ステートを持ったロジックをコンポーネントから抽出して、単独でテストしたり、また再利用したりすることができます。** フックを使えば、ステートを持ったロジックを、コンポーネントの階層構造を変えることがなく再利用できるのです。** このため、多数のコンポーネント間で、あるいはコミュニティ全体で、フックを共有することが簡単になります。
63
63
@@ -75,21 +75,21 @@ React は再利用可能な振る舞いをコンポーネントに「付加す
75
75
76
76
### クラスは人間と機械の両方を混乱させる
77
77
78
- コードの再利用や整頓が難しくなるということに加えてクラスについて我々が学んだことは、クラスが React を学ぶ上で障壁となっているということです。JavaScript で ` this ` がどのように動作するのか理解しなければなりませんが、それは他の多くの言語での動作とは非常に異なっています。イベントハンドラーを ` bind ` するよう覚えておく必要があります。不安定な [ 提案中の構文] ( https://babeljs.io/docs/en/babel-plugin-transform-class-properties/ ) を使わない限り、コードは非常に冗長になってしまいます。開発者は props や state やトップダウンのデータフローについて完璧に理解できても、クラスの部分でつまづいてしまいます。React における関数コンポーネントとクラスコンポーネントの違いや使い分けについては経験のある React 開発者の間でも意見の差異が出てきます。
78
+ コードの再利用や整頓が難しくなるということに加えてクラスについて我々が学んだことは、クラスが React を学ぶ上で障壁となっているということです。JavaScript で `this` がどのように動作するのか理解しなければなりませんが、それは他の多くの言語での動作とは非常に異なっています。イベントハンドラーを `bind` するよう覚えておく必要があります。仕様が不確定な [提案中の構文](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)を使わない限り、コードは非常に冗長になってしまいます。開発者は props や state やトップダウンのデータフローについて完璧に理解できても、クラスの部分でつまづいてしまいます。React における関数コンポーネントとクラスコンポーネントの違いや使い分けについては経験のある React 開発者の間でも意見の差異が出てきます。
79
79
80
80
加えて、React は登場から約 5 年が経ちましたが、これからの 5 年間も使える選択肢のままであって欲しいと考えています。[Svelte](https://svelte.technology/) や [Angular](https://angular.io/) や [Glimmer](https://glimmerjs.com/) などのライブラリが示したように、コンポーネントの[事前コンパイル](https://en.wikipedia.org/wiki/Ahead-of-time_compilation)には大きな将来性があります。特に使用法がテンプレートに限られていない場合はそうです。最近我々は [Prepack](https://prepack.io/) を使った [component folding](https://github.com/facebook/react/issues/7323) を試しており、有望な初期結果が得られています。しかし、クラスコンポーネントを使うことで、これらの最適化機能が遅い経路にフォールバックしてしまうようなパターンを助長してしまうことが分かりました。クラスは今まさに使われているツール群でも問題を引き起こします。例えば、クラスはあまりよく minify されませんし、ホットリローディングも不安定で信頼できないものになってしまいます。我々は、コードが最適化しやすい状態でいられる可能性を高くできるような API を提示したいのです。
81
81
82
- これらの問題を解決するため、** フックにより 、より多くの React の機能をクラスを使わずに利用できるようにします** 。コンセプト的には、React のコンポーネントは常に関数に近いものでした。フックは関数を活用しながらも、React の実用性を犠牲にしません。フックは命令型コードへの避難ハッチへのアクセスを提供しますし、複雑な関数型プログラミングやリアクティブプログラミングの技法を学ばせることもありません。
82
+ これらの問題を解決するため、** フックは 、より多くの React の機能をクラスを使わずに利用できるようにします** 。コンセプト的には、React のコンポーネントは常に関数に近いものでした。フックは関数を活用しながらも、React の実用性を犠牲にしません。フックは命令型コードへの避難ハッチへのアクセスを提供しますし、複雑な関数型プログラミングやリアクティブプログラミングの技法を学ばせることもありません。
83
83
84
84
> 例
85
85
>
86
86
> [ フック早わかり] ( /docs/hooks-overview.html ) はフックを学び始めるのに良い記事です。
87
87
88
88
## 段階的な採用戦略
89
89
90
- > TLDR: React からクラスを削除する予定はありません。
90
+ > ** TLDR: React からクラスを削除する予定はありません。**
91
91
92
- React 開発者は製品を世に出す必要があり 、リリースされるあらゆる新しい API を確かめている時間はない、ということを、我々は理解しています。フックはとても新しい機能ですので、多くの例やチュートリアルが揃うまで、学んだり採用したりするのを待つ方がいいかもしれません。
92
+ React 開発者はプロダクト開発に注力する必要があり 、リリースされるあらゆる新しい API を確かめている時間はない、ということを、我々は理解しています。フックはとても新しい機能ですので、多くの例やチュートリアルが揃うまで、学んだり採用したりするのを待つ方がいいかもしれません。
93
93
94
94
また、React に新しい基本機能を付け加えるハードルが非常に高いということも理解しています。興味ある読者のために我々は[ 詳しい RFC] ( https://github.com/reactjs/rfcs/pull/68 ) を用意しています。そこではより詳しく動機を掘り下げており、関連する先行技術や個別の設計上の選択についての概要が述べられています。
95
95
0 commit comments