第3回まで無料

JavaScript 入門コース

Web ページに動きをつける言語 JavaScript を、環境構築なしでブラウザ上で動かしながら学びます。変数・制御構文・配列とオブジェクト・関数から、DOM 操作・非同期処理・クラスまで。全50レッスンで「読めて・書けて・自分で直せる」ところまで一気に進みます。

レッスン 1 からはじめる 全コースを解放する

カリキュラム

全50レッスンを7つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 第5章（DOM 操作）以降は、実際に動くページをその場でプレビューしながら進められます。

Chapter 1 — 導入（第1〜6回）

JavaScript が何を担当しているかを掴み、script タグ・変数・データ型・文字列・数値まで。ここを抜ければ「自分で書いて、ブラウザで動かす」ことができます。

1

JavaScript とは

HTML・CSS との役割の違いを押さえ、ブラウザのコンソールで最初の 1 行を動かすところまで。

Free
2

script タグと HTML への読み込み

書いた JavaScript を HTML から読み込む。置く場所で動いたり動かなかったりする理由と defer。

Free
3

変数（let と const）

値に名前をつける。迷ったら const、再代入が要るときだけ let という基準を身につける。

Free
4

データ型の基本

number・string・boolean と、null と undefined の違い。typeof で型を確かめる。

🔒 ベーシック
5

文字列とテンプレートリテラル

変数を含んだ文章を書きやすくする ${} と、切り出し・置換のよく使うメソッド。

🔒 ベーシック
6

数値と演算子

四則演算・剰余・べき乗と、型変換・小数の誤差・NaN という 3 つのつまずきどころ。

🔒 ベーシック

Chapter 2 — 制御構文（第7〜13回）

if と switch で分け、for と while で繰り返す。プログラムに流れをつける道具を揃えて、最後は数当てゲームを作ります。

7

条件分岐 if

条件によって処理を分ける。ネストを深くしない書き方と、= と === の取り違え。

🔒 ベーシック
8

比較演算子と論理演算子

== と === の違い、&& と ||、そして JavaScript 特有の truthy / falsy。

🔒 ベーシック
9

switch 文と三項演算子

値の一致で分けるならswitch、単純な二択なら三項演算子。break の書き忘れも体験する。

🔒 ベーシック
10

for 文

初期化・条件・更新の 3 つで繰り返す。配列をインデックスで順番に処理する。

🔒 ベーシック
11

while 文と do...while 文

回数が決まっていない繰り返し。for との使い分けと、無限ループを避ける書き方。

🔒 ベーシック
12

break と continue

途中で抜ける・その回だけ飛ばす。二重ループの動きを九九の表で確かめる。

🔒 ベーシック
13

【実践】数当てゲームを作る

乱数・入力・判定・繰り返しを組み合わせ、機能を少しずつ足して 1 本仕上げる。

🔒 ベーシック

Chapter 3 — データ構造（第14〜22回）

配列とオブジェクト、そして map・filter・reduce。複数のデータをまとめて扱えるようになると、書けるものが一気に増えます。

14

配列の基本

複数の値をまとめて持つ。0 から始まるインデックスと、範囲外を読んだときの挙動。

🔒 ベーシック
15

配列のメソッド

出し入れの push・pop・splice と、元の配列を変えるメソッド／変えないメソッドの区別。

🔒 ベーシック
16

配列の反復処理

for...of と forEach。3 種類のループの使い分けと、forEach で break が使えない理由。

🔒 ベーシック
17

map と filter と find

変換する・絞り込む・探す。for 文で書いた処理が 1 行になる、実務で最も使う 3 つ。

🔒 ベーシック
18

reduce と sort

値を積み上げる reduce と、数値の並べ替えが狂う原因になる sort の比較関数。

🔒 ベーシック
19

オブジェクトの基本

キーと値のセットで 1 件のデータを表す。ドット記法とブラケット記法の使い分け。

🔒 ベーシック
20

オブジェクトのコピー

キーを回して処理する方法と、「コピーしたはずが元も変わる」という参照の問題。

🔒 ベーシック
21

分割代入とスプレッド構文

必要な値だけ取り出す [] と {}、中身を展開する ...。モダンな JS を読むための必須記法。

🔒 ベーシック
22

【実践】商品データを集計する

オブジェクトの配列を、filter・reduce・sort で集計してランキング表にする。

🔒 ベーシック

Chapter 4 — 関数（第23〜29回）

処理に名前をつけて切り出す。アロー関数・スコープ・クロージャ・this を押さえ、長いコードを関数に分けて整理します。

23

関数の基本

