こんにちは。システム開発事業部のヤソジマです。
社内では、JavaScriptライブラリのReactを使ってフロントエンド開発を行うことが多く、最近はReactに関する勉強会の機会も増えてきました。
Reactには独自の関数や機能がありますが、基本はJavaScriptで構成されているため、Reactを学ぶ上でJavaScriptの理解は不可欠です。特に、分割代入、スプレッド構文、アロー関数、非同期処理（async/await）、配列操作（map、filter）といった要素はReactで頻繁に使用されるため、この辺りを押さえておくとスムーズに学習できると思います。
ただし、JavaScriptのすべてを理解する必要があるかというと、必ずしもそうではないと個人的には感じています。（もちろん十分に理解するのに越したことはないと思います。）
そこで、本記事ではReactで頻出するJavaScriptの構文をピックアップし、解説していきます。すべてを網羅することはできませんが、学習の助けになれば幸いです。
分割代入
分割代入は、配列やオブジェクトから特定の値を取り出し、変数に簡単に代入できる便利な構文です。コードを簡潔に書けるだけでなく、可読性も向上します。
Reactでは、コンポーネントのPropsの受け取りやAPIレスポンス処理などでよく使われるので覚えておくと良いです。
基本的な使い方
スプレッド構文を使うと、配列やオブジェクトの既存のデータを保持しながら、新しい要素やプロパティを追加・変更することができます。
1const user = { name: "Taro", age: 25, country: "Japan" };
2
3const { name, age, country } = user;
4
5console.log(name); // "Taro"
6console.log(age); // 25
7console.log(country); // "Japan"Reactでよく見るシーン
この例では、分割代入を使ってコンポーネントのPropsを簡潔に受け取っています。通常の props をそのまま受け取る場合は、以下のように記述する必要があります。
1type Props = {
2 title: string;
3 completed: boolean;
4}
5
6const Todo = (props: Props) => {
7 return <div>{props.title}: {props.completed ? '完了' : '未対応'}</div>;
8};このように props.title や props.completed を毎回記述しなければならず、コードが冗長になりがちです。分割代入を使うことで、可読性が向上し、スッキリとしたコードになります。
1type Props = {
2 title: string;
3 completed: boolean;
4}
5
6const Todo = ({ title, completed }: Props) => {
7 return <div>{title}:{completed ? '完了' : '未対応'}</div>;
8};スプレッド構文（...）
スプレッド構文（...）は、配列やオブジェクトの要素を展開する際に使用される便利な構文です。
基本的な使い方
1// 配列の展開
2const todoList = ['買い物', '掃除'];
3const updatedTodoList = [...todoList, '洗濯'];
4console.log(updatedTodoList); // ['買い物', '掃除', '洗濯']
5
6// オブジェクトの展開
7const todo = { id: 1, text: '買い物' };
8const updatedTodo = { ...todo, completed: false };
9console.log(updatedTodo); // { id: 1, text: '買い物', completed: false }Reactでよく見るシーン
この例では、スプレッド構文を使って useState の更新時に既存のデータを維持しながら age のみを変更しています。Reactの状態管理では、このような手法が頻繁に用いられます。
1import { useState } from 'react';
2
3const App = () => {
4 const [user, setUser] = useState({ name: 'Taro', age: 25 });
5
6 const updateAge = () => {
7 setUser((prev) => ({ ...prev, age: prev.age + 1 }));
8 };
9
10 return (
11 <div>
12 <p>{user.name} - {user.age}歳</p>
13 <button onClick={updateAge}>年齢を更新</button>
14 </div>
15 );
16};map関数
基本的な使い方
1const numbers = [1, 2, 3, 4, 5];
2const doubledNumbers = numbers.map(num => num * 2);
3console.log(doubledNumbers); // [2, 4, 6, 8, 10]Reactでよく見るシーン
この例では、map 関数を使って todos 配列を <li> 要素のリストとしてレンダリングしています。Reactでリストを表示する際に map は必須のメソッドです。
ちなみに要素のリストをレンダリングするときに、各要素にユニークなkeyを付与しないといけないので留意しておくとよいです。
1const todos = [
2 { id: 1, text: "買い物", completed: false },
3 { id: 2, text: "掃除", completed: true },
4 { id: 3, text: "洗濯", completed: false }
5];
6
7const TodoList = () => {
8 return (
9 <ul>
10 {todos.map(todo => (
11 <li key={todo.id}>
12 {todo.text} - {todo.completed ? "完了" : "未対応"}
13 </li>
14 ))}
15 </ul>
16 );
17};三項演算子
基本的な使い方
1const isMember = true;
2const message = isMember ? "ようこそ会員様！" : "ゲストとして閲覧中";
3console.log(message);Reactでよく見るシーン
この例では、三項演算子を使って isLoggedIn の状態に応じて異なるテキストを表示しています。条件によって異なるUIを表示する際に便利です。
1const UserProfile = ({ isLoggedIn }) => {
2 return (
3 <div>
4 {isLoggedIn ? <p>ログイン中です</p> : <p>ログインしてください</p>}
5 </div>
6 );
7};まとめ
今回は、Reactを学ぶ上で特に重要なJavaScriptの構文として、以下の4つを紹介しました。
- 分割代入 - Propsの受け取りやAPIレスポンス処理でよく使う
- スプレッド構文 - 状態管理やオブジェクトの更新で頻出
- map関数 - 配列データをリスト表示する際に使用
- 三項演算子 - 条件分岐によるUIの切り替えに活用
これらの構文を理解することで、Reactのコードをよりスムーズに書けるようになります。ぜひ実際のプロジェクトで試してみてください！
