📖

[REACT]コンポーネントについて

2023/05/27に公開

JavaScript

REACT

今日は、Reactの中でも最も重要な役割　コンポーネントについて書いていきます。
まず先にREACTについて...!

REACTとは

https://ja.reactjs.org/

REACTはユーザインターフェース構築のための JavaScript ライブラリ。
以前、フロントエンド-フレームワークの歴史についてここのページに掲載しましたが、
先にREACTというフレームワークがどのくらい支持されているのか？？
どのような経緯で発生したのか？？を再度学びたいと思います。

現在どのような利用率？？ -他のフレームワークと比べてみて-

以下は2022年のフロントエンドフレームワークのページです。
【利用率】
昨年の利用率はというと、REACTがダントツの一位です。
ほか、Google Trendsで見ても人気度は上がり続けています。
npm　trendsのページでダウンロード数を見ても多いです。

npmとは？？

npmとは

Node Package Managerの略称で、JavaScriptのパッケージ管理システム。
npmを使用することで、JavaScriptの依存関係を簡単に管理できる。
また、これを使用し、自分で作成したJavaScriptパッケージを公開し、他の人が利用できるようにすることもできる。
JavaScriptでWebアプリケーションを開発する場合には、npmを使うことが一般的!!!

ここまで見てわかるとおり、REACTがフロントエンドJavaScriptライブラリとして強力なことがわかる！
日本においてはREACTが右肩上がりの言語で、並行してVue.jsも多い状態になっている。

なぜそこまでREACTが人気なのか。

それは,他のJavaScriptライブラリと比べて以下のような特徴ゆえです。

1. 仮想DOMの導入による高速化
Reactは仮想DOM（Virtual DOM）という機能を導入しており、Webページのレンダリング処理を高速化している。
仮想DOMは、実際のDOMと同じ構造を持つJavaScriptオブジェクトのこと

仮装DOMとは？

Reactが採用しているレンダリング手法の一つであり、DOMを高速化するための手法の一つ。
仮想DOMは、実際のDOMと同じ構造を持つJavaScriptオブジェクトのことであり、DOMの状態をJavaScriptのオブジェクトとして表現している。
Reactでは、仮想DOMを使用し、変更があった部分だけを更新することができる。
具体的には、Reactは、仮想DOMと実際のDOMの差分を取り、必要な部分だけを再描画する。
このため、Webページの再描画処理を高速化することができる。
[仮装DOMの利点]

変更があった部分だけを効率的に更新できる
再描画処理を高速化できる
パフォーマンスの向上につながる

2. コンポーネント指向の開発が容易
Reactはコンポーネント指向の開発が容易であり、部品ごとにコンポーネントを分割して開発することができる。また、コンポーネントを再利用することができるため、開発効率の向上につながっている。

3. 大規模アプリケーションの開発に向いている
コンポーネント指向の開発が容易であり、また、データの流れを単方向にすることができるため、
アプリケーション全体を一元的に管理することができる。

4. 大きなコミュニティがあるため
ReactはFacebookが開発したライブラリであり、大きなコミュニティがあるため、
情報共有や問題解決が容易であり、開発効率の向上につながっている。

コンポーネントとは

Reactのコンポーネントは、
Reactライブラリにおいてビルディングブロックとなる再利用可能なUI要素。
画面の各構成要素をREACTで定義したもの。
アプリケーションの構成要素をカプセル化し、
それぞれの役割に基づいて独自のロジックやスタイルを持つことができる。

■ コンポーネント化の利点

1. 再利用性向上:
コンポーネントベースのアプローチにより、UI要素を独立して作成し、
他の場所で再利用することができる。同じコンポーネントを複数の場所で使用することで、
コードの重複を減らし、開発効率を向上させることができます。

2. メンテナンス性:
コンポーネントは独立して管理されるため、コードの変更や修正が容易になる。
特定の機能やスタイルを変更する場合、そのコンポーネントだけを修正すれば済む。
これにより、アプリケーション全体の保守性が向上！！

3. 一貫性:
コンポーネントを使用することで、UIの一貫性を維持することができる。

4. テスト容易性:
コンポーネントは独立してテスト可能な単位で、ユニットテストや統合テストを実施する際に便利。
各コンポーネントを単体でテストすることで、予期しないバグや問題を早期発見することができる。

5. 可読性と保守性:
コンポーネントベースのアプローチにより、UI要素が小さな部品に分割され、
それぞれの役割を明確にすることができる。
これにより、コードの可読性が向上し、他の開発者がコンポーネントを理解しやすくなる。
また、コンポーネントの独立性により、保守性が向上し、
大規模なアプリケーションの開発や変更管理が容易になります。

ReactのコンポーネントはJavaScriptのクラスまたは関数として定義される。

クラスコンポーネントは
React.Componentを継承し、renderメソッド内で表示されるコンポーネントのUIを定義。
関数コンポーネントは、
単純なJavaScript関数として定義され、戻り値として表示されるUIを返す。

コンポーネントは、props（プロパティ）とstate（状態）という2つの重要な概念を使用してデータを受け取り、管理。propsは親コンポーネントから渡される読み取り専用のデータであり、コンポーネント内で変更することはできない。一方、stateはコンポーネント内で管理される可変のデータであり、setStateメソッドを使用して更新することができる。

コンポーネントは階層的な構造を持ち、
親コンポーネントが子コンポーネントを含む形で組み合わせられる。
これにより、アプリケーション全体を簡単に管理できるコンポーネントツリーが作成される。

ここを具体的にしていきたいと思います！！！！

以上！週末は気を休めながらも、楽しく頑張ろう！❤️