JavaScript基礎（Pythonとの対比）

JavaScriptはブラウザで動く唯一のプログラミング言語であり、フロントエンド開発の基盤である。Python経験者にとって多くの概念は既知で、主に構文と非同期処理の違いを押さえることが学習の近道となる。

変数宣言

# Python
x = 10
name = "Wataru"

// JavaScript
const x = 10;        // 再代入不可（推奨）
let name = "Wataru"; // 再代入可能
// var は古い書き方、現代では使わない

const を基本とし、再代入が必要な場合のみ let を使う。セミコロンは省略可能だが、一貫性のため付けることが多い。

関数定義

# Python
def greet(name):
    return f"Hello, {name}"

# ラムダ
double = lambda x: x * 2

// JavaScript - 関数宣言
function greet(name) {
  return `Hello, ${name}`;  // テンプレートリテラル
}

// アロー関数（現代の書き方）
const greet = (name) => `Hello, ${name}`;
const double = (x) => x * 2;

配列とオブジェクト

# Python
nums = [1, 2, 3]
user = {"name": "Wataru", "age": 40}

// JavaScript
const nums = [1, 2, 3];
const user = { name: "Wataru", age: 40 };  // キーはクォート不要

// 配列メソッド（Pythonのリスト内包表記に相当）
const doubled = nums.map(n => n * 2);      // [2, 4, 6]
const evens = nums.filter(n => n % 2 === 0); // [2]
const sum = nums.reduce((acc, n) => acc + n, 0); // 6

条件分岐・ループ

// if/else はPythonとほぼ同じ
if (score >= 80) {
  console.log("合格");
} else {
  console.log("不合格");
}

// for...of（Pythonのfor...inに相当）
for (const item of items) {
  console.log(item);
}

// forEach（配列の各要素に処理）
items.forEach(item => console.log(item));

非同期処理（最重要）

JavaScriptはシングルスレッドで動くため、時間のかかる処理（APIコール・DBアクセス）を非同期で行う。Pythonの asyncio に対応する概念。

# Python
import asyncio
async def fetch_user(id):
    result = await fetch_from_db(id)
    return result

// JavaScript - async/await
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);  // APIコール
  const data = await response.json();                // JSON解析
  return data;
}

// エラーハンドリング
async function fetchUserSafe(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("取得失敗:", error);
  }
}

Promise: 非同期処理の結果を表すオブジェクト。async/await はPromiseを扱いやすくした構文糖衣。

分割代入とスプレッド構文

Reactでよく使うモダンな構文：

// 分割代入
const { name, age } = user;          // オブジェクト
const [first, second] = [1, 2, 3];   // 配列

// スプレッド構文（オブジェクトの結合・コピー）
const updated = { ...user, age: 41 }; // userをコピーしてageを上書き
const combined = [...arr1, ...arr2];   // 配列の結合

DOM操作（参考知識）

Reactを使う場合は直接DOMを操作しないが、仕組みとして知っておく：

const btn = document.querySelector("#submit-btn");
btn.addEventListener("click", (event) => {
  console.log("クリックされた");
});

Reactはこの操作を抽象化し、「状態が変わったらUIを自動的に更新する」仕組みを提供している。

参考リソース

• MDN JavaScript Guide（https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide）
• JavaScript.info（https://ja.javascript.info/）— 最も体系的なJS学習サイト（日本語あり）
• 『You Don’t Know JS Yet』Kyle Simpson（https://github.com/getify/You-Dont-Know-JS）— 無料公開

---

確認クイズ

Q1. JavaScriptで変数宣言に const を基本とし let を補助的に使う理由を説明してください。

正解: const は再代入不可のため、意図しない値の書き換えを防げる。再代入が必要な場合のみ let を使う

解説: var は古い書き方でスコープの問題を引き起こしやすいため現代では使わない。const を基本にすることでコードの意図が明確になり、バグを減らせる。