処理に名前をつけて再利用する。引数で受け取り、return で返すという型を身につける。

🔒 ベーシック
24

アロー関数

今いちばんよく見る関数の書き方。省略のルールと、function との使い分け。

🔒 ベーシック
25

スコープとホイスティング

変数がどこから見えるか。let と var でスコープが変わる理由と、宣言前に使ったときの挙動。

🔒 ベーシック
26

コールバック関数

関数そのものを引数として渡す。forEach や addEventListener を支えている仕組み。

🔒 ベーシック
27

クロージャ

関数が外側の変数を覚えている状態。カウンターを作りながら動きを追う。

🔒 ベーシック
28

高階関数と this

関数を受け取る／返す関数の整理と、JavaScript 最大のつまずきどころ this。

🔒 ベーシック
29

【実践】関数に分けてリファクタリング

長い 1 本の処理を役割ごとの関数へ。動きを変えずに読みやすさだけを上げる。

🔒 ベーシック

Chapter 5 — DOM 操作（第30〜37回）

ここから画面を動かします。要素の取得・書き換え・イベント処理を学び、最後は ToDo リストを組み立てます。

30

DOM と要素の取得

HTML を JavaScript から触れるオブジェクトとして扱う。querySelector で狙った要素を取る。

🔒 ベーシック
31

テキストと HTML の書き換え

textContent と innerHTML の違い。innerHTML に外部の入力を入れてはいけない理由。

🔒 ベーシック
32

スタイルと classList

style で直接指定する方法と、CSS クラスを付け外しする方法。後者を基本にする理由。

🔒 ベーシック
33

イベント処理

ユーザーの操作に反応する。addEventListener と、イベントオブジェクトの読み方。

🔒 ベーシック
34

フォームの入力値

入力値を取り出し、送信時の再読み込みを止めて、自分でバリデーションする。

🔒 ベーシック
35

要素の生成と追加・削除

HTML にない要素を JavaScript から作る。データの数だけ一覧を描画する。

🔒 ベーシック
36

イベントの伝播と委譲

イベントは親へ伝わっていく。「後から追加した要素だけ効かない」問題を委譲で解決する。

🔒 ベーシック
37

【実践】ToDo リストを作る

データ（配列）と画面を分けて設計する。追加・完了・削除を委譲で実装する。

🔒 ベーシック

Chapter 6 — 非同期処理と通信（第38〜44回）

例外処理から始めて、Promise・async/await・fetch へ。サーバーからデータを取って画面に出すまでが書けるようになります。

38

例外処理

エラーで止めずに受け止める try...catch と、自分からエラーを投げる throw。

🔒 ベーシック
39

同期と非同期

書いた順に実行されないコードがある理由。setTimeout とイベントループの関係。

🔒 ベーシック
40

Promise

コールバックのネストを解く仕組み。then でつなぎ、catch でまとめて受け止める。

🔒 ベーシック
41

async / await

Promise を同期処理のような見た目で書く。await の置き場所で速度が変わる。

🔒 ベーシック
42

fetch で API から取得する

サーバーからデータを受け取る。通信エラーと HTTP エラーは別物という理解が要。

🔒 ベーシック
43

JSON を扱う

オブジェクトによく似た「文字列」。parse と stringify で相互に変換する。

🔒 ベーシック
44

【実践】API データの一覧表示

fetch・async/await・DOM 操作を組み合わせ、読み込み中とエラー表示まで含めて仕上げる。

🔒 ベーシック

Chapter 7 — 発展（第45〜50回）

クラスと継承、モジュール分割、localStorage、デバッグの技術。ここから先に進むための地図を渡します。

45

クラス構文の基本

同じ形のオブジェクトをいくつも作る。constructor・メソッド・new の流れ。

🔒 ベーシック
46

クラスの継承

共通部分を親にまとめる extends と super。getter / setter とプライベートフィールド。

🔒 ベーシック
47

モジュール

長くなったファイルを役割ごとに分ける。export と import、そして type="module"。

🔒 ベーシック
48

localStorage

リロードしても消えないデータ。第37回の ToDo リストを保存できるようにする。

🔒 ベーシック
49

デバッグの技術

console.log だけに頼らない。ブレークポイントで止め、変数を見ながら原因を絞る。

🔒 ベーシック
50

総まとめと次に学ぶべきこと

全 50 回の地図を確認し、フレームワーク・TypeScript・Node.js の 3 つの道を選ぶ。

🔒 ベーシック

全50レッスンを終えたら、次はフレームワーク（Next.js）・型付き開発（TypeScript）へ。メンバーシップで全コースが解放されます。