Reactとは？基本概念を理解しよう

学習の目標

本章では、以下の内容を学習します。

Reactがどのような問題を解決するライブラリなのかを理解する
コンポーネントベース開発の基本概念を習得する
仮想DOMがなぜ重要なのかを学ぶ
SPAとMPAの違いとそれぞれの特徴を把握する

はじめに

Webサイトを作る時、HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きを付けるという流れが一般的です。

しかし、現代のWebアプリケーションは非常に複雑になっています。ユーザーがボタンをクリックしたら画面の一部が変わったり、フォームに入力した内容に応じて他の部分が連動して変化したりする機能が求められます。

このような複雑な機能を従来の方法で作ろうとすると、JavaScriptのコードがどんどん複雑になってしまいます。コードが複雑になると、バグが発生しやすくなったり、新しい機能を追加するのが困難になったりします。

そこで登場したのがReactです。 Reactは、こうした複雑なWebアプリケーションを効率的に開発するためのJavaScriptライブラリです。

React開発アイコン

※React公式サイトより引用

Reactが解決する問題

従来の開発で起こりがちな問題

まず、従来のJavaScriptでWebページを作る時に起こりがちな問題を見てみましょう。

例えば、ショッピングサイトでカートに商品を追加する機能を考えてみます。商品をカートに追加すると、以下の箇所を更新する必要があります。

カート内の商品一覧
カート内の商品数
合計金額
在庫数の表示

従来のJavaScriptでは、これらの更新処理をそれぞれ個別に書く必要がありました。

そのため、コードのあちこちでDOM（HTMLの要素）を直接操作することになり、どこで何を変更しているのかが分からなくなってしまいます。

Reactが提供する解決策

Reactは、このような問題を以下の方法で解決します。

データの流れを一方向にすることで、アプリケーションの動作を予測しやすくします。たとえば、カートに商品を追加する場合、以下のような流れになります。

ユーザーが商品をカートに追加する
Reactの状態（State）が更新される
Reactが自動的に画面の必要な部分を更新する

データが変更されると、それに関連する画面の部分が自動的に更新されるため、手動でDOM操作を行う必要がありません。

また、コンポーネントという単位で機能を分割することで、コードの再利用性を高め、保守しやすいアプリケーションを作ることができます。

コンポーネントベース開発とは

コンポーネントの基本概念

コンポーネントとは、UI（ユーザーインターフェース）の部品のことです。まるでレゴブロックのように、小さな部品を組み合わせて大きなアプリケーションを作るのが、コンポーネントベース開発の考え方です。

例えば、ブログサイトを作る場合、以下のようなコンポーネントに分けて考えることができます。

ヘッダーコンポーネント（サイトのタイトルやナビゲーション）
記事一覧コンポーネント（記事のタイトルと概要の一覧）
記事カードコンポーネント（個々の記事の情報を表示する部品）
サイドバーコンポーネント（人気記事やカテゴリ一覧）
フッターコンポーネント（著作権表示やリンク集）

これらのコンポーネントを組み合わせることで、ブログサイト全体を構築します。

コンポーネント化のメリット

コンポーネントに分けることで、以下のようなメリットがあります。

まずは 再利用性が高い ことです。一度作ったコンポーネントは、他の場所でも使い回すことができます。例えば、「ボタン」コンポーネントを作れば、サイト内のどこでも同じデザインのボタンを使うことができます。

次に、保守性が向上することです。

各コンポーネントが独立しているため、一つのコンポーネントを修正しても他の部分に影響を与えにくくなります。バグの修正や機能の追加が簡単になります。

さらに、テストが容易になることも大きなポイントです。

小さな単位でコンポーネントを作ることで、それぞれの動作を個別にテストすることができます。

仮想DOMの概念

DOMとは何か

DOM（Document Object Model）とは、HTMLの構造をJavaScriptで操作するためのインターフェースです。 WebブラウザはHTMLを読み込むと、その内容をDOMという形でメモリ上に保存します。

従来のJavaScriptでは、このDOMを直接操作して画面の内容を変更していました。しかし、DOM操作は処理が重く、頻繁に行うとWebページの動作が遅くなってしまいます。

仮想DOMの仕組み

Reactでは、仮想DOMという仕組みを使ってこの問題を解決しています。

仮想DOMとは、実際のDOMの軽量なコピーのようなものです。 Reactは以下の手順で画面を更新します。

データが変更されると、新しい仮想DOMを作成する
前の仮想DOMと新しい仮想DOMを比較する
変更された部分だけを特定する
実際のDOMの必要な部分だけを更新する

この仕組みにより、無駄なDOM操作を省略し、アプリケーションの動作を高速化することができます。

「仮想DOM」と聞くと難しく感じるかもしれませんが、要は「実際のDOMを直接操作するのではなく、軽量なコピーを使って効率的に更新する」ということです。

SPAとMPAの違い

Reactを使う上で理解しておきたいのが、SPA（Single-Page Application）とMPA（Multi-Page Application）の違いです。

それぞれの特徴を見ていきましょう。

MPAとは

MPA（Multi-Page Application）は、従来のWebサイトの作り方です。ページを移動するたびに、サーバーから新しいHTMLファイルを取得して、ブラウザが画面全体を再読み込みします。

例えば、ニュースサイトで記事一覧ページから個別の記事ページに移動する時、サーバーから新しいHTMLファイルをダウンロードして画面全体が切り替わります。

SPAとは

SPA（Single-Page Application）は、最初に1つのHTMLファイルだけを読み込み、その後はJavaScriptでページの内容を動的に変更する方式です。

ページを移動する時も、画面全体を再読み込みするのではなく、必要な部分だけを更新します。これにより、まるでデスクトップアプリケーションのような滑らかな操作感を実現できます。

SPAとMPAの比較

それぞれの特徴を表で比較してみましょう。

項目	SPA	MPA
画面遷移	高速で滑らか	画面全体が再読み込み
初回読み込み	少し時間がかかる	比較的高速
SEO対応	追加の対策が必要	自然に対応される
開発の複雑さ	複雑になりがち	比較的シンプル
ユーザー体験	アプリのような操作感	Webサイトらしい操作感

SPAの方が使い勝手が良い場合が多いですが、初回の読み込みが少し重くなることや、SEO対策が必要になる点に注意が必要です。

また、開発の複雑さも考慮する必要がありますので、必ずしもSPAが最適とは限りません。

やりたいことや、プロジェクトの規模に応じて、SPAとMPAを使い分けることが大切です。

まとめ

本章では、Reactの基本概念について学習しました。理解できたポイントは以下の通りです。

Reactは複雑なWebアプリケーション開発を効率化するJavaScriptライブラリである
コンポーネントベース開発により、再利用可能で保守しやすいコードが書ける
仮想DOMの仕組みでパフォーマンスを向上させながら開発を簡素化できる
SPAとMPAにはそれぞれ特徴があり、用途に応じて使い分けることが大切

これらの概念を理解することで、なぜReactが多くの開発者に選ばれているのか、そしてどのような場面でReactを使うべきなのかが分かったのではないでしょうか。

次からは、実際にReactの開発環境を構築して、コードを書きながら学習を進めていきましょう。