学習メモ / ReactとReactのフレームワークとは – ホームページは自分のお城　ポルカドット

2025-08-12

ようこそ、50代からも、さらに人生楽しむこはくのブログ、略してこはブロへ♪

このブログは自分のサイトの宣伝や学習の記録、そして昭和世代のわたしが令和時代もますます楽しむための趣味の１つとして書いています(*^^)v

さあ、今日何しよう？

Reactのフレームワークとは、どういうものでしょうか？

Reactの「フレームワーク」とは、React（ライブラリ）を使いやすくした開発支援ツール群や構成パターンのことを指します。React自体は「UIライブラリ」なので、アプリ開発に必要な全ての機能を提供しているわけではありません。そこで、開発を効率化・統一化するための仕組みをまとめたのが、いわゆる「Reactのフレームワーク」です。

そもそも、Reactとは何でしょうか？

React（リアクト）とは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。Facebook（現Meta）が開発し、現在も多くの企業や開発者に利用されています。

🔹 Reactの主な特徴

コンポーネントベース
　UIを小さな部品（コンポーネント）に分けて再利用可能にします。
　例：ボタン、ヘッダー、記事カードなどを1つ1つ別の部品として管理。
仮想DOM（Virtual DOM）
　DOMの変更を最小限にして高速にUIを更新できます。変更前後を比較し、必要な部分だけ書き換えます。
宣言的な記述
　「どう描画するか」ではなく、「何を描画したいか」を記述します。コードがシンプルかつ読みやすくなります。
JSX（JavaScript XML）
　JavaScript内にHTMLのような記述をできる独自の構文。Reactコンポーネント内で使われます。

🔹 Reactが使われる場面

Webアプリケーションのフロントエンド開発
シングルページアプリケーション（SPA）の構築
UIが複雑で頻繁に更新されるようなアプリ（例：SNS、ダッシュボード、チャットツールなど）

🔹 Reactの例（超シンプル）

jsxコピーする編集するfunction Hello() {
  return <h1>こんにちは、React！</h1>;
}

このHelloというコンポーネントを呼び出すと、「こんにちは、React！」という文字が画面に表示されます。

もっと詳しく知りたいこと（使い方、Vueとの比較、プロジェクトへの導入方法など）があれば、気軽に聞いてください。

✅ Reactフレームワークの役割

Reactフレームワークは、次のような要素を包括してくれます：

機能	説明
ルーティング	ページ遷移の仕組み（`react-router`など）
SSR（サーバーサイドレンダリング）	SEOや初期表示を高速にする
データフェッチ	APIとの通信管理（SWR、React Queryなど）
ビルドやデプロイの最適化	高速ビルド・最適化された静的/動的サイト生成
フォルダ構成・規約の提供	開発者間の統一された作法を実現

🔧 代表的なReactフレームワーク

フレームワーク	特徴
Next.js	最も人気。SSR・SSG・APIルートなど豊富な機能。商用でもよく使われる。
Remix	サーバー中心のアーキテクチャで、フォーム処理やデータ取得が強い。
Gatsby	静的サイト生成に特化。ブログやドキュメント向き。
Expo for Web (React Native Web)	React NativeをWebでも動かすための仕組み。

💡 例：Next.jsの特徴

Next.jsを使うと、例えばこういったことが簡単になります：

pages/index.tsx → 自動的にトップページに
getServerSideProps → ページ読み込み時にサーバーでデータを取得
/api/hello.ts → APIルートが作れる
ビルドすればそのままVercelなどでデプロイ可能

📌 まとめ

ReactはUI構築のライブラリに過ぎない
本格的なアプリを作るには、**フレームワーク（Next.jsなど）**を使うのが一般的
フレームワークは、ルーティング、SSR、ビルド、デプロイなどの機能をまとめて提供してくれる

もし「どのフレームワークを使えばいいか」などの質問があれば、目的に応じてアドバイスできますよ。

自分のサイトの宣伝です♪