JavaScript 入門講座

ブラウザ上でコードを実行しながら JavaScript を体系的に学べる無料講座です。let と const・数値・文字列・配列・オブジェクトの基礎から、if / for・関数・アロー関数・map / filter / reduce・例外処理・非同期、class と継承のオブジェクト指向、DOM 操作・イベント・fetch・localStorage といったブラウザ API まで、図解と練習問題で入門から実務レベルまで進みます。環境構築は不要です。

0/55テキスト終了（0%）

JavaScript 基礎

JavaScript 入門講座で学べること
JavaScript がブラウザと Node.js で動く仕組みと、本講座 4 カテゴリの学習順序、エラーメッセージの読み方を案内します。
let と const — 再代入と再宣言の制御
const と let の使い分け、const への再代入で出る TypeError と再宣言で出る SyntaxError、camelCase の命名ルールを扱います。
数値と算術演算 — Number 型と Math
整数も小数も同じ Number 型で扱う仕組みと、剰余・べき乗、Math による丸め、toFixed の桁そろえ、小数の誤差の避け方を扱います。
文字列とテンプレートリテラル
3 種類のクォートの使い分けとテンプレートリテラルによる値の埋め込み、trim や slice での整形、split と join、replaceAll と padStart を扱います。
真偽値と比較 — == と === の違い
型と値の両方を見る === と型を変換して比べる == の違い、比較演算子と論理演算子、if が false と見なす falsy 6 種、|| による既定値を扱います。
型変換 — Number / String / parseInt と暗黙変換
typeof での型の確認、Number / String / Boolean による明示的な変換、加算だけが文字列連結になる暗黙の変換、parseInt と parseFloat、Number.isNaN での失敗検出を扱います。
配列 — 追加・削除・取り出し
index と length での取り出し、push / pop / shift / unshift による出し入れ、includes と indexOf での判定、slice と splice の使い分けを扱います。
オブジェクト — プロパティの読み書き
キーと値の組でデータをまとめるオブジェクトの作り方、ドット記法とブラケット記法の使い分け、delete と in、Object.keys / values / entries を扱います。
null と undefined — ?. と ?? で安全に読む
値が入っていない状態を表す null と undefined の違い、入れ子の途中が無くても止まらずに読む ?.、0 や空文字列を残したまま既定値を当てる ?? を扱います。
分割代入 — オブジェクトと配列から値を取り出す
オブジェクトのキー名と配列の位置に合わせて、必要な値だけを一度に変数へ取り出す分割代入を、既定値・別名での受け取り・rest まで扱います。
スプレッド構文 — コピー・結合・設定の上書き
配列やオブジェクトの中身をその場に並べるスプレッド構文で、元を変えずにコピー・結合し、既定の設定にユーザーの変更だけを重ねる書き方を扱います。
Map と Set — 重複排除とキー付き集計
同じ値を 1 つしか持たない Set による重複排除と、キーと値の組を登録順に持つ Map の set / get、キーの型や並び順から見た Object との使い分けを扱います。
参照とコピー — 配列・オブジェクトの落とし穴
配列やオブジェクトの代入で渡るのは参照だけである点、=== が参照を比べる点、スプレッド構文の浅いコピーと structuredClone の深いコピー、Object.freeze を扱います。
JSON — stringify と parse
オブジェクトを文字列にする JSON.stringify と文字列から戻す JSON.parse、第 3 引数による字下げ、壊れた文字列で起きる SyntaxError、往復で失われる値を扱います。
データ型まとめ — typeof と判定の早見表
7 つのプリミティブと Object の分類、typeof の戻り値、null と配列がどちらも object になる理由と Array.isArray、数値として扱えるかの判定をまとめます。

JavaScript 文法

