概要

React（リアクト）は、Meta社（旧Facebook社）が開発した、ウェブサイトの見た目（ユーザーインターフェース）を作るためのJavaScriptライブラリです。

現在のウェブ開発で最も人気のある道具のひとつで、画面上のボタンや入力フォーム、メニューなどの「部品」をバラバラに作って、それらをパズルのように組み合わせて一つの画面を完成させるという考え方を持っています。

詳しくは React 公式ドキュメント を参照してください。

詳しい説明

Reactの特徴は、大きく分けて2つあります。

1. コンポーネント（Component）

画面を「コンポーネント」と呼ばれる小さな部品に分けて管理します。 たとえば、SNSの画面なら「投稿ボタン」「ヘッダー」「ニュースフィード」といった具合です。一度作った部品は他のページでも使い回せるので、効率よく開発ができます。

2. 宣言的な記述

「データがこうなったら、画面をこうしてね」というルールをあらかじめ書いておくだけで、Reactが自動的に画面を更新してくれます。 ふつうのプログラムだと「ボタンが押されたら、この文字を消して、次にこの色を変えて……」と手順を細かく命令する必要がありますが、Reactでは「データが空なら『データがありません』と表示する」と決めておくだけで済みます。

3. 仮想DOM（Virtual DOM）

ウェブサイトの書き換えは、実はコンピュータにとって負担がかかる作業です。Reactは「仮想DOM（かそうドム）」という仕組みを使い、画面のどこが変わったかを裏側で計算し、本当に必要な部分だけをピンポイントで書き換えます。これにより、動きがスムーズで速いサイトを作ることができます。

実装の詳細は MDN Web Docs の React 紹介ページ も参考になります。

Astroとの違い

このサイトでメインに使われているAstro（アストロ）とReactには、それぞれ得意分野に違いがあります。

Astroは、ブログやニュースサイトのように「読むことがメインのページ」を、なるべく軽く、速く表示することが得意です。一方のReactは、入力フォームや管理画面のように「ユーザーの操作に合わせて画面がどんどん変わるページ」を作るのが得意です。

AstroとReactの比較表

比較のポイント	Astro	React
得意なこと	読むのがメインのページを作る	操作に合わせて画面が変わるページを作る
表示の速さ	とても速い（あらかじめページを準備するため）	ユーザーの操作のたびに計算するため、少し重くなることがある
画面の動き	少ない（別のページに移動することが多い）	多い（同じページ内で画面の表示が切り替わる）
このサイトでの役割	サイト全体の土台、ブログ記事の表示など	管理画面の操作パネル、タイムラインの絞り込み機能など

Astroには「アイランドアーキテクチャ」という仕組みがあり、基本はAstroでページを速く作りつつ、動きが必要な一部分（たとえば検索パネルやいいねボタンなど）にだけReactの部品を埋め込むことができます。このサイトもその仕組みを利用して作られています。

詳しくは Astro のアイランドアーキテクチャ解説 を参照してください。

まとめ

• Reactは、画面の部品（コンポーネント）を作って組み合わせるための道具
• データが変わると、自動的に必要なところだけを賢く書き換えてくれる
• 大規模なサイトでも、整理整頓しながら効率よく作ることができる
• Astroと組み合わせることで、速さと使いやすさを両立できる

このサイトでの使われ方

このサイトは主に Astro（アストロ）というフレームワークで作られていますが、動きの激しいパーツや複雑な計算が必要な場所には React を組み合わせて使用しています。

たとえば、タイムラインの絞り込み機能や、管理画面でのインタラクティブな操作パネルなどは、React の「データに合わせて画面を即座に変える」という得意分野を活かして実装されています。