目次 [ close ]
  1. はじめに
  2. なぜReactの前にJavaScriptを固めるべきなの？
  3. ① let / const ——「再代入しない変数」に慣れる
  4. ② アロー関数 ——短く書ける関数
  5. ③ テンプレートリテラル ——文字列に変数を埋め込む
  6. ④ 分割代入(ぶんかつだいにゅう) ——必要な値だけ取り出す
  7. ⑤ スプレッド構文 ——配列やオブジェクトを展開する
  8. ⑥ map / filter ——配列を変換・絞り込みする
  9. ⑦ 三項演算子と && ——条件で表示を出し分ける
  10. ⑧ import / export ——ファイルを分割して使い回す
  11. ⑨ 非同期処理(Promise / async・await) ——データ取得の基本
  12. まとめ

はじめに

「Reactの勉強を始めたけど、チュートリアルのコードが何をしているのか半分も読めない…」——これ、実はReactが難しいのではなく、土台のJavaScript(JS)が固まっていないことが原因のケースがほとんどです。

私自身、独学でReactに入ったとき、const { title } = props; や items.map(...) のような書き方でいちいち手が止まり、「これはReactの文法？ それともJS？」と混乱しました。あとから振り返ると、つまずいていたのはほぼ全部モダンなJavaScriptの文法だったんです。

そこでこの記事では、Reactに入る前に最低限おさえておきたいJavaScriptの基礎を9つ、「Reactではこう使う」という一言とセットで紹介します。これを先に押さえておくと、Reactのコードが驚くほどスラスラ読めるようになりますよ。一緒に見ていきましょう！

なぜReactの前にJavaScriptを固めるべきなの？

Reactは「JavaScriptのライブラリ」です。つまりReact独自に見える書き方の多くは、実はただのモダンなJS。土台のJSがあいまいなままReactを学ぶと、「Reactの概念」と「JSの文法」がごちゃ混ぜになって、自分がどこでつまずいているのかさえ分からなくなります。

逆に言えば、これから紹介する文法に見覚えがあるだけで、学習効率は大きく変わります。難しく考えず、「あ、これ知ってる」を増やしておくのが目的です。

① let / const ——「再代入しない変数」に慣れる

昔よく使われた var は、今ではほとんど使いません。現在は再代入する変数は let、再代入しない変数は const を使い、基本は const を優先します。

const name = "ゆうや";   // 再代入しない値
let count = 0;            // あとで変わる値
count = count + 1;        // OK

// name = "別の名前";    // const は再代入できないのでエラー

Reactではこう使う： コンポーネントやpropsの受け取りは基本 const です。状態(state)も「直接書き換えず、新しい値で更新する」考え方なので、const中心の世界観に慣れておくとスムーズです。

② アロー関数 ——短く書ける関数

従来の function をスッキリ書けるのがアロー関数です。

// 従来の書き方
function add(a, b) {
  return a + b;
}

// アロー関数
const add = (a, b) => a + b;

Reactではこう使う： ボタンのクリック処理など、コールバック関数はほぼアロー関数で書きます。onClick={() => setCount(count + 1)} のような形は毎日のように登場します。

③ テンプレートリテラル ——文字列に変数を埋め込む

