『実践JavaScript！』 目次
前提とする知識と機器
イントロ ── JavaScriptと英語を比較する
1. 意味や意図を相手に伝えるための道具
2. 文法を覚える必要があるが、覚えただけでは使えない
3. 対象領域に関する知識が必要
4. 理系、文系はあまり関係がない
5. ある日突然「わかる」
英語ができたほうが有利
この本の英単語帳 ≒ JSの単語帳
楽しめれば上達は早い
念の為 ── JavaとJavaScriptは別言語
本書のロードマップ
補足資料
第1章 初めてのJavaScriptプログラム ── 世界で一番有名で、一番短いプログラムを書いてみよう
この章の課題 ── ダイアログボックスの表示
実行結果
1.1 ブラウザによる表示
1.2 アプリとデータのダウンロード
例題と問題の解答例のダウンロード
Windowsの場合
macOSの場合
Google Chromeのインストール
Visual Studio Codeのインストール
VS Codeのインストール ── Windowsの場合
VS Codeのインストールと起動 ── macOSの場合
VS Codeの日本語化
VS Codeの環境設定
各アプリとデータの確認
Windowsの場合
macOSの場合
1.3 この章の課題のコード
この章の課題 ── ダイアログボックスの表示（VS Codeから実行）
実行結果
1.4 エディタによる表示
処理系の関心は文字情報にあり
1.5 エディタから実行
1.6 HTMLコードの詳細
「棚上げ」も時には有効
1.7 JavaScriptの「コード」
1.8 関数とその働き
関数の構造
1.9 文字列
「hello, world」プログラム
1.10 この章のまとめ
1.11 練習問題
1.12 練習問題の解答例
第2章 関数はプログラムのレゴブロック ── 難しいことはだいたい関数がやってくれる
この章の課題 ── HTMLタグの出力
コード（HTMLファイル全体。example/ch0201.html*1
2.1 関数document.write
HTMLのコード（example/ch0202.html）
実行結果
2.2 Math.random
コメント
長いコメント /* ... */
HTMLのコメント
CSSのコメント
2.3 実行順序
2.4 文を区切るセミコロン
なぜ文の区切りは「;」か
「:」と「;」の使い分け
2.5 この章のまとめ
2.6 練習問題
第3章 人生は選択の連続である ── 分岐、プラスして変数と演算子
この章の課題 ── おみくじ
実行結果
JavaScriptのコード（example/ch0301.html。JavaScriptのコード以外は省略）
3.1 手順
3.2 コードの日本語訳
3.3 "use strict"
3.4 変数の宣言と代入
変数の宣言
データの記憶場所
変数への代入
3.5 if文の実行
3.6 変数のスコープ ── 大域変数と局所変数
3.7 結果の出力
3.8 分岐のバターン
やるかやらないかパターン
二択
三択
n択
3.9 論理演算子
大小
等号、不等号
3.10 算術演算子
3.11 算術演算子と変数の値の更新
3.12 ++ と --
3.13 文字列の連結
演算子前後のスペースと難読化
難読化
HTMLタグ中のスペース
3.14 この章のまとめ
3.15 練習問題
3.16 練習問題の解答例
第4章 何万回でも何億回でもヘビーローテーション ── ループ（繰り返し）
この章の課題 ── 画像の連続表示
実行結果
JavaScriptのコード（example/ch0401.html）
4.1 一番単純なfor文 ── 同じことの繰り返し
変数名iがよく使われるのはなぜ？
4.2 同じようなことを繰り返すfor文
4.3 for文はどのように実行されるか
4.4 制御部分のパターン
4.5 テンプレートリテラル（可変部分付き文字列）
4.6 imgタグの生成にテンプレートリテラルを利用
4.7 スタイルの指定
4.8 変数や定数を使ってコードをわかりやすく
途中経過を変数に記憶
定数の利用
4.9 この章のまとめ
4.10 練習問題
toStringとpadStart
第5章 「オーダーメイド」のレゴブロックを作ろう ── ユーザー定義関数
この章の課題 ── おみくじ その2
実行結果
JavaScriptのコード（example/ch0501.html）
5.1 関数の定義
5.2 関数を使う意味
関数は概念に名前をつける
関数は再利用を促進する
5.3 引数の指定
5.4 サブ関数の呼び出し
5.5 数学の関数との比較
5.6 識別子に関するルール
識別子は英語にするべきか、日本語を使ってもよいか
5.7 この章のまとめ
関数の構文のまとめ
関数の長所
インデントとコードの読みやすさ
5.8 練習問題
第6章 カウントダウンイベント御用達 ── タイマーを使った定期的繰り返し
この章の課題 ── カウントダウン
実行結果
JavaScriptのコード（example/ch0601.html）
6.1 1画面のHTMLコード
6.2 画面の書き換え
6.3 定期的繰り返し ── setInterval
6.4 関数「カウントダウン」
6.5 関数「画面書き換え」
6.6 無名関数
6.7 アロー関数
アロー関数の省略形
6.8 この章のまとめ
6.9 練習問題
第7章 何千個でも、何万個でもまとめて記憶 ── 配列
この章の課題 ── 漢数字を使ったカウントダウン
実行結果
JavaScriptのコード（example/ch0701.html）
7.1 全体の流れ
7.2 配列の長さ
7.3 合計や平均の計算
7.4 この章のまとめ
7.5 練習問題
第8章 虫取りは人類を救うか ── デバッグ
8.1 デバッグ時の心構え
一発で動くことは滅多にない
慣れないと、自分でバグを見つけるのは簡単ではない
8.2 生成AIを使った「丸投げデバッグ」
エラーその１ ── 「タイポ」
エラーその２ ── 形式のミス
エラーその３ ── 演算子の間違い
8.3 最初にチェック！
そもそもJavaScriptのプログラムとして認識されているかを確認する
"use strict"を冒頭に指定する
8.4 コンソール（console）をチェック
8.5 エラーメッセージで見当がつかないとき
8.6 Chromeのコンソール
8.7 コンソールの便利な使い方
8.8 「約物」に注意する
丸括弧 (...)
●関数の引数を囲む
●if文やfor文などの条件を表す
●計算の優先順位を表す
波括弧 {...} ── 複数の文をまとめる
●関数の定義部分を囲む
●if文やfor文などの実行部分を囲む
角括弧 [...]
引用符（"..."、'...'、`...`）
テンプレートリテラル ── `... ${...} ...`
その他の約物
8.9 例外処理 ── Uncaughtは（当面）無視してよい
エラーメッセージは非常に不親切（とくに初心者には）
8.10 その他の主要なエラーメッセージ
Uncaught ReferenceError: ●● is not defined
Uncaught TypeError: ●● is not a function
Uncaught SyntaxError: Unexpected token '}'
Uncaught TypeError: Cannot read properties of null (reading '●●')
Uncaught TypeError: Cannot set properties of null (setting '●●')
8.11 デバッガの利用
ブレークポイントとステップ実行
ステップオーバー
ブレークポイントの設定と解除
Chromeのデバッガ
デバッガがあればconsole.logは不要？
8.12 デバッグ前にやっておくこと
デバッグの前にもう一度プログラムを見直す
できるだけコピペ（copy & paste）する
バグが見つけやすい美しいコードを書く
●字下げ（インデント）をきちんとする
●識別子にはわかりやすい名前をつける
●まとまった処理は関数にする
●同じことを複数の箇所で書かない ── DRY原則
●できるだけ単純に作る（少なくとも最初は） ── KISSの原則
8.13 ソフトウェアテスト
8.14 この章のまとめ
8.15 練習問題
第9章 世の中はもの（オブジェクト）でできている ── オブジェクト指向とは
この章の課題 ── 動画を交互に再生
実行結果
JavaScriptのコード（example/ch0901.html）
9.1 オブジェクト指向の登場前
手続き型言語とオブジェクト指向言語
9.2 オブジェクト指向の中核をなすアイデア ── プロパティとメソッド
プロパティ
メソッド
9.3 動画オブジェクト
9.4 例題のコード
動画を表すタグ
class指定
muted属性
交互に再生
9.5 この章のまとめ
9.6 練習問題
第10章 ブラウザの中身は全部オブジェクト
この章の課題 ── スライドショー
実行結果
JavaScriptのコード（example/ch1001.html）
10.1 ブラウザとオブジェクト
10.2 コードの解説
10.3 windowオブジェクト
windowのメソッド
windowのプロパティ
10.4 ブラウザのJavaScriptで扱えるオブジェクトの種類
10.5 window.console ── コンソール関係の処理をするオブジェクト
10.6 window.location ── URLを取得・操作するためのオブジェクト
10.7 window.navigator ── ユーザーの環境を取得するオブジェクト
Windowとwindowの関係は？
10.8 この章のまとめ
10.9 練習問題
第11章 documentオブジェクトとアニメーション
この章の課題 ── カウントダウン（改良版）
実行結果
JavaScriptのコード（example/ch1101.html）
11.1 documentオブジェクトのメソッド
キャメルケースとスネークケース
11.2 この章の課題の説明
document.writeについて
11.3 スタイルとアニメーション
大きさの変化
位置の変化
11.4 この章のまとめ
11.5 練習問題
第12章 パソコンの中にも凄腕のイベント屋がいる ── イベント処理
この章の課題 ── フォトギャラリー
実行結果
JavaScriptのコード（example/ch1201.html）
12.1 JavaScriptのイベントの例
12.2 プログラムの実行順序とイベント処理
12.3 イベントハンドラ ── イベントを捕獲する罠を仕掛ける
12.4 1枚の画像をmouseoverで拡大する例
12.5 2枚の画像から1枚をmouseoverで拡大する例
12.6 タッチデバイスへの対応 ── touchstartでタップを判定する
12.7 コードの改良 ── 重複を避ける
12.8 コードの改良 ── 関数を使って簡潔に
if文の「{」と「}」の省略
12.9 この章のまとめ
12.10 練習問題
第13章 プログラムを作る ≒ アルゴリズムとデータ構造を考える
13.1 概念の相関図
データ構造
型
フロー制御とアルゴリズム
フロー制御
アルゴリズム
演算子
アルゴリズム+データ構造 ≒ プログラム
13.2 局所変数と大域変数 ── 大域変数を避ける
letとvarのスコープ
大域変数を安全に使う
13.3 これから進む道
第14章 ウェブサイトを作ってみよう
14.1 サイト構築の手法
トップダウンかボトムアップか
小規模サイトではボトムアップがオススメ
14.2 この本の例題や解答例のサイト
ファイルの構成とトップページ
JavaScriptを使ったHTMLコードの生成
例題フォルダや解答例フォルダの構成
14.3 ライブラリの利用
オブジェクトライブラリの利用
特殊用途のライブラリ
Maps JavaScript API
Rough.jsとCharts.jsの例
14.4 APIを利用した辞書引きサイトの構築
翻訳訳語辞典
機能の紹介
APIの利用方法
呼び出し方
戻り値
14.5 この章のまとめ
14.6 発展課題
付録A JavaScriptのその他の構文や関数
A.1 演算子関連
「++i」と「i++」の違い
===と==の違い
>= や > は（原則）使わない
条件演算子（三項演算子）
A.2 制御構造
for文の条件等の省略とbreak、continue
無限ループ
break文
continue文
for文のほかの構文
for ... in
for ... of
for文以外のループ構文
while文
do ... while文
switch文
A.3 配列関連のメソッド
Array.forEach
Array.reduce
Array.map
Arrayのその他のメソッド
付録B ほかの言語も使ってみよう
B.1 各言語の特徴
B.2 例題
B.3 開発環境のインストールとターミナルを使った開発（Python）
「開発環境」の準備（インストール）
WindowsへのPythonのインストール
macOSへのPythonのインストール
例題の実行
B.4 Node.jsのコード
B.5 Go言語のコード
B.6 Javaのコード
B.7 練習問題