タイトル: JavaScript
SEOタイトル: JavaScript 入門 — ECMAScript / ES6+ の機能・ブラウザと Node.js・エコシステム
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>JavaScript</strong> は Web ブラウザで動く唯一のスクリプト言語として 1995 年に誕生。現在は <strong>ECMAScript</strong> 仕様で標準化</li><li>実行環境は 2 系統: <strong>ブラウザ JS</strong>（DOM 操作、Fetch API）と <strong>Node.js</strong>（サーバーサイド、ファイル I/O）</li><li>ES6（2015）以降のモダン構文: <strong>let / const / アロー関数 / Promise / async-await / Class / Module（import/export）</strong></li><li><strong>TypeScript</strong> は JavaScript の上位互換（静的型付け）。大規模開発では事実上の標準</li><li>エコシステム: パッケージマネージャ (<strong>npm / yarn / pnpm</strong>)、フレームワーク (<strong>React / Vue / Angular / Svelte</strong>)、ビルドツール (<strong>Vite / Webpack / esbuild</strong>)</li></ul></td></tr></table>
<h2>JavaScript とは</h2>
<p><strong>JavaScript (JS)</strong> は、Web ブラウザの動的な挙動を実現するために 1995 年に Brendan Eich が Netscape Navigator 向けに 10 日間で開発した言語です。当初は Java の人気にあやかった命名で、Java とは無関係です。</p>
<p>現在は <strong>ECMA International</strong> が <strong>ECMAScript</strong> として標準化し、毎年 6 月に新バージョン（ES2015、ES2016...）がリリースされます。Node.js の登場以降、サーバーサイド・モバイル・デスクトップアプリ（Electron）まで広がる汎用言語となりました。</p>
<h2>ECMAScript のバージョン進化</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>バージョン</th><th>年</th><th>主な追加機能</th></tr></thead>
<tbody>
<tr><td>ES5</td><td>2009</td><td>strict mode、JSON、Array.forEach/map</td></tr>
<tr><td><strong>ES6 (ES2015)</strong></td><td>2015</td><td><strong>let/const、アロー関数、Class、Promise、Module、Map/Set、テンプレートリテラル</strong></td></tr>
<tr><td>ES2016</td><td>2016</td><td><code>Array.includes</code>、<code>**</code> 演算子</td></tr>
<tr><td>ES2017</td><td>2017</td><td><strong>async / await</strong>、Object.values/entries</td></tr>
<tr><td>ES2018</td><td>2018</td><td>spread/rest for objects、非同期 iteration</td></tr>
<tr><td>ES2019</td><td>2019</td><td>Array.flat、Object.fromEntries、try-catch optional binding</td></tr>
<tr><td>ES2020</td><td>2020</td><td><code>?.</code>（optional chaining）、<code>??</code>（nullish coalescing）、BigInt</td></tr>
<tr><td>ES2021</td><td>2021</td><td>String.replaceAll、Promise.any、論理代入演算子</td></tr>
<tr><td>ES2022</td><td>2022</td><td>top-level await、Class fields、<code>at()</code></td></tr>
<tr><td>ES2023</td><td>2023</td><td>Array.findLast、配列の non-mutating メソッド</td></tr>
</tbody>
</table>
<h2>モダン構文（ES6+）の例</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 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';</code></pre>
<h2>ブラウザ JS と Node.js</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>ブラウザ JS</th><th>Node.js</th></tr></thead>
<tbody>
<tr><td>実行環境</td><td>Chrome / Firefox / Safari 等のブラウザ</td><td>サーバー（V8 エンジン上で動作）</td></tr>
<tr><td>グローバルオブジェクト</td><td><code>window</code> / <code>document</code></td><td><code>global</code> / <code>process</code></td></tr>
<tr><td>I/O</td><td><code>fetch</code>、DOM API</td><td><code>fs</code>、<code>http</code>、<code>net</code> 等</td></tr>
<tr><td>モジュール</td><td>ESM（<code><script type="module"></code>）</td><td>CommonJS（<code>require</code>）/ ESM</td></tr>
<tr><td>用途</td><td>UI、SPA、PWA</td><td>API サーバー、CLI、ツール</td></tr>
</tbody>
</table>
<h2>DOM 操作の基礎</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 要素の取得
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));</code></pre>
<h2>TypeScript との関係</h2>
<p>TypeScript (TS) は Microsoft 製の<strong>JavaScript の上位互換言語</strong>。静的型付け、インターフェース、Generics 等を追加し、コンパイル時に JavaScript に変換されます。大規模アプリでは TS が事実上の標準です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-typescript">// 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" }
];</code></pre>
<h2>エコシステム</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>カテゴリ</th><th>代表ツール</th></tr></thead>
<tbody>
<tr><td>パッケージマネージャ</td><td><strong>npm</strong>（標準）、<strong>yarn</strong>（高速）、<strong>pnpm</strong>（省ディスク）</td></tr>
<tr><td>UI フレームワーク</td><td><strong>React</strong>（Meta）、<strong>Vue</strong>、<strong>Angular</strong>（Google）、<strong>Svelte</strong>、<strong>Solid</strong></td></tr>
<tr><td>SSR / メタフレームワーク</td><td><strong>Next.js</strong>（React）、<strong>Nuxt</strong>（Vue）、<strong>Remix</strong>、<strong>Astro</strong></td></tr>
<tr><td>ビルドツール</td><td><strong>Vite</strong>（高速）、<strong>Webpack</strong>、<strong>esbuild</strong>、<strong>Rollup</strong>、<strong>Parcel</strong></td></tr>
<tr><td>テスト</td><td><strong>Jest</strong>、<strong>Vitest</strong>、<strong>Playwright</strong>、<strong>Cypress</strong></td></tr>
<tr><td>Lint / Format</td><td><strong>ESLint</strong>、<strong>Prettier</strong>、<strong>Biome</strong></td></tr>
<tr><td>Node.js ランタイム</td><td><strong>Node.js</strong>、<strong>Deno</strong>、<strong>Bun</strong></td></tr>
</tbody>
</table>
<h2>Hello World と簡単な動作確認</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 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</code></pre>
<h2>FAQ</h2>
<p><strong>Q: JavaScript と Java の関係は？</strong><br />
A: <strong>全く別物</strong>。1995 年当時の Java ブームに便乗した命名というだけで、文法も思想も異なります。</p>
<p><strong>Q: var / let / const どれを使う？</strong><br />
A: <strong>const をデフォルト</strong>、再代入が必要なときだけ <strong>let</strong>。<code>var</code> は変数の巻き上げ・関数スコープの罠があり<strong>使わない</strong>こと。</p>
<p><strong>Q: jQuery はまだ必要？</strong><br />
A: ES6+ で多くの jQuery の機能（<code>querySelector</code>、<code>fetch</code>、<code>classList</code>）がネイティブ実装されました。新規プロジェクトでは<strong>不要</strong>。</p>
<p><strong>Q: TypeScript を学ぶべき？</strong><br />
A: 規模が大きくなる予定があるなら必須。型による補完・リファクタリング支援は強力。React + TS が現在の Web 開発標準です。</p>