JavaScript入門チュートリアル（初心者向け）

JavaScriptとは何か、何に使われるか

JavaScriptはECMAScriptとして標準化された動的型付け言語です。もともとWebページ向けに作られ、クリックへの反応、ページの更新、サーバーとの通信を担います。現在ではNode.js、Deno、Bunを通じてサーバーやツールでも、デスクトップアプリ（Electron）やモバイルアプリ（React Native）でも動きます。フロントエンド開発者、フルスタック開発者をはじめ、Webを作る人なら誰でも使います。このページの現代的な構文（let、const、アロー関数、クラス、モジュール）はES2015以降の仕様で追加されたものです。

Hello, world を実行する

方法1：任意のWebページを開き、F12キー（Macでは Cmd+Option+J）で開発者コンソールを開いて、下の1行を入力します。方法2：nodejs.orgからNode.jsをインストールし、この1行を hello.js として保存して実行します。

console.log("Hello, world");

node hello.js
# Hello, world

変数と基本の型

再代入しない値には const、変化する値には let を使います。ブロックスコープを無視する古い var は避けましょう。typeof は値の型を返します。

const name = "Ada";
let count = 1;
count += 1;
console.log(`${name} has ${count} items`); // Ada has 2 items
console.log(0.1 + 0.2);                    // 0.30000000000000004
console.log(Number("12") + 1, "12" + 1);   // 13 121

制御構文：if、ループ、等価比較

比較には常に === と !== を使ってください。緩い == は先に型変換を行うため、0 == "" は true になります。

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B"); // B
} else {
  console.log("C");
}
for (let i = 0; i < 3; i++) console.log(i); // 0 1 2
for (const fruit of ["apple", "pear"]) console.log(fruit);
let n = 10;
while (n > 1) n = Math.floor(n / 2);
console.log(n); // 1

関数

関数は値なので、変数に代入したり、他の関数に渡したり、戻り値にしたりできます。アロー関数は短く書ける形式で、コールバックによく使われます。

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
const square = (x) => x * x;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(greet("Lin"));     // Hello, Lin!
console.log(square(5));        // 25
console.log(sum(1, 2, 3, 4));  // 10

配列とオブジェクト

配列は順序のあるリスト、オブジェクトは文字列のキーと値の対応です。どちらも参照渡しです。キーが文字列でない場合や値を重複させたくない場合は、組み込みの Map や Set が使えます。

const nums = [3, 1, 2];
nums.push(5);
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
console.log(doubled, evens);             // [ 6, 2, 4, 10 ] [ 2 ]
console.log([...nums].sort((a, b) => a - b)); // [ 1, 2, 3, 5 ]
const user = { name: "Ann", age: 31 };
user.city = "Oslo";
const { name, age } = user;              // destructuring
console.log(name, age, Object.keys(user)); // Ann 31 [ 'name', 'age', 'city' ]
console.log(JSON.stringify(user));       // {"name":"Ann","age":31,"city":"Oslo"}

特徴的な機能：Promiseによる非同期処理

JavaScriptはイベントループを備えた1本のスレッドでコードを実行します。時間のかかる処理（タイマー、ネットワーク、ファイル）はブロックせず、後で完了するPromiseを返します。async 関数では await を使って、この処理を上から下へ順に書けます。

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function main() {
  console.log("start");
  await wait(500);
  console.log("half a second later");
  const [a, b] = await Promise.all([wait(100).then(() => 1), wait(200).then(() => 2)]);
  console.log(a + b); // 3
}
main();
console.log("main() was called"); // prints before "half a second later"

クラス（class Dog extends Animal {}）、モジュール（import と export）、オプショナルチェーン（user?.address?.city）、Null合体演算子（value ?? "default"）なども、よく使う現代的な機能です。

エラー処理

Error オブジェクトを throw し、try/catch で捕捉します。async 関数では、拒否されたPromiseは await の位置で例外になります。

function parseAge(text) {
  const age = Number(text);
  if (!Number.isInteger(age) || age < 0) {
    throw new Error(`invalid age: ${text}`);
  }
  return age;
}
try {
  console.log(parseAge("41"));  // 41
  console.log(parseAge("abc"));
} catch (err) {
  console.log(err.message);     // invalid age: abc
} finally {
  console.log("done");
}

小さな完成プログラム：取得して要約する

このNode.jsスクリプト（Node 18以降は fetch が組み込み済み）は、公開APIからJSONをダウンロードして短い要約を表示します。repos.mjs として保存し、node repos.mjs nodejs で実行します。

const org = process.argv[2] ?? "nodejs";
async function topRepos(name, n = 3) {
  const res = await fetch(`https://api.github.com/orgs/${name}/repos?per_page=100`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const repos = await res.json();
  return repos
    .sort((a, b) => b.stargazers_count - a.stargazers_count)
    .slice(0, n)
    .map((r) => `${r.stargazers_count}\t${r.name}`);
}
try {
  const lines = await topRepos(org);
  console.log(lines.join("\n"));
} catch (err) {
  console.error("failed:", err.message);
  process.exitCode = 1;
}

拡張子 .mjs によりファイルがESモジュールとして扱われ、トップレベルで await が使えます。

初心者がよくやる間違い

• === の代わりに == を使い、予想外の型変換が起こる。
• await を忘れ、値ではなく保留中の Promise オブジェクトを受け取ってしまう。
• const でオブジェクトが不変になると思い込む。禁止されるのは再代入だけで、obj.x = 1 は実行できます。必要なら Object.freeze を使います。
• オブジェクトや配列を === で比較する。これは中身ではなく同一性を比べます。
• メソッドをコールバックとして渡すと this が失われる。アロー関数か .bind(obj) を使います。

次のステップ

最も充実した無料のリファレンスであるMDNのJavaScriptガイドを読み、ブラウザのDOM（document.querySelector、イベント）で練習しましょう。続いて、npmとモジュール、フロントエンド向けのReact・Vue・Svelteなどのフレームワーク、またはサーバー向けのNode.jsを学びます。JavaScriptにTypeScriptを加えると、静的型付けとエディタの強力な支援が得られます。