JavaScript 入門 — ECMAScript / ES6+ の機能・ブラウザと Node.js・エコシステム

JavaScript とは

JavaScript (JS) は、Web ブラウザの動的な挙動を実現するために 1995 年に Brendan Eich が Netscape Navigator 向けに 10 日間で開発した言語です。当初は Java の人気にあやかった命名で、Java とは無関係です。

現在は ECMA International が ECMAScript として標準化し、毎年 6 月に新バージョン（ES2015、ES2016...）がリリースされます。Node.js の登場以降、サーバーサイド・モバイル・デスクトップアプリ（Electron）まで広がる汎用言語となりました。

ECMAScript のバージョン進化

モダン構文（ES6+）の例

// let / const（var は使わない）
const PI = 3.14;
let count = 0;
count++;

// テンプレートリテラル
const name = "JavaScript";
console.log(`Hello, ${name}!`);

// アロー関数
const add = (a, b) => a + b;
const square = x => x * x;

// 分割代入
const user = { name: "Alice", age: 30 };
const { name: userName, age } = user;
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// スプレッド構文
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const merged = { ...user, role: "admin" };

// クラス
class Animal {
    constructor(name) { this.name = name; }
    speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
    speak() { return `${this.name} barks`; }
}

// Promise / async-await
async function fetchUser(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
        if (!res.ok) throw new Error("Network error");
        return await res.json();
    } catch (err) {
        console.error(err);
    }
}

// Optional chaining と Nullish coalescing
const city = user?.address?.city ?? "Unknown";

// 配列メソッド（イミュータブル）
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const sum = nums.reduce((acc, n) => acc + n, 0);

// モジュール（ESM）
// utils.js
export const greet = name => `Hello ${name}`;
export default function add(a, b) { return a + b; }

// main.js
import add, { greet } from './utils.js';

ブラウザ JS と Node.js

DOM 操作の基礎

// 要素の取得
const btn = document.getElementById("myBtn");
const items = document.querySelectorAll(".item");
const first = document.querySelector(".item:first-child");

// イベント
btn.addEventListener("click", (e) => {
    console.log("Clicked!", e.target);
});

// 要素の作成・追加
const div = document.createElement("div");
div.textContent = "Hello";
div.classList.add("greeting");
document.body.appendChild(div);

// 属性とスタイル
btn.setAttribute("disabled", "");
btn.style.color = "red";
btn.classList.toggle("active");

// Fetch API でデータ取得
fetch("/api/data")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

TypeScript との関係

TypeScript (TS) は Microsoft 製のJavaScript の上位互換言語。静的型付け、インターフェース、Generics 等を追加し、コンパイル時に JavaScript に変換されます。大規模アプリでは TS が事実上の標準です。

// TypeScript の例
interface User {
    id: number;
    name: string;
    email?: string;  // optional
}

function getUser(id: number): Promise<User> {
    return fetch(`/api/users/${id}`).then(res => res.json());
}

const users: User[] = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob", email: "bob@example.com" }
];

エコシステム

Hello World と簡単な動作確認

# Node.js インストール（macOS）
brew install node
node --version    # v20.x
npm --version

# 1 行実行
node -e "console.log('Hello, JavaScript!')"

# ファイル実行
echo "console.log('Hello')" > hello.js
node hello.js

# npm でプロジェクト初期化
mkdir my-app && cd my-app
npm init -y
npm install express

FAQ

Q: JavaScript と Java の関係は？
A: 全く別物。1995 年当時の Java ブームに便乗した命名というだけで、文法も思想も異なります。

Q: var / let / const どれを使う？
A: const をデフォルト、再代入が必要なときだけ let。var は変数の巻き上げ・関数スコープの罠があり使わないこと。

Q: jQuery はまだ必要？
A: ES6+ で多くの jQuery の機能（querySelector、fetch、classList）がネイティブ実装されました。新規プロジェクトでは不要。

Q: TypeScript を学ぶべき？
A: 規模が大きくなる予定があるなら必須。型による補完・リファクタリング支援は強力。React + TS が現在の Web 開発標準です。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。