スプレッド構文について、まとめてみた

スプレッド構文とは

スプレッド構文（...）は、配列やオブジェクトの要素を展開するためのJavaScriptの構文です。この機能は、配列やオブジェクトを簡単にコピーしたり、結合したりする際に便利です。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

...arr1: 配列 arr1 の全ての要素を展開します。
結果: 新しい配列 [1, 2, 3, 4, 5] が作成されます。

配列のマージ

複数の配列をマージすることができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];

console.log(merged); // [1, 2, 3, 4, 5, 6]

このように、スプレッド構文を使うことで元の配列をそのまま維持しつつ、新しい配列を作成できます。

Reactでの応用

スプレッド構文は、Reactの状態管理やプロパティ（props）の操作においても広く利用されています。ここでは、ショッピングカートを管理する例を通じて、実際の使い方を確認してみましょう。

例: 商品ごとの数量を管理 以下は、ユーザーが入力した商品ごとの数量をReactの状態で管理するシンプルな例です。

import React, { useState } from "react";
import { View, Text, TextInput, FlatList, StyleSheet } from "react-native";

const App = () => {
  // 商品ごとの数量を管理する状態
  const [itemQuantities, setItemQuantities] = useState<{ [key: string]: string }>({});

  // 商品データ
  const items = ["apple", "banana", "orange", "grape", "melon"];

  // 商品ごとの数量を更新する関数
  const handleQuantityChange = (item: string, value: string) => {
    setItemQuantities((prev) => ({
      ...prev,
      [item]: value, // 入力された商品の数量を更新
    }));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>ショッピングカート</Text>
      <FlatList
        data={items}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <View style={styles.row}>
            {/* 商品名 */}
            <Text style={styles.itemName}>{item}</Text>

            {/* 商品数量の入力フィールド */}
            <TextInput
              style={styles.input}
              keyboardType="numeric"
              placeholder={`${item}の数量`}
              value={itemQuantities[item] || ""} // 状態から該当商品の数量を取得
              onChangeText={(value) => handleQuantityChange(item, value)} // 入力値を更新
            />
          </View>
        )}
      />
      <View style={styles.summary}>
        <Text style={styles.summaryTitle}>合計数量:</Text>
        <Text style={styles.summaryValue}>
          {Object.values(itemQuantities).reduce(
            (sum, qty) => sum + (parseInt(qty) || 0),
            0
          )}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#f8f8f8",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 16,
    textAlign: "center",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  itemName: {
    flex: 1,
    fontSize: 18,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 8,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  summary: {
    marginTop: 16,
    padding: 16,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    backgroundColor: "#fff",
  },
  summaryTitle: {
    fontSize: 20,
    fontWeight: "bold",
  },
  summaryValue: {
    fontSize: 24,
    color: "#007BFF",
    marginTop: 8,
  },
});

export default App;

この配列 items は、商品名リストを表しています。このリストを使って、商品ごとの数量を管理する場合、キーとして利用されます。

const items = ["apple", "banana", "orange", "grape", "melon"];

この items 配列内の各要素（"apple", "banana" など）が、オブジェクトのキーになります。

const [itemQuantities, setItemQuantities] = useState({});

const handleQuantityChange = (item, value) => {
  setItemQuantities((prev) => ({
    ...prev, // 既存の状態を保持
    [item]: value, // item をキーにして value を更新
  }));
};

さきほどのitems配列のオブジェクトのキーをもとにして、数量を入力します。入力するたびに
値が更新されていきます。

prev とは？
prev は 「現在の状態」 を表します。
Reactが現在の状態（itemQuantities の値）を自動で渡します。

const [itemQuantities, setItemQuantities] = useState({ apple: "2", banana: "3" });

setItemQuantities((prev) => ({
  ...prev,
  apple: "5", // appleの数量を更新
}));

①prev の初期値: { apple: "2", banana: "3" }
②スプレッド構文でコピー: { apple: "2", banana: "3" }
③更新後の結果: { apple: "5", banana: "3" }

まとめ

今回、スプレッド構文について、また、Reactでのスプレッド構文の使用例について
まとめました。
スプレッド構文を使うと、オブジェクトや配列のコピーを簡単に作れるので、元のデータをそのまま残しながら新しいデータを作り直せます。これによって、Reactのコンポーネントが効率よく再描画されるようになり、動きがスムーズになるのに役立ちます！