実はJavaScriptで躓いていた

Reactをより難しくさせていた原因は、「JavaScriptの構文」をしっかりと理解できていないことだと気づいたので、よく出る構文をまとめてみました。JavaScript側を整理することで理解が進むようになったと感じています。

1. オブジェクトの分割代入

const user = { name: "田中", age: 25 };
const { name, age } = user;

user.name → name に直接代入
コードを簡潔に保ち、Reactの props 受け取りなどでよく使う

2. 配列の分割代入

const [state, setState] = useState("");

useState の戻り値が「配列」なので、2つの変数に分けて受け取る
state → 現在の値
setState → 値を更新する関数

3. デフォルト値付き分割代入（関数引数）

function greet({ name = "ゲスト", age = 0 } = {}) {
  return `${name}さん（${age}歳）`;
}

引数が未定義でもエラーが出ないようにできる
greet() や greet({ age: 30 }) に対応

4. 一部要素をスキップする配列の分割代入

const arr = ["a", "b", "c", "d", "e"];
const [first, , third] = arr; // bをスキップ
console.log(first); // "a"
console.log(third); // "c"

5. スプレッド構文（配列）

const items = ["りんご", "バナナ"];
const newItems = [...items, "オレンジ"];
console.log(newItems); // ["りんご", "バナナ", "オレンジ"]

配列を展開して、新しい配列を作成
React の setState([...prev, newItem]) などで使う

6. 配列の結合

const fruits = ["りんご", "バナナ"];
const vegetables = ["にんじん", "キャベツ"];
const foods = [...fruits, ...vegetables];
console.log(foods); // ["りんご", "バナナ", "にんじん", "キャベツ"]

7. スプレッド構文（オブジェクト）

const user = { name: "太郎", age: 25 };
const updatedUser = { ...user, age: 26 };
console.log(updatedUser); // { name: "太郎", age: 26 }

user の内容をコピーして、age のみ上書き

8. オブジェクトの結合

const basicInfo = {
  name: "田中太郎",
  age: 30
};

const contact = {
  email: "tanaka@example.com",
  phone: "090-1234-5678"
};

const profile = { ...basicInfo, ...contact };

console.log(profile);
// {
//  name: "田中太郎",
//  age: 30,
//  email: "tanaka@example.com",
//  phone: "090-1234-5678"
// }

... は「展開」
keyが重複すると後ろが優先されて上書きされる

9. レスト構文（残りをまとめる）

const props = {
  variant: "primary",
  type: "submit",
  disabled: true,
  className: "btn"
};

const { variant, ...otherProps } = props;

console.log(variant);     // "primary"
console.log(otherProps);  // { type: "submit", disabled: true, className: "btn" }

variant 以外のすべてを otherProps にまとめる
コンポーネントでよく使う

10. アロー関数

const double = x => x * 2;

function(x) { return x * 2 } の省略記法
短く書けるが、this の扱いに注意（通常の関数と異なる）

11. map

todos.map(todo => <li>{todo}</li>)

配列の各要素に処理をして、新しい配列を返す
JSXでリストを作るときの定番

12. filter

const evenNumbers = [1, 2, 3, 4].filter(n => n % 2 === 0);
// [2, 4]

条件に一致する要素だけ残す

13. find

const foundUser = users.find(u => u.id === 1);

条件に合う最初の1件を返す
なければ undefined

14. includes

["red", "blue"].includes("blue"); // true

配列に要素が含まれているかチェック
Reactでバリデーションなどにも使える

15. join（HTMLや文字列化に）

const html = fruits.map(f => `<li>${f}</li>`).join("");

join は配列 → 文字列に変換
.map().join("") はReact外でのリスト出力にも使う

16. 三項演算子（?:）

// isLoggedIn = true;
const message = isLoggedIn ? "ようこそ" : "ログインしてください";
console.log(message) // "ようこそ"

if/else を1行で書ける

17. 論理積（&&）

const errorMessage = hasError && "エラー発生";

hasError が true なら "エラー発生" が表示される

18. オプショナルチェイニング（?.）

const city = user?.profile?.address?.city;

user が null や undefined でなければ、profile を見る
profile が null や undefined でなければ、address を見る
address が null や undefined でなければ、city を取り出す
どれか途中で undefined なら、全体が undefined を返す（エラーにはならない)
Reactのデータがまだ届いていないときにも便利

19. Null合体演算子（??）

const name = user.name ?? "ゲスト";

null や undefined のときにデフォルト値を使う
"" や 0 は対象外（?? では無視される）

20. テンプレート文字列（バッククォート）

const intro = `こんにちは${name}です。${age}歳です`;

` `（バッククォート）を使って変数を埋め込む
複数行もOK

21. Object.keys / values / entries

const user = { name: "太郎", age: 25, city: "東京" };
Object.keys(user);   // ['name', 'age', 'city']
Object.values(user); // ['太郎', 25, '東京']
Object.entries(user); // [['name', '太郎'], ['age', 25], ['city', '東京']]

オブジェクトをループで扱いたいときに便利
for...in より安全に使える