こんにちは、かつコーチです。
TypeScript基礎編、25記事お疲れさまでした。
型注釈、インターフェース、ジェネリクス、そして既存プロジェクトの移行方法まで、盛りだくさんの内容を走り抜けてきましたね。
ここからはいよいよ「React編」のスタートです。
TypeScript基礎編で身につけた型の知識は、このReact編でもフル活用していきます。
初回の今日は、「Reactって結局何なの？」という一番の疑問から解消していきましょう。
Reactとは？
ひとことで言うと「UIを部品化して作る道具」
Reactは、Webサイトの画面（UI）を「部品（コンポーネント）」に分けて組み立てるためのJavaScriptライブラリです。
たとえば、ヘッダー・検索フォーム・商品カード・フッターといったパーツを、それぞれ独立した「部品」として作ります。
そして、その部品を組み合わせてページ全体を組み立てる、という考え方をとります。
一度作った部品は、別のページでも使い回せます。
「同じようなボタンをあちこちに何度も書く」ということがなくなるのが、Reactの大きな魅力です。
開発しているのはMeta（旧Facebook）
Reactは、Meta社（旧Facebook）が開発し、2013年に公開されたライブラリです。
FacebookやInstagramをはじめ、Netflix・Airbnbなど、世界中の有名なWebサービスで採用されています。
長く使われている分、情報量も多く、困ったときに検索すれば解決策が見つかりやすいのも安心材料です。
「ライブラリ」であって「フレームワーク」ではない
VueやAngularとの立ち位置の違い
ここが初心者がよく混乱するポイントなので、少し丁寧に説明します。
Reactは公式にも「ライブラリ」と表現されており、Vue.jsやAngularのような「フレームワーク」とは少し立ち位置が違います。
- フレームワーク：ルーティング・状態管理・フォーム処理など、アプリに必要な機能一式が最初から揃っている「土台」
- ライブラリ：UIの部品化という一部の役割に特化しており、足りない機能は他のライブラリを組み合わせて補う
VueやAngularを選ぶと、ルーティング機能などが公式にセットで用意されていることが多いです。
一方Reactは、UIを組み立てる部分だけを担当し、ルーティングが必要ならReact Router、状態管理が必要なら別のライブラリ、といったように自分で必要なものを組み合わせていくスタイルです。
「自由度が高い」ことの良さと難しさ
この違いは、良くも悪くもReactの特徴です。
自由度が高い分、プロジェクトに合った構成を柔軟に選べます。
一方で、「何を組み合わせればいいか分からない」と初心者が迷いやすいポイントでもあります。
私が初めてReactに触れたときも、「あれ、ルーティングってReact本体には入ってないの？」と戸惑った記憶があります。
TypeScriptの学習で「型を自分で定義する」感覚を身につけたあなたなら、「必要なものを自分で選んで組み合わせる」Reactの考え方にもきっとすぐ馴染めるはずです。
このシリーズでは、まず土台となるReact本体の書き方をしっかり固めていくので、安心して進めてください。
Reactでできること
コンポーネント単位での開発
先ほど触れた「部品化」がReactの中心的な考え方です。
たとえば、ECサイトの「商品カード」を1つのコンポーネントとして作れば、商品の数だけ同じコンポーネントを再利用できます。
// ProductCard.tsx
type ProductCardProps = {
name: string;
price: number;
};
function ProductCard({ name, price }: ProductCardProps) {
return (
<div className="product-card">
<p>{name}</p>
<p>{price}円</p>
</div>
);
}
こういった「部品」を組み合わせてページを組み立てていくイメージを、まずは持っておいてください。
コンポーネントの詳しい作り方は、この後の記事でじっくり解説します。
SPA（シングルページアプリケーション）との相性
Reactは、ページ全体を毎回作り直さずに、必要な部分だけを書き換えるSPA（Single Page Application）という仕組みととても相性が良いライブラリです。
ページ遷移のたびに画面全体がガクッと真っ白になる、ということがなく、サクサクと動くWebアプリを作れます。
このスムーズな動きの裏側には「仮想DOM」という仕組みが関わっているのですが、これは後の記事で詳しく解説します。
JavaScriptとTypeScript、どちらで学ぶべきか
このシリーズはTypeScriptで統一します
Reactの学習教材の多くは、素のJavaScript（.jsx）で書かれていることが多いです。
ただ、このシリーズではTypeScript基礎編を修了したあなたに向けて、コード例をすべてTypeScript（.tsx）で統一します。
JavaScriptとの主な違いは、コンポーネントの引数（Props）や状態（State）に型をつけられる点です。
// JavaScript（.jsx）の場合：型情報がない
function Greeting({ name }) {
return <p>こんにちは、{name}さん</p>;
}
// TypeScript（.tsx）の場合：Propsの型を明示できる
type GreetingProps = {
name: string;
};
function Greeting({ name }: GreetingProps) {
return <p>こんにちは、{name}さん</p>;
}
書き方自体はほとんど同じですが、.tsxでは「nameには文字列しか渡せない」ということがコード上で保証されます。
これは実務のReact開発でも標準的な組み合わせなので、最初からTypeScriptで慣れておいて損はありません。
まとめ
この記事のポイント
- Reactは、UIを「部品（コンポーネント）」に分けて組み立てるJavaScriptライブラリ
- VueやAngularのような「フレームワーク」ではなく、UI構築に特化した「ライブラリ」という立ち位置
- ルーティングなど足りない機能は、他のライブラリと組み合わせて補うのがReact流
- このシリーズではコード例をTypeScript（
.tsx）で統一する
次に読むべき記事
Reactの立ち位置がつかめたところで、次回は実際に手を動かして開発環境を作っていきます。
→ 次の記事：Reactの環境構築：Viteで開発環境を作る
