タイトル: JavaScript
SEOタイトル: JavaScript 入門 — ECMAScript / ES6+ の機能・ブラウザと Node.js・エコシステム
| この記事の要点 |
- JavaScript は Web ブラウザで動く唯一のスクリプト言語として 1995 年に誕生。現在は ECMAScript 仕様で標準化
- 実行環境は 2 系統: ブラウザ JS（DOM 操作、Fetch API）と Node.js（サーバーサイド、ファイル I/O）
- ES6（2015）以降のモダン構文: let / const / アロー関数 / Promise / async-await / Class / Module（import/export）
- TypeScript は JavaScript の上位互換（静的型付け）。大規模開発では事実上の標準
- エコシステム: パッケージマネージャ (npm / yarn / pnpm)、フレームワーク (React / Vue / Angular / Svelte)、ビルドツール (Vite / Webpack / esbuild)
|
JavaScript とは
JavaScript (JS) は、Web ブラウザの動的な挙動を実現するために 1995 年に Brendan Eich が Netscape Navigator 向けに 10 日間で開発した言語です。当初は Java の人気にあやかった命名で、Java とは無関係です。
現在は ECMA International が ECMAScript として標準化し、毎年 6 月に新バージョン（ES2015、ES2016...）がリリースされます。Node.js の登場以降、サーバーサイド・モバイル・デスクトップアプリ（Electron）まで広がる汎用言語となりました。
ECMAScript のバージョン進化
| バージョン | 年 | 主な追加機能 |
|---|
| ES5 | 2009 | strict mode、JSON、Array.forEach/map |
| ES6 (ES2015) | 2015 | let/const、アロー関数、Class、Promise、Module、Map/Set、テンプレートリテラル |
| ES2016 | 2016 | Array.includes、** 演算子 |
| ES2017 | 2017 | async / await、Object.values/entries |
| ES2018 | 2018 | spread/rest for objects、非同期 iteration |
| ES2019 | 2019 | Array.flat、Object.fromEntries、try-catch optional binding |
| ES2020 | 2020 | ?.（optional chaining）、??（nullish coalescing）、BigInt |
| ES2021 | 2021 | String.replaceAll、Promise.any、論理代入演算子 |
| ES2022 | 2022 | top-level await、Class fields、at() |
| ES2023 | 2023 | Array.findLast、配列の non-mutating メソッド |
モダン構文（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
| 項目 | ブラウザ JS | Node.js |
|---|
| 実行環境 | Chrome / Firefox / Safari 等のブラウザ | サーバー（V8 エンジン上で動作） |
| グローバルオブジェクト | window / document | global / process |
| I/O | fetch、DOM API | fs、http、net 等 |
| モジュール | ESM（
|
