1.デザインパターンの重要性
デザインパターンとは、ソフトウェア開発において一般的に発生する問題に対する反復可能な解決策のことです。
デザインパターンは基本的なテンプレートとして機能し、与えられた要求に応じてプログラムの機能を構築することができます。
デザインパターンは、開発プロセスを高速化するだけでなく、コードの読みやすさやメンテナンスのしやすさを向上させます。
デザインパターンの一般的な例としては、SingletonパターンやGang-of-Fourパターンなどがあります。
ソフトウェア開発において、デザインパターンには2つの共通した役割があります。
- 開発者に共通のプラットフォームを提供する
デザインパターンは、標準的な用語や既知の問題に対する解決策を提供する。
- ベストプラクティスの確保
デザインパターンは、広範な研究とテストの結果として作成されています。デザインパターンは、開発者が開発環境に容易に慣れることができるだけでなく、ベストプラクティスが守られていることを保証します。
その結果、エラーが少なくなり、適切なデザインパターンが実装されていれば簡単に回避できたであろう問題のデバッグや解明にかかる時間を節約することができます。
2.Reactjsの機能
reactは、Githubで公開されているcreate-react-appを使ってインストールできます。npmを使用すると、他のすべての依存関係を追加できます。
React.jsは、JSXを利用しています。これは、JavaScriptの構文拡張です。JavaScriptのフルパワーを備えており、Reactの「要素」と呼ばれるものを提供してくれます。
JSXの使用は必須ではありませんが、JSXが提供する便利な視覚支援とスタイリングオプションのため、好ましい方法です。また、有用なエラーメッセージや警告も表示されます。
React.jsの基本理念は、再利用可能なリアクトコンポーネントです。このコンポーネントベースのアプローチは、Webアプリケーションのリッチなユーザーインターフェースを構築するために活用できることがわかります。
これらのReactコンポーネントは、それ自体が小さなシステムであると考えることができます。各コンポーネントは、独自の状態、入力、出力を持ちます。
コンポーネントの入力は、プロップの形で取得されます。コンポーネントは、ブラックボックスと考えることができます。それぞれが独自の状態とライフサイクルを持っています。コンポーネントは簡単に構成することができます。
最終的なReactアプリは、保守性の高いコードで構成されています。
3.Reactのデザインパターン
3.1.ステートレスコンポーネント
ステートとは、コンポーネントにインポートされるデータのことです。通常、データはデータベースから取得されます。
コンポーネントには、ステートフルコンポーネントとステートレスコンポーネントという2つのタイプがあります。両者の違いは、単にステートがあるかないかだけです。
ステートレスコンポーネントでは、その内部でthis.stateに到達することはできません。
ステートレスコンポーネントは、機能的コンポーネントや提示的コンポーネントとも呼ばれます。Reactでは、このようなコンポーネントは常に同じものをレンダリングするか、propsで渡されたものだけをレンダリングします。
開発者としての目的は、たとえその特定のコンポーネントを再利用しなければならないシナリオがすぐになくても、ステートレスコンポーネントを作成することです。
多くの場合、開発者は、あるコンポーネントが状態を持つ必要があるかどうかを、コードを書き始めてから理解しますが、それは必ずしも事前に明確ではないからです。
階層構造のコンポーネントでは、親コンポーネントにできるだけ多くの状態を保持させ、ステートレスな子コンポーネントを作るのがベストな方法です。データの受け渡しはプロップで行います。
3.2.条件付きレンダリング
条件はソフトウェア開発者の武器の中で最も重要なツールです。
Reactコンポーネントを作成する過程で、状態に応じて特定のJSXコードをレンダリングする必要が生じることがよくあります。これを実現するのが、条件付きレンダリングです。
条件付きレンダリングは、ニーズに応じて個別のコンポーネントを作成し、アプリケーションに必要なものだけをレンダリングすることができるので、非常に便利です。
例えば、条件付きレンダリングを使って、ユーザーのログイン状態に応じて異なるメッセージをユーザーに表示することができます。メッセージは、 isLoggedIn というプロップの値に従います。
3.3.レンダリングプロップ
デザインパターンが共通の問題を解決するために存在することを説明しました。Reactでは、ロジックの繰り返しの問題を解決するためにRenderプロップが用意されています。
Reactの公式ドキュメントによると、レンダープロップは「値が関数であるプロップを使ってReactコンポーネント間でコードを共有するためのテクニック」と定義されています。
レンダープロップは、異なるコンポーネント間で同じ状態を共有することができるため、非常に便利なものです。各コンポーネント内のロジックをハードコーディングする代わりに、何をレンダリングするかを決定するために関数プロップを使用することができます。
Formik、React Router、Downshiftなど、レンダープロップを利用した人気のあるライブラリがあります。
3.4．制御されたコンポーネント
Webフォームは多くのアプリケーションで共通の要件であり、制御されたコンポーネントはフォームの状態を処理するためのReactの答えです。
コントロールされたコンポーネントは、プロップを通して状態を受け取ります。それは onChange のようなコールバックによって変更を通知することができます。 親コンポーネントは、コールバックを処理し、自身の状態を管理することで、コントロールされたコンポーネントを制御することができ、その間、新しい値はコントロールされたコンポーネントにpropsとして渡されます。デフォルトでは、Reactフォームは制御されたコンポーネントと制御されていないコンポーネントの両方をサポートしています。制御されたコンポーネントを使用することを強くお勧めします。
次のコードスニペットは、制御されたコンポーネントを示しています。
<input type = "text" value = {value} onChange = {handleChange} />
3.5.Reactのフック
フックはReactの比較的新しい追加機能で、React 16.8で導入されました。
これらの機能により、開発者はクラスなしでReactを使用することができます。Effect Hook ( useEffect ) や State Hook など、さまざまなフックがあらかじめ用意されています。
利用可能なフックの完全なリストについては、 Hooks API Reference を参照してください。 Reactにあらかじめ用意されているフックとは別に、独自のフックを作成することもできます。これにより、コンポーネントのロジックを抽出し、再利用可能な関数を作成することができます。
フックはReactの歓迎すべき機能であり、開発者コミュニティはこの新しい機能を非常に熱心に評価しています。
しかし、フックの引数がオブジェクト、配列、関数である場合には、フックの扱いが少し難しくなることがあることを覚えておく必要があります。これでは少々混乱してしまいます。
一方で、カスタムフックは簡単で使いやすく、開発者にとっても大きなメリットがあります。
