メンバー
最新記事 by メンバー (全て見る)
- PG募集(未経験者可)4月～6月入社枠 - 2026年3月17日
- 派遣事業許可のお知らせ - 2026年3月2日
- Reactはどうやって画面を作る？ 部品（コンポーネント）で組み立てるUIの世界 - 2026年2月4日
先月の記事では、フロントエンド開発の基礎について執筆しました。
主にHTML・CSS・JavaScript、そしてDOMについてでしたね。
「Webページはどうやって表示されているのか」
「なぜJavaScriptで画面が動くのか」
といった、普段あまり意識しないブラウザの中の仕組みを振り返った内容です。
DOMを理解すると、フロントエンド開発が「なんとなく動いているもの」から、「理由のある仕組み」として見えてくるはずです。
一方で、「DOMを毎回自分で操作するのは、むちゃくちゃ面倒だな。。。」と感じた方もいるかもしれません。
そこで登場するのが、今回のテーマである React です。
Reactは、DOMを直接操作する時代に生まれたさまざまな課題に対して、「そもそもUIはどう作るべきか？」という視点から答えを出した技術です。
この記事では、Reactの書き方や細かい実装には踏み込みません。
Reactを「使う前に理解しておきたい存在」として捉え、その正体を掴むことを目的としていきましょう。
なぜReactは生まれたのか
Reactが生まれた理由を理解するには、従来のフロントエンド開発が抱えていた課題を振り返る必要があります。
JavaScriptでDOMを直接操作する開発スタイルでは、
「どの要素を、どのタイミングで、どう変更するか」
をすべて開発者が管理しなければなりません。
画面がシンプルなうちは問題ありませんが、ユーザーの要望に応えアクションの数や特別なデータグリッドを生成したりなど、画面状態が複雑になるにつれて、管理すべきDOMの更新箇所も爆発的に増えていきます。
その結果、
・UIの表示と内部データの状態がズレる（バグ）
・どこで何が変更されているのか追いづらい（状態管理が煩雑）
・修正が別の不具合を呼びやすい（バグの温床）
といった問題が発生します。
Reactは、こうした「DOM操作が複雑になりすぎる問題」を根本から見直すために生まれました。
Facebook（現Meta）が自社サービスを開発・運用する中で直面した課題に対する、ひとつの答えだったと言えます。
Reactは何を解決するための技術なのか
先ほどの章でReactがなぜ誕生したのか、を学びましたね。
この章ではReactが解決したい問題について解説していこうと思います。
Reactが解決しようとした問題は、単に「画面を速く表示すること」ではありません。
本質的には、UIと状態の関係をいかに安全に、分かりやすく保つか という点にあります。
従来の開発では、『この操作があったら、ここを書き換えて、次にあれを更新する』というように、UIの更新手順を人が逐一考える必要がありました。
文章では簡単に書いていますがこの状態管理が、なかなか面倒なのです。
そしてReactはこの発想を転換します。
・UIは状態の結果として決まる
・状態が変われば、UIも自然に変わる
・DOMをどう書き換えるかは考えなくてよい
つまりReactは、「DOM操作の手間」を減らすための技術ではなく、UIの考え方そのものを整理するための技術 だと言えます。
Reactはどんな考え方を持ったライブラリなのか
Reactは「UIを作るためのライブラリ」です。
と、ここで「ライブラリ」と「フレームワーク」について簡単に説明しようと思います。
・ライブラリ
⇒ 必要な部品を自分で組み合わせて使う
⇒ 開発者が主導権
⇒ UIを作るための道具箱
・フレームワーク
⇒ 最初から構造やルールが決まっている
⇒ フレームワーク側が主導権
そしてReactはライブラリに該当し、単なる便利な道具というよりも、UI設計に対する思想を提供している点が特徴的です。
今までの開発では、「ボタンが押されたらここを書き換える」「データが変わったらこのDOMも更新する」というように、UIを直接操作する対象として扱っていました。
そのため、画面のあちこちで更新処理が発生し、変更の流れが追いづらくる、という顕著なデメリットが発生します。
しかし、Reactはまず「今の状態は何か？」を考え、その状態なら画面はどうあるべきかを宣言します。
すると、UIはその状態の「結果」として自然に形が決まり、開発者が細かいDOM更新を意識する必要はなくなるのです。
これは単なる書き方の違いではなく、責任の置き方の違いの考え方です。
・従来：開発者がUI更新の責任を持つ
・React：状態さえ正しければ、UIは正しくなる
Reactは、UIの一貫性を「人の注意力」に依存させるのではなく、「構造」によって保とうとする技術です。
さらに重要なのは、ReactがUIを部品の集合として捉えることです。
画面全体を一枚の大きなDOMとして扱うのではなく、小さな単位に分割し、それぞれが独立した責任を持つ構造を作ります。
この考え方によって、
・影響範囲が明確になる
・修正が局所化される
・大規模化しても整理された状態を保てる
というメリットが生まれます。
Reactが目指しているのは、DOMを速くすることよりも、UIの構造を破綻しにくくすることです。
まとめ：Reactは戦い方を変えた技術
11月の記事では、DOMの仕組みを整理しました。
そして今回見てきたのは、「そのDOMとどう向き合うか」を変えた技術がReactだということです。
Reactは、DOMをなくしたわけではありません。
ただ、私たちがDOMと直接戦わなくてもよい世界を作ってくれました。
・画面をどう書き換えるかを考えるのではなく
・今どんな状態かを考える
・UIはその結果として自然に決まる
この発想の転換こそが、Reactの本質です。
Reactは流行りの技術というよりも、「フロントエンド開発の整理整頓係」というイメージのほうがしっくりくるかもしれません。
複雑になりがちなUIと状態の関係を、破綻しにくい形に整えてくれる存在です。
では、実際にその整理はどうやって実現されているのでしょうか。
コンポーネントとは何か、状態はどう扱うのか。
その中身については、次回あらためて掘り下げていきます。
福岡市博多区でWebシステム開発の受託・ラボ型SES・web集客サービス、３つのWebサービスを提供中
