Reactを学ぶ前に知っておきたいJavaScriptの基礎知識5選

みなさん、Reactを学び始めようとしていますか？

でも、いざ始めてみると「なんか難しい構文がいっぱい出てくる」「この書き方、どういう意味？」と感じることがありませんか？

実は、多くの初心者が感じるこの「難しさ」の正体は、モダンなJavaScriptの基礎知識が足りないことなんです。

この記事では、React学習をスムーズに進めるために絶対に知っておきたいJavaScriptの基礎知識を5つ厳選しました。

これらをマスターすれば、Reactの公式ドキュメントもスラスラ読めるようになりますよ。

一緒に頑張っていきましょう！

1. アロー関数（Arrow Functions）

アロー関数は、Reactで最も頻繁に使われる記法の一つです。

まずは基本的な使い方から見ていきましょう。

基本的な書き方の違い

従来の関数とアロー関数を比較してみますね。

// 従来の関数記法
function sayHello() {
  console.log('こんにちは！');
}

// アロー関数
const sayHello = () => {
  console.log('こんにちは！');
};

どうでしょうか？ アロー関数の方がスッキリしていますよね。

functionキーワードの代わりに=>（矢印）を使います。 だから「アロー関数」という名前なんです。

引数がある場合はどう書く？

引数の数によって書き方が少し変わります。

// 引数が1つの場合
const greet = name => {
  console.log(`こんにちは、${name}さん`);
};

// 引数が複数の場合
const add = (a, b) => {
  return a + b;
};

ポイントは、引数が1つだけなら括弧を省略できることです。

でも複数の引数がある場合は、必ず括弧で囲みます。

さらに短く書くこともできます。

// 1行で書く場合（returnを省略）
const multiply = (a, b) => a * b;

この場合、returnも省略できて、とても簡潔になりますね。

Reactでの実際の使用例

実際にReactでどう使われるか見てみましょう。

// イベントハンドラー
const Button = () => {
  const handleClick = () => {
    alert('ボタンがクリックされました');
  };

  return <button onClick={handleClick}>クリック</button>;
};

この例では、ボタンがクリックされた時の処理をアロー関数で書いています。

handleClickがアロー関数になっているのがわかりますね。

もう一つ、配列の処理でも頻繁に使われます。

// 配列の処理
const UserList = ({ users }) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

.map()の中で使っているuser => (...)もアロー関数です。

各ユーザーの情報を<li>タグに変換しています。

アロー関数に慣れると、Reactのコードがグッと読みやすくなりますよ。

2. 分割代入（Destructuring Assignment）

分割代入は、オブジェクトや配列から値を取り出す便利な機能です。

「分割」という名前のとおり、データを「分けて」「代入」します。

オブジェクトから値を取り出してみよう

まずは従来の方法と比較してみますね。

// ユーザー情報のオブジェクト
const user = {
  name: '田中太郎',
  age: 25,
  email: 'tanaka@example.com'
};

従来の方法だと、一つずつ取り出す必要がありました。

// 従来の方法
const name = user.name;
const age = user.age;
const email = user.email;

でも分割代入を使うと、一気に取り出せるんです！

// 分割代入を使った方法
const { name, age, email } = user;

console.log(name); // '田中太郎'
console.log(age);  // 25
console.log(email); // 'tanaka@example.com'

波括弧 {} を使って、欲しいプロパティの名前を書くだけです。

とても簡潔ですよね！

配列でも使えます

配列の場合は、角括弧 [] を使います。

// 色の配列
const colors = ['red', 'green', 'blue'];

従来の方法だと、インデックスを指定して取り出していました。

// 従来の方法
const firstColor = colors[0];
const secondColor = colors[1];
const thirdColor = colors[2];

分割代入なら、順番に取り出せます。

// 分割代入を使った方法
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // 'red'
console.log(secondColor); // 'green'
console.log(thirdColor);  // 'blue'

配列の場合は、順番が重要です。

左から順番に配列の要素が代入されます。

Reactでの活用例

Reactでは分割代入がとても頻繁に使われます。

特に、コンポーネントのpropsを受け取る時によく使います。

// propsの分割代入
const UserProfile = ({ name, age, email }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}</p>
      <p>メール: {email}</p>
    </div>
  );
};

従来の書き方だと、こんな感じでした。

// 従来の書き方
const UserProfile = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>年齢: {props.age}</p>
      <p>メール: {props.email}</p>
    </div>
  );
};

分割代入の方が、コードがすっきりしていますね！

ReactのuseStateでも分割代入を使います。

// useStateの分割代入
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
};

useState(0)は配列を返すので、それを[count, setCount]で受け取っています。