条件分岐 — else if / 三項演算子 / switch
上から順に判定する else if の連鎖と条件を並べる順序、値そのものを返す三項演算子、1 つの値を候補と照合する switch と break の役割を扱います。
繰り返し — for / for...of / for...in
初期化・条件・更新の 3 つの式で回数を数える for、要素をそのまま受け取る for...of と entries、キーをたどる for...in、二重ループの組み立て方を扱います。
条件で繰り返す — while / do...while / break / continue
条件が成り立つ間だけ繰り返す while、本体を先に実行する do...while、無限ループの避け方、その周を飛ばす continue とループを抜ける break を扱います。
関数宣言と関数式 — 引数と return
処理に名前を付けて呼び出す function 宣言、位置で決まる引数の対応と return が返す値、関数を値として変数に入れる関数式、return を書き忘れたときの undefined を扱います。
アロー関数 — 省略形とオブジェクトを返す書き方
=> で関数を作るアロー関数の基本形、引数の丸括弧と本体の波括弧を省く省略形、オブジェクトを返すときの丸括弧、複数行のブロック本体と return を扱います。
デフォルト引数と可変長引数 — 既定値と rest の受け取り方
引数を省いたときに使われるデフォルト引数、undefined と null で結果が変わる既定値の条件、残りの引数を配列でまとめる rest 引数、設定をオブジェクトで渡す options パターンを扱います。
スコープとホイスティング — 変数が読める範囲と巻き上げ
波括弧で区切られるブロックスコープと関数スコープ、内側の宣言が外側を隠すシャドーイング、function 宣言の巻き上げと let の TDZ、var を使わない理由を扱います。
クロージャ — 外側の変数を覚える関数
関数が外側のスコープの変数を覚えるクロージャを扱います。呼び出しをまたいで残るカウンター、設定を固定した関数を返す関数ファクトリ、ループの中で作る関数まで確かめます。
高階関数とコールバック — 関数を渡す・関数を返す
関数を引数として受け取る高階関数と、渡されて呼び出されるコールバックを扱います。forEach での 1 件ずつの処理、判定を受け取る自作 filter、関数を返す 2 段呼び出しまで確かめます。
map と filter — 配列を変換するか絞り込むか
配列の各要素を変換する map と、条件に合う要素だけを残す filter を扱います。元の配列を変えない性質、filter から map へつなぐチェーン、位置を受け取る index 引数まで確かめます。
reduce — 配列を 1 つの値に畳み込む
配列を 1 つの値にまとめる reduce を扱います。アキュムレータと初期値の受け渡し、合計・最大・カテゴリ別の集計、空の配列で起きる TypeError まで確かめます。
並べ替えと検索 — sort / find / some / every
比較関数の戻り値で並び順を決める sort、元の配列を残す toSorted、条件に合う 1 件を返す find と findIndex、真偽値を返す some と every を扱います。
例外を受け止める — try / catch / finally
try と catch で例外を受け止める書き方、必ず実行される finally、catch した例外を呼び出し側へ投げ直す throw、instanceof による種類ごとの分岐を扱います。
例外を発生させる — throw とカスタムエラー
throw new Error で不正な値を見つけた場所から例外を発生させる書き方、extends Error による独自の種類の定義、instanceof を書く順番、元の例外を残す cause を扱います。
Promise — 非同期の結果を then と catch で受け取る
あとで決まる結果を表す Promise の pending・fulfilled・rejected の状態、setTimeout を包んだ delay 関数、then / catch / finally による受け取り、then のチェーン、Promise.all での同時実行を扱います。
async / await — Promise の結果を上の行から順に待つ
呼ぶと Promise を返す async 関数と await による待ち方、rejected を try / catch で受け止める書き方、await を並べた直列と Promise.all による並列の違い、await を付け忘れたときに変数へ Promise が入る落とし穴を扱います。
イテレータとジェネレータ — 値を 1 つずつ取り出す
yield の行で止まりながら値を返すジェネレータと next() の進み方、for...of が従うイテレータプロトコル、スプレッド構文での配列化と読み切ったあとの状態、終わりの無い列から必要な数だけ取り出す遅延評価を扱います。
文法まとめ — 配列メソッド・非同期・例外の早見表
配列メソッドを戻り値の形で選ぶ早見表、チェーンを続けられる条件、コールバック方式・then・await の 3 つの待ち方、同期の throw と Promise の失敗を受け取る場所の違いをまとめます。

JavaScript オブジェクト指向