バッククォート(`)で囲むと、${ } の中に変数や式をそのまま埋め込めます。+ でつなぐより断然読みやすいです。

const name = "ゆうや";

// 従来： "こんにちは、" + name + "さん"
const message = `こんにちは、${name}さん`;

Reactではこう使う： クラス名を動的に切り替えるときなどに便利です。className={`btn ${isActive ? "active" : ""}`} のように使います。

④ 分割代入(ぶんかつだいにゅう) ——必要な値だけ取り出す

オブジェクトや配列から、必要なプロパティだけを一気に取り出す書き方です。

const user = { name: "ゆうや", age: 30 };

// 従来： const name = user.name;
const { name, age } = user;   // name と age をまとめて取り出す

Reactではこう使う： propsの受け取りで多用します。function Profile({ name, age }) { ... } の { name, age } がまさに分割代入。const [count, setCount] = useState(0) も、配列の分割代入なんです。

⑤ スプレッド構文 ——配列やオブジェクトを展開する

... を使うと、配列やオブジェクトの中身を展開して、コピーや結合ができます。

const arr = [1, 2, 3];
const newArr = [...arr, 4];           // [1, 2, 3, 4]

const user = { name: "ゆうや" };
const newUser = { ...user, age: 30 }; // name と age を持つ新しいオブジェクト

Reactではこう使う： stateを更新するときの必須テクニックです。元の配列やオブジェクトを直接書き換えず、...でコピーしてから一部だけ変える、という形を徹底します。

⑥ map / filter ——配列を変換・絞り込みする

mapは「各要素を加工して新しい配列を作る」、filterは「条件に合う要素だけ残す」メソッドです。

const nums = [1, 2, 3, 4];

const doubled = nums.map((n) => n * 2);        // [2, 4, 6, 8]
const evens = nums.filter((n) => n % 2 === 0); // [2, 4]

Reactではこう使う： mapはリスト表示の心臓部です。配列データを並べて表示するときは、ほぼ必ずmapで要素を生成します。これが分かるとReactのリスト描画が一気に理解できますよ。

⑦ 三項演算子と && ——条件で表示を出し分ける

三項演算子は 条件 ? Aの場合 : Bの場合、&&は「左が真なら右を返す」短絡評価です。

const isLogin = true;

const text = isLogin ? "ログイン中" : "ゲスト"; // 三項演算子
const welcome = isLogin && "ようこそ！";        // true なら "ようこそ！"

Reactではこう使う： 「条件によって表示を変える」条件付きレンダリングの定番です。{isLogin ? <Logout /> : <Login />} や {error && <p>エラーです</p>} のように書きます。

⑧ import / export ——ファイルを分割して使い回す

機能をファイルごとに分け、必要なところで読み込む仕組みです。

// utils.js
export const add = (a, b) =&gt; a + b;
export default function greet() { /* ... */ }

// main.js
import greet, { add } from &quot;./utils.js&quot;;

Reactではこう使う： コンポーネントは「1ファイル1部品」が基本です。export default function Button() {...} で書き出し、使う側で import Button from "./Button" で読み込みます。importの行が読めると、コードの全体像がつかめます。

⑨ 非同期処理(Promise / async・await) ——データ取得の基本

サーバーからデータを取ってくるような「時間のかかる処理」を扱う仕組みです。async/awaitを使うと、非同期処理を上から順に読める形で書けます。

async function getUser() {
  const res = await fetch(&quot;/api/user&quot;);
  const data = await res.json();
  return data;
}

Reactではこう使う： APIからデータを取得して画面に表示する、という定番処理で登場します。最初は「awaitを付けると結果を待ってくれる」くらいの理解でOK。深入りは後からで大丈夫です。

まとめ

Reactに入る前におさえておきたいJavaScriptの基礎9つを振り返ります👇

  • let / const：再代入しないconst中心の世界に慣れる
  • アロー関数：コールバックはほぼこれ
  • テンプレートリテラル：${ }で変数を埋め込む
  • 分割代入：propsやuseStateで必須
  • スプレッド構文：stateの更新の要
  • map / filter：リスト表示の心臓部
  • 三項演算子・&&：条件付きレンダリング
  • import / export：コンポーネント分割の基本
  • 非同期処理：データ取得で登場

これらは「Reactの文法」ではなく「モダンなJavaScript」です。だからこそ、先に手を動かして慣れておくと、Reactの学習がぐっとラクになります。逆に、Reactのコードを読んでいて「これ何だっけ？」となったら、この9つに立ち返ってみてください。きっとどれかに当てはまるはずです。

私もまだまだ学習中の身ですが、この土台を固めてからは、チュートリアルの読みやすさが本当に変わりました。あなたのReact学習がスムーズになれば嬉しいです。最後まで読んでいただき、ありがとうございました！

「Webの仕事に興味があるけど何から学べばいいか分からない」「自社サイトを作り直したい」といったご相談も承っています。現役のフロントエンドエンジニアとして制作のお手伝いをしていますので、よければ ポートフォリオ や ココナラの出品ページ ものぞいてみてくださいね。