デフォルト値も設定できます

値が存在しない場合のデフォルト値も設定できます。

// デフォルト値の設定
const { name = '名無し', age = 0 } = user;

もしuserオブジェクトにnameやageがない場合、デフォルト値が使われます。

Reactのコンポーネントでも使えますよ。

// 関数の引数でデフォルト値
const UserCard = ({ name = '名無し', age = 0 }) => {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
};

これでnameやageが渡されなくても、エラーにならずに済みますね。

3. スプレッド演算子（Spread Operator）

スプレッド演算子は、3つの点 ... を使って配列やオブジェクトを展開する機能です。

「スプレッド」は「広げる」という意味なんです。

配列でのスプレッド演算子

まずは配列での使い方を見てみましょう。

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

2つの配列を結合したい場合、スプレッド演算子を使います。

// 配列の結合
const allNumbers = [...numbers1, ...numbers2];
console.log(allNumbers); // [1, 2, 3, 4, 5, 6]

...numbers1で1, 2, 3が展開されて、...numbers2で4, 5, 6が展開されます。

結果的に、6つの数字が入った新しい配列ができあがりますね。

配列をコピーすることもできます。

// 配列のコピー
const copyNumbers = [...numbers1];
console.log(copyNumbers); // [1, 2, 3]

これは元の配列とは別の新しい配列を作成します。

配列に要素を追加することもできます。

// 配列に要素を追加
const moreNumbers = [...numbers1, 7, 8];
console.log(moreNumbers); // [1, 2, 3, 7, 8]

最初の3つの数字を展開して、その後に7と8を追加しています。

オブジェクトでのスプレッド演算子

オブジェクトでも同じように使えます。

const user = {
  name: '田中太郎',
  age: 25
};

オブジェクトをコピーしたい場合はこうします。

// オブジェクトのコピー
const copyUser = { ...user };

これでuserと同じ内容の新しいオブジェクトができます。

オブジェクトを結合することもできます。

// オブジェクトの結合
const userWithEmail = {
  ...user,
  email: 'tanaka@example.com'
};

元のuserの内容を展開して、新しくemailプロパティを追加しています。

特定のプロパティだけ更新したい場合も便利です。

// 特定のプロパティを更新
const updatedUser = {
  ...user,
  age: 26  // 年齢だけ更新
};

元のnameはそのまま残って、ageだけが26に変わります。

Reactでの実際の使用例

Reactでは、状態の更新でよく使われます。

// 状態の更新
const UserForm = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    email: ''
  });

  const handleInputChange = (field, value) => {
    setUser(prevUser => ({
      ...prevUser,
      [field]: value
    }));
  };

  return (
    <form>
      <input 
        value={user.name}
        onChange={(e) => handleInputChange('name', e.target.value)}
      />
      <input 
        value={user.email}
        onChange={(e) => handleInputChange('email', e.target.value)}
      />
    </form>
  );
};

この例では、...prevUserで現在の状態を展開して、特定のフィールドだけを更新しています。

Reactの状態更新では、元のオブジェクトを変更してはいけません。

必ず新しいオブジェクトを作る必要があるんです。

スプレッド演算子があると、これが簡単にできますね。

propsの展開でも使われます。

// propsの展開
const UserProfile = (props) => {
  return <UserCard {...props} />;
};

{...props}で、受け取ったpropsをすべてUserCardに渡しています。

とても便利な機能ですよね！

4. テンプレート文字列（Template Literals）

テンプレート文字列は、文字列の中に変数を埋め込む便利な方法です。

バッククォート（`）を使って書きます。

基本的な使い方

従来の文字列結合と比較してみましょう。

const name = '田中太郎';
const age = 25;

従来の方法だと、+で文字列を繋げていました。

// 従来の方法
const message = 'こんにちは、' + name + 'さん。あなたは' + age + '歳ですね。';

なんだか複雑ですよね。

テンプレート文字列を使うと、こんなにシンプルになります。

// テンプレート文字列
const message = `こんにちは、${name}さん。あなたは${age}歳ですね。`;

**バッククォート（）で囲んで**、変数を${}`の中に書くだけです。

とても読みやすくなりましたね！

複数行の文字列も書けます

テンプレート文字列なら、改行も簡単です。

// 従来の方法
const html = '<div>' +
  '<h1>タイトル</h1>' +
  '<p>内容</p>' +
'</div>';

従来の方法だと、+で繋げる必要がありました。

テンプレート文字列なら、そのまま改行できます。

// テンプレート文字列
const html = `
  <div>
    <h1>タイトル</h1>
    <p>内容</p>
  </div>
`;

