1章 React 初心者の方へ
1.1 本書のねらい
Reactとは、Webサイトやアプリを作るための「ライブラリ」と呼ばれるツールです。Facebookが作ったもので、以下のような特徴があります：
- コンポーネント: Webページを「パーツ」に分けて作れるので、管理がしやすい。例えば、「ヘッダー」「ボタン」「リスト」などの部品を再利用できます。
- 効率的な更新: Reactは「必要な部分だけ」を更新する仕組みがあるので、アプリが速く動きます。
- 学びやすい: JavaScriptを基本としているので、特別な知識がなくても始められます。
なぜReactを学ぶのか？
- 人気がある: Reactは世界中で使われており、Reactを使えるプログラマーは需要が高いです。
- 現代のWeb開発の標準: 大規模なアプリから小さな個人プロジェクトまで幅広く使われています。
- 豊富なツールとライブラリ: Reactと一緒に使える便利なツールがたくさんあります。
Reactを学ぶことで、こういった技術や考え方を習得し、Web開発が楽しく効率的になります。本書では、Reactの基本から実用的な知識まで、初心者でもステップバイステップで学べる内容になっています。
1.2 Reactの過去と未来
1.2.1 Reactの誕生と背景
Reactは2013年にFacebookによって公開されました。当時、Webアプリは大規模化・複雑化が進んでいて、以下のような課題がありました：
- 更新のたびに全体を再描画するため、動作が遅い。
- コードが複雑でメンテナンスが大変。
Reactはこの問題を解決するために登場しました：
- 「仮想DOM (Virtual DOM)」という技術を使い、効率的に画面を更新。
- ページを小さな部品（コンポーネント）に分けて管理することで、コードが整理しやすくなりました。
未来に向けたReactの進化
Reactは登場から現在まで、継続的にアップデートされ、新しい機能が追加されています。その例を挙げると：
- フック（Hooks）: Reactバージョン16.8で導入。コードを簡潔に書けるようになり、開発が楽に。
- コンカレントモード（Concurrent Mode）: ユーザー操作に対してよりスムーズに動作する仕組み。
- サーバーサイドレンダリング（SSR）: サーバー側でページを事前に生成し、表示速度を向上。
1.2.2 第2版の変更点（この書籍における）
書籍の第2版では、以下のような最新のトピックが含まれています：
- Hooksを中心とした解説
- クラスベースからHooksベースのスタイルへ進化。
- 最新のツールや環境に対応: Create React App、Next.js、Viteなど、最新の技術スタックに対応。
- パフォーマンス向上のテクニック: Reactをさらに速く効率的に使うための方法を解説。
Reactは今後も進化し続ける技術であり、それを学ぶことで「未来のWeb開発」に対応できるスキルが身につきます。
1.3 環境の構築
Reactを学び、使うためにはまず環境を整える必要があります。以下の手順で進めます。
1.3.1 GitHubリポジトリ
GitHubはコードを保存・共有するためのプラットフォームです。プロジェクトの管理に使います。
- GitHubの利点:
- コードを保存して他の人と共有できる。
- 変更履歴を記録するので、ミスがあっても以前の状態に戻せる。
使い方の概要:
- GitHubアカウントを作成する（無料）。
- プロジェクト用の「リポジトリ」を作成する。
- 自分のコードをGitを使ってリポジトリにアップロードする。
1.3.2 React Developer Tools
React Developer Toolsは、ブラウザにインストールして使うツールです。Reactで開発したアプリケーションを確認・デバッグするのに役立ちます。
- インストール方法:
- ChromeやFirefoxの拡張機能ストアで「React Developer Tools」を検索。
- 「インストール」をクリックしてセットアップ。
- できること:
- Reactコンポーネントの構造を確認。
- 各コンポーネントの「ステート」や「プロパティ」の内容をチェック。
- パフォーマンスの問題を見つける。
1.3.3 Node.jsのインストール
Node.jsはJavaScriptをパソコン上で実行するためのソフトウェアで、Reactを使うための土台になります。
Node.jsのインストール手順:
- Node.js公式サイト（https://nodejs.org）にアクセス。
- 推奨版（LTS）をダウンロードしてインストール。
- インストール後、コマンドラインで以下を入力して確認:
node -vバージョン番号が表示されれば成功。
npmとnpx:
- npm（Node Package Manager）: ライブラリを管理するツール。
- npx: 一時的にコマンドを実行するためのツール。Reactプロジェクトの作成で使います。
React環境の構築を試す
環境が整ったら、Reactプロジェクトを作成して動かしてみましょう。
npx create-react-app my-app
cd my-app
npm start
ブラウザで「http://localhost:3000」にアクセスすると、Reactの初期画面が表示されます。