JavaScript 入門講座で学べること

JavaScript 入門講座の全体像を案内します。ブラウザと Node.js という 2 つの実行場所の違い、基礎・文法・オブジェクト指向・ブラウザ API という 4 カテゴリの学習順序を整理します。

本講座は、ブラウザで動く JavaScript を実務レベルで書けるようになるための無料教材です。変数や配列といった基礎から、条件分岐・ループ・関数、クラスを使ったオブジェクト指向、さらに画面を操作する DOM（HTML の要素を JavaScript から読み書きする仕組み）や通信を行う fetch まで、図解と練習問題を通して順番に学んでいきます。

この記事では、JavaScript がどこで動く言語なのか、そして本講座が何をどの順番で扱うのかを説明します。

JavaScript を学ぶ理由 — ブラウザがそのまま実行できる言語

ボタンを押すと表示が切り替わる。入力内容をその場で検証する。サーバーから商品データを取得して一覧に並べる。Web ページ上のこうした動きは、すべて JavaScript が実現しています。

Web ブラウザがソースコードをそのまま実行できるプログラミング言語は JavaScript だけなので、画面上の動きを作るなら、必ず JavaScript を書くことになります。

さらに Node.js（ブラウザの外で JavaScript を実行するためのソフトウェア）が広く使われるようになり、今ではサーバー側の処理やビルドツールも同じ言語で書けます。JavaScript を 1 つ覚えるだけで、画面側とサーバー側の両方を開発できます。

JavaScript が動く場所 — ブラウザ・Node.js・本サイトのコンソール

同じ JavaScript でも、動かす場所によって使える機能が変わります。変数・配列・オブジェクト・関数・クラスといった言語そのものの機能は、どこで動かしても変わりません。

変わるのは、実行する場所が追加で提供している機能です。ブラウザなら画面（DOM）やデータをブラウザ内に保存する機能、Node.js ならファイルの読み書きやサーバーを立てる機能が使えます。この違いを理解しておくと、コードが動かないときに原因を特定しやすくなります。

次のコード例は、まだ読めなくて構いません。3 つの場所で何が違うのかだけを見てください。

JavaScript が動く 3 つの場所

言語そのものの機能は 3 つとも共通で、上乗せされる機能だけが違う。本サイトのコンソールは画面を持たず、結果は文字で返る。

// どこで動かしても同じ ― 言語そのものの機能
const cart = [
  { name: "マグカップ", price: 1200 },
  { name: "コースター", price: 400 },
];
console.log(cart.length);   // 2

// ブラウザだけで動く ― 画面を書き換える機能
document.querySelector("#total").textContent = "1600 円";

// Node.js だけで動く ― ファイルを読む機能
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));

本サイトのコンソールには画面がありません

練習問題のコンソールは、画面表示のないブラウザ環境でコードを実行します。要素を作っても画面には何も現れないため、実行結果は console.log で出力した文字を読んで確認します。alert のようなダイアログも表示できません。ブラウザ API を学ぶ章でも、作った要素の中身を文字として出力し、それを見て動作を確かめます。

本講座で身につくこと — 4 つのカテゴリ

本講座は4 つのカテゴリで構成されています。値とデータ構造の基礎から始めて、制御構文と関数、クラスを使ったオブジェクト指向へと進み、最後にブラウザ API（DOM 操作・イベント・通信・保存）で画面とデータのやり取りを学びます。

上から順に読み進めれば、前の記事で学んだ内容がそのまま次の記事の土台になります。ただし条件を判定する if だけは例外で、値の比較を扱う基礎の記事でも、いちばん単純な形で登場します。

4 カテゴリの学習順序と扱う内容

上段が進む順番、下段がそのカテゴリで扱う内容。前のカテゴリで扱った内容だけを使って次へ進む構成。

カテゴリ	主に学ぶこと	代表トピック
1 基礎	値とデータ構造	let と const、数値、文字列、配列、オブジェクト、JSON
2 文法	制御構文と関数	if / for、関数、アロー関数、map / filter / reduce、例外処理、非同期
3 オブジェクト指向	クラス設計	class、constructor、継承、getter / setter、this
4 ブラウザ API	画面と通信	要素の取得と生成、イベント、フォーム、fetch、localStorage

各記事は解説 → 図解 → 練習問題 → クイズの順に進みます。練習問題はページ内のコンソールでそのまま実行できるので、エディタをインストールする必要も、環境を用意する必要もありません。

読むだけで終わらせず、毎回自分でコードを書いて動かしながら進められる構成にしています。

生成 AI の時代に基礎が必要な理由 — エラーを読んで直す

生成 AI がコードを書いてくれる場面は増えました。しかし、出てきたコードを読み、実際に動かし、エラーで止まったときに直すのは人間の仕事です。

JavaScript は値の型を宣言せずに受け渡せるため、想定と違う値が入っていてもその場では止まらず、まったく別の行で初めてエラーになります。どこで値がおかしくなったのかを追いかけられるかどうかが、そのまま作業速度の差になります。

エラーで止まったとき、最初に読むべきはエラーメッセージです。JavaScript のエラーメッセージは、その多くが種類・状況・対象を 1 行にまとめて表示します。この 3 つを分けて読めば、直すべき箇所を「失敗した行の 1 つ手前で扱っている値」まで絞り込めます。

次の例に出てくる プロパティ（オブジェクトが持つ、名前と値の組）と undefined（値がまだ入っていないことを表す値）は、それぞれ第 8 回と第 9 回で詳しく説明します。

const user = { name: "佐藤", age: 34 };

// user に profile というプロパティは無い
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')

エラーメッセージを 3 つに分けて読む

上段がメッセージの断片、中段がその意味。直す先は age ではなく、その 1 つ手前の user.profile だと分かる。

本講座では、エラーが出る場面をあえて練習問題に用意し、メッセージを読んで自分で直すところまで練習します。4 つのカテゴリを上から順に進めれば、実務で使われる JavaScript を自分で書き、エラーで止まったときに自分で直せるようになります。

次の記事では、変数の宣言に使う let と const を実際に書きながら学んでいきます。

JavaScript 基礎の一覧へ戻る