実は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より安全に使える