見た目もわかりやすくなりますね！

計算式も埋め込めます

${}の中には、計算式も書けます。

const price = 1000;
const tax = 0.1;

const totalMessage = `合計金額は${price * (1 + tax)}円です`;
// 結果: '合計金額は1100円です'

計算結果が自動的に文字列に変換されます。

条件分岐も使えます。

const isExpensive = `この商品は${price > 500 ? '高い' : '安い'}商品です`;
// 結果: 'この商品は高い商品です'

三項演算子（後で詳しく説明します）を使った例です。

Reactでの活用例

Reactでもテンプレート文字列は大活躍します。

CSSクラスを動的に設定する時によく使います。

// CSSクラスの動的な設定
const Button = ({ variant, disabled }) => {
  const className = `btn btn-${variant} ${disabled ? 'disabled' : ''}`;
  
  return <button className={className}>ボタン</button>;
};

variantの値によって、btn-primaryやbtn-secondaryなどのクラスが設定されます。

disabledがtrueならdisabledクラスも追加されますね。

メッセージを動的に作成する時も便利です。

// 動的なメッセージの作成
const WelcomeMessage = ({ user, isLoggedIn }) => {
  const message = isLoggedIn 
    ? `ようこそ、${user.name}さん！` 
    : 'ログインしてください';
    
  return <p>{message}</p>;
};

ログイン状態によって、表示するメッセージが変わります。

APIのURLを構築する時にも使えます。

// APIのURLの構築
const UserProfile = ({ userId }) => {
  const apiUrl = `https://api.example.com/users/${userId}`;
  
  // データを取得する処理
  useEffect(() => {
    fetch(apiUrl)
      .then(response => response.json())
      .then(data => console.log(data));
  }, [apiUrl]);
};

ユーザーIDに応じて、適切なAPIエンドポイントを作成しています。

とても便利な機能ですよね！

5. 三項演算子（Ternary Operator）

三項演算子は、条件に基づいて値を決める簡潔な方法です。

「3つの項目」を使うので「三項演算子」と呼ばれています。

基本的な構文

基本的な形は「条件 ? 真の場合 : 偽の場合」です。

const age = 20;
const status = age >= 18 ? '成人' : '未成年';
console.log(status); // '成人'

これをif文で書くと、こんな感じになります。

// if文との比較
let status;
if (age >= 18) {
  status = '成人';
} else {
  status = '未成年';
}

三項演算子の方が、1行で書けて簡潔ですね！

複数の条件も組み合わせられます

条件をいくつか組み合わせることもできます。

const score = 85;
const grade = score >= 90 ? 'A' : 
              score >= 80 ? 'B' : 
              score >= 70 ? 'C' : 'D';
console.log(grade); // 'B'

点数に応じて、成績を決める処理です。

上から順番に条件をチェックして、最初に当てはまる結果を返します。

Reactでの条件付きレンダリング

Reactでは、条件によって表示を変える時によく使います。

// 基本的な条件付きレンダリング
const UserStatus = ({ isLoggedIn, user }) => {
  return (
    <div>
      {isLoggedIn ? (
        <p>ようこそ、{user.name}さん</p>
      ) : (
        <p>ログインしてください</p>
      )}
    </div>
  );
};

ログイン状態によって、表示するメッセージが変わります。

isLoggedInがtrueなら上のメッセージ、falseなら下のメッセージが表示されます。

CSSクラスの切り替えにも使えます。

// CSSクラスの条件付き適用
const Button = ({ isPrimary, children }) => {
  return (
    <button className={isPrimary ? 'btn-primary' : 'btn-secondary'}>
      {children}
    </button>
  );
};

isPrimaryがtrueならbtn-primary、falseならbtn-secondaryクラスが適用されます。

複雑な条件を組み合わせた例

もう少し複雑な例も見てみましょう。

// 複数の条件を組み合わせた例
const ProductCard = ({ product, user }) => {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>価格: {product.price}円</p>
      
      {user ? (
        user.isPremium ? (
          <p>プレミアム会員価格: {product.price * 0.9}円</p>
        ) : (
          <p>会員価格: {product.price * 0.95}円</p>
        )
      ) : (
        <p>会員登録で割引適用</p>
      )}
    </div>
  );
};

この例では、ユーザーの状態に応じて異なる価格を表示しています。

• ログインしていない場合：会員登録を促すメッセージ
• 一般会員の場合：5%割引の価格
• プレミアム会員の場合：10%割引の価格

三項演算子を入れ子にして、複雑な条件分岐を実現しています。

論理演算子との組み合わせ

