既に他の言語を習得している人が，迅速にJavaScriptでアプリ作りまでできるようになるための内容にしています．
－【新版】－－－－－－－－－－－－－－－－
●テキスト本体（PDF形式338ページ:2.49MB） 2024/08/20更新
（→ミラーサイトからDL）
プログラミングの学びにおいて感じることに，「いつまでも際限なく，知らない構文が出てくる」ということがあると思います．このようなスランプを脱するためにも「とりあえず一通り学べる」テキストを目指しています．
最近Reactの普及が目覚ましく，そろそろ無視できなくなってきたので基本的な使い方の解説を載せました．
Webアプリ構築にはWebサーバとの連携が重要です．これに関しても解説，言及しないといけませんので，新版からWebサーバに関することも載せていきます．CGI，WSGIの実装方法に関しても基本的な解説を載せています．これと併せてFetch APIの使用方法，WebSocketサーバ構築方法の簡単な解説も載せました．また，Python言語でWebサーバを構築するためのFlaskフレームワークについても，最も基本的な解説を載せました．Python言語ついてはこちらのテキストをご参照ください．
新版はまだプレビュー版（試作品）です．修正とアップデートしています．
旧版はフロントエンドエンジニアを目指す人の指導にはもう品質的に耐えられないので新版を作成しました．
－【旧版】－－－－－－－－－－－－－－－－
旧版はもうメンテナンスしていません．内容に不備・ほころびがありますのでその旨ご了承ください．
●テキスト本体（PDF形式204ページ:3.23MB） 2021/01/16更新
（→ミラーサイトからDL）
SVG描画の方法，class文によるオブジェクト指向プログラミング（ES2015/ES6）に言及しています．
HTMLとCSSに関しては，超入門に際して必要最小限の解説にとどめています．また，JQueryに関して最も基本的な事柄に関して解説しています．タイトルの通り 「JavaScript超入門」 です．
サンプルコードの掲載ページ（旧）
－－－－－－－－－－－－－－－－－－－－－
(2024/03/26)
学校でプログラミング教えています．
Web系プログラミングの授業を担当するにあたり編纂しました．2014-2021年（旧版）と2024年版を公開しています．
ご意見いただけましたらありがたいです．
JavaScriptはもはや「Web用の簡易言語」の域を超え，立派なプログラミング言語としての立場を固めています．性能も高くなってきています．馬鹿にできない言語になりましたね．
Electronなどの登場でもわかりますが，Webのレンダリングエンジンがアプリのフロントエンドになって，JavaScriptでコードを書くという開発スタイルも1つの定番にってきましたね．
（本書はElectronには触れていません．）
テキスト本体はフリーソフトとして公開します．著作権は保持していますが，商用／非商用問わず自由に使ってください．印刷と再配布もしていただいて構いませんが，内容は変更せずにお願いします．
「その代り」というわけではありませんが，不備な点への指摘や要望をください．
連絡先はテキストの裏表紙にあります．
補足
---(2024/07/08-08/20)--------
Webサーバの機能をPython言語で実現するためのFlaskフレームワークについて，最も基本的な解説を載せました．
Node.jsでWebサーバを構築するためのExpressについて最も基本的な解説を載せました．
WebSocketサーバの構築方法（Node.js，Python）について最も基本的な解説を載せました．
Promiseオブジェクトに関する基本的な解説を載せました．
ジェネレータ関数に関して基本的な解説を載せました．
その他
---(2024/03/26-06/30)--------
テキスト本体を全く新たに書き直しました．まだプレビュー版（試作品）です．
フロントエンドエンジニアを目指す人のための入門書というスタンスで作り直しました．
Reactの基本的な使い方についての要望が最近とても多くなってきたので，「最も基本的な部分」のみの解説を入れました．
WebサーバとしてApache HTTP Serverに関する基礎的な解説を載せました．CGI，WSGIの実装方法に関する基本的な解説を載せました．
Node.jsでWebサーバ実装する方法について，最も簡単な解説を載せました．
クライアント側からWebサーバにリクエストを送信して応答を受け取るための Fetch API に関して基本的な解説を載せました．
これからもご要望，ご助言お待ちしています．
---(2021/01/16)--------
若干の加筆と修正．
---(2020/02/23-03/14)--------
Mapオブジェクトに関する解説を追加しました．
apply, call に関する解説を追加しました．
jQuery の解説を若干追加しました．
紹介しているライブラリの版を新しいものに更新しました．
テキストの年度末メンテナンスをしています．アップデートの頻度が高くなりそうです．
---(2019/12/01-25)--------
正規表現に関する解説を加えました．
関数の引数の扱いに関する解説を加えました．
ドラッグ＆ドロップの方法に関する解説を加えました．
jQueryの「on」メソッド「index」メソッドに関する解説を加えました．
テンプレート文字列に関する解説を加えました．
その他，若干の修正と加筆．
---(2019/11/24-29)--------
基本的なHTMLの解説の部分に追記（table,ul,ol）しました．その他，要素の位置やサイズの設定に関する解説を増強しました．
変数，オブジェクト，プロパティに関する解説を増強しました．
配列を扱ういくつかのメソッドに関する解説を追加しました．
変数の let, const 宣言に関する解説を追加しました．
Set オブジェクトに関する基本的な解説を追加しました．
BigInt に関する基本的な解説を追加しました．
関数定義の際のデフォルト引数に関する解説を追加しました．
分割代入に関する解説を追加しました．
その他，若干の修正
---(2019/02/08-19)--------
「名前空間」に関する簡単な解説を加えました．SVGなどXMLを扱う際に重要な名前空間ですが，初心者の方には大きな違和感があるようです．「このアドレス，何ですか？」という質問を受けることもしばしば．SVGのpath要素に関して解説を追加．
うっかりHTML4の書き方で説明している部分も多く，今はHTML5の時代ですので，ぼちぼち修正しています．テキスト中のサンプルは文書型宣言〈!DOCTYPE html〉を省略しているものが多数ありますが，しばらくはWebブラウザの寛容さに頼ることにします．
要素の位置とサイズを取得するgetBoundingClientRectメソッドに関して追記．
---(2019/02/03-06)--------
html要素のmanifest属性は非推奨ですので，関連する内容を削除しました．
DOMに関する解説を追加．HTML要素（タグ）にJavaScriptからアクセスする方法は複数あり，初心者の方は混乱気味になります．このあたりをうまく整理したいのですが，まだまだですね… 同様にイベントハンドリングに関することでも，複数の異なる方法があって，初心者の方は増々混乱します…
結果として，同じような解説をテキスト内のあちこちで繰り返しているような形になってしまっています…
メンテナンス続く．
---(2019/01/27-31)--------
年度末なのでテキストのメンテナンス作業をはじめます．新年度にかけて更新が多くなると思います．
早速ですが，関数定義の解説に加筆しました．ローカル変数についての説明と，アロー関数についての基本的な解説を入れました．それと，数値計算に関する解説の加筆．
リストに対するsortメソッドの解説に誤りあり．「昇順／降順」を取り違えて解説しておりました．利用者の方々にお詫びします．修正しましたので最新版をご利用ください．
---(2019/01/11-16)--------
jQueryライブラリの基本的な使用方法を載せました．誤解している人も多いのですが，「$」表記はJavaScriptの本来の文法ではありません．でもjQueryの有用性は確かなものですので，今ではJavaScriptの基礎事項に含まれるという認識が広まっているわけですね．
---(2018/07/15)--------
MathJaxライブラリの基本的な使用方法を載せました．
---(2018/03/03)--------
デバッグの方法について簡単な説明を加えました．
---(2018/02/25,26)--------
SVGのビューポートとビューボックスに関して加筆しました．あと，SVG図形要素に対するイベントハンドリングの方法についても加筆しました．インタラクティブなコンテンツを作成するのに役立つと思います．
---(2018/02/18)--------
フォントファイルの扱いに関することと，URLで指定したコンテンツをダウンロードする方法について加筆しました．
---(2018/02/12)--------
JavaScriptのオブジェクト指向はfunction文を使った「プロトタイプベース」が常識ですが，このことがプログラミング初心者を遠ざける原因ではないかと個人的には考えています．それで敢えてclass文による（新しい規格に沿った）方法によるオブジェクト指向についてのみ解説しています．
JavaScriptが初心者の入門用の言語として普及すると良いですね．
一応「プロトタイプベース」もまだまだ重要ですので，入門レベルが終わったら是非学んでください．「どうしても腑に落ちない」「汚くて嫌だ」という人はLISPを学ぶことをおすすめします．「リスト構造」と「Ｓ式」,「lambda算法」が分かった後で振り返ると，JavaScriptのエンジンの構造とfunction文の裏側が見えてくると思います．
全く余談ですが，若い頃に熱中したCommonLispを久しぶりにやってみたくなりました．テキスト書くのも楽しそうなので，そのうち書くかもしれません．
→補足：Lispのテキスト作りました（2020/02/29）
目次（新版）
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.4.3.1 分割代入における「オブジェクトのパターン」 --- 36
3.4.3.2 分割代入の高度な応用 --- 36
3.4.4 変数の廃棄 --- 36
3.5 基本的なデータ型 --- 37
3.5.1 数値 --- 37
3.5.1.1 基本的な演算 --- 37
3.5.1.2 累算的な代入演算子 --- 38
3.5.1.3 特殊な値 --- 38
3.5.1.4 長整数： BigInt --- 39
3.5.1.5 数値リテラル --- 39
3.5.1.6 数学関数 --- 40
3.5.2 論理値 --- 41
3.5.3 文字列 --- 41
3.5.3.1 エスケープシーケンス --- 42
3.5.3.2 複数行に渡る文字列の記述 --- 42
3.5.3.3 文字列の長さ（文字数） --- 42
3.5.3.4 文字列の連結と分解 --- 43
3.5.3.5 文字列の繰り返し --- 44
3.5.3.6 部分文字列 --- 44
3.5.3.7 文字列の含有検査 --- 44
3.5.3.8 文字列の探索 --- 44
3.5.3.9 テンプレートリテラル（テンプレート文字列） --- 45
3.5.3.10 文字列を数値に変換する方法 --- 46
3.5.4 シンボル --- 47
3.5.5 値の比較 --- 47
3.5.6 値の型に関すること --- 48
3.6 データ構造 --- 50
3.6.1 配列：Array --- 50
3.6.1.1 空配列 --- 51
3.6.1.2 要素の追加 --- 51
3.6.1.3 要素の削除 --- 52
3.6.1.4 配列の連結 --- 53
3.6.1.5 部分配列 --- 53
3.6.1.6 配列の編集 --- 53
3.6.1.7 配列の反転 --- 54
3.6.1.8 要素の整列 --- 54
3.6.1.9 指定した要素を配列内に並べる方法 --- 55
3.6.1.10 要素の存在や位置の調査 --- 55
3.6.1.11 配列の並びを表す文字列の取得 --- 56
3.6.1.12 全要素に対する条件検査 --- 56
3.6.1.13 条件を満たす要素の探索 --- 57
3.6.1.14 特殊なプロパティ --- 58
3.6.2 オブジェクト：Object --- 58
3.6.2.1 要素の削除 --- 59
3.6.2.2 プロパティのキーに使用できるデータ --- 59
3.6.2.3 空オブジェクト --- 60
3.6.2.4 オブジェクトから配列への変換 --- 60
3.6.2.5 オブジェクトの要素の個数を求める方法 --- 60
3.6.2.6 計算されたプロパティ名 --- 60
3.6.3 Mapオブジェクト --- 61
3.6.3.1 要素へのアクセス --- 61
3.6.3.2 要素の存在確認 --- 61
3.6.3.3 要素の個数の調査 --- 62
3.6.3.4 全要素の取出し --- 62
3.6.3.5 要素の削除 --- 62
3.6.3.6 ミュータブルなデータをキーに使用する際の注意 --- 63
3.6.4 Setオブジェクト --- 64
3.6.4.1 要素の存在確認 --- 64
3.6.4.2 要素の追加と削除 --- 64
3.6.4.3 要素の個数の調査 --- 64
3.6.4.4 配列への変換 --- 65
3.6.4.5 全要素の削除 --- 65
3.6.4.6 ミュータブルなデータを要素にする際の注意 --- 65
3.6.5 スプレッド構文 --- 66
3.7 特殊なデータ構造 --- 67
3.7.1 型付き配列（TypedArray）とArrayBuffer --- 67
3.7.1.1 ArrayBufferの複数のビューによる共有 --- 68
3.7.1.2 バイトオーダー（リトルエンディアン／ビッグエンディアン） --- 69
3.7.2 データビュー（DataView） --- 70
3.7.3 文字列⇔バイナリデータの変換 --- 72
3.7.3.1 Node.jsでの方法 --- 72
3.7.4 Blob --- 73
3.7.4.1 Blob 作成の例 --- 73
3.7.4.2 Blob のデータの取り出し --- 74
3.7.5 BinaryString --- 74
3.7.5.1 Blobとの間での変換 --- 74
3.8 条件分岐 --- 75
3.8.1 if … else 文 --- 75
3.8.2 switch 文 --- 76
3.8.3 値を選択する3項演算子 --- 77
3.8.4 論理値以外を条件式に用いるケース --- 77
3.9 反復制御 --- 79
3.9.1 while 文 --- 79
3.9.2 do … while 文 --- 79
3.9.3 for 文 --- 80
3.9.3.1 for … of 文 --- 80
3.9.3.2 for … in 文 --- 81
3.9.4 breakとcontinue --- 82
3.10 関数の定義 --- 83
3.10.1 変数のスコープ --- 83
3.10.1.1 変数の使用における安全でない例 --- 84
3.10.2 引数に関する事柄 --- 85
3.10.2.1 仮引数と実引数 --- 85
3.10.2.2 任意の個数の引数を扱う方法 --- 85
3.10.2.3 仮引数にデフォルト値を設定する方法 --- 85
3.10.3 関数自体のスコープ --- 86
3.10.4 関数式 --- 87
3.10.4.1 即時実行関数 --- 87
3.10.4.2 アロー関数式 --- 87
3.10.5 関数の再帰的呼び出し --- 88
3.10.6 ネストされた関数定義（内部関数） --- 89
3.10.6.1 クロージャ --- 89
3.10.7 オブジェクトとメソッドの考え方 --- 91
3.10.8 ジェネレータ関数 --- 92
3.10.8.1 ジェネレータ関数の入れ子 --- 93
3.11 イテラブルオブジェクトとイテレータ --- 94
3.11.1 イテラブルオブジェクト --- 94
3.12 オブジェクト指向プログラミング（OOP） --- 96
3.12.1 メソッドの実装 --- 97
3.12.1.1 prototypeプロパティ --- 97
3.12.2 インスタンスのコンストラクタを調べる方法 --- 98
3.12.3 Object.createによるオブジェクトの生成 --- 98
3.12.4 プロパティ継承の仕組み --- 98
3.12.5 class構文による方法 --- 101
3.12.5.1 コンストラクタ，メソッドの記述 --- 102
3.12.5.2 パブリックフィールド --- 102
3.12.5.3 静的メソッド --- 103
3.12.5.4 クラスの継承 --- 104
3.12.5.5 オブジェクトのクラスを調べる方法 --- 105
3.12.5.6 プロパティのカプセル化 --- 106
3.12.5.7 class式 --- 106
3.13 日付，時刻の扱い --- 108
3.13.1 現在時刻の取得 --- 108
3.13.2 値の取得と設定 --- 108
3.13.3 データ形式の変換 --- 109
3.13.3.1 Dateオブジェクト→文字列 --- 109
3.13.3.2 文字列→Dateオブジェクト --- 110
3.14 正規表現 --- 111
3.14.1 文字列探索（検索） --- 111
3.14.1.1 RegExpオブジェクト --- 112
3.14.2 パターンマッチ --- 112
3.14.2.1 マッチした部分の抽出 --- 112
3.14.2.2 行頭，行末でのパターンマッチ --- 113
3.14.2.3 パターンマッチの繰り返し実行 --- 113
3.14.2.4 複数行のテキストに対するパターンマッチ --- 113
3.14.3 置換処理 --- 114
3.15 例外処理 --- 116
3.15.1 エラーオブジェクト --- 116
3.15.1.1 例外（エラー）の種類 --- 117
3.15.2 例外を発生させる方法 --- 118
3.16 その他の便利な機能 --- 120
3.16.1 forEachによる反復処理 --- 120
3.16.2 配列の全要素に対する一斉処理 --- 121
3.16.2.1 対象要素のインデックスを取得する方法 --- 121
3.16.3 配列に対する二項演算の連鎖的実行 --- 122
4 Webアプリケーション開発のための基礎 --- 123
4.1 HTMLとJavaScript --- 123
4.2 DOMに基づいたプログラミング --- 124
4.2.1 DOMの最上位のオブジェクト --- 124
4.2.1.1 グローバル変数の所在 --- 124
4.2.2 HTMLの最上位のオブジェクト --- 124
4.2.3 HTML要素のクラス --- 124
4.2.4 HTMLの木構造（階層構造） --- 125
4.2.4.1 子要素，親要素を取得する方法 --- 125
4.2.4.2 document直下の子要素 --- 126
4.2.4.3 childNodesプロパティ --- 126
4.2.5 HTML要素のid属性から要素ノードを取得する方法 --- 127
4.2.6 HTML要素の要素名（タグ名）の取得 --- 127
4.2.7 HTML要素の生成 --- 127
4.2.7.1 HTML要素の属性を設定する方法 --- 128
4.2.7.2 HTML要素の属性を取得する方法 --- 128
4.2.7.3 HTML要素のデータ属性 --- 128
4.2.8 テキストノードの作成 --- 129
4.2.9 子ノードの追加 --- 129
4.2.9.1 子ノードの追加位置の指定 --- 129
4.2.10 子ノードの削除 --- 131
4.2.11 HTML要素にテキストコンテンツを与える方法 --- 131
4.2.12 HTML要素のclass属性から要素ノードを取得する方法 --- 131
4.2.13 DOMParser --- 133
4.2.14 CSSのセレクタからHTML要素を取得する方法 --- 134
4.3 JavaScriptでCSSにアクセスする方法 --- 135
4.3.1 HTML要素のスタイルの取得 --- 135
4.3.2 スタイルの動的な変更 --- 135
4.3.2.1 styleプロパティ配下のCSS属性名に関する注意 --- 136
4.4 イベント駆動型プログラミング --- 137
4.4.1 イベントハンドリングの仕組み --- 137
4.4.2 イベントの種類 --- 138
4.4.2.1 ページの読込み，離脱 --- 138
4.4.2.2 マウスの操作 --- 138
4.4.2.3 キーボードの操作 --- 138
4.4.2.4 変化や選択によって発生するイベント --- 138
4.4.2.5 その他のイベント --- 139
4.4.3 addEventListenerによるイベントハンドラの登録 --- 139
4.4.4 イベント名のプロパティにイベントハンドラを登録する方法 --- 140
4.4.5 イベントオブジェクト --- 140
4.4.5.1 イベントオブジェクトの使用例（マウス関連） --- 141
4.4.5.2 イベントオブジェクトの使用例（キーボード関連） --- 142
4.4.6 タイマー --- 143
4.4.6.1 タイマー処理の反復 --- 143
4.4.6.2 タイマーの反復処理の応用例 --- 144
4.5 表示環境に関する事柄 --- 145
4.5.1 ディスプレイ（スクリーン）関連 --- 145
4.5.2 ブラウザウィンドウ，コンテンツページ関連 --- 145
4.5.3 表示の解像度を求める方法 --- 146
4.5.4 px（ピクセル）からpt（ポイント）への単位の変換 --- 147
4.5.5 ビューポート内でのHTML要素の位置とサイズ --- 148
4.6 ローカル環境でのデータの保存 --- 150
4.6.1 localStorage --- 150
4.6.1.1 データの保存 --- 150
4.6.1.2 データの取得 --- 151
4.6.1.3 キーの取得 --- 151
4.6.1.4 サンプルプログラム：全データの取得 --- 152
4.6.1.5 データの消去 --- 152
4.6.2 sessionStorage --- 152
4.7 画像，音声の扱い --- 153
4.7.1 静止画像の扱い --- 153
4.7.1.1 静止画像を動的に切り替える方法 --- 153
4.7.1.2 img要素の生成と追加 --- 153
4.7.2 音声，動画の扱い --- 155
4.7.2.1 HTMLMediaElementクラス --- 155
4.7.2.2 再生と一時停止 --- 155
4.7.2.3 各種のプロパティ --- 155
4.7.2.4 各種のイベント --- 156
4.7.2.5 動画：HTMLVideoElementオブジェクト --- 156
4.7.2.6 応用例 --- 157
4.8 非同期処理とPromise --- 158
4.8.1 Promiseオブジェクト --- 158
4.8.2 実装例 --- 159
4.9 JSON --- 163
4.9.1 JSONデータの作成 --- 163
4.9.2 JSONデータの展開 --- 163
4.10 通信のためのデータ変換 --- 164
4.10.1 URLエンコーディング --- 164
4.10.2 Base64 --- 164
4.10.2.1 base64-jsライブラリ --- 165
4.11 ファイルの入出力 --- 167
4.11.1 ファイルの読込み --- 167
4.11.1.1 input要素によるファイル選択ダイアログ --- 167
4.11.1.2 FileReaderによるファイルの読込み --- 168
4.11.2 ファイルの保存 --- 170
4.12 ドラッグアンドドロップ --- 172
4.12.1 ドラッグアンドドロップに伴う処理 --- 172
4.12.1.1 dragstart イベントを受けて行う処理 --- 173
4.12.1.2 dragover イベントを受けて行う処理 --- 173
4.12.1.3 drop イベントを受けて行う処理 --- 173
4.12.1.4 イベントオブジェクトの target 属性 --- 173
4.13 プログラムの分割開発 --- 175
4.13.1 単純な分割開発 --- 175
4.13.2 モジュールによる分割開発 --- 175
4.13.2.1 モジュール内のオブジェクトを公開する方法(1)：DOMを介する --- 176
4.13.2.2 モジュール内のオブジェクトを公開する方法(2)：exportで公開する --- 176
4.13.2.3 モジュール毎の名前空間を実現するための工夫 --- 177
5 Web Workers --- 180
5.1 基本的な考え方 --- 180
5.1.1 ワーカーのプログラミングの考え方 --- 180
5.2 ワーカーの並行実行 --- 182
5.3 メッセージ送信におけるデータの複製と移転 --- 184
6 通信のための機能 --- 186
6.1 Fetch API --- 186
6.1.1 基本的な通信の手順 --- 186
6.1.2 Promiseによる非同期処理 --- 186
6.1.3 サーバからの応答の解析 --- 187
6.1.4 応答からのデータ本体の取り出し --- 187
6.1.5 例外処理 --- 187
6.1.6 Fetch API の使用例 --- 188
7 グラフィックスの作成(1)：canvas要素 --- 190
7.1 座標と角度の考え方 --- 190
7.2 描画領域のサイズ --- 190
7.3 描画コンテキスト --- 191
7.3.1 フィルに関する描画の設定 --- 191
7.3.2 輪郭線に関する描画の設定 --- 191
7.3.2.1 線幅（線の太さ）と始点，終点の座標の考え方 --- 191
7.3.2.2 線の端の形状の設定 --- 191
7.3.2.3 線の結合部の形状の設定 --- 191
7.3.2.4 破線の設定 --- 192
7.4 描画メソッド --- 193
7.4.1 矩形（四角形）の描画 --- 193
7.4.2 テキストの描画 --- 193
7.4.2.1 矩形とテキストを描画するサンプル --- 193
7.4.3 パスの描画 --- 194
7.4.3.1 折れ線の描画 --- 194
7.4.3.2 円弧の描画 --- 196
7.4.3.3 楕円弧の描画 --- 197
7.4.4 画像の描画 --- 198
7.4.5 画素（ピクセル）の描画と取得 --- 199
7.4.5.1 ImageDataオブジェクトの画素の構造 --- 199
7.4.5.2 ImageDataオブジェクトの描画 --- 199
7.4.5.3 canvasから画素を取得する方法 --- 201
7.5 スケール，傾き，原点の変更 --- 201
7.5.1 描画コンテキストの状態の保存と復元 --- 202
8 グラフィックスの作成(2)：SVG --- 203
8.1 基礎事項 --- 203
8.1.1 座標系と大きさ，角度の単位 --- 203
8.1.2 記述の形式 --- 203
8.1.3 ビューポートとビューボックス --- 203
8.1.4 HTMLへのSVGの配置 --- 204
8.1.4.1 img要素として配置する方法 --- 204
8.1.4.2 object要素として配置する方法 --- 205
8.1.5 defs要素による定義の再利用 --- 206
8.2 SVGの図形要素 --- 207
8.2.1 多角形，折れ線 --- 207
8.2.2 輪郭線に関する設定事項 --- 208
8.2.2.1 破線の設定 --- 208
8.2.2.2 線の端の形状の設定 --- 209
8.2.2.3 線の結合部の形状の設定 --- 209
8.2.3 矩形：rect要素 --- 210
8.2.4 円：circle要素 --- 210
8.2.5 楕円：ellipse要素 --- 211
8.2.6 直線：line要素 --- 211
8.2.7 テキスト（文字列）：text要素 --- 211
8.2.7.1 テキストの描画位置の基準 --- 212
8.2.7.2 テキストの強調 --- 212
8.2.7.3 フォントスタイル --- 212
8.2.7.4 下線，上線，打消し線 --- 212
8.2.7.5 文字の回転 --- 213
8.2.8 パス：path要素 --- 213
8.2.8.1 直線の描画 --- 213
8.2.8.2 楕円弧 --- 214
8.2.9 画像データの配置 --- 216
8.2.10 transform属性 --- 217
8.2.10.1 変換の重ね合わせ --- 218
8.2.10.2 use要素による定義の展開 --- 218
8.2.10.3 図形要素のグループ化 --- 219
9 プログラムライブラリ(1)：jQuery --- 220
9.1 jQueryの導入 --- 220
9.2 jQueryオブジェクト --- 220
9.2.1 関数の起動 --- 221
9.2.2 HTML要素へのアクセス --- 221
9.2.3 イベントハンドリングの登録 --- 222
9.2.4 HTML要素の生成とDOMへの追加 --- 222
9.2.5 jQueryオブジェクトが保持するHTML要素 --- 222
9.2.6 jQueryで扱うHTML要素 --- 223
9.2.7 jQueryにおけるwindow，document --- 223
9.3 CSS属性へのアクセス --- 223
9.4 イベントハンドリングのためのメソッド --- 224
9.5 HTML要素の属性へのアクセス --- 224
9.5.1 属性値の動的な扱い --- 225
9.5.1.1 チェックボックスの扱い --- 225
9.5.1.2 ラジオボタンの扱い --- 226
9.5.1.3 データ属性の扱い --- 227
9.5.2 class属性の扱い --- 227
9.6 DOMの操作 --- 229
9.6.1 要素の追加 --- 229
9.6.2 要素の削除 --- 231
9.6.3 子要素，親要素，内部要素の取得 --- 231
9.7 要素の選択 --- 233
9.8 アニメーション効果 --- 235
9.9 Webアプリケーション実装に関すること --- 236
10 プログラムライブラリ(2)：MathJax --- 238
11 プログラムライブラリ(3)：React --- 240
11.1 基礎事項 --- 240
11.1.1 基本的なライブラリ --- 240
11.1.2 Reactアプリのレンダリング --- 240
11.1.3 React要素とコンポーネント --- 241
11.1.3.1 JSX --- 241
11.1.3.2 クラスコンポーネント，関数コンポーネント --- 242
11.1.4 コンポーネントに値を渡す方法：Props --- 243
11.1.5 コンポーネントのStateとライフサイクル --- 244
11.1.5.1 State --- 244
11.1.5.2 ライフサイクル --- 245
11.1.5.3 コンポーネントのスタイルの設定 --- 245
11.1.5.4 条件付きレンダリング --- 245
11.1.5.5 実装例に沿った解説 --- 246
11.1.6 コンポーネントのイベントハンドリング --- 250
11.1.7 複数コンポーネントの一括デプロイ：リストとキー --- 251
11.2 実用的な使用方法 --- 253
11.2.1 npmによる開発作業の概観 --- 253
11.2.1.1 必要なソフトウェアのインストール --- 253
11.2.1.2 ソースコードの用意 --- 254
11.2.1.3 ビルド作業のための設定ファイルの準備 --- 254
11.2.1.4 ビルド作業の実行 --- 255
11.2.2 ソースコードの分割開発 --- 256
11.2.3 ビルド作業時のリソース複製の設定： copy-webpack-plugin --- 258
11.2.4 コンポーネント実装のための簡便な方法 --- 258
A Webサーバ関連 --- 260
A.1 Node.jsによるHTTPサーバ --- 260
A.1.1 ライブラリの読込み --- 260
A.1.2 サーバの作成と起動 --- 260
A.1.3 サーバの処理の実装 --- 261
A.1.3.1 URLの解析 --- 261
A.1.3.2 クエリ文字列の解析 --- 262
A.1.3.3 リクエストオブジェクトの解析 --- 262
A.1.3.4 クライアントへの応答のための処理 --- 262
A.1.3.5 POSTメソッドで受け取ったデータの受理 --- 263
A.1.3.6 エラーハンドリング（例外処理） --- 264
A.1.4 サーバの実装例 --- 264
A.1.4.1 単純な例 --- 264
A.1.4.2 POSTされたデータを受理する例 --- 265
A.1.5 ExpressライブラリによるHTTPサーバ --- 266
A.1.5.1 サーバの作成 --- 266
A.1.5.2 リクエストへの応答処理の実装 --- 266
A.1.5.3 サーバの起動 --- 268
A.1.5.4 サーバの実装例（1）：リクエストのルーティング --- 268
A.1.5.5 サーバの実装例（2）：リクエストの解析 --- 269
A.1.5.6 サーバの実装例（3）：ルートパラメータの取得 --- 270
A.2 PythonによるHTTPサーバ --- 272
A.2.1 httpモジュールによる素朴なHTTPサーバ --- 272
A.2.1.1 HTTPServerクラス --- 272
A.2.1.2 BaseHTTPRequestHandlerクラス --- 272
A.2.1.3 サーバの実装例 --- 273
A.2.2 Flask --- 276
A.2.2.1 最も簡単なHTTPサーバの実装例 --- 276
A.2.2.2 リクエストの情報やPOSTされたデータの取得 --- 277
A.3 Apache HTTP Server --- 281
A.3.1 ソフトウェアの入手 --- 281
A.3.2 ディレクトリの構成 --- 281
A.3.3 インストール作業と設定 --- 281
A.3.4 CGI関連 --- 283
A.3.4.1 CGIを有効にする設定 --- 283
A.3.4.2 CGIの実装 --- 283
A.3.4.3 CGIのサンプル（1）：単純な例 --- 284
A.3.4.4 CGIのサンプル（2）：環境変数とPOSTされた内容の表示 --- 286
A.3.5 WSGI関連 --- 288
A.3.5.1 WSGIを有効にする設定 --- 288
A.3.5.2 WSGIスクリプトの実装 --- 289
A.3.5.3 WSGIのサンプル（1）：単純な例 --- 290
A.3.5.4 WSGIのサンプル（2）：環境変数とPOSTされた内容の表示 --- 291
A.4 ローカルの計算機環境でHTTPサーバを起動する簡易な方法 --- 293
A.4.1 Node.jsによる簡易な方法 --- 293
A.4.2 Pythonによる簡易な方法 --- 293
A.5 WebSocket --- 294
A.5.1 Node.jsによるWebSocket --- 294
A.5.1.1 サーバインスタンスの生成と設定 --- 294
A.5.1.2 クライアントとの通信に関する処理の実装 --- 295
A.5.1.3 エラーハンドリング --- 295
A.5.1.4 通信相手に対するメッセージの送信 --- 296
A.5.1.5 接続中のクライアントの一覧 --- 296
A.5.1.6 実装例 --- 296
A.5.1.7 URLのパスに基づくルーティング --- 298
A.5.2 PythonによるWebSocket --- 302
A.5.2.1 基本的な考え方 --- 302
A.5.2.2 サーバの作成と実行の流れ --- 302
A.5.2.3 ハンドラ関数 --- 302
A.5.2.4 サーバの実装例（1）：非同期のイテレーションによる方法 --- 303
A.5.2.5 サーバの実装例（2）：通常の反復による方法 --- 305
B Webブラウザ関連 --- 306
B.1 スクリプトのキャッシュの抑止 --- 306
C Node.js --- 307
C.1 REPLによる対話的な利用方法 --- 307
C.1.1 REPLの終了 --- 307
C.1.2 プログラムの読込み --- 307
C.2 標準入力からの同期入力 --- 308
written by 中村勝則