メインコンテンツまでスキップ

Reactについての知識

・Reactの特徴​

Reactは、ユーザインターフェースを作るためのJavaScriptライブラリです。普通のJavaScriptでは、命令的にDOMを操作しますが、Reactは宣言的なやり方で、状態に応じてビュー（画面）を自動で更新してくれます。コンポーネントごとにUIを作れるので、部品みたいに再利用できますし、フックを使えば、状態管理や副作用の処理も簡単にできます。

・コンポーネント​

**Reactのコンポーネントは、アプリケーションを小さく、再利用可能な部品に分割して、保守性を高めるものです。**Reactのアプリケーションは、こうしたコンポーネントを組み合わせて作成されます。コンポーネントは、画面上の特定の部分（ビュー）を担当し、その見た目や振る舞いを独立して管理することができます。

コンポーネントのポイント​

  1. 再利用可能: コンポーネントはひとつ作っておけば、アプリ内の別の場所でも何度でも使えます。異なる「props」を渡すことで同じコンポーネントでも異なる内容を表示できます。これにより、コードの重複を減らし、保守性を高めます。
  2. 自己完結型: 各コンポーネントは、自分自身の見た目（HTMLのような構造）、ロジック（JavaScriptのコード）、スタイル（CSS）を持つことができます。これにより、UIを細かく管理しやすくなります。
  3. 親子関係: コンポーネントは入れ子にして使うことができます。大きなコンポーネントの中に小さなコンポーネントを含めることで、複雑なUIをシンプルに分割して管理できます。
    • 親コンポーネント: 他のコンポーネントを内部に持つコンポーネント。
    • 子コンポーネント: 親コンポーネント内に配置され、親から「props」を受け取って表示内容を変えることができます。

コンポーネントの種類​

Reactには主に2種類のコンポーネントがありますが、最近は関数コンポーネントが推奨されています。

関数コンポーネントはシンプルで軽量なコンポーネントです。関数として定義し、propsを受け取ってUIを描画（びょうが）します。React Hooksを使って、状態管理や副作用の処理ができます。

React 16.8以前は、状態やライフサイクルメソッドを扱うためにクラスコンポーネントがよく使われていました。クラスとして定義され、this.stateやthis.propsを使用します。

ライフサイクル​

Reactのクラスコンポーネントにはライフサイクルメソッドがあり、コンポーネントの生成から破棄までの過程で特定のタイミングで自動的に呼び出されます。

クラスコンポーネントのライフサイクルは主に3つのフェーズに分かれています。マウント時（mount）には初期化処理を行い、更新時(update)には状態やpropsの変化に応じた処理を行い、アンマウント時（unmount）には不要になったリソースのクリーンアップを行います。

ただし、React 16.8以降では、関数コンポーネントとHooks（特にuseEffectフック）の使用が推奨されており、クラスコンポーネントに頼らなくても同じようなライフサイクルの処理を実現できるようになっています。新規開発では関数コンポーネントの使用が一般的です。

マウントフェーズ​

マウントフェーズはコンポーネントが初めてDOMに挿入される過程です。

**constructor()**はコンポーネントが初めて作成されるときに呼ばれるメソッドです。状態（this.state）の初期化や、イベントハンドラのバインドを行います。super(props)を呼び出して、React.Componentのコンストラクタを継承する必要があります。

**render()**は必須のメソッドで、コンポーネントが表示するUIを定義します。JSXを返すメソッドで、実際のDOMにどのようにレンダリングされるかを決めます。

**componentDidMount()**はコンポーネントが初めてDOMにマウントされた後に呼ばれるメソッドです。初回のレンダリング後に一度だけ実行され、データのフェッチやサブスクライブ（イベントリスナーの設定）などを行うのに適しています。

更新フェーズ​

更新フェーズは、コンポーネントの状態（state）や親から渡されるpropsが変更されたときに発生します。このフェーズでは、再レンダリングが行われる前後で複数のメソッドが呼ばれます。

**shouldComponentUpdate(nextProps, nextState)**は再レンダリングするかどうかを制御するメソッドです。

更新時再度**render()**メソットが呼ばれ、UIを更新します。

**componentDidUpdate(prevProps, prevState)**はコンポーネントの更新が完了し、再レンダリングがDOMに反映された後に呼ばれるメソッドです。

アンマウントフェーズ​

アンマウントフェーズは、コンポーネントがDOMから削除される際に実行される処理です。

