Reactを始めたい！必要なJavaScriptレベルは？
React学習に最低限必要なJavaScriptの知識をチェックリスト形式で解説。初心者でも安心してReactをスタートできる実践的なガイドです。
「Reactを勉強したいけど、JavaScriptがどのくらいできればいいの？」
こんな悩みを抱えていませんか？
「基礎は分かるつもりだけど...」 「何から勉強すればいいか分からない...」 「中途半端な状態でReactを始めて大丈夫？」
多くの人が感じる不安ですよね。
実際、必要なJavaScriptレベルは思っているより高くありません。 基本的な部分さえ押さえておけば、Reactを学習しながらJavaScriptの理解も深められるんです。
この記事では、React学習に最低限必要なJavaScriptの知識をチェックリスト形式で詳しく解説します。 自分の現在レベルを確認して、足りない部分を効率的に補えるガイドをお伝えしますね。
読み終わる頃には、「これなら安心してReact学習をスタートできる！」と思えるはずです。
JavaScriptのレベル分けをしてみよう
3つのレベルで整理しました
React学習に必要なJavaScript知識を3つのレベルに分けて考えてみましょう。
レベル1: 絶対必要（必須）
・基本文法（変数、関数、if文）
・配列とオブジェクトの基本操作
・DOM操作の基本概念
・イベントハンドリング
レベル2: できれば覚えたい（重要）
・ES6+文法（アロー関数、分割代入など）
・配列メソッド（map、filter、reduce）
・非同期処理（Promise、async/await）
・モジュールシステム（import/export）
レベル3: あると嬉しい（応用）
・高度なオブジェクト指向
・関数型プログラミングの概念
・TypeScriptの基本
・テストの基本概念
学習時間の目安を知っておこう
レベル1 (必須): 2-4週間
レベル2 (重要): 3-6週間
レベル3 (応用): 4-8週間
React学習開始OK: レベル1完了後
スムーズなReact学習: レベル2完了後
ポイント
レベル1ができれば、もうReact学習を始めても大丈夫です。 完璧を求めすぎる必要はありませんよ。
レベル1: 絶対必要な基礎知識
基本文法チェックリスト
変数と定数の使い分け
まずは変数の基本から確認しましょう。
// 基本的な変数宣言
let userName = "田中太郎";
const maxUsers = 100;
var globalVar = "古い書き方";
この書き方の意味は分かりますか？
let: 変更できる変数const: 変更できない定数var: 古い書き方（あまり使わない）
// ブロックスコープの理解
function example() {
if (true) {
let blockVar = "ブロック内変数";
const blockConst = "ブロック内定数";
// blockVarとblockConstはこのブロック内でのみ有効
}
// console.log(blockVar); // エラーになる
}
スコープって何？
変数が使える範囲のことです。
{}の中で作った変数は、その中でしか使えません。
// React例：コンポーネント内での変数使用
function UserCard() {
const userName = "田中太郎"; // 定数
let userAge = 25; // 変数（変更可能）
return <div>{userName}さん（{userAge}歳）</div>;
}
React ではこんな風に使います
コンポーネント内で変数を作って、画面に表示する時に使います。 とてもシンプルですよね。
チェック項目
- let、const、varの違いを理解している
- スコープの概念を理解している
- ホイスティングの基本を知っている
関数の定義と呼び出し
関数は処理をまとめる仕組みです。
// 通常の関数
function greet(name) {
return `こんにちは、${name}さん`;
}
基本的な関数の書き方です
function 関数名(引数) { 処理内容 }という形で書きます。
returnで結果を返すことができます。
// アロー関数
const greetArrow = (name) => {
return `こんにちは、${name}さん`;
};
// 短縮形アロー関数
const greetShort = (name) => `こんにちは、${name}さん`;
アロー関数という書き方もあります
=> を使って書く新しい書き方です。
短く書けるので便利ですよ。
// React例：イベントハンドラーとしての関数
function Button() {
const handleClick = () => {
alert("ボタンがクリックされました");
};
return <button onClick={handleClick}>クリック</button>;
}
React ではボタンのクリック処理などで関数を使います
ボタンが押された時に実行される処理を関数で作成します。 Reactの基本パターンの一つですね。
チェック項目
- 関数の基本的な定義ができる
- 引数と戻り値を理解している
- アロー関数の基本を知っている
条件分岐で処理を分ける
条件によって処理を変える方法です。
const user = { name: "田中", age: 25, isActive: true };
// if文
if (user.age >= 20) {
console.log("成人です");
} else {
console.log("未成年です");
}
if文の基本的な使い方です
条件が true なら上の処理、false なら下の処理が実行されます。
// 三項演算子
const status = user.age >= 20 ? "成人" : "未成年";
// 論理演算子
const canAccess = user.isActive && user.age >= 18;
短く書く方法もあります
三項演算子（? :）を使うと、1行で条件分岐を書けます。
&&は「両方ともtrue」という意味です。
// React例：条件付きレンダリング
function UserStatus({ user }) {
return (
<div>
{user.isActive && <span>アクティブ</span>}
<p>ステータス: {user.age >= 20 ? "成人" : "未成年"}</p>
</div>
);
}
React では条件によって表示内容を変えます
&&を使って、条件が true の時だけ要素を表示できます。
三項演算子で表示する文字を変えることもできますね。
チェック項目
- if文の基本を理解している
- 三項演算子が使える
- 論理演算子（&&、||）を理解している
配列とオブジェクトの基本操作
配列の基本的な使い方
配列は複数の値をまとめて管理する仕組みです。
const fruits = ["apple", "banana", "orange"];
// 基本操作
console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3
配列の基本的な操作方法です
[0]で最初の要素、[1]で2番目の要素を取得できます。
lengthで要素の数が分かります。
// 要素の追加・削除
fruits.push("grape"); // 末尾に追加
fruits.pop(); // 末尾を削除
fruits.unshift("melon"); // 先頭に追加
fruits.shift(); // 先頭を削除
要素の追加・削除の方法
push(): 末尾に追加pop(): 末尾を削除unshift(): 先頭に追加shift(): 先頭を削除
// React例：配列のレンダリング
function FruitList() {
const fruits = ["apple", "banana", "orange"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
React では配列をリスト表示に使います
map()を使って、配列の各要素をリストアイテムに変換できます。
これはReactでよく使うパターンですね。
チェック項目
- 配列の作成と操作ができる
- インデックスでのアクセスを理解している
- lengthプロパティを知っている
オブジェクトの基本的な使い方
オブジェクトは関連するデータをまとめて管理する仕組みです。
const user = {
name: "田中太郎",
age: 25,
email: "tanaka@example.com"
};
オブジェクトの基本的な作り方です
{ キー: 値, キー: 値 }という形で作成します。
関連する情報をまとめて管理できて便利ですね。
// プロパティアクセス
console.log(user.name); // "田中太郎"
console.log(user["email"]); // "tanaka@example.com"
// プロパティの追加・変更
user.city = "東京";
user.age = 26;
値を取得・変更する方法
- ドット記法（
user.name） - ブラケット記法（
user["name"]）
どちらでも同じ値を取得できます。
// オブジェクトの複製（浅いコピー）
const updatedUser = { ...user, age: 27 };
オブジェクトをコピーする方法
...（スプレッド演算子）を使って、新しいオブジェクトを作成できます。
元のオブジェクトは変更されません。
// React例：オブジェクトを使ったコンポーネント
function UserProfile({ user }) {
return (
<div>
<h2>{user.name}</h2>
<p>年齢: {user.age}歳</p>
<p>メール: {user.email}</p>
</div>
);
}
React ではオブジェクトをpropsで受け取ります
親コンポーネントからオブジェクトを受け取って、その中の値を表示できます。 とても便利な仕組みですね。
チェック項目
- オブジェクトの作成と操作ができる
- プロパティアクセス（.記法と[]記法）を理解している
- オブジェクトの複製の基本を知っている
DOM操作の基本概念
DOM操作はWebページの要素を変更する仕組みです。
// 要素の取得
const button = document.getElementById("myButton");
const items = document.querySelectorAll(".item");
// 要素の操作
button.textContent = "クリック";
button.style.color = "blue";
DOM操作の基本的な方法です
getElementById(): IDで要素を取得querySelectorAll(): クラス名などで要素を取得
取得した要素の内容やスタイルを変更できます。
// イベントリスナー
button.addEventListener("click", function() {
alert("ボタンがクリックされました");
});
イベントリスナーの設定方法
ボタンがクリックされた時など、特定のイベントが発生した時に処理を実行できます。
// React例：DOMを直接操作せず、stateで管理
function Counter() {
const [count, setCount] = useState(0);
// DOM操作ではなく、stateの変更で画面を更新
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
React では DOM を直接操作しません
代わりに「state」という仕組みを使って画面を更新します。 stateが変わると、自動的に画面も更新されるんです。
チェック項目
- DOMとは何かを理解している
- 要素の取得方法を知っている
- イベントリスナーの基本を理解している
レベル1確認テスト
以下のコードが理解・実装できればレベル1クリアです：
// 確認テスト：簡単なタスク管理
function createTaskManager() {
const tasks = [];
let nextId = 1;
function addTask(title) {
const task = {
id: nextId++,
title: title,
completed: false
};
tasks.push(task);
displayTasks();
}
function toggleTask(id) {
const task = tasks.find(t => t.id === id);
if (task) {
task.completed = !task.completed;
displayTasks();
}
}
function displayTasks() {
const container = document.getElementById("task-list");
container.innerHTML = "";
tasks.forEach(task => {
const div = document.createElement("div");
div.innerHTML = `
<input type="checkbox" ${task.completed ? "checked" : ""}
onchange="toggleTask(${task.id})">
<span style="${task.completed ? 'text-decoration: line-through' : ''}">${task.title}</span>
`;
container.appendChild(div);
});
}
return { addTask, toggleTask };
}
// 使用例
const taskManager = createTaskManager();
taskManager.addTask("React学習");
taskManager.addTask("JavaScript復習");
このコードが理解できれば合格です
- 配列でタスクを管理
- オブジェクトでタスクのデータを作成
- 関数で処理をまとめる
- DOM操作で画面に表示
これらの要素が含まれています。
レベル2: できれば覚えたい重要知識
ES6+文法チェックリスト
アロー関数をマスターしよう
アロー関数は新しい関数の書き方です。
// 通常の関数
function add(a, b) {
return a + b;
}
// アロー関数（基本形）
const addArrow = (a, b) => {
return a + b;
};
// アロー関数（短縮形）
const addShort = (a, b) => a + b;
アロー関数の書き方
const 関数名 = (引数) => 処理内容という形で書きます。
処理が1行なら{}とreturnを省略できます。
// 引数が1つの場合
const double = x => x * 2;
引数が1つなら括弧も省略できます
とてもシンプルに書けますね。
// React例：イベントハンドラーでの使用
function Calculator() {
const [result, setResult] = useState(0);
// アロー関数でthisを気にせず使用
const handleAdd = (value) => {
setResult(result + value);
};
return (
<div>
<p>結果: {result}</p>
<button onClick={() => handleAdd(1)}>+1</button>
<button onClick={() => handleAdd(5)}>+5</button>
</div>
);
}
React ではアロー関数がよく使われます
イベントハンドラーを書く時に、アロー関数だとthisを気にしなくて済むので便利です。
チェック項目
- アロー関数の書き方を理解している
- thisの違いを理解している
- 暗黙的なreturnを知っている
分割代入で簡潔に書こう
分割代入は値を取り出す便利な書き方です。
// オブジェクトの分割代入
const user = { name: "田中", age: 25, city: "東京" };
const { name, age } = user;
const { city, country = "日本" } = user; // デフォルト値
オブジェクトから値を取り出す方法
const { プロパティ名 } = オブジェクトという書き方で、値を変数に代入できます。
存在しないプロパティにはデフォルト値を設定できます。
// 配列の分割代入
const colors = ["red", "green", "blue"];
const [primary, secondary] = colors;
const [, , third] = colors; // 要素をスキップ
配列からも値を取り出せます
順番通りに変数に代入されます。
不要な要素は,だけ書いてスキップできます。
// React例：propsの分割代入
function UserCard({ name, age, email, isActive = false }) {
return (
<div className={`user-card ${isActive ? 'active' : ''}`}>
<h3>{name}</h3>
<p>年齢: {age}歳</p>
<p>メール: {email}</p>
</div>
);
}
React のpropsでよく使います
function UserCard({ name, age, email })という書き方で、propsから必要な値だけを取り出せます。
とても読みやすくなりますね。
// React例：stateの分割代入
function LoginForm() {
const [formData, setFormData] = useState({
username: "",
password: ""
});
const { username, password } = formData; // 分割代入
return (
<form>
<input value={username} placeholder="ユーザー名" />
<input value={password} placeholder="パスワード" type="password" />
</form>
);
}
stateからも値を取り出せます
複雑なstateから必要な値だけを取り出して使えます。
チェック項目
- オブジェクトの分割代入ができる
- 配列の分割代入ができる
- デフォルト値の設定を理解している
スプレッド演算子で配列・オブジェクトを展開
スプレッド演算子（...）は要素を展開する便利な機能です。
// 配列のスプレッド
const fruits = ["apple", "banana"];
const vegetables = ["carrot", "tomato"];
const food = [...fruits, ...vegetables]; // 配列の結合
const newFruits = [...fruits, "orange"]; // 要素の追加
配列を結合・追加する方法
...を使って配列の要素を展開できます。
複数の配列を簡単に結合できますね。
// オブジェクトのスプレッド
const user = { name: "田中", age: 25 };
const updatedUser = { ...user, age: 26 }; // プロパティの更新
const userWithCity = { ...user, city: "東京" }; // プロパティの追加
オブジェクトのコピー・更新方法
既存のオブジェクトをコピーして、一部のプロパティだけを変更できます。 元のオブジェクトは変更されません。
// 関数の引数
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
可変長引数にも使えます
引数の数が決まっていない時に便利です。
// React例：stateの更新
function UserForm() {
const [user, setUser] = useState({ name: "", email: "", age: 0 });
const updateName = (name) => {
setUser({ ...user, name }); // スプレッド演算子で更新
};
const updateUser = (field, value) => {
setUser(prevUser => ({ ...prevUser, [field]: value }));
};
return (
<div>
<input
value={user.name}
onChange={(e) => updateName(e.target.value)}
placeholder="名前"
/>
</div>
);
}
React のstate更新でよく使います
stateを更新する時に、スプレッド演算子で既存の値をコピーして、一部だけを変更します。 Reactの重要なパターンの一つです。
チェック項目
- 配列でのスプレッド演算子を理解している
- オブジェクトでのスプレッド演算子を理解している
- 関数の引数での使用を知っている
テンプレートリテラルで文字列を作ろう
テンプレートリテラルは文字列に変数を埋め込む便利な方法です。
const name = "田中";
const age = 25;
// テンプレートリテラル
const greeting = `こんにちは、${name}さん！
年齢は${age}歳ですね。`;
バッククォート（`）を使った文字列
${変数名}という書き方で、変数の値を文字列に埋め込めます。
改行もそのまま含められます。
// 計算式の埋め込み
const message = `来年は${age + 1}歳になります`;
// 関数の呼び出し
const formatted = `現在時刻: ${new Date().toLocaleTimeString()}`;
計算式や関数の結果も埋め込めます
${}の中には、変数だけでなく計算式や関数呼び出しも書けます。
// React例：動的なクラス名
function StatusBadge({ status, count }) {
const className = `badge badge--${status}`;
const text = `${status}: ${count}件`;
return <span className={className}>{text}</span>;
}
React でも便利に使えます
動的にクラス名や表示テキストを作る時に重宝します。
チェック項目
- バッククォートを使った文字列を理解している
- ${} での変数埋め込みができる
- 複数行文字列を知っている
配列メソッドチェックリスト
map、filter、reduceの3つを覚えよう
配列を操作する重要なメソッドです。
const users = [
{ id: 1, name: "田中", age: 25, active: true },
{ id: 2, name: "佐藤", age: 30, active: false },
{ id: 3, name: "鈴木", age: 22, active: true }
];
サンプルデータを使って説明します
ユーザーの配列を例に、各メソッドの使い方を見てみましょう。
// map: 新しい配列を作成
const userNames = users.map(user => user.name);
const userCards = users.map(user => `${user.name}（${user.age}歳）`);
mapは配列を変換します
元の配列の各要素を別の形に変換して、新しい配列を作ります。 元の配列は変更されません。
// filter: 条件に合う要素を抽出
const activeUsers = users.filter(user => user.active);
const adults = users.filter(user => user.age >= 25);
filterは条件に合う要素だけを取り出します
条件を満たす要素だけを含む新しい配列を作ります。
// reduce: 値を集約
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
const averageAge = totalAge / users.length;
reduceは配列を1つの値にまとめます
合計や平均などの計算に使います。 最初は少し難しく感じるかもしれませんね。
// React例：mapでリストレンダリング
function UserList({ users }) {
return (
<div>
{users
.filter(user => user.active) // アクティブユーザーのみ
.map(user => (
<UserCard key={user.id} user={user} />
))}
</div>
);
}
React ではmapがとても重要です
配列の要素を画面に表示する時に、必ずといっていいほど使います。 filterと組み合わせて、条件に合う要素だけを表示することもできますね。
// React例：reduceで統計情報
function UserStats({ users }) {
const stats = users.reduce((acc, user) => {
acc.total++;
if (user.active) acc.active++;
if (user.age >= 25) acc.adults++;
return acc;
}, { total: 0, active: 0, adults: 0 });
return (
<div>
<p>総ユーザー数: {stats.total}</p>
<p>アクティブユーザー: {stats.active}</p>
<p>成人ユーザー: {stats.adults}</p>
</div>
);
}
reduceで統計情報を計算できます
複数の値を同時に集計したい時に便利です。
チェック項目
- mapメソッドを理解している
- filterメソッドを理解している
- reduceメソッドの基本を知っている
find、some、everyも覚えよう
さらに便利な配列メソッドです。
const users = [
{ id: 1, name: "田中", age: 25, skills: ["JavaScript", "React"] },
{ id: 2, name: "佐藤", age: 30, skills: ["Python", "Django"] },
{ id: 3, name: "鈴木", age: 22, skills: ["JavaScript", "Vue"] }
];
より詳細なデータを使います
skillsプロパティも追加して、いろいろな検索を試してみましょう。
// find: 最初に見つかった要素
const targetUser = users.find(user => user.id === 2);
const jsUser = users.find(user => user.skills.includes("JavaScript"));
findは条件に合う最初の要素を取得します
見つからない場合はundefinedが返されます。
// some: 1つでも条件を満たすかチェック
const hasJsUser = users.some(user => user.skills.includes("JavaScript"));
const hasYoungUser = users.some(user => user.age < 25);
someは「1つでも条件を満たすか」をチェックします
結果はtrue/falseで返されます。
// every: すべてが条件を満たすかチェック
const allAdults = users.every(user => user.age >= 18);
const allHaveSkills = users.every(user => user.skills.length > 0);
everyは「すべてが条件を満たすか」をチェックします
1つでも条件を満たさない要素があると、falseが返されます。
// React例：検索機能
function UserSearch({ users }) {
const [searchTerm, setSearchTerm] = useState("");
const filteredUsers = users.filter(user =>
user.name.includes(searchTerm) ||
user.skills.some(skill => skill.includes(searchTerm))
);
return (
<div>
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="名前またはスキルで検索"
/>
{filteredUsers.map(user => (
<UserCard key={user.id} user={user} />
))}
</div>
);
}
検索機能を作る時に便利です
includes()とsome()を組み合わせて、名前やスキルで検索できる機能を作れます。
チェック項目
- findメソッドを理解している
- someとeveryの違いを理解している
- includesメソッドを知っている
非同期処理チェックリスト
Promiseの基本を理解しよう
非同期処理は時間のかかる処理を扱う仕組みです。
// Promiseの作成
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId > 0) {
resolve({ id: userId, name: `ユーザー${userId}` });
} else {
reject(new Error("無効なユーザーID"));
}
}, 1000);
});
}
Promiseは「将来の結果」を表します
処理が成功したらresolve、失敗したらrejectを呼びます。
setTimeoutでデータ取得の遅延をシミュレートしています。
// Promiseの使用
fetchUserData(1)
.then(user => {
console.log("ユーザー取得成功:", user);
return fetchUserProfile(user.id);
})
.then(profile => {
console.log("プロフィール取得成功:", profile);
})
.catch(error => {
console.error("エラー:", error);
});
thenとcatchで結果を処理します
then: 成功時の処理catch: 失敗時の処理
処理を連鎖させることもできます。
// 複数のPromiseを並行実行
Promise.all([
fetchUserData(1),
fetchUserData(2),
fetchUserData(3)
])
.then(users => {
console.log("全ユーザー取得完了:", users);
})
.catch(error => {
console.error("いずれかの取得に失敗:", error);
});
Promise.allで並行処理できます
複数の非同期処理を同時に実行して、すべて完了するのを待てます。
チェック項目
- Promiseの概念を理解している
- then、catchの使い方を知っている
- Promise.allの基本を知っている
async/awaitでもっと簡単に
async/awaitはPromiseをより読みやすく書ける方法です。
// async/await基本
async function loadUserData(userId) {
try {
const user = await fetchUserData(userId);
const profile = await fetchUserProfile(user.id);
return { user, profile };
} catch (error) {
console.error("データ取得エラー:", error);
throw error;
}
}
async/awaitの基本的な書き方
- 関数の前に
asyncをつける - 非同期処理の前に
awaitをつける try/catchでエラーを処理する
同期処理のように読みやすく書けます。
// 並行処理
async function loadMultipleUsers() {
try {
const [user1, user2, user3] = await Promise.all([
fetchUserData(1),
fetchUserData(2),
fetchUserData(3)
]);
return [user1, user2, user3];
} catch (error) {
console.error("ユーザー取得エラー:", error);
}
}
並行処理もPromise.allと組み合わせて書けます
分割代入と組み合わせると、とても読みやすくなりますね。
// React例：非同期処理でのデータ取得
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function loadUser() {
try {
setLoading(true);
setError(null);
const userData = await fetchUserData(userId);
setUser(userData);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
if (userId) {
loadUser();
}
}, [userId]);
if (loading) return <div>読み込み中...</div>;
if (error) return <div>エラー: {error}</div>;
if (!user) return <div>ユーザーが見つかりません</div>;
return (
<div>
<h2>{user.name}</h2>
<p>ID: {user.id}</p>
</div>
);
}
React では useEffect の中で async/await を使います
APIからデータを取得する時の典型的なパターンです。 loading、error、successの3つの状態を管理するのがポイントですね。
チェック項目
- async/awaitの基本を理解している
- try/catchでエラーハンドリングができる
- 並行処理と順次処理の違いを理解している
モジュールシステムチェックリスト
モジュールシステムは、コードを複数のファイルに分割して管理する仕組みです。
// utils.js - ユーティリティ関数
export function formatDate(date) {
return date.toLocaleDateString('ja-JP');
}
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export const API_BASE_URL = 'https://api.example.com';
exportで関数や変数を公開します
他のファイルから使える関数や定数をexportで公開できます。
// User.js - クラスのデフォルトエクスポート
export default class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
greet() {
return `こんにちは、${this.name}です`;
}
}
export defaultでメインのものを公開します
ファイルの主要な機能をexport defaultで公開できます。
// main.js - インポート
import User from './User.js'; // デフォルトインポート
import { formatDate, capitalize, API_BASE_URL } from './utils.js'; // 名前付きインポート
import { formatDate as formatJapaneseDate } from './utils.js'; // 名前を変更してインポート
import * as utils from './utils.js'; // すべてをインポート
importで他のファイルの機能を使います
- デフォルトインポート:
import 名前 from ファイル - 名前付きインポート:
import { 名前 } from ファイル - 名前変更:
import { 元の名前 as 新しい名前 } from ファイル - 全インポート:
import * as 名前 from ファイル
// React例：コンポーネントのインポート/エクスポート
// components/Button.jsx
export default function Button({ children, onClick, variant = 'primary' }) {
return (
<button
className={`btn btn--${variant}`}
onClick={onClick}
>
{children}
</button>
);
}
React のコンポーネントもexportします
コンポーネントを他のファイルから使えるように公開します。
// components/Input.jsx
export function Input({ label, ...props }) {
return (
<div className="form-group">
<label>{label}</label>
<input {...props} />
</div>
);
}
名前付きエクスポートも使えます
1つのファイルに複数のコンポーネントがある場合に便利です。
// components/index.js - 再エクスポート
export { default as Button } from './Button.jsx';
export { Input } from './Input.jsx';
再エクスポートでまとめて公開できます
複数のコンポーネントを1つのファイルからまとめてインポートできるようになります。
// App.jsx - 使用例
import { Button, Input } from './components';
function App() {
return (
<div>
<Input label="ユーザー名" type="text" />
<Button onClick={() => console.log('clicked')}>
送信
</Button>
</div>
);
}
まとめてインポートすると便利です
関連するコンポーネントを一度にインポートできます。
チェック項目
- import/exportの基本を理解している
- デフォルトエクスポートと名前付きエクスポートの違いを知っている
- モジュールの再エクスポートを理解している
レベル2確認テスト
以下のコードが理解・実装できればレベル2クリアです：
// 確認テスト：ユーザー管理アプリ
import { useState, useEffect } from 'react';
// APIクライアント
class ApiClient {
static async get(endpoint) {
try {
const response = await fetch(`/api${endpoint}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('API Error:', error);
throw error;
}
}
}
// ユーティリティ関数
export const formatUser = (user) => ({
...user,
fullName: `${user.firstName} ${user.lastName}`,
isAdult: user.age >= 20
});
export const filterUsers = (users, criteria) => {
return users.filter(user => {
const { minAge, maxAge, isActive, skills } = criteria;
if (minAge && user.age < minAge) return false;
if (maxAge && user.age > maxAge) return false;
if (isActive !== undefined && user.isActive !== isActive) return false;
if (skills && skills.length > 0) {
return skills.some(skill => user.skills.includes(skill));
}
return true;
});
};
// メインコンポーネント
function UserManager() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [filters, setFilters] = useState({
minAge: '',
maxAge: '',
isActive: undefined,
skills: []
});
useEffect(() => {
loadUsers();
}, []);
const loadUsers = async () => {
try {
setLoading(true);
setError(null);
const rawUsers = await ApiClient.get('/users');
const formattedUsers = rawUsers.map(formatUser);
setUsers(formattedUsers);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const filteredUsers = filterUsers(users, filters);
const updateFilter = (key, value) => {
setFilters(prev => ({ ...prev, [key]: value }));
};
return (
<div>
<h1>ユーザー管理</h1>
<FilterPanel filters={filters} onUpdateFilter={updateFilter} />
{loading && <div>読み込み中...</div>}
{error && <div>エラー: {error}</div>}
<UserList users={filteredUsers} />
<UserStats users={filteredUsers} />
</div>
);
}
このコードが理解できれば合格です
- ES6+ 文法（アロー関数、分割代入、スプレッド演算子）
- 配列メソッド（map、filter、some）
- async/await と Promise
- import/export
これらの要素が含まれています。
あなたの現在レベルをチェックしよう
React学習準備度チェック
以下のチェックリストで自分の準備度を確認してみましょう：
基礎レベル（必須）
JavaScript基本文法
- let、const、varの違いを理解している
- 関数の定義と呼び出しができる
- if文、for文、while文が書ける
- 配列とオブジェクトの基本操作ができる
DOM操作とイベント
- DOM要素の取得方法を知っている
- イベントリスナーの設定ができる
- 要素の内容やスタイルを変更できる
基本的なプログラミング概念
- スコープの概念を理解している
- 引数と戻り値を理解している
- エラーの基本的な対処ができる
中級レベル（強く推奨）
ES6+文法
- アロー関数が書ける
- 分割代入が使える
- スプレッド演算子が使える
- テンプレートリテラルが使える
配列メソッド
- map、filter、reduceが使える
- find、some、everyが使える
- foreachとmapの違いを理解している
非同期処理
- Promiseの基本を理解している
- async/awaitが使える
- try/catchでエラーハンドリングができる
モジュールシステム
- import/exportが使える
- デフォルトエクスポートと名前付きエクスポートの違いを知っている
応用レベル（あると良い）
高度な概念
- クロージャの概念を理解している
- thisの動作を理解している
- プロトタイプチェーンを知っている
関数型プログラミング
- 高階関数の概念を理解している
- 純粋関数と副作用を理解している
- イミューダブル（不変性）の概念を知っている
学習補強プラン
基礎レベルが不足している場合
// 1週目：基本文法の復習
// 変数、関数、条件分岐、ループ
// 2週目：配列とオブジェクト
const practice = {
arrays: ["学習", "練習", "復習"],
objects: { goal: "React習得", period: "3ヶ月" }
};
// 3週目：DOM操作とイベント
document.addEventListener('DOMContentLoaded', () => {
const button = document.getElementById('practice-btn');
button.addEventListener('click', handleClick);
});
// 4週目：総合練習
// 簡単なToDoアプリをJavaScriptで作成
基礎を固める学習プランです
基本的な文法から始めて、最終的にはToDoアプリを作れるレベルを目指しましょう。
中級レベルが不足している場合
// 1週目：ES6+文法集中学習
const users = [
{ name: "田中", age: 25 },
{ name: "佐藤", age: 30 }
];
// アロー関数と配列メソッド
const adultUsers = users
.filter(user => user.age >= 25)
.map(user => ({ ...user, isAdult: true }));
// 2週目：非同期処理
async function practice() {
try {
const data = await fetch('/api/data');
const result = await data.json();
return result;
} catch (error) {
console.error('Error:', error);
}
}
// 3週目：モジュールシステム
// 複数ファイルでプロジェクトを作成
// 4週目：実践プロジェクト
// 天気アプリやユーザー管理アプリを作成
実践的なスキルを身につける学習プランです
実際にReactで使う機能を中心に学習していきましょう。
React学習をスムーズに始めるためのヒント
段階的な学習アプローチ
Reactは段階的に学習するのがおすすめです。
// ステップ1：まずは基本的なコンポーネント
function Hello() {
return <h1>Hello, React!</h1>;
}
最初は表示だけのコンポーネントから
まずはHTMLのような感覚で、シンプルなコンポーネントを作ってみましょう。
// ステップ2：propsを使ったコンポーネント
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
次にpropsで値を受け取る
親から子に値を渡す仕組みです。
// ステップ3：stateを使ったコンポーネント
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
stateで動的な要素を作る
クリックで値が変わるような、インタラクティブなコンポーネントです。
// ステップ4：より複雑なコンポーネント
function TodoApp() {
const [todos, setTodos] = useState([]);
// ... 複雑なロジック
}
最終的には本格的なアプリケーション
複数のstate、複雑なロジックを持つコンポーネントを作れるようになります。
JavaScript知識をReactで活用
学習したJavaScriptの知識をReactでどう使うかを理解しましょう。
// JavaScript配列メソッドをReactで活用
function UserList({ users }) {
return (
<div>
{/* filter + map の組み合わせ */}
{users
.filter(user => user.isActive)
.map(user => (
<UserCard key={user.id} user={user} />
))}
{/* reduce で統計情報を計算 */}
<p>
アクティブユーザー数: {users.reduce((count, user) =>
user.isActive ? count + 1 : count, 0
)}
</p>
</div>
);
}
配列メソッドが大活躍します
filterで条件に合う要素を抽出、mapでコンポーネントに変換、reduceで統計計算。 JavaScriptで学んだことが直接活かせますね。
// 分割代入をpropsで活用
function UserCard({ user: { name, age, email } }) {
return (
<div>
<h3>{name}</h3>
<p>{age}歳 - {email}</p>
</div>
);
}
分割代入でpropsをスッキリ書ける
ネストした分割代入も使えます。
// async/awaitをuseEffectで活用
function DataComponent() {
const [data, setData] = useState(null);
useEffect(() => {
async function loadData() {
try {
const response = await fetch('/api/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error:', error);
}
}
loadData();
}, []);
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}
非同期処理でAPIからデータを取得
useEffectの中でasync/awaitを使って、データを取得できます。
よくある誤解の解消
誤解1：「完璧にJavaScriptを理解してからReactを始めるべき」
現実
基本的な知識があればReactを学習しながらJavaScriptの理解も深められます。 完璧を求めすぎる必要はありません。
誤解2：「高度なJavaScript知識が必要」
現実
ES6+の基本文法と配列メソッドが分かれば十分にReact学習を始められます。 高度な知識は後から身につけても大丈夫です。
誤解3：「オブジェクト指向を完全に理解する必要がある」
現実
Reactは関数コンポーネントが主流なので、クラスの深い理解は必須ではありません。 関数の基本が分かれば十分です。
まとめ：React学習への準備完了
この記事では、React学習に必要なJavaScriptの最低限知識をチェックリスト形式で詳しく解説しました。
重要なポイント
必須レベル（最低限）
1. 基本文法（変数、関数、条件分岐）
2. 配列とオブジェクトの基本操作
3. DOM操作の概念理解
4. イベントハンドリングの基本
このレベルができればReact学習開始OK
完璧である必要はありません。 基本的な部分が理解できていれば大丈夫です。
推奨レベル（効率的な学習のため）
1. ES6+文法（アロー関数、分割代入、スプレッド演算子）
2. 配列メソッド（map、filter、reduce）
3. 非同期処理（Promise、async/await）
4. モジュールシステム（import/export）
このレベルができればスムーズなReact学習が可能
Reactでよく使う機能なので、覚えておくと学習が楽になります。
学習開始の判断基準
- レベル1完了: React学習開始可能
- レベル2完了: 効率的なReact学習が可能
- レベル3: より高度なReact開発に対応
今日から始められること
1. チェックリストで現在レベルを確認
まずは自分がどのレベルにいるかを把握しましょう。
2. 不足している知識を特定
足りない部分を明確にして、学習計画を立てます。
3. 段階的な学習計画を立てる
無理をせず、段階的に知識を積み上げていきましょう。
4. 実践的なプロジェクトで知識を定着
学んだ知識は実際に使って定着させます。
最後に
完璧を求めすぎず、基本ができたらReact学習を始めながらJavaScriptの理解を深めていけば大丈夫です。
React学習を始める準備は整いました！ あなたのReact学習が成功することを心から願っています。