メンバー
最新記事 by メンバー (全て見る)
- PG募集(未経験者可)4月～6月入社枠 - 2026年3月17日
- 派遣事業許可のお知らせ - 2026年3月2日
- Reactはどうやって画面を作る？ 部品（コンポーネント）で組み立てるUIの世界 - 2026年2月4日
これまでReactについて解説を行うのに、前段階としてフロントエンド開発の基礎とReactの考え方について整理してきました。
1回目では、HTMLやJavaScript、そしてDOMといったフロントエンドの基本的な仕組みを振り返りました。
Webページがどのように構造化され、ブラウザの中でどのように表示・更新されているのかを理解することで、「画面が動く理由」が見えてきたと思います。
見えていない方のためにフロントエンドの基礎についてはこちらから
続く2回目では、Reactという技術がどのような背景で生まれたのか、そしてどんな考え方を持ったライブラリなのかを見てきました。
Reactは、DOMを直接操作する複雑さを解消し、「UIは状態から導かれる」という考え方でフロントエンド開発を整理した技術でした。
では、そのReactは 実際にどのように画面を作っているのでしょうか？
今回の記事では、Reactの技術的な仕組みに少し踏み込み、コンポーネントや状態といった基本概念を通して、ReactがどのようにUIを構築しているのかを見ていきます。
Reactをこれから触る人にとっても、「なぜこの書き方をするのか」が理解できるよう、できるだけシンプルに整理していきます。
それでは参りましょう！
Reactの基本単位：コンポーネント
Reactを理解するうえで、まず押さえておきたいのが コンポーネントという考え方です。
コンポーネントとは、簡単に言えば「UIの部品」です。
※UI（ユーザーインターフェース）とは、ユーザーとWebサービス、アプリなどの「接点（タッチポイント）」のことで、見た目や操作性、画面デザインなどを指します。
例えばWebアプリの画面には、次のような要素があります。
（eコマースなどのサイトをイメージしてもらえればと思います）
・ヘッダー
・メニュー
・商品一覧
・ボタン
・フッター
従来の開発では、これらの要素をHTMLとして一つの大きなページに書いていくことが多くありました。
しかし、画面が複雑になるにつれて、どこに何のコードがあるのか分かりづらくなってしまいます。
（数Kステップのコードを見るのは大変ですよね。。。）
Reactでは、この画面を小さな部品に分割します。
この部品というのがコンポーネントというやつです。
// 上記の要素
画面
├ Header
├ Menu
├ ProductList
├ Button
└ Footer
それぞれをコンポーネントとして作ることで、
- コードが整理される
- 再利用しやすくなる
- 影響範囲が分かりやすくなる
といったメリットが生まれます。
Reactでは、画面は部品（コンポーネント）の組み合わせで作られるという考え方が基本になります。
JSX：HTMLのように書けるJavaScript
Reactのコードを見ると、最初に戸惑うのがこの書き方かもしれません。
function App() {
return <h1>Hello React</h1>;
}
returnの箇所にタグが埋め込まれている。。と思いますよね。
一見するとHTMLのように見えますが、これは JSX と呼ばれる書き方です。
JSXは、JavaScriptの中にHTMLのようなマークアップを書くための構文です。
実際には、このコードはブラウザで実行される前にJavaScriptのコードに変換されます。
重要なのは、
JSXはReactそのものではなく、
JavaScriptの構文拡張である
という点です。
なぜJSXを使用する？？
なぜこのような書き方をするのでしょうか。
今までのWeb開発では↓のように役割が分かれていました。
・HTML⇒コンテンツ
・CSS⇒デザイン
・JavaScript⇒ロジック
しかし最近のWebアプリではロジックがUIを決定する。
例を挙げると、ログイン状態で表示/非表示の部品を変える、APIレスポンスデータによって検索結果が表示もしくは0件に変わといった感じです。
そのためReactでは “マークアップ（UI）とロジックを同じ場所に書く” という考え方を採用しています。
つまり『 UI + ロジック = コンポーネント』というイメージですね。
画面の構造をJavaScriptのロジックと一緒に書くことで、以下のようなメリットを生み出しています。
・UIとロジックの関係が分かりやすい
・コンポーネント単位で管理しやすい
最初は少し不思議に見えるかもしれませんが、Reactではこの書き方が標準的なスタイルなんです。
（慣れていくしかないですね）
state：Reactの中心となる考え方
Reactを理解するうえで、もう一つ重要なのが state（状態） です。
stateとは、簡単に言えば「画面の状態を表すデータ」です。
例えば、次のような状態を考えてみましょう。
- ログインしているかどうか
- カートに入っている商品数
- 入力フォームの内容
- ボタンが押された回数
上記のようにユーザー操作によって画面が変化する場面が多くありますよね。このような変化するデータを保存する場所が state です。
stateは「コンポーネントの記憶」
Reactでは、stateを “コンポーネントが覚えておく情報” として説明しています。
何かしらの数をカウントするカウンターを例に考えてみます。
let count = 0;
このように変数を使っても、Reactは再描画のタイミングでこの値を保持できません。
そこでReactでは useState という仕組みを使って状態を保存します。
const [count, setCount] = useState(0);
これによってReactは『状態を保存する』『状態が変わったらUIを更新する』という処理を自動で行っています。
先ほどのカウンターの場合だと
- ボタンをクリック
- stateが更新される
- Reactが再描画する
- 新しいUIが表示される
という流れになります。
“stateが更新されるとコンポーネントが再描画される” という点もReactの重要な仕組みとなるのです。
まとめ
今回の記事では、Reactがどのように画面を作っているのか、その基本的な仕組みを見てきました。
今回の記事で学んだ通りReactでは、
・UIはコンポーネントという部品で構成される
・画面は状態（state）から描画される
・状態が変わるとUIが更新される
というシンプルな構造で画面が作られています。
前々回の記事ではフロントエンドの基礎を整理し、前回の記事ではReactの考え方を紹介しました。
そして今回の記事では、そのReactがどのようにUIを構築しているのかを技術的な視点から見てきました。
Reactは一見すると新しい技術のように見えますが、その本質は「UIを整理するための考え方」にあります。
コンポーネントと状態という基本概念を理解することで、Reactの仕組みはぐっと分かりやすくなります。
Reactにこれから触れる方にとって、今回の記事がその第一歩になれば幸いです。
福岡市博多区でWebシステム開発の受託・ラボ型SES・web集客サービス、３つのWebサービスを提供中
