【JavaScript】初心者だけどReactを使ってみたい。
ar
「最近よく聞くReactって何？」 「Webサイトやアプリを作るのに便利らしいけど、難しそう…」
そんな風に思っているWeb制作初心者の方へ。この記事では、人気JavaScriptライブラリであるReactの基本を、専門用語の解説やたくさんのサンプルコードを交えながら、分かりやすく解説します。
HTML、CSS、JavaScriptの基礎知識があれば大丈夫！この記事を読めば、Reactがどんなもので、どうやって使うのか、基本的な概念が理解できるようになります。
React開発とNode.jsの役割：はじめに知っておきたいこと
本格的なReactアプリケーション開発を進める上で、Node.js というJavaScript実行環境が基本的に必要になります。なぜなら、現代のReact開発はNode.jsとそのパッケージマネージャー（npm または yarn）の上に成り立っているからです。
- 開発環境の構築：Create React App のようなツールを使ってReactプロジェクトの雛形を簡単に作成できますが、これらはNode.jsが必要です。
- パッケージ管理：React本体や関連ライブラリ（ルーティング、状態管理など）のインストールやバージョン管理にnpm／yarnを使います。
- ビルドプロセス：JSXや最新のJavaScript構文を、多くのブラウザが理解できる形式に変換（トランスパイル）したり、ファイルを一つにまとめたり（バンドル）する作業（ビルド）に、Node.js上で動作するツール（Webpack, Babelなど）が使われます。
- 開発サーバー：コードの変更を即座にブラウザに反映させるホットリロード機能などを持つ開発用サーバーも、Node.js上で動作します。
このように、効率的でモダンなReact開発を行うためには、Node.jsの環境がほぼ必須となります。「Node.jsのインストール方法」などで検索し、事前に開発環境を整えておくことを強く推奨します。
「でも、Node.jsの環境構築はまだ難しい… ちょっとReactを試してみたいだけなんだけど…」
という方もいるかもしれません。ご安心ください！ Node.jsを使わずに、ブラウザだけでReactコード（特にJSX）を手軽に試す方法も存在します。この記事の後半でその方法（Babel Standalone版を使った方法）も紹介しますので、まずはReactの基本的な考え方を学んでいきましょう。
なぜ今Reactを学ぶべき？
Reactは、Facebook（現Meta）が開発した、ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。多くのモダンなWebサイトやWebアプリケーションで採用されており、学ぶメリットがたくさんあります。
- 効率的な開発: UIを「コンポーネント」という部品に分けて作るため、再利用しやすく管理が楽になります。
- 高いパフォーマンス: 「仮想DOM」という仕組みにより、画面の更新が高速です。
- 豊富なエコシステム: 多くの開発者に使われており、関連ツールや情報が豊富です。
- 高い需要: Reactスキルを持つエンジニアは、多くの企業で求められています。
Reactのコアコンセプト：まずはここを押さえよう！
Reactを理解するために重要な、いくつかの基本的な概念を見ていきましょう。
1. コンポーネント (Component)
Reactでは、UIをコンポーネントという独立した部品の集まりとして考えます。例えば、ボタン、ヘッダー、リスト項目などをそれぞれコンポーネントとして作成し、それらを組み合わせて全体のUIを構築します。
- 部品化のメリット
- コードの見通しが良くなる
- 同じ部品を使い回せる（再利用性）
- 修正や機能追加がしやすくなる
コンポーネントは主に「関数コンポーネント」を使って作ります。これは、見た目（JSX）を返すシンプルなJavaScript関数です。
// シンプルな関数コンポーネントの例
function WelcomeMessage() {
return <h1>こんにちは、Reactの世界へ！</h1>; // これがJSX
}
// --- 専門用語解説 ---
// **コンポーネント (Component):** UIを構成する独立した部品。HTML、CSS、JavaScriptを一つにまとめたものとイメージすると分かりやすい。2. JSX (JavaScript XML)
上のコード例で <h1> タグがJavaScript関数の中に直接書かれていることに気づきましたか？これがJSXです。JSXはJavaScriptの拡張構文で、JavaScriptの中にHTMLのようなタグを直接書くことができます。
- JSXのメリット
- どんなUI構造になるか、コードを見ただけで直感的に理解しやすい。
- HTMLタグの中に {} を使うことでJavaScriptの式（変数や関数呼び出しなど）を埋め込める。
function UserProfile(props) {
const userName = "山田太郎";
const userAge = 30;
return (
<div> {/* JSXでは、複数の要素を返す場合は一つの親要素で囲む必要がある */}
<h2>ユーザープロフィール</h2>
<p>名前: {userName}</p> {/* JavaScript変数を埋め込み */}
<p>年齢: {userAge}歳</p>
<p>ステータス: {userAge >= 20 ? '成人' : '未成年'}</p> {/* 三項演算子も使える */}
</div>
);
}
// --- 専門用語解説 ---
// **JSX (JavaScript XML):** JavaScript内でHTMLに似た構文を書けるようにする拡張機能。最終的には通常のJavaScriptオブジェクトに変換される。Node.js環境ではBabelなどのツールが変換を担当するが、後述の方法でブラウザ上でも変換可能。3. Props (プロパティ)
コンポーネントは単独で使われるだけでなく、他のコンポーネントからデータを受け取って表示を変えたい場合があります。その際に使うのがProps（プロパティ）です。Propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みです。
- Propsの役割:
- コンポーネントに外部から情報を与える。
- コンポーネントの再利用性を高める（渡すデータによって表示を変えられる）。
Propsは、関数コンポーネントの引数としてオブジェクト形式で渡ってきます。
// 子コンポーネント：Propsを受け取る
function Greeting(props) {
return <p>{props.message}、{props.name}さん！</p>;
}
// 親コンポーネント：子コンポーネントにPropsを渡す
function App() {
return (
<div>
<Greeting message="おはよう" name="田中" /> {/* messageとnameという名前でPropsを渡す */}
<Greeting message="こんにちは" name="鈴木" />
<Greeting message="こんばんは" name="佐藤" />
</div>
);
}
// --- 専門用語解説 ---
// **Props (Properties):** 親コンポーネントから子コンポーネントへ渡されるデータ。読み取り専用で、子コンポーネント内で直接変更することはできない（データの流れは一方向）。4. State (ステート)
Propsは親から子への一方通行のデータでしたが、コンポーネント自身が内部でデータを持ち、ユーザー操作などによってそのデータを変化させたい場合があります。そのために使われるのがState（ステート）です。
- Stateの役割:
- コンポーネント固有の、時間とともに変化するデータを保持する。
- Stateが更新されると、Reactが自動的にUIを再描画（レンダリング）する。
関数コンポーネントでStateを使うには、useState フックを利用します。
import React, { useState } from 'react'; // 通常、Node.js環境ではこのようにインポート
// ※Node.jsなしで試す場合は書き方が少し異なります（後述）
function Counter() {
// useStateフックを使ってStateを宣言
// count: State変数（現在の値）
// setCount: Stateを更新するための関数
// useState(0): 初期値を0に設定
const [count, setCount] = useState(0); // Node.js環境での一般的な書き方
// ボタンがクリックされたときに呼ばれる関数
const increment = () => {
setCount(count + 1); // setCount関数を使ってStateを更新
};
const decrement = () => {
setCount(count - 1); // setCount関数を使ってStateを更新
};
return (
<div>
<h2>カウンター</h2>
<p>現在のカウント: {count}</p>
<button onClick={increment}>+</button> {/* ボタンクリックでincrement関数を実行 */}
<button onClick={decrement}>-</button> {/* ボタンクリックでdecrement関数を実行 */}
</div>
);
}
// --- 専門用語解説 ---
// **State (ステート):** コンポーネントが内部で保持し、変更可能なデータ。ユーザーの入力、APIからの応答などに応じて変化する。
// **フック (Hook):** 関数コンポーネントにStateやライフサイクルなどのReactの機能を追加するための特別な関数。`useState`, `useEffect` などがある。`use`で始まる名前が特徴。
// **useState:** 関数コンポーネントでStateを管理するための基本的なフック。5. イベント処理 (Event Handling)
ボタンクリック、フォーム入力、マウスオーバーなど、ユーザーのアクションに応じて何か処理を行いたい場合、イベント処理を設定します。Reactのイベント処理は、HTMLのイベント処理と似ていますが、いくつか違いがあります。
- 命名規則: イベント名はキャメルケース（例: onclick ではなく onClick）。
- 関数の指定: イベントハンドラには、文字列ではなく関数そのものを渡す。
function ButtonAlert() {
const handleClick = () => { // イベントハンドラ関数
alert('ボタンがクリックされました！');
};
return (
<button onClick={handleClick}> {/* onClickイベントに関数を指定 */}
クリックしてね
</button>
);
}
// --- 専門用語解説 ---
// **イベントハンドラ (Event Handler):** 特定のイベント（クリック、入力など）が発生したときに実行される関数。6. レンダリングと仮想DOM (Rendering & Virtual DOM)
Reactがコンポーネントとデータ（PropsやState）を元に、実際のWebページの見た目（DOM）を生成・更新するプロセスをレンダリングと呼びます。
Reactの大きな特徴の一つが仮想DOM (Virtual DOM) です。Stateなどが変更されるたびに、Reactはまずメモリ上に「仮想的なDOM」を構築し、前回の仮想DOMと比較して変更があった部分だけを実際のDOMに反映させます。
- 仮想DOMのメリット:
- 実際のDOM操作はコストが高いが、仮想DOMを使うことで最小限のDOM操作で済むため、パフォーマンスが向上する。
// 例：Stateが変更されると、Reactが差分を計算し、効率的に画面を更新する
function TextInput() {
const [text, setText] = useState(''); // import { useState } from 'react'; が必要
const handleChange = (event) => {
setText(event.target.value); // 入力があるたびにStateが更新される
};
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>入力中のテキスト: {text}</p> {/* Stateの変更が即座に反映される */}
</div>
);
}
// --- 専門用語解説 ---
// **レンダリング (Rendering):** Reactコンポーネントから画面要素（DOM）を生成するプロセス。
// **DOM (Document Object Model):** HTMLやXML文書を操作するためのAPI（プログラミングインターフェース）。Webページの内容や構造、スタイルを表現するツリー構造。
// **仮想DOM (Virtual DOM):** 実際のDOMを模倣した、メモリ上の軽量なJavaScriptオブジェクト表現。Reactはこれを使って変更差分を効率的に計算する。React開発環境の準備（推奨：Node.js + Create React App）
前述の通り、本格的な開発にはNode.js環境が推奨されます。Node.jsがインストールされていれば、以下のコマンドで簡単にReactプロジェクトを開始できます。
# npx (npmに付属) を使ってCreate React Appを実行しプロジェクト作成
npx create-react-app my-react-app
# 作成されたディレクトリに移動
cd my-react-app
# 開発サーバーを起動
npm startこれにより、開発に必要な設定（BabelによるJSX変換、Webpackによるバンドル、開発サーバーなど）がすべて含まれた環境が手に入ります。
Node.jsなしでReactを手軽に試す方法 (Babel Standalone)
Node.jsの環境構築をせずに、ブラウザだけでReact (特にJSX) を試したい場合は、CDN (Content Delivery Network) と Babel Standalone を利用する方法があります。これは、HTMLファイルに直接ReactとBabelのライブラリを読み込ませ、ブラウザにJSXの変換と実行を行わせる方法です。
メリット
- Node.jsのインストールや環境構築が不要。
- HTMLファイル一つで手軽に試せる。
デメリット
- ブラウザ側でJSXの変換を行うため、表示速度が遅くなる可能性がある。
- モジュールのインポート ( import ... from ... ) が標準では使えない（書き方が異なる）。
- 複雑なアプリケーションの開発や、本番環境での利用には全く適していない。あくまで学習や簡単なテスト用。
試してみよう：カウンターアプリ（Node.jsなし版）
以下の内容でHTMLファイル（例：react_test.html ）を作成し、ブラウザで開いてみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React (Babel Standalone) テスト</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel"> // type属性を "text/babel" にする！
// useStateフックを使うためにReactオブジェクトから取り出す
const { useState } = React;
// カウンターコンポーネント (関数コンポーネント)
function Counter() {
// Stateの宣言 (Node.js環境と同じように書ける)
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
// JSXを返す
return (
<div>
<h2>カウンター (Babel Standalone)</h2>
<p>現在のカウント: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
// 6. React要素を #root div にレンダリング
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container); // React 18以降の推奨される書き方
root.render(<Counter />); // Counterコンポーネントを描画
</script>
</body>
</html>コードのポイント:
- <head>内でReact, ReactDOM, Babel StandaloneのライブラリをCDN経由で読み込みます。順番が重要です。
- Reactコード（特にJSXを含む部分）は <script type="text/babel"> タグの中に記述します。この type="text/babel" があることで、Babel Standaloneが中のコードをブラウザで解釈・実行可能なJavaScriptに変換してくれます。
- useStateなどのフックは React.useState のように React オブジェクト経由でアクセスするか、分割代入 const { useState } = React; で取り出して使います。import文は使えません。
- ReactDOM.createRoot() を使って描画先のDOM要素を指定し、root.render() でコンポーネントを描画します。
この方法を使えば、Node.js環境がなくてもReactの基本的な書き方や動きを手軽に体験できます。
簡単なTodoリストを作ってみよう！（Node.js環境推奨）
（前の回答と同じTodoリストのコード例。ただし、このコードはimport文を含んでいるため、Node.js環境での実行が前提となります。）
import React, { useState } from 'react'; // Node.js環境でのimport
// (Todoリストのコードは前の回答と同じ... Node.jsなし版で書くならuseStateなどの取得方法を変える必要がある)
// Todoアイテムを表示するコンポーネント
function TodoItem({ todo, index, removeTodo }) {
// ... (実装は前の回答と同じ)
}
// Todoリスト全体を管理するコンポーネント
function TodoList() {
const [todos, setTodos] = useState(['Reactを学ぶ', '買い物に行く']);
const [inputValue, setInputValue] = useState('');
// ... (addTodo, removeTodo, handleInputChangeの実装は前の回答と同じ)
return (
<div>
{/* ... (JSX構造は前の回答と同じ) */}
</div>
);
}
export default TodoList;注意: 上記のTodoリストのコードは import 文を使っているため、先に紹介したBabel Standaloneの方法で直接HTMLに記述する場合は、useState の取得方法などを const { useState } = React; のように変更する必要があります。
まとめ
今回はReactの基本的な概念である、コンポーネント、JSX、Props、State、イベント処理、レンダリングと仮想DOMについて解説しました。また、React開発におけるNode.jsの重要性と、Node.jsなしで手軽に試す方法も紹介しました。
- 本格的な開発にはNode.js環境が推奨されますが、Babel Standaloneを使えばブラウザだけで手軽にReactを体験できます。
- Reactはコンポーネントという部品でUIを組み立てます。
- JSXで見た目を直感的に記述できます。
- Propsで親から子へデータを渡し、Stateでコンポーネント内の状態を管理します。
- 仮想DOMにより効率的な画面更新が可能です。
最初は覚えることが多く感じるかもしれませんが、実際にコードを書きながら少しずつ慣れていくのが一番です。
次のステップとしては:
- Node.js環境を構築し、Create React Appで実際にプロジェクトを作ってみる。（推奨）
- Babel Standaloneの方法で他のReactの機能（useEffectなど）を試してみる。
- React Router（ページ遷移）、状態管理ライブラリ（Redux, Zustandなど）について学ぶ。
Reactは非常に強力で楽しいライブラリです。ぜひこの機会に学習を始めて、モダンなWeb開発の世界に飛び込んでみてください！
PR広告
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/44b9dd15.3c4cbdd2.44b9dd16.01fc048b/?me_id=1213310&item_id=20431637&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F0722%2F9784815610722_1_9.jpg%3F_ex%3D400x400&s=400x400&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