三項演算子は、論理演算子と組み合わせて使うこともあります。

// && 演算子を使った条件付きレンダリング
const Notification = ({ hasNewMessage, messageCount }) => {
  return (
    <div>
      {hasNewMessage && (
        <p>新しいメッセージが{messageCount}件あります</p>
      )}
    </div>
  );
};

&&演算子を使うと、条件が真の場合だけ表示されます。

hasNewMessageがtrueの時だけ、メッセージが表示されますね。

デフォルト値を設定する時は||演算子を使います。

// || 演算子を使ったデフォルト値
const UserProfile = ({ user }) => {
  return (
    <div>
      <p>名前: {user.name || '未設定'}</p>
      <p>年齢: {user.age || 0}歳</p>
    </div>
  );
};

user.nameが存在しない場合は「未設定」、user.ageが存在しない場合は「0」が表示されます。

とても便利な機能ですよね！

これらの知識を活用した実践例

ここまで学んだ5つの知識をすべて組み合わせた実践的な例を見てみましょう。

実際のReactアプリケーションで使われそうなコンポーネントを作ってみます。

// 全ての知識を活用したコンポーネント
const UserDashboard = ({ users = [], currentUser }) => {
  const [filter, setFilter] = useState('all');
  const [sortBy, setSortBy] = useState('name');

  // アロー関数とテンプレート文字列
  const getFilteredUsers = () => {
    return users.filter(user => {
      return filter === 'all' || user.status === filter;
    });
  };

  // 分割代入とスプレッド演算子
  const handleUserUpdate = (userId, updates) => {
    setUsers(prevUsers => 
      prevUsers.map(user => 
        user.id === userId 
          ? { ...user, ...updates }  // スプレッド演算子
          : user
      )
    );
  };

  return (
    <div>
      {/* 三項演算子による条件付きレンダリング */}
      <h1>
        {currentUser ? `${currentUser.name}さんのダッシュボード` : 'ダッシュボード'}
      </h1>

      {/* フィルター選択 */}
      <select value={filter} onChange={(e) => setFilter(e.target.value)}>
        <option value="all">すべて</option>
        <option value="active">アクティブ</option>
        <option value="inactive">非アクティブ</option>
      </select>

      {/* ユーザーリスト */}
      <div>
        {getFilteredUsers().map(user => {
          // 分割代入
          const { id, name, email, status } = user;
          
          return (
            <div key={id} className={`user-card ${status}`}>
              <h3>{name}</h3>
              <p>{email}</p>
              {/* 三項演算子 */}
              <span className={status === 'active' ? 'status-active' : 'status-inactive'}>
                {status === 'active' ? 'アクティブ' : '非アクティブ'}
              </span>
            </div>
          );
        })}
      </div>

      {/* 条件付きレンダリング */}
      {getFilteredUsers().length === 0 && (
        <p>該当するユーザーが見つかりません</p>
      )}
    </div>
  );
};

このコンポーネントでは、今回学んだ5つの知識がすべて使われています。

少しずつ分解してみましょう。

アロー関数は、getFilteredUsersやhandleUserUpdateで使われています。

分割代入は、{ users = [], currentUser }でpropsを受け取る時と、const { id, name, email, status } = userでユーザー情報を取り出す時に使われています。

スプレッド演算子は、{ ...user, ...updates }でユーザー情報を更新する時に使われています。

テンプレート文字列は、user-card ${status}でCSSクラスを動的に設定する時に使われています。

三項演算子は、タイトルの表示やステータスの表示で使われています。

どの機能も、Reactアプリケーションでは日常的に使われるものばかりですね。

まとめ

お疲れさまでした！

React学習を始める前に知っておきたいJavaScriptの基礎知識5つを一緒に学んできました。

どの知識も、モダンなReactアプリケーションでは必須の機能です。

特に重要なのは以下の点です：

• アロー関数：イベントハンドラーや配列処理で頻繁に使用
• 分割代入：propsの受け取りや状態管理で大活躍
• スプレッド演算子：配列やオブジェクトの操作に必須
• テンプレート文字列：動的な文字列作成に便利
• 三項演算子：条件付きレンダリングの基本

これらの知識があると、Reactの公式ドキュメントも理解しやすくなります。

チュートリアルを進める時も、「なんでこう書くんだろう？」という疑問が減るはずです。

まずは今回のサンプルコードを実際に動かしてみることをおすすめします。

慣れてきたら、自分でも簡単なコンポーネントを作ってみてください。

JavaScriptの基礎がしっかりしていると、React学習がとてもスムーズになりますよ。

ぜひ今回の知識を活用して、楽しいReact学習を始めてみませんか？