**componentWillUnmount()**はタイマー（Timer）のクリアやイベントリスナー（Event Listener）の解除、サブスクライブ（subscribe）の解除など、リソースのクリーンアップを行うのに使います。

関数コンポーネント​

メリット​

関数コンポーネントはシンプルであり、クラスコンポーネントに比べてコードが短く、可読性（かどくせい）が高いです。状態やライフサイクルを管理するためのReact Hooksを使うことで、複雑なクラスベースのコードを関数ベースの簡潔な記述に置き換えられます。特にuseStateやuseEffectの登場により、関数コンポーネントで状態管理やライフサイクルの処理が非常に簡単で直感的になりました。

useStateは状態を管理するために使われ、クラスコンポーネントのthis.stateとthis.setStateに相当しますが、コードがずっとシンプルです。

useEffectは副作用（データフェッチやDOMの変更など）を処理するためのフックです。クラスコンポーネントのcomponentDidMountやcomponentDidUpdate、componentWillUnmountなどを1つの関数で置き換えられます。依存リストを使ってどの状態やpropsが変わったときに実行するかを制御でき、またアンマウント時のクリーンアップ処理も1箇所で書けるため、非常に効率的です。

まとめると、関数コンポーネントは、シンプルで読みやすく、Hooksによって状態管理やライフサイクル処理が容易になり、パフォーマンスも向上するため、Reactの公式推奨として今後の標準的な選択肢です。

主要なフック​

Reactの関数コンポーネントを使う際に、以下のフックを熟知しておくと開発効率が向上します：

useState: 状態管理​

**useState**は、コンポーネント内で状態を管理するための基本的なフックです。

useEffect: 副作用の処理​

**useEffect**は、データフェッチ、DOM操作、サブスクリプションなど、副作用と呼ばれる処理を実行するためのフックです。 APIリクエスト、タイマー設定、外部リソースのクリーンアップなどの処理を行います。

useContext: コンテキストAPIを利用してグローバルデータを管理​

**useContext**は、ReactのコンテキストAPIと組み合わせて使用され、コンポーネント間で状態を共有するために使います。コンポーネントツリー全体に状態やデータを渡すことができ、親から子への深いpropsの受け渡しを避けることができます。グローバルなデータ、例えばユーザー情報、テーマ、言語設定などを効率的に管理します。

useReducer: 複雑な状態管理​

**useReducer**は複雑な状態管理や多くの状態を一括管理する際に利用します。特に、Reduxのようなリデューサー関数を使ったアプローチが必要な場合に使われます。

useRef: DOM要素や値の参照​

**useRef**は、DOM要素や値を参照するためのフックです。レンダリング間で変わらない値を保持したり、直接DOMを操作するのに役立ちます。

useMemo: 高コストな計算の最適化​

**useMemo**は、計算コストの高い処理をメモ化（キャッシュ）することで、レンダリングのたびに無駄な計算が行われないようにするためのフックです。計算が重い処理をメモ化してパフォーマンスを向上させます。

useCallback: コールバック関数のメモ化​

**useCallback**は、関数（コールバック）をメモ化するためのフックです。特に、コンポーネントが再レンダリングされるたびに新しい関数が作成されるのを避けるために使います。

サードパーティーライブラリ​

サードパーティーライブラリ（third-party library）とは、アプリケーション開発者が自分で作成したものではなく、外部の開発者や組織によって提供されているライブラリのことです。これらのライブラリは、開発者が必要な機能を自分でゼロから作るのではなく、既存の機能を利用できるようにするためのツールやコードのセットです。汎用的な機能がパッケージ化されており、さまざまなプロジェクトで簡単に再利用できます。

Reactのエコシステムにおけるサードパーティーライブラリ:

  • Axios: HTTPリクエストを送るためのライブラリ。
  • Lodash: JavaScriptの配列やオブジェクトの操作を簡単にするためのユーティリティライブラリ。
  • Redux: グローバルな状態管理を効率的に行うためのライブラリ。
  • Moment.js: 日時の操作を簡単にするライブラリ。
  • React Router: Reactアプリケーションでルーティングを管理するためのライブラリ。

サードパーティーライブラリを使う理由​

自分でゼロから作るよりも、既存のライブラリを使うことで開発のスピードを上げられる。さらに、多くのユーザーや開発者に使われているので、バグ修正や機能改善が進んでいて安心です。必要があれば、機能を追加したりカスタマイズもできる柔軟性があるのも大きな利点です。

にMacshionが最終更新