こんにちは。
Keiです。
今回は【コンポーネント開発のメリットから、React.jsを採用する理由を考えてみる】というテーマで学んだことを自分なりの言葉に直して書いていきます。
よろしくお願いします。
コンポーネント開発のメリットとは
前提知識：コンポーネント志向とは、開発においてシステムをより小さくして
独立した部品（コンポーネント）に分割し、これらの部品を再利用して
全体のアプリケーションを構築するという考え方。
再利用性：例えば、ボタンやフォーム、ナビゲーションバーなどのUI要素を
コンポーネントとして作り、異なるページや別のプロジェクトで再利用（使いまわし）
することで開発時間を短縮、コードの重複を減らすことが出来る。
＊この前作ったパーツを組み合わせてもうひとつアプリ作ろう！みたいなイメージ
保守性：コンポーネントはひとつひとつが独立したシステムのため、どこかひとつの
コンポーネントを変更・修正してもシステム全体に影響を与えることが少なくなる。
それにより、エラーを素早く特定し、修正が簡単になるため、保守がしやすくなる。
＊山田君が更新したらエラーが起こったぞ！じゃあエラーはAだな！みたいなイメージ
組み合わせの容易さ：それぞれのコンポーネントを独立したブロックとして開発する
ことで、異なる組み合わせを自在に作ることができる。この柔軟性により、新しい機能
の追加やアイデアの実験がしやすくなる。
＊コンポーネントAとXを組み合わせたら新しいシステムYが出来た！みたいなイメージ
チーム連携のしやすさ：例えば、コンポーネントAは山田君、コンポーネントBは伊藤君
コンポーネントCは佐藤君、といったように同時に複数人が異なる部位の実装に取り組むことが出来るため、プロジェクト全体の作業効率とスケールアップすることが容易に
なる。＊私はボタン作るから、あなたはお問い合わせフォーム作ってね、みたいなイメージ
テストのしやすさ：ひとつひとつが独立したコンポーネントだからこそ、各ブロック
に対して単体テスト（ユニットテスト）を行うことで、バグを素早く発見できる。
React系フレームワークのメリットとは
React.js（JavaScriptのフレームワーク）
前提知識：
ユーザーインターフェース（UI）の構築に優れていて、UIを「宣言的」、
「効率的」かつ「柔軟」に作ることが出来る。
＊React.jsの特徴は別記事にて掘り下げる
シングルページアプリケーション（SPA）のユースケースと利点：
モダンなWeb開発ではユーザーがページを移動しなくてもコンテンツが更新される
ことが求められている。
その点において、Reactはコンポーネントベースで状態管理とUI更新が高効率で、
ユーザーの操作に応じて画面が更新されるSPAの開発に適している。
再利用可能なコンポーネント：
Reactで作られたコンポーネントは再利用が容易。例えば、ボタンや入力フォーム、
ナビゲーションバーなどのUI要素をコンポーネントとして一度作成すれば、異なる
場所や異なるプロジェクトでも簡単に再利用できる。
これは開発の効率を上げるだけではなく、コードの一貫性を保つこともできる。
明確なデータフロー：
Reactは”props”と”state”を使用した明確なデータフローを持っている。
”props”（プロパティ）は親コンポーネントから子コンポーネントへデータを渡すために
使用され、”state”はコンポーネント内でデータを管理するために使います。このようなデータフローは、
アプリケーションの状態がどのように管理され、各コンポーネント間でどのようにデータが渡されるかを
明確にし、バグの発生を減少させる。（記事を書いた時点でこの部分はよくわかってない）
宣言的UI：
プログラマーが「何を実現したいか」を記述することで、
フレームワークがそれらを実行するということ。
例えば、ユーザーがボタンをクリック・入力を行った際に、
それに応じてUIが動的に変化する。
ボタンをクリックするとカウンターが増加する（通販サイトの個数設定のような）
フォームに入力するとリアルタイムで画面に表示される（検索結果の反映）
仮想DOM：
簡潔に言えば、変更が必要な部分だけを効率的にアップデートすることで、
Webページを素早く、スムーズに更新する手助けをしてくれる（読み込みが早い）
多くのデータが動的に変化する大規模な開発を行う場合はパフォーマンスを
大幅に向上させる。
また、DOMは開発者が直接DOMを扱い複雑さを減らし、コンポーネントの
パフォーマンスを向上させる。
＊DOMとは、HTMLやXMLドキュメントの内容と構造をプログラムが容易に操作できるようにするための規約で、Webページとスクリプト言語を結びつける橋渡し役であり、モダンなWebアプリの動的な動作を可能にする基盤の技術
まとめ
コンポーネント開発のメリットはエラーの早期発見やテストのしやすさ、
開発速度の向上、チームで開発する際の扱いやすさがある。
React.jsはコンポーネントベースのアーキテクチャといえるため、
アプリケーションを小さな単位に分割し、それぞれのコンポーネントが独立して
動作するように設計されていることからもコンポーネント開発との相性が良い
とされている。
