React入門：Hello Worldまでの流れと仕組みを学ぶ
今回は、JavaScriptのライブラリ「React」について学び、実際にアプリを作成しながらその仕組みを理解していきます。
🌱 Reactとは？
Reactは当時のFacebook社が開発したJavaScriptのライブラリです。
公式サイトいわく「ユーザインターフェース構築のための JavaScript ライブラリ」
つまり、フロントエンドのUIを構築するためのツールです。
🎯 Reactを使うメリット
- フロントエンドの機能が複雑になっても、読みやすく変更に強いコードを書きやすい
- 描画のスピードが速い
- コンポーネント単位でUIを管理できるため、再利用性が高い
💡 Reactを使う理由
Reactは次の2つの技術で高い評価を得ています。
- 宣言的UI（Declarative UI）
- 仮想DOM（Virtual DOM）
この2つの技術により、「複雑な処理への対応」や「描画スピードの最適化」を実現しています。
🧰 Reactアプリ作成の準備
1. npmとは？
npm（Node Package Manager）は、JavaScriptのライブラリ管理システムです。
ライブラリのインストール・アンインストール、バージョン管理などが行えます。
npmを利用するには、Node.jsをインストールする必要があります。
2. Node.jsとは？
Node.jsは、JavaScriptをサーバーサイドでも動かすための実行環境です。
もともとJavaScriptはブラウザ上のみで動作する言語でしたが、Node.jsによってWebアプリのバックエンドでも使えるようになりました。
ターミナルで実行：
brew install nodejs
3. yarnとは？
yarn は npm と同じくライブラリ管理ツールですが、高速で安定性が高いのが特徴です。
ターミナルで実行：
brew install yarn
⚙️ Reactアプリの作成
React公式テンプレートでアプリを作成します。
ターミナルで実行：
npx create-react-app アプリケーション名
cd アプリケーション名
yarn start
起動すると、下記のように表示されます：
Starting the development server...
Compiled successfully!
You can now view practice_app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.xx.xx:3000
📦 ライブラリ管理ファイルについて
-
package.json
→ ライブラリの依存関係やスクリプトを管理（RubyのGemfileに相当） -
yarn.lock
→ 実際にインストールされたバージョンを記録（Gemfile.lockに相当）
🧹 不要ファイルの削除
作成直後のReactアプリには不要なファイルがあるので削除します。
# サーバー停止（Ctrl + C）
cd src
rm App.css App.test.js logo.svg
✍️ Hello World を表示する
App.js を以下のように編集します。
import React from "react";
function App() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;
再度アプリを起動します。
cd ..
yarn start
🧠 ReactがHTMLを生成する仕組み
JSXとは？
JSXはJavaScriptとHTMLを組み合わせたような構文です。
以下のようにHTMLに似た記法でUIを定義できます。
<h1>Hello World</h1>
しかし、JSXはそのままではブラウザで動作しません。
JSXがそのまま動かない理由
ブラウザはJSXを理解できないため、JavaScriptに変換する必要があります。
🔧 トランスパイラとBabel
トランスパイラとは？
あるプログラミング言語を、別の言語へ変換するツールのことです。
この変換のことを「トランスパイル」と呼びます。
Babelとは？
Babelは、次の2つを行うトランスパイラです。
- JSXをJavaScriptに変換する
- 新しいバージョンのJavaScriptを古いバージョンに変換する
なぜ古いバージョンに変換するの？
ブラウザによってJavaScriptの対応状況が異なるため、
すべてのブラウザで動くようにするために、古い形式へ変換する必要があります。
📦 webpackとは？
webpack は「モジュールバンドラー」と呼ばれるツールで、
複数のファイルを1つにまとめてくれる機能があります。
開発中はファイルを分けて扱いやすく、
本番環境では1つにまとめてパフォーマンスを向上させることができます。
※ create-react-appにはwebpackがデフォルトで組み込まれているため、設定不要です。
✅ まとめ
| 用語 | 説明 |
|---|---|
| React | UIを作るためのJavaScriptライブラリ |
| JSX | JavaScript + HTMLのような構文 |
| Babel | JSXや新しいJavaScriptを変換するツール |
| トランスパイラ | 別の言語に変換するツール |
| webpack | ファイルを1つにまとめるバンドラー |
| yarn / npm | ライブラリの管理ツール |
🚀 おわりに
今回はReactアプリを作成し、「Hello World」を表示するまでの流れを学びました。
👀 最後まで読んでいただき、ありがとうございました！
Reactの学習を一歩ずつ進めていきたいと考えています！