JavaScriptのテキスト（PDF:305ページ,2.34MB）
まだ試作品（プレビュー版）です．ご意見くださいませ．
コメントはこのページの最下部から投稿できます．
■■ テキストの目次 ■■
1 はじめに — 1
1.1 本書の内容 — 1
1.2 前提事項 — 1
1.3 サンプルコードの提示に関すること — 1
2 HTMLとCSS — 2
2.1 HTML — 2
2.1.1 HTMLの要素 — 2
2.1.1.1 HTML要素の属性 — 2
2.1.2 HTMLの基本的な構成 — 2
2.1.2.1 文書型宣言 — 2
2.1.2.2 html要素 — 3
2.1.2.3 head要素 — 3
2.1.2.4 body要素：文書本体要素 — 3
2.1.3 HTML文書の論理的構造 — 3
2.1.3.1 文書のレイアウトのための要素 — 4
2.1.3.2 記事の論理構造 — 4
2.1.3.3 まとめ — 4
2.1.4 HTML文書内のコメント — 4
2.2 CSS — 4
2.2.1 セレクタ — 5
2.2.2 サイズや色の値の表現 — 5
2.2.3 CSSのコメント — 6
2.3 HTML，CSS各論 — 6
2.3.1 見出しと段落： h要素，hgroup要素，p要素 — 6
2.3.1.1 span要素 — 7
2.3.1.2 hgroup要素 — 7
2.3.1.3 文字，テキストに関する設定 — 7
2.3.1.4 文字の書体（フォント）に関する設定 — 9
2.3.1.5 ルビ — 11
2.3.2 ハイパーリンクの設置 — 11
2.3.2.1 a要素に対する特殊なセレクタ — 12
2.3.3 HTML要素のレイアウト — 12
2.3.3.1 HTML要素をレイアウトするためのボックス構造 — 14
2.3.3.2 div要素 — 15
2.3.3.3 レイアウトと包含ブロック — 15
2.3.3.4 要素の位置について — 16
2.3.3.5 ボックス構造の位置とサイズに関すること — 17
2.3.3.6 コンテナ内外のレイアウト制御 — 19
2.3.4 箇条書き： ul要素，ol要素，li要素 — 19
2.3.5 表： table要素 — 20
2.3.5.1 thead，tbody，ifoot 要素 — 21
2.3.6 画像の埋め込み： img要素 — 21
2.3.7 不透明度 — 22
2.3.8 可視属性 — 22
2.3.9 form要素 — 22
2.3.9.1 form 要素の記述形式とWebサーバとの連携 — 23
2.3.9.2 form要素に依らないUI構築 — 23
2.3.9.3 ラベル — 23
2.3.9.4 テキスト入力(1)：単一行の入力 — 23
2.3.9.5 テキスト入力(2)：複数行の入力 — 24
2.3.9.6 パスワード入力 — 24
2.3.9.7 ボタン — 24
2.3.9.8 スライダ — 24
2.3.9.9 データリスト要素 — 25
2.3.9.10 選択要素 — 26
2.3.9.11 チェックボックス — 26
2.3.9.12 ラジオボタン — 27
2.3.9.13 フィールドセット要素 — 27
2.3.9.14 メータと進捗インジケータ（プログレスバー） — 28
2.3.10 外部リソースへのリンク要素 — 29
2.3.11 スタイルシートの形態 — 29
3 JavaScript — 30
3.1 前提事項 — 30
3.1.1 コンソール出力 — 30
3.1.2 文を複数の行に分割して記述する方法 — 31
3.1.3 プログラム中のコメント — 31
3.2 文とブロック — 31
3.3 関数，メソッド，プロパティ — 31
3.4 変数 — 32
3.4.1 変数のスコープ — 32
3.4.2 変数の使用における良くない例 — 33
3.4.2.1 更に注意すべき事柄 — 34
3.4.3 変数の廃棄 — 34
3.5 基本的なデータ型 — 35
3.5.1 数値 — 35
3.5.1.1 基本的な演算 — 35
3.5.1.2 累算的な代入演算子 — 36
3.5.1.3 特殊な値 — 36
3.5.1.4 長整数： BigInt — 37
3.5.1.5 数値リテラル — 38
3.5.1.6 数学関数 — 38
3.5.2 論理値 — 39
3.5.3 文字列 — 39
3.5.3.1 エスケープシーケンス — 40
3.5.3.2 複数行に渡る文字列の記述 — 41
3.5.3.3 文字列の長さ（文字数） — 41
3.5.3.4 文字列の連結と分解 — 41
3.5.3.5 文字列の繰り返し — 42
3.5.3.6 部分文字列 — 42
3.5.3.7 文字列の含有検査 — 43
3.5.3.8 テンプレートリテラル（テンプレート文字列） — 43
3.5.3.9 文字列を数値に変換する方法 — 44
3.5.4 シンボル — 45
3.5.5 値の比較 — 46
3.5.6 値の型に関すること — 46
3.6 データ構造 — 48
3.6.1 配列：Array — 48
3.6.1.1 空配列 — 49
3.6.1.2 要素の追加 — 49
3.6.1.3 要素の削除 — 50
3.6.1.4 配列の連結 — 51
3.6.1.5 部分配列 — 51
3.6.1.6 配列の編集 — 51
3.6.1.7 配列の反転 — 52
3.6.1.8 要素の整列 — 52
3.6.1.9 指定した要素を配列内に並べる方法 — 53
3.6.1.10 要素の存在や位置の調査 — 53
3.6.1.11 配列の並びを表す文字列の取得 — 54
3.6.1.12 全要素に対する条件検査 — 54
3.6.1.13 条件を満たす要素の探索 — 55
3.6.1.14 特殊なプロパティ — 56
3.6.2 オブジェクト：Object — 56
3.6.2.1 要素の削除 — 57
3.6.2.2 プロパティのキーに使用できるデータ — 57
3.6.2.3 空オブジェクト — 57
3.6.2.4 オブジェクトから配列への変換 — 57
3.6.2.5 オブジェクトの要素の個数を求める方法 — 58
3.6.3 Mapオブジェクト — 59
3.6.3.1 要素へのアクセス — 59
3.6.3.2 要素の存在確認 — 59
3.6.3.3 要素の個数の調査 — 60
3.6.3.4 全要素の取出し — 60
3.6.3.5 要素の削除 — 60
3.6.3.6 ミュータブルなデータをキーに使用する際の注意 — 61
3.6.4 Setオブジェクト — 62
3.6.4.1 要素の存在確認 — 62
3.6.4.2 要素の追加と削除 — 62
3.6.4.3 要素の個数の調査 — 62
3.6.4.4 配列への変換 — 63
3.6.4.5 全要素の削除 — 63
3.6.4.6 ミュータブルなデータを要素にする際の注意 — 63
3.6.5 スプレッド構文 — 64
3.7 特殊なデータ構造 — 65
3.7.1 型付き配列（TypedArray）とArrayBuffer — 65
3.7.1.1 ArrayBufferの複数のビューによる共有 — 66
3.7.1.2 バイトオーダー（リトルエンディアン／ビッグエンディアン） — 67
3.7.2 データビュー（DataView） — 68
3.7.3 文字列⇔バイナリデータの変換 — 70
3.7.3.1 Node.jsでの方法 — 70
3.7.4 Blob — 71
3.7.4.1 Blob 作成の例 — 71
3.7.4.2 Blob のデータの取り出し — 72
3.7.5 BinaryString — 72
3.7.5.1 Blobとの間での変換 — 72
3.8 条件分岐 — 73
3.8.1 if … else 文 — 73
3.8.2 switch 文 — 74
3.8.3 値を選択する3項演算子 — 75
3.8.4 論理値以外を条件式に用いるケース — 75
3.9 反復制御 — 77
3.9.1 while 文 — 77
3.9.2 do … while 文 — 77
3.9.3 for 文 — 78
3.9.3.1 for … of 文 — 78
3.9.3.2 for … in 文 — 79
3.9.4 breakとcontinue — 80
3.10 関数の定義 — 81
3.10.1 変数のスコープ — 81
3.10.1.1 変数の使用における安全でない例 — 82
3.10.2 引数に関する事柄 — 83
3.10.2.1 仮引数と実引数 — 83
3.10.2.2 任意の個数の引数を扱う方法 — 83
3.10.2.3 仮引数にデフォルト値を設定する方法 — 83
3.10.3 関数自体のスコープ — 84
3.10.4 関数式 — 85
3.10.4.1 即時実行関数 — 85
3.10.4.2 アロー関数式 — 85
3.10.5 関数の再帰的呼び出し — 86
3.10.6 ネストされた関数定義（内部関数） — 87
3.10.6.1 クロージャ — 87
3.11 オブジェクト指向プログラミング（OOP） — 90
3.11.1 メソッドの実装 — 91
3.11.1.1 prototypeプロパティ — 91
3.11.2 インスタンスのコンストラクタを調べる方法 — 92
3.11.3 Object.createによるオブジェクトの生成 — 92
3.11.4 プロパティ継承の仕組み — 92
3.11.5 class構文による方法 — 95
3.11.5.1 コンストラクタ，メソッドの記述 — 96
3.11.5.2 パブリックフィールド — 96
3.11.5.3 静的メソッド — 97
3.11.5.4 クラスの継承 — 98
3.11.5.5 オブジェクトのクラスを調べる方法 — 99
3.11.5.6 プロパティのカプセル化 — 100
3.11.5.7 class式 — 100
3.12 日付，時刻の扱い — 102
3.12.1 現在時刻の取得 — 102
3.12.2 値の取得と設定 — 102
3.12.3 データ形式の変換 — 103
3.12.3.1 Dateオブジェクト→文字列 — 103
3.12.3.2 文字列→Dateオブジェクト — 104
3.13 正規表現 — 105
3.13.1 文字列探索（検索） — 105
3.13.1.1 RegExpオブジェクト — 106
3.13.2 パターンマッチ — 106
3.13.2.1 マッチした部分の抽出 — 106
3.13.2.2 行頭，行末でのパターンマッチ — 107
3.13.2.3 パターンマッチの繰り返し実行 — 107
3.13.2.4 複数行のテキストに対するパターンマッチ — 107
3.13.3 置換処理 — 108
3.14 例外処理 — 110
3.14.1 エラーオブジェクト — 110
3.14.1.1 例外（エラー）の種類 — 111
3.14.2 例外を発生させる方法 — 112
3.15 その他の便利な機能 — 114
3.15.1 forEachによる反復処理 — 114
3.15.2 配列の全要素に対する一斉処理 — 115
3.15.2.1 対象要素のインデックスを取得する方法 — 115
3.15.3 配列に対する二項演算の連鎖的実行 — 116
4 Webアプリケーション開発のための基礎 — 117
4.1 HTMLとJavaScript — 117
4.2 DOMに基づいたプログラミング — 118
4.2.1 DOMの最上位のオブジェクト — 118
4.2.1.1 グローバル変数の所在 — 118
4.2.2 HTMLの最上位のオブジェクト — 118
4.2.3 HTML要素のクラス — 118
4.2.4 HTMLの木構造（階層構造） — 119
4.2.4.1 子要素，親要素を取得する方法 — 119
4.2.4.2 document直下の子要素 — 120
4.2.4.3 childNodesプロパティ — 120
4.2.5 HTML要素のid属性から要素ノードを取得する方法 — 121
4.2.6 HTML要素の要素名（タグ名）の取得 — 121
4.2.7 HTML要素の生成 — 121
4.2.7.1 HTML要素の属性を設定する方法 — 122
4.2.7.2 HTML要素の属性を取得する方法 — 122
4.2.7.3 HTML要素のデータ属性 — 122
4.2.8 テキストノードの作成 — 123
4.2.9 子ノードの追加 — 123
4.2.9.1 子ノードの追加位置の指定 — 123
4.2.10 子ノードの削除 — 125
4.2.11 HTML要素にテキストコンテンツを与える方法 — 125
4.2.12 HTML要素のclass属性から要素ノードを取得する方法 — 125
4.2.13 DOMParser — 127
4.2.14 CSSのセレクタからHTML要素を取得する方法 — 128
4.3 JavaScriptでCSSにアクセスする方法 — 129
4.3.1 HTML要素のスタイルの取得 — 129
4.3.2 スタイルの動的な変更 — 129
4.3.2.1 styleプロパティ配下のCSS属性名に関する注意 — 130
4.4 イベント駆動型プログラミング — 131
4.4.1 イベントハンドリングの仕組み — 131
4.4.2 イベントの種類 — 132
4.4.2.1 ページの読込み，離脱 — 132
4.4.2.2 マウスの操作 — 132
4.4.2.3 キーボードの操作 — 132
4.4.2.4 変化や選択によって発生するイベント — 132
4.4.2.5 その他のイベント — 133
4.4.3 addEventListenerによるイベントハンドラの登録 — 133
4.4.4 イベント名のプロパティにイベントハンドラを登録する方法 — 134
4.4.5 イベントオブジェクト — 134
4.4.5.1 イベントオブジェクトの使用例（マウス関連） — 135
4.4.5.2 イベントオブジェクトの使用例（キーボード関連） — 136
4.4.6 タイマー — 137
4.4.6.1 タイマー処理の反復 — 137
4.4.6.2 タイマーの反復処理の応用例 — 138
4.5 表示環境に関する事柄 — 139
4.5.1 ディスプレイ（スクリーン）関連 — 139
4.5.2 ブラウザウィンドウ，コンテンツページ関連 — 139
4.5.3 表示の解像度を求める方法 — 140
4.5.4 px（ピクセル）からpt（ポイント）への単位の変換 — 141
4.5.5 ビューポート内でのHTML要素の位置とサイズ — 142
4.6 ローカル環境でのデータの保存 — 144
4.6.1 localStorage — 144
4.6.1.1 データの保存 — 144
4.6.1.2 データの取得 — 145
4.6.1.3 キーの取得 — 145
4.6.1.4 サンプルプログラム：全データの取得 — 146
4.6.1.5 データの消去 — 146
4.6.2 sessionStorage — 146
4.7 画像，音声の扱い — 147
4.7.1 静止画像の扱い — 147
4.7.1.1 静止画像を動的に切り替える方法 — 147
4.7.1.2 img要素の生成と追加 — 147
4.7.2 音声，動画の扱い — 149
4.7.2.1 HTMLMediaElementクラス — 149
4.7.2.2 再生と一時停止 — 149
4.7.2.3 各種のプロパティ — 149
4.7.2.4 各種のイベント — 150
4.7.2.5 動画：HTMLVideoElementオブジェクト — 150
4.7.2.6 応用例 — 151
4.8 JSON — 152
4.8.1 JSONデータの作成 — 152
4.8.2 JSONデータの展開 — 152
4.9 通信のためのデータ変換 — 153
4.9.1 URLエンコーディング — 153
4.9.2 Base64 — 153
4.9.2.1 base64-jsライブラリ — 154
4.10 ファイルの入出力 — 156
4.10.1 ファイルの読込み — 156
4.10.1.1 input要素によるファイル選択ダイアログ — 156
4.10.1.2 FileReaderによるファイルの読込み — 157
4.10.2 ファイルの保存 — 159
4.11 ドラッグアンドドロップ — 161
4.11.1 ドラッグアンドドロップに伴う処理 — 161
4.11.1.1 dragstart イベントを受けて行う処理 — 162
4.11.1.2 dragover イベントを受けて行う処理 — 162
4.11.1.3 drop イベントを受けて行う処理 — 162
4.11.1.4 イベントオブジェクトの target 属性 — 162
4.12 プログラムの分割開発 — 164
4.12.1 単純な分割開発 — 164
4.12.2 モジュールによる分割開発 — 164
4.12.2.1 モジュール内のオブジェクトを公開する方法(1)：DOMを介する — 165
4.12.2.2 モジュール内のオブジェクトを公開する方法(2)：exportで公開する — 165
4.12.2.3 モジュール毎の名前空間を実現するための工夫 — 166
5 Web Workers — 169
5.1 基本的な考え方 — 169
5.1.1 ワーカーのプログラミングの考え方 — 169
5.2 ワーカーの並行実行 — 171
5.3 メッセージ送信におけるデータの複製と移転 — 173
6 通信のための機能 — 175
6.1 Fetch API — 175
6.1.1 基本的な通信の手順 — 175
6.1.2 Promiseによる非同期処理 — 175
6.1.3 サーバからの応答の解析 — 176
6.1.4 応答からのデータ本体の取り出し — 176
6.1.5 例外処理 — 176
6.1.6 Fetch API の使用例 — 177
7 グラフィックスの作成(1)：canvas要素 — 179
7.1 座標と角度の考え方 — 179
7.2 描画領域のサイズ — 179
7.3 描画コンテキスト — 180
7.3.1 フィルに関する描画の設定 — 180
7.3.2 輪郭線に関する描画の設定 — 180
7.3.2.1 線幅（線の太さ）と始点，終点の座標の考え方 — 180
7.3.2.2 線の端の形状の設定 — 180
7.3.2.3 線の結合部の形状の設定 — 180
7.3.2.4 破線の設定 — 181
7.4 描画メソッド — 182
7.4.1 矩形（四角形）の描画 — 182
7.4.2 テキストの描画 — 182
7.4.2.1 矩形とテキストを描画するサンプル — 182
7.4.3 パスの描画 — 183
7.4.3.1 折れ線の描画 — 183
7.4.3.2 円弧の描画 — 185
7.4.3.3 楕円弧の描画 — 186
7.4.4 画像の描画 — 187
7.4.5 画素（ピクセル）の描画と取得 — 188
7.4.5.1 ImageDataオブジェクトの画素の構造 — 188
7.4.5.2 ImageDataオブジェクトの描画 — 188
7.4.5.3 canvasから画素を取得する方法 — 190
7.5 スケール，傾き，原点の変更 — 190
7.5.1 描画コンテキストの状態の保存と復元 — 191
8 グラフィックスの作成(2)：SVG — 192
8.1 基礎事項 — 192
8.1.1 座標系と大きさ，角度の単位 — 192
8.1.2 記述の形式 — 192
8.1.3 ビューポートとビューボックス — 192
8.1.4 HTMLへのSVGの配置 — 193
8.1.4.1 img要素として配置する方法 — 193
8.1.4.2 object要素として配置する方法 — 194
8.1.5 defs要素による定義の再利用 — 195
8.2 SVGの図形要素 — 196
8.2.1 多角形，折れ線 — 196
8.2.2 輪郭線に関する設定事項 — 197
8.2.2.1 破線の設定 — 197
8.2.2.2 線の端の形状の設定 — 198
8.2.2.3 線の結合部の形状の設定 — 198
8.2.3 矩形：rect要素 — 199
8.2.4 円：circle要素 — 199
8.2.5 楕円：ellipse要素 — 200
8.2.6 直線：line要素 — 200
8.2.7 テキスト（文字列）：text要素 — 200
8.2.7.1 テキストの描画位置の基準 — 201
8.2.7.2 テキストの強調 — 201
8.2.7.3 フォントスタイル — 201
8.2.7.4 下線，上線，打消し線 — 201
8.2.7.5 文字の回転 — 202
8.2.8 パス：path要素 — 202
8.2.8.1 直線の描画 — 202
8.2.8.2 楕円弧 — 203
8.2.9 画像データの配置 — 205
8.2.10 transform属性 — 206
8.2.10.1 変換の重ね合わせ — 207
8.2.10.2 use要素による定義の展開 — 207
8.2.10.3 図形要素のグループ化 — 208
9 プログラムライブラリ(1)：jQuery — 209
9.1 jQueryの導入 — 209
9.2 jQueryオブジェクト — 209
9.2.1 関数の起動 — 210
9.2.2 HTML要素へのアクセス — 210
9.2.3 イベントハンドリングの登録 — 211
9.2.4 HTML要素の生成とDOMへの追加 — 211
9.2.5 jQueryオブジェクトが保持するHTML要素 — 211
9.2.6 jQueryで扱うHTML要素 — 212
9.2.7 jQueryにおけるwindow，document — 212
9.3 CSS属性へのアクセス — 212
9.4 イベントハンドリングのためのメソッド — 213
9.5 HTML要素の属性へのアクセス — 213
9.5.1 属性値の動的な扱い — 214
9.5.1.1 チェックボックスの扱い — 214
9.5.1.2 ラジオボタンの扱い — 215
9.5.1.3 データ属性の扱い — 216
9.5.2 class属性の扱い — 216
9.6 DOMの操作 — 218
9.6.1 要素の追加 — 218
9.6.2 要素の削除 — 220
9.6.3 子要素，親要素，内部要素の取得 — 220
9.7 要素の選択 — 222
9.8 アニメーション効果 — 224
9.9 Webアプリケーション実装に関すること — 225
10 プログラムライブラリ(2)：MathJax — 227
11 プログラムライブラリ(3)：React — 229
11.1 基礎事項 — 229
11.1.1 基本的なライブラリ — 229
11.1.2 Reactアプリのレンダリング — 229
11.1.3 React要素とコンポーネント — 230
11.1.3.1 JSX — 230
11.1.3.2 クラスコンポーネント，関数コンポーネント — 231
11.1.4 コンポーネントに値を渡す方法：Props — 232
11.1.5 コンポーネントのStateとライフサイクル — 233
11.1.5.1 State — 233
11.1.5.2 ライフサイクル — 234
11.1.5.3 コンポーネントのスタイルの設定 — 234
11.1.5.4 条件付きレンダリング — 234
11.1.5.5 実装例に沿った解説 — 235
11.1.6 コンポーネントのイベントハンドリング — 239
11.1.7 複数コンポーネントの一括デプロイ：リストとキー — 240
11.2 実用的な使用方法 — 242
11.2.1 npmによる開発作業の概観 — 242
11.2.1.1 必要なソフトウェアのインストール — 242
11.2.1.2 ソースコードの用意 — 243
11.2.1.3 ビルド作業のための設定ファイルの準備 — 243
11.2.1.4 ビルド作業の実行 — 244
11.2.2 ソースコードの分割開発 — 245
11.2.3 ビルド作業時のリソース複製の設定： copy-webpack-plugin — 247
11.2.4 コンポーネント実装のための簡便な方法 — 247
A Webサーバ関連 — 249
A.1 Node.jsによるHTTPサーバ — 249
A.1.1 サーバの作成と起動 — 249
A.1.2 サーバの処理の実装 — 249
A.1.2.1 URLの解析 — 250
A.1.2.2 クエリ文字列の解析 — 251
A.1.2.3 リクエストオブジェクトの解析 — 251
A.1.2.4 クライアントへの応答のための処理 — 252
A.1.2.5 POSTメソッドで受け取ったデータの受理 — 252
A.1.2.6 エラーハンドリング（例外処理） — 253
A.1.3 サーバの実装例 — 253
A.1.3.1 単純な例 — 253
A.1.3.2 POSTされたデータを受理する例 — 254
A.2 PythonによるHTTPサーバ — 256
A.2.1 httpモジュールによる素朴なHTTPサーバ — 256
A.2.1.1 HTTPServerクラス — 256
A.2.1.2 BaseHTTPRequestHandlerクラス — 256
A.2.1.3 サーバの実装例 — 257
A.2.2 Flask — 260
A.2.2.1 最も簡単なHTTPサーバの実装例 — 260
A.2.2.2 リクエストの情報やPOSTされたデータの取得 — 261
A.3 Apache HTTP Server — 265
A.3.1 ソフトウェアの入手 — 265
A.3.2 ディレクトリの構成 — 265
A.3.3 インストール作業と設定 — 265
A.3.4 CGI関連 — 267
A.3.4.1 CGIを有効にする設定 — 267
A.3.4.2 CGIの実装 — 267
A.3.4.3 CGIのサンプル（1）：単純な例 — 268
A.3.4.4 CGIのサンプル（2）：環境変数とPOSTされた内容の表示 — 270
A.3.5 WSGI関連 — 272
A.3.5.1 WSGIを有効にする設定 — 272
A.3.5.2 WSGIスクリプトの実装 — 273
A.3.5.3 WSGIのサンプル（1）：単純な例 — 274
A.3.5.4 WSGIのサンプル（2）：環境変数とPOSTされた内容の表示 — 275
A.4 ローカルの計算機環境でHTTPサーバを起動する簡易な方法 — 277
A.4.1 Node.jsによる簡易な方法 — 277
A.4.2 Pythonによる簡易な方法 — 277
B Webブラウザ関連 — 278
B.1 スクリプトのキャッシュの抑止 — 278