class の基本 — 定義とインスタンス化
同じ形のデータを何件も作るための class を扱います。constructor と new によるインスタンスの作り方、this で自分の値を読むメソッド、オブジェクトリテラルとの使い分けを学べます。
constructor とクラスフィールド — 初期値の決め方
インスタンスの初期値を決める constructor とクラスフィールドを扱います。引数の受け取り方、フィールドが入る順番、省いた引数の既定値、作る時点で不正な値を止める書き方を学べます。
インスタンスメンバーと static — class が持つ値と処理
インスタンスではなく class そのものに値や処理を持たせる static を扱います。作った件数を数える static フィールド、JSON から作るファクトリメソッド、共通の定数、インスタンスメンバーとの使い分けを学べます。
getter と setter — 読み書きに処理を挟む
プロパティを読んだとき・代入したときに処理を挟む getter と setter を扱います。読むたびに計算する計算プロパティ、代入値の検証、constructor から setter を通す書き方、読み取り専用のプロパティを学べます。
private フィールド (#) とカプセル化
名前の先頭に # を付けて、class の外から読み書きできなくする private フィールドと private メソッドを扱います。外から書いたときに実行前に出る SyntaxError、慣習の _ との違いを学べます。
継承 — extends と super
既存の class を引き継いで新しい class を作る継承を扱います。extends の書き方、子クラスの constructor で呼ぶ super()、オーバーライド、親のメソッドを呼ぶ super.メソッド名() を学べます。
ポリモーフィズム — 同じ呼び出し、違う振る舞い
class ごとに同じ名前のメソッドを書き、呼ぶ側を 1 つの書き方にそろえるポリモーフィズムを扱います。種類の混ざった配列での一括呼び出し、instanceof で分ける場面、継承していない値も扱うダックタイピングを学べます。
this の束縛 — 呼び方で変わる this と固定の仕方
メソッドを変数に取り出したり、コールバックに渡したりすると変わる this の決まり方を扱います。取り出したときの TypeError、bind で固定する書き方、アロー関数のフィールド、setTimeout に渡すときの注意を学べます。
プロトタイプ — class の裏側
class のメソッドが置かれる prototype と、名前を探す順番のプロトタイプチェーンを扱います。Object.getPrototypeOf、hasOwnProperty と in の違い、関数の足し方を学べます。
特殊メソッド — toString / toJSON / Symbol.iterator
決まった場面で JavaScript が呼ぶ toString・toJSON・Symbol.iterator を扱います。表示の形の決め方、JSON に出す値の選び方、class を for...of で回す書き方を学べます。
モジュール — import / export
ファイルごとに値を公開する export と、それを読み込む import を扱います。名前付きと default の違い、ブラウザの type="module"、Node.js の ESM と CommonJS の見分け方を学べます。
合成と継承 — Object.assign とミックスイン
機能を部品に分けて 1 つのオブジェクトに組み込む合成を扱います。Object.assign での後付け、部品を返す関数とスプレッド構文、class に機能を重ねるミックスイン関数、継承との使い分けを学べます。
オブジェクト指向まとめ — class 構文と this の早見表
class 構文を置き場所で整理する早見表、extends と super で動く定義のたどり方、呼び方ごとの this、継承・prototype・合成で機能が届く範囲、エラーの止まる時点をまとめます。

JavaScript ブラウザ API

ブラウザで JavaScript が動く仕組み
ブラウザが HTML から DOM を作る流れと、link と script を処理する順番、DOM の完成を待つ defer 属性、DevTools のコンソールでの確認、練習問題のコンソールで結果を文字で確かめる方法を扱います。
DOM ツリーと要素の取得 — querySelector と querySelectorAll
DOM ツリーから要素を取り出す querySelector と querySelectorAll を扱います。class・id・data 属性で探す書き方、NodeList の配列への変換、見つからないときの ?. を学べます。
要素の作成・変更・削除 — createElement / classList / remove
要素を作ってページに加える createElement と append、取り除く remove、class と属性を書き換える classList と dataset、利用者の入力を文字のまま表示する textContent と innerHTML の違いを扱います。
イベント — addEventListener と伝播
クリックされたときに関数を呼ぶ addEventListener と押された要素を表す event.target、親へ伝わるバブリングを使ったイベント委譲、stopPropagation、once と removeEventListener によるリスナーの外し方を扱います。
フォーム — 入力値と submit
入力欄の値を読む value と checked、入力で起きる input と change イベント、送信を取りやめる submit と preventDefault、欄をまとめて集める FormData を扱います。
fetch — API からデータを取る
URL を渡してデータを取りに行く fetch と、本文を値に変える json()、取得の成否を表す response.ok、相対 URL の書き方、Promise.all で 2 つの JSON を同時に読む書き方を扱います。
fetch のエラー処理とタイムアウト — AbortController と再試行
fetch が例外を投げない HTTP エラーと、fetch 自身が失敗するネットワークエラーの見分け方、AbortController と setTimeout による時間切れの打ち切り、1 回だけの再試行を扱います。
localStorage — ブラウザに保存する
ブラウザに値を保存する localStorage の setItem・getItem・removeItem、値が文字列に変わるため JSON で配列を保存する書き方、無いキーで返る null、容量の上限を扱います。
タイマーと日付 — setTimeout / Date / Intl
時間をおいて関数を呼ぶ setTimeout、繰り返し呼ぶ setInterval の止め方、Date の作り方と月が 0 から始まる数え方、Intl.DateTimeFormat による日付の表示、日数の差の求め方を扱います。