Q2. Pythonのラムダ式 lambda x: x * 2 に相当するJavaScriptのアロー関数として正しいものはどれか。　A. function(x) { x * 2 }　B. (x) => x * 2　C. def double(x): return x * 2　D. const x => x * 2

正解: B. (x) => x * 2

解説: JavaScriptのアロー関数はPythonのラムダに対応する。(引数) => 式 の形で書け、ブロック本体なしの場合は式の値が自動的に返される。

Q3. [1, 2, 3].filter(n => n % 2 === 0) の実行結果はどれか。　A. [1, 3]　B. [2]　C. [1, 2, 3]　D. []

正解: B. [2]

解説: filter は条件を満たす要素だけを新しい配列として返す。n % 2 === 0 は偶数の条件なので、1〜3のうち偶数は2のみ。Pythonのリスト内包表記やfilter関数と同じ概念である。

Q4. [1, 2, 3].reduce((acc, n) => acc + n, 0) の結果はどれか。　A. 0　B. 3　C. 6　D. [1, 2, 3]

正解: C. 6

解説: reduce は配列の全要素を1つの値に集約する。初期値0から始まり、各要素を順番に加算していく（0+1+2+3=6）。Pythonの functools.reduce に相当する。

Q5. JavaScriptで for...of ループはPythonのどの構文に相当するか。

正解: Pythonの for...in ループに相当する

解説: for (const item of items) はPythonの for item in items: と同様に配列・イテラブルの各要素を順に取り出す。JavaScriptの for...in はオブジェクトのキーを列挙するもので別物なので混同しないよう注意が必要。

Q6. JavaScriptが非同期処理を必要とする理由を説明してください。

正解: JavaScriptはシングルスレッドで動くため、時間のかかる処理（APIコール・DBアクセス）を同期的に実行するとUIがブロックされてしまうため

解説: Pythonの asyncio と同じ動機で非同期処理が必要になる。async/await を使うことで、待機中も他の処理を進められる。

Q7. 以下のコードで response.ok の確認が重要な理由は何か。if (!response.ok) throw new Error(...)

正解: fetch はHTTPエラー（4xx・5xx）でもPromiseを拒否しないため、ステータスコードを自分で確認する必要がある

解説: fetch はネットワークエラーの場合のみrejectするが、404や500などのHTTPエラーはresolveしてしまう。そのため response.ok（ステータス200〜299）を明示的にチェックしてエラーを投げる必要がある。

Q8. const { name, age } = user の構文名と、何を行っているか説明してください。

正解: 分割代入（destructuring assignment）。オブジェクトの name プロパティと age プロパティをそれぞれ同名の変数に取り出す

解説: const name = user.name; const age = user.age; と同等だが、より簡潔に書ける。Reactのpropsやhooksの戻り値を受け取る際によく使われる構文である。

Q9. const updated = { ...user, age: 41 } のスプレッド構文では何が起きるか。

正解: user オブジェクトのすべてのプロパティをコピーし、その後 age を41で上書きした新しいオブジェクトを作成する

解説: ...user でuserの全プロパティを展開し、後に書いた age: 41 が同名プロパティを上書きする。元の user は変更されない（イミュータブルな更新）。Reactのstate更新でよく使われるパターンである。

Q10. Promiseとasync/awaitの関係を説明してください。

正解: Promiseは非同期処理の結果を表すオブジェクトで、async/awaitはPromiseをより読みやすく扱うための構文糖衣（シンタックスシュガー）

解説: async 関数は必ずPromiseを返し、await はPromiseが解決されるまで関数の実行を一時停止する。内部的にはPromiseを使っており、async/awaitを使うとコールバックや .then() チェーンより読みやすい非同期コードが書ける。

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

• 対応 Week: W2
• 参照ブランチ:
• W2: reference/week-2
• 対応 checklist 項目: （直接対応なし）

ブランチの作り方・見方は b00-curriculum-map を参照してください。