JavaScriptのテキスト（PDF:269ページ,2.18MB）
まだ試作品（プレビュー版）です．ご意見くださいませ．
コメントはこのページの最下部から投稿できます．
■■ テキストの目次 ■■
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.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 数値リテラル — 37
3.5.1.6 数学関数 — 38
3.5.2 論理値 — 39
3.5.3 文字列 — 39
3.5.3.1 エスケープシーケンス — 40
3.5.3.2 複数行に渡る文字列の記述 — 40
3.5.3.3 文字列の長さ（文字数） — 41
3.5.3.4 文字列の連結と分解 — 41
3.5.3.5 文字列の繰り返し — 42
3.5.3.6 部分文字列 — 42
3.5.3.7 テンプレートリテラル（テンプレート文字列） — 42
3.5.3.8 文字列を数値に変換する方法 — 44
3.5.4 シンボル — 45
3.5.5 値の比較 — 45
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 — 57
3.6.2.1 要素の削除 — 57
3.6.2.2 プロパティのキーに使用できるデータ — 58
3.6.2.3 空オブジェクト — 58
3.6.2.4 オブジェクトから配列への変換 — 58
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 Blob — 70
3.7.3.1 Blob 作成の例 — 70
3.7.3.2 Blob のデータの取り出し — 71
3.7.4 BinaryString — 71
3.7.4.1 Blobとの間での変換 — 71
3.8 条件分岐 — 72
3.8.1 if … else 文 — 72
3.8.2 switch 文 — 73
3.8.3 値を選択する3項演算子 — 74
3.8.4 論理値以外を条件式に用いるケース — 74
3.9 反復制御 — 76
3.9.1 while 文 — 76
3.9.2 do … while 文 — 76
3.9.3 for 文 — 77
3.9.3.1 for … of 文 — 77
3.9.3.2 for … in 文 — 78
3.9.4 breakとcontinue — 79
3.10 関数の定義 — 80
3.10.1 引数に関する事柄 — 80
3.10.1.1 仮引数と実引数 — 80
3.10.1.2 任意の個数の引数を扱う方法 — 80
3.10.1.3 仮引数にデフォルト値を設定する方法 — 81
3.10.2 関数自体のスコープ — 81
3.10.3 関数式 — 82
3.10.3.1 即時実行関数 — 83
3.10.3.2 アロー関数式 — 83
3.10.4 関数の再帰的呼び出し — 84
3.10.5 ネストされた関数定義（内部関数） — 85
3.10.5.1 クロージャ — 85
3.11 オブジェクト指向プログラミング（OOP） — 87
3.11.1 メソッドの実装 — 88
3.11.1.1 prototypeプロパティ — 88
3.11.2 インスタンスのコンストラクタを調べる方法 — 89
3.11.3 Object.createによるオブジェクトの生成 — 89
3.11.4 プロパティ継承の仕組み — 89
3.11.5 class構文による方法 — 92
3.11.5.1 コンストラクタ，メソッドの記述 — 93
3.11.5.2 パブリックフィールド — 93
3.11.5.3 静的メソッド — 94
3.11.5.4 クラスの継承 — 95
3.11.5.5 オブジェクトのクラスを調べる方法 — 96
3.11.5.6 プロパティのカプセル化 — 97
3.11.5.7 class式 — 97
3.12 日付，時刻の扱い — 99
3.12.1 現在時刻の取得 — 99
3.12.2 値の取得と設定 — 99
3.12.3 データ形式の変換 — 100
3.12.3.1 Dateオブジェクト→文字列 — 100
3.12.3.2 文字列→Dateオブジェクト — 101
3.13 正規表現 — 102
3.13.1 文字列探索（検索） — 102
3.13.1.1 RegExpオブジェクト — 103
3.13.2 パターンマッチ — 103
3.13.2.1 マッチした部分の抽出 — 103
3.13.2.2 行頭，行末でのパターンマッチ — 104
3.13.2.3 パターンマッチの繰り返し実行 — 104
3.13.2.4 複数行のテキストに対するパターンマッチ — 104
3.13.3 置換処理 — 105
3.14 例外処理 — 107
3.14.1 エラーオブジェクト — 107
3.14.1.1 例外（エラー）の種類 — 108
3.14.2 例外を発生させる方法 — 109
3.15 その他の便利な機能 — 111
3.15.1 forEachによる反復処理 — 111
3.15.2 配列の全要素に対する一斉処理 — 112
3.15.2.1 対象要素のインデックスを取得する方法 — 112
3.15.3 配列に対する二項演算の連鎖的実行 — 113
4 Webアプリケーション開発のための基礎 — 114
4.1 HTMLとJavaScript — 114
4.2 DOMに基づいたプログラミング — 115
4.2.1 DOMの最上位のオブジェクト — 115
4.2.1.1 グローバル変数の所在 — 115
4.2.2 HTMLの最上位のオブジェクト — 115
4.2.3 HTML要素のクラス — 115
4.2.4 HTMLの木構造（階層構造） — 116
4.2.4.1 子要素，親要素を取得する方法 — 116
4.2.4.2 document直下の子要素 — 117
4.2.4.3 childNodesプロパティ — 117
4.2.5 HTML要素のid属性から要素ノードを取得する方法 — 118
4.2.6 HTML要素の要素名（タグ名）の取得 — 118
4.2.7 HTML要素の生成 — 118
4.2.7.1 HTML要素の属性を設定する方法 — 118
4.2.7.2 HTML要素の属性を取得する方法 — 119
4.2.7.3 HTML要素のデータ属性 — 119
4.2.8 テキストノードの作成 — 119
4.2.9 子ノードの追加 — 120
4.2.9.1 子ノードの追加位置の指定 — 120
4.2.10 子ノードの削除 — 121
4.2.11 HTML要素にテキストコンテンツを与える方法 — 122
4.2.12 HTML要素のclass属性から要素ノードを取得する方法 — 122
4.2.13 CSSのセレクタからHTML要素を取得する方法 — 123
4.3 JavaScriptでCSSにアクセスする方法 — 125
4.3.1 HTML要素のスタイルの取得 — 125
4.3.2 スタイルの動的な変更 — 125
4.3.2.1 styleプロパティ配下のCSS属性名に関する注意 — 126
4.4 イベント駆動型プログラミング — 127
4.4.1 イベントハンドリングの仕組み — 127
4.4.2 イベントの種類 — 128
4.4.2.1 ページの読込み，離脱 — 128
4.4.2.2 マウスの操作 — 128
4.4.2.3 キーボードの操作 — 128
4.4.2.4 変化や選択によって発生するイベント — 128
4.4.2.5 その他のイベント — 129
4.4.3 addEventListenerによるイベントハンドラの登録 — 129
4.4.4 イベント名のプロパティにイベントハンドラを登録する方法 — 130
4.4.5 イベントオブジェクト — 130
4.4.5.1 イベントオブジェクトの使用例（マウス関連） — 131
4.4.5.2 イベントオブジェクトの使用例（キーボード関連） — 132
4.4.6 タイマー — 133
4.4.6.1 タイマー処理の反復 — 133
4.4.6.2 タイマーの反復処理の応用例 — 134
4.5 表示環境に関する事柄 — 135
4.5.1 ディスプレイ（スクリーン）関連 — 135
4.5.2 ブラウザウィンドウ，コンテンツページ関連 — 135
4.5.3 表示の解像度を求める方法 — 136
4.5.4 px（ピクセル）からpt（ポイント）への単位の変換 — 137
4.5.5 ビューポート内でのHTML要素の位置とサイズ — 138
4.6 ローカル環境でのデータの保存 — 140
4.6.1 localStorage — 140
4.6.1.1 データの保存 — 140
4.6.1.2 データの取得 — 141
4.6.1.3 キーの取得 — 141
4.6.1.4 サンプルプログラム：全データの取得 — 142
4.6.1.5 データの消去 — 142
4.6.2 sessionStorage — 142
4.7 画像，音声の扱い — 143
4.7.1 静止画像の扱い — 143
4.7.1.1 静止画像を動的に切り替える方法 — 143
4.7.1.2 img要素の生成と追加 — 143
4.7.2 音声，動画の扱い — 145
4.7.2.1 HTMLMediaElementクラス — 145
4.7.2.2 再生と一時停止 — 145
4.7.2.3 各種のプロパティ — 145
4.7.2.4 各種のイベント — 146
4.7.2.5 動画：HTMLVideoElementオブジェクト — 146
4.7.2.6 応用例 — 146
4.8 JSON — 148
4.8.1 JSONデータの作成 — 148
4.8.2 JSONデータの展開 — 148
4.9 ファイルの入出力 — 149
4.9.1 ファイルの読込み — 149
4.9.1.1 input要素によるファイル選択ダイアログ — 149
4.9.1.2 FileReaderによるファイルの読込み — 150
4.9.2 ファイルの保存 — 152
4.10 ドラッグアンドドロップ — 154
4.10.1 ドラッグアンドドロップに伴う処理 — 154
4.10.1.1 dragstart イベントを受けて行う処理 — 155
4.10.1.2 dragover イベントを受けて行う処理 — 155
4.10.1.3 drop イベントを受けて行う処理 — 155
4.10.1.4 イベントオブジェクトの target 属性 — 155
4.11 プログラムの分割開発 — 157
4.11.1 単純な分割開発 — 157
4.11.2 モジュールによる分割開発 — 157
4.11.2.1 モジュール内のオブジェクトを公開する方法(1)：DOMを介する — 158
4.11.2.2 モジュール内のオブジェクトを公開する方法(2)：exportで公開する — 158
4.11.2.3 モジュール毎の名前空間を実現するための工夫 — 159
5 Web Workers — 162
5.1 基本的な考え方 — 162
5.1.1 ワーカーのプログラミングの考え方 — 162
5.2 ワーカーの並行実行 — 164
5.3 メッセージ送信におけるデータの複製と移転 — 166
6 グラフィックスの作成(1)：canvas要素 — 168
6.1 座標と角度の考え方 — 168
6.2 描画領域のサイズ — 168
6.3 描画コンテキスト — 169
6.3.1 フィルに関する描画の設定 — 169
6.3.2 輪郭線に関する描画の設定 — 169
6.3.2.1 線幅（線の太さ）と始点，終点の座標の考え方 — 169
6.3.2.2 線の端の形状の設定 — 169
6.3.2.3 線の結合部の形状の設定 — 169
6.3.2.4 破線の設定 — 170
6.4 描画メソッド — 171
6.4.1 矩形（四角形）の描画 — 171
6.4.2 テキストの描画 — 171
6.4.2.1 矩形とテキストを描画するサンプル — 171
6.4.3 パスの描画 — 172
6.4.3.1 折れ線の描画 — 172
6.4.3.2 円弧の描画 — 174
6.4.3.3 楕円弧の描画 — 175
6.4.4 画像の描画 — 176
6.4.5 画素（ピクセル）の描画と取得 — 177
6.4.5.1 ImageDataオブジェクトの画素の構造 — 177
6.4.5.2 ImageDataオブジェクトの描画 — 177
6.4.5.3 canvasから画素を取得する方法 — 179
6.5 スケール，傾き，原点の変更 — 179
6.5.1 描画コンテキストの状態の保存と復元 — 180
7 グラフィックスの作成(2)：SVG — 181
7.1 基礎事項 — 181
7.1.1 座標系と大きさ，角度の単位 — 181
7.1.2 記述の形式 — 181
7.1.3 ビューポートとビューボックス — 181
7.1.4 HTMLへのSVGの配置 — 182
7.1.4.1 img要素として配置する方法 — 182
7.1.4.2 object要素として配置する方法 — 183
7.1.5 defs要素による定義の再利用 — 184
7.2 SVGの図形要素 — 185
7.2.1 多角形，折れ線 — 185
7.2.2 輪郭線に関する設定事項 — 186
7.2.2.1 破線の設定 — 186
7.2.2.2 線の端の形状の設定 — 187
7.2.2.3 線の結合部の形状の設定 — 187
7.2.3 矩形：rect要素 — 188
7.2.4 円：circle要素 — 188
7.2.5 楕円：ellipse要素 — 189
7.2.6 直線：line要素 — 189
7.2.7 テキスト（文字列）：text要素 — 189
7.2.7.1 テキストの描画位置の基準 — 190
7.2.7.2 テキストの強調 — 190
7.2.7.3 フォントスタイル — 190
7.2.7.4 下線，上線，打消し線 — 190
7.2.7.5 文字の回転 — 191
7.2.8 パス：path要素 — 191
7.2.8.1 直線の描画 — 191
7.2.8.2 楕円弧 — 192
7.2.9 画像データの配置 — 194
7.2.10 transform属性 — 195
7.2.10.1 変換の重ね合わせ — 196
7.2.10.2 use要素による定義の展開 — 196
7.2.10.3 図形要素のグループ化 — 197
8 プログラムライブラリ(1)：jQuery — 198
8.1 jQueryの導入 — 198
8.2 jQueryオブジェクト — 198
8.2.1 関数の起動 — 199
8.2.2 HTML要素へのアクセス — 199
8.2.3 イベントハンドリングの登録 — 200
8.2.4 HTML要素の生成とDOMへの追加 — 200
8.2.5 jQueryオブジェクトが保持するHTML要素 — 200
8.2.6 jQueryで扱うHTML要素 — 201
8.2.7 jQueryにおけるwindow，document — 201
8.3 CSS属性へのアクセス — 201
8.4 イベントハンドリングのためのメソッド — 202
8.5 HTML要素の属性へのアクセス — 202
8.5.1 属性値の動的な扱い — 203
8.5.1.1 チェックボックスの扱い — 203
8.5.1.2 ラジオボタンの扱い — 204
8.5.1.3 データ属性の扱い — 205
8.5.2 class属性の扱い — 205
8.6 DOMの操作 — 207
8.6.1 要素の追加 — 207
8.6.2 要素の削除 — 209
8.6.3 子要素，親要素，内部要素の取得 — 209
8.7 要素の選択 — 211
8.8 アニメーション効果 — 213
8.9 Webアプリケーション実装に関すること — 214
9 プログラムライブラリ(2)：MathJax — 216
10 プログラムライブラリ(3)：React — 218
10.1 基礎事項 — 218
10.1.1 基本的なライブラリ — 218
10.1.2 Reactアプリのレンダリング — 218
10.1.3 React要素とコンポーネント — 219
10.1.3.1 JSX — 219
10.1.3.2 クラスコンポーネント，関数コンポーネント — 220
10.1.4 コンポーネントに値を渡す方法：Props — 221
10.1.5 コンポーネントのStateとライフサイクル — 222
10.1.5.1 State — 222
10.1.5.2 ライフサイクル — 223
10.1.5.3 コンポーネントのスタイルの設定 — 223
10.1.5.4 条件付きレンダリング — 223
10.1.5.5 実装例に沿った解説 — 224
10.1.6 コンポーネントのイベントハンドリング — 228
10.1.7 複数コンポーネントの一括デプロイ：リストとキー — 229
10.2 実用的な使用方法 — 231
10.2.1 npmによる開発作業の概観 — 231
10.2.1.1 必要なソフトウェアのインストール — 231
10.2.1.2 ソースコードの用意 — 232
10.2.1.3 ビルド作業のための設定ファイルの準備 — 232
10.2.1.4 ビルド作業の実行 — 233
10.2.2 ソースコードの分割開発 — 234
10.2.3 ビルド作業時のリソース複製の設定： copy-webpack-plugin — 236
10.2.4 コンポーネント実装のための簡便な方法 — 236
A Webサーバ関連 — 238
A.1 Apache HTTP Server — 238
A.1.1 ソフトウェアの入手 — 238
A.1.2 ディレクトリの構成 — 238
A.1.3 インストール作業と設定 — 238
A.1.4 CGI関連 — 240
A.1.4.1 CGIを有効にする設定 — 240
A.1.4.2 CGIの実装 — 240
A.1.4.3 CGIのサンプル — 241
A.2 ローカルの計算機環境でWebサーバを起動する簡易な方法 — 243
A.2.1 Node.jsによる簡易な方法 — 243
A.2.2 Pythonによる簡易な方法 — 243
B Webブラウザ関連 — 244
B.1 スクリプトのキャッシュの抑止 — 244