関数コンポーネント と クラスコンポーネントの違いとは？
Webデベロッパーの皆さんは、ユーザーインターフェースを構築するJavaScriptライブラリとして人気のReactについて聞いたことあるのではないでしょうか。
Reactの主な特徴の1つは、コンポーネントベースのアーキテクチャです。ユーザーインターフェースを「コンポーネント」と呼ばれる再利用可能で独立した要素に分解することができます。
そこで本記事では、Reactの２種類のコンポーネントである、「関数コンポーネント」と「クラスコンポーネント」について見ていきます。
主なポイント：
- クラスコンポーネントでは、React.Componentのクラスを拡張するJavaScript クラスが使われる。
- 関数コンポーネントは、プロパティ（プロップ）を受け取り、レンダリング用のReact要素を返す「JavaScript関数」に似ている。
- クラスコンポーネントは、ステートやライフサイクルの動作を正確に制御する必要がある複雑なコンポーネントに適している。
- 関数コンポーネントは、より機能的なプログラミングのアプローチを採用した、より単純なシナリオで威力を発揮する。
Reactアプリを構築する前に、デザインする必要があります。しかし、デザインスキルがなくても、魅力的なレスポンシブレイアウトを作ることができます。 最高のオープンソース ライブラリから提供されるドラッグ ＆ドロップ コンポーネントを使ってデザインしてみませんか？ 詳しくはこちらのページをぜひご覧ください。
クラスコンポーネントとは
クラスコンポーネントは、Reactでコンポーネントを作成する従来の方法であり、多くのコードベースで今でも広く使用されています。 また、オブジェクト指向プログラミングの経験を持つソフトウェア エンジニアにとってより馴染みのある構文があり、コンポーネントの動作をよりきめ細かく制御できるようになります。
Reactのクラスコンポーネントは、React独自が提供する React.Componentのクラスを継承した JavaScriptのクラスを使って作成されます。これによって、クラスコンポーネントは React の機能や特徴にアクセスできるようになります。
クラスコンポーネントの基本的な機能の１つに、setState メソッドを使った内部状態を管理できます。この手法で、クラスコンポーネントは時間の経過とともに変化するデータを更新および処理できるようになり、それでステートが変更されたときにコンポーネントを再レンダリングできるようになります。
さらに、クラスコンポーネントは、コンポーネントの存在のさまざまな段階で実行される事前に確定された関数である、ライフサイクルのメソッドを利用します。これで、デベロッパーはコンポーネントのライフサイクルのさまざまな段階で特定のアクションや動作を調整することができることから、コンポーネントがアプリケーション内でどのように動作および相互作用するかについての制御とカスタマイズが強化されます。
クラスコンポーネントと関数コンポーネントの利点
他のタイプと比較したクラスコンポーネントの利点を以下で見てみましょう。
- パフォーマンス： クラスコンポーネントは、インスタンスを再利用して必要な部分のみを更新することで、パフォーマンスを最適化することができ、これは大規模なデータセットを扱う際に便利である。
- 内部状態の管理： setState を使うことで内部状態を維持することができ、それによって、コンポーネント自身の内部で動的なデータの変更を扱うことができる。
- 挙動の正確な制御： 詳細な制御と構造があるため、複雑な動作制御が求められるコンポーネントを扱う場合に有益である。
クラスコンポーネントを使うことの欠点
クラスコンポーネントには利点もありますが欠点もあり、主な欠点のひとつに、その複雑さが挙げられます。クラスコンポーネントは、特に React に馴染みがないデベロッパーにとっては、関数コンポーネントと比べて習得が難しいです。thisやライフサイクルのメソッドの使用など、クラスコンポーネントで使われる構文や概念は、初心者にとってはわかりにくいかもしれません。
また、クラスベースのコンポーネントは、関数コンポーネントと比べて、より冗長です。同じ機能を実現するにはより多くのコードが必要になり、その結果、定型的なコードが増え、コードが読みにくくなり、保全しにくくなります。
そして、クラスコンポーネントにはもう一つ、密結合でテストしにくいコードになる可能性があるという欠点があります。クラスコンポーネントはUIと動作の両方をカプセル化するので、コンポーネントの特定の部分を分離してテストするのは難しいかもしれません。なので、コンポーネントの単体テストを書くのが難しくなり、コードのモジュール性や再利用性が落ちてしまいます。
関数コンポーネントとは
関数コンポーネントは、React コンポーネントの最もシンプルな形です。基本的に JavaScript の関数で、独自の内部状態がなく、propsに依存してデータを受け取り、コンポーネントの出力を表す JSX を返します。
関数コンポーネントは、ステートレスのクラスコンポーネントにステートとライフサイクル機能を処理できる機能を提供する React Hooks の導入で人気を博しました。バージョン16.8で導入されたフックで、関数コンポーネントとクラスコンポーネントの間のギャップが埋めることができるようになりました。その時点から、関数コンポーネントはクラスコンポーネントと同じことができるようになった上で、よりシンプルで再利用しやすくなりました。
関数コンポーネント と クラスコンポーネントの利点
React プロジェクトで関数コンポーネントを使うのには、少なくとも以下の３つの利点があります。
- 再利用や合成がしやすい：単なる関数なので、ロジックを個別の関数に抽出し、複数のコンポーネントで簡単に再利用できる。
- 関数型プログラミングの推進：関数型プログラミングを推奨しており、それでよりモジュール化されたコードになり、推論やデバッグがしやすくなる。
- テストがしやすい： 内部ステートとライフサイクルのメソッドがない関数コンポーネントは、小道具に基づく単純な入出力テストを伴うので、テストがしやすい。
関数コンポーネントとクラスコンポーネントのベストプラクティス
関数コンポーネントと クラスコンポーネントのどちらを使うにしても、クリーンで保全性の高いコードを書くために守れるベストプラクティスがいくつかあります。そのヒントをいくつか見てみましょう：
- コンポーネントは小さく、集中的に： UIをより小さく、再利用可能なコンポーネントに分割する。そうすることで、コードがよりモジュール化され、わかりやすくなる。
- コンポーネントには説明的な名前を使用する： コンポーネントには、その目的と機能を正確に表す、意味のある名前を選ぶ。そうすることで、コードが読みやすくなり、ナビゲートしやすくなる。
- 懸念事項を分離する： UIロジックとビジネスロジックを分離する。コンポーネントは UI のレンダリングに集中させ、データ取得や状態管理のロジックはコンポーネントの外部に移動させる。
- 単一責任の原則に従う：各コンポーネントには単一の責任があり、１つのことをうまくやるべきである。そうすることで、コードの保全性が高まり、テストもしやすくなる。
- コンポーネントのユニットテストを書く： コンポーネントをテストして、それが想定通りに動作することを確認する。Jest や React Testing Library のようなツールを使って、コンポーネントのユニットテストを書く。
Reactアプリのレイアウトを構築しましょう
関数コンポーネントとクラスコンポーネントの長所と限界を理解することで、デベロッパーは Reactアプリを構築する際に、十分な情報に基づいた意思決定を行うことができます。
React Hooks は関数コンポーネントの機能を拡張し、クラスコンポーネントはステートとライフサイクルの制御を提供します。このコンセプトを把握し、ベストプラクティスを採用することで、デベロッパーは強固で効率的なReactアプリケーションを作成できるのです。
関数コンポーネントとクラスコンポーネントの理解が深まったところで、いよいよ知識を実践に移しましょう。UXPin Merge は、コード化されたコンポーネントでプロトタイプを簡単に作成できる直感的なデザイン技術です。最初のフロントエンドデザインをいかに簡単に構築できるのか、UXPin Mergeでぜひご体験ください。
