[React講座] Reactで何ができるのか

Reactで何ができるのか

Reactでできること

Reactは一言でいうと、「状態（state）」から自動で画面（UI）を組み立ててくれるライブラリです。

例：

• Todoリスト
  • 追加ボタンを押す → 「Todo配列」という状態が変わる
    ⇒ Reactが「配列に基づいたリストUI」を勝手に描き直す
• いいねボタン
  • クリックすると「いいね数」が増える
    ⇒ Reactが「数字が1増えた表示」に自動で更新してくれる
• フィルタやソート付きの一覧
  • プルダウンを変える → フィルタ条件という状態が変わる
    ⇒ Reactが条件に合うリストだけ再描画する

「今の状態がこうだから、見た目はこう」という関数を1回書くだけで済む、というイメージです。

SPA（シングルページアプリ）とは？

Reactがよく使われるのは、SPA（Single Page Application）と呼ばれるタイプのWebアプリです。

従来のWeb（マルチページ）

• /login にアクセス ⇒ HTMLをまるごとサーバーから取得
• ログイン後 /mypage へ ⇒ また別のHTMLをまるごと取得
• 画面遷移のたびに画面全体がリロードされる

SPA

• 最初に土台となる単一のHTML＋JSを読み込む
• その後の画面遷移は
  • URLは変わるように見える（/, /todos, /settings など）
  • でも実際には JavaScript（React）が以下の処理を行う
    • 「今はこの画面を出す」
    • 「ボタンを押したからこの画面に切り替える」と画面の中身だけ差し替える

結果としてSPAは以下のメリットがあります。

• 画面切り替えが速い
• ネイティブアプリに近い操作感
• 「共通ヘッダー・サイドバー」を持つ管理画面などが作りやすい

Reactの立ち位置（Vue・Svelteとの違い）

React

• 「ビュー（見た目）に特化したライブラリ」という位置づけ（フルフレームワークではない）
• JSX（JavaScriptの中にHTMLっぽい記法を書くやり方）を採用
• 状態管理などは別ライブラリと組み合わせやすい構造
• エコシステム・情報量が圧倒的に多い（教材や記事、Q&Aも豊富）

Vue

• 比較的習得しやすいと言われることが多い
• HTML / CSS / JS を分けて書く「SFC（シングルファイルコンポーネント）」が中心
• 最初からある程度「フレームワーク寄り」で、標準機能が揃っている

Svelte

• コンパイル時に余計なオーバーヘッドを削ってくれる「コンパイル型フレームワーク」
• 記法が直感的で、コード量が少なめに収まることが多い
• まだReactやVueほど「資料の量」は多くない

Reactが向いているアプリ・向いていないアプリ

向いているケース

• 管理画面・ダッシュボード系
  • 表・フィルタ・ソート・ページングがあるような画面
• 入力フォームが多く、状態が複雑な画面
  • 申請フォーム、アンケート、設定画面など
• ページ内で頻繁にUIが変わるもの
  • チャット画面
  • Kanbanボード（タスクをドラッグ＆ドロップ）
  • リアルタイムで更新される一覧画面

向いていないケース

• ほぼ静的なページ
  • 企業のLP（ランディングページ）
  • ほぼ文章だけのブログなど
    ⇒ 「静的サイトジェネレータ」や単純なHTMLで十分なことが多いです。

ただし、最近はNext.jsなどと組み合わせて「静的ページも作れるReactベースのフレームワーク」として使うパターンも増えているので、「Reactだから静的サイトはNG」ということではありません。

---

>>次へ（Node.js・npm・ビルドツールの基礎）