既に他の言語を習得している人が，迅速にJavaScriptでアプリ作りまでできるようになるための内容にしています．
－【新版】－－－－－－－－－－－－－－－－
●テキスト本体（PDF形式262ページ:2.10MB） 2024/05/10更新
（→ミラーサイトからDL）
プログラミングの学びにおいて感じることに，「いつまでも際限なく，知らない構文が出てくる」ということがあると思います．このようなスランプを脱するためにも「とりあえず一通り学べる」テキストを目指しています．
最近Reactの普及が目覚ましく，そろそろ無視できなくなってきたので基本的な使い方の解説を載せました．
新版はまだプレビュー版（試作品）です．これからアップデートして行きます．
旧版はフロントエンドエンジニアを目指す人の指導にはもう品質的に耐えられないので新版を作成しました．
－【旧版】－－－－－－－－－－－－－－－－
旧版はもうメンテナンスしていません．内容に不備・ほころびがありますのでその旨ご了承ください．
●テキスト本体（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/03/26-05/10)--------
テキスト本体を全く新たに書き直しました．まだプレビュー版（試作品）です．
フロントエンドエンジニアを目指す人のための入門書というスタンスで作り直しました．
Reactの基本的な使い方についての要望が最近とても多くなってきたので，「最も基本的な部分」のみの解説を入れました．
これからもご要望，ご助言お待ちしています．
---(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.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 文字列の連結と分解 --- 40
3.5.3.4 文字列の繰り返し --- 41
3.5.3.5 部分文字列 --- 42
3.5.3.6 テンプレートリテラル（テンプレート文字列） --- 42
3.5.3.7 文字列を数値に変換する方法 --- 43
3.5.4 シンボル --- 45
3.5.5 値の比較 --- 45
3.5.6 値の型に関すること --- 46
3.6 データ構造 --- 47
3.6.1 配列：Array --- 47
3.6.1.1 空配列 --- 48
3.6.1.2 要素の追加 --- 48
3.6.1.3 要素の削除 --- 49
3.6.1.4 配列の連結 --- 50
3.6.1.5 部分配列 --- 50
3.6.1.6 配列の編集 --- 50
3.6.1.7 配列の反転 --- 51
3.6.1.8 要素の整列 --- 51
3.6.1.9 指定した要素を配列内に並べる方法 --- 52
3.6.1.10 要素の存在や位置の調査 --- 52
3.6.1.11 配列の並びを表す文字列の取得 --- 53
3.6.1.12 全要素に対する条件検査 --- 53
3.6.1.13 条件を満たす要素の探索 --- 54
3.6.1.14 特殊なプロパティ --- 55
3.6.2 オブジェクト：Object --- 56
3.6.2.1 要素の削除 --- 56
3.6.2.2 プロパティのキーに使用できるデータ --- 57
3.6.2.3 空オブジェクト --- 57
3.6.2.4 オブジェクトから配列への変換 --- 57
3.6.2.5 オブジェクトの要素の個数を求める方法 --- 57
3.6.3 Mapオブジェクト --- 58
3.6.3.1 要素へのアクセス --- 58
3.6.3.2 要素の存在確認 --- 58
3.6.3.3 要素の個数の調査 --- 59
3.6.3.4 全要素の取出し --- 59
3.6.3.5 要素の削除 --- 59
3.6.3.6 ミュータブルなデータをキーに使用する際の注意 --- 60
3.6.4 Setオブジェクト --- 61
3.6.4.1 要素の存在確認 --- 61
3.6.4.2 要素の追加と削除 --- 61
3.6.4.3 要素の個数の調査 --- 61
3.6.4.4 配列への変換 --- 62
3.6.4.5 全要素の削除 --- 62
3.6.4.6 ミュータブルなデータを要素にする際の注意 --- 62
3.6.5 スプレッド構文 --- 63
3.7 特殊なデータ構造 --- 64
3.7.1 型付き配列（TypedArray）とArrayBuffer --- 64
3.7.1.1 ArrayBufferの複数のビューによる共有 --- 65
3.7.1.2 バイトオーダー（リトルエンディアン／ビッグエンディアン） --- 66
3.7.2 データビュー（DataView） --- 67
3.7.3 Blob --- 69
3.7.3.1 Blob 作成の例 --- 69
3.7.3.2 Blob のデータの取り出し --- 70
3.7.4 BinaryString --- 70
3.7.4.1 Blobとの間での変換 --- 70
3.8 条件分岐 --- 71
3.8.1 if … else 文 --- 71
3.8.2 switch 文 --- 72
3.8.3 値を選択する3項演算子 --- 73
3.8.4 論理値以外を条件式に用いるケース --- 73
3.9 反復制御 --- 75
3.9.1 while 文 --- 75
3.9.2 do … while 文 --- 75
3.9.3 for 文 --- 76
3.9.3.1 for … of 文 --- 76
3.9.3.2 for … in 文 --- 77
3.9.4 breakとcontinue --- 78
3.10 関数の定義 --- 79
3.10.1 引数に関する事柄 --- 79
3.10.1.1 仮引数と実引数 --- 79
3.10.1.2 任意の個数の引数を扱う方法 --- 79
3.10.1.3 仮引数にデフォルト値を設定する方法 --- 80
3.10.2 関数自体のスコープ --- 80
3.10.3 関数式 --- 81
3.10.3.1 即時実行関数 --- 82
3.10.3.2 アロー関数式 --- 82
3.10.4 関数の再帰的呼び出し --- 83
3.10.5 ネストされた関数定義（内部関数） --- 84
3.10.5.1 クロージャ --- 84
3.11 オブジェクト指向プログラミング（OOP） --- 86
3.11.1 メソッドの実装 --- 87
3.11.1.1 prototypeプロパティ --- 87
3.11.2 インスタンスのコンストラクタを調べる方法 --- 88
3.11.3 Object.createによるオブジェクトの生成 --- 88
3.11.4 プロパティ継承の仕組み --- 88
3.11.5 class構文による方法 --- 91
3.11.5.1 コンストラクタ，メソッドの記述 --- 92
3.11.5.2 パブリックフィールド --- 92
3.11.5.3 静的メソッド --- 93
3.11.5.4 クラスの継承 --- 94
3.11.5.5 オブジェクトのクラスを調べる方法 --- 95
3.11.5.6 プロパティのカプセル化 --- 96
3.11.5.7 class式 --- 96
3.12 日付，時刻の扱い --- 98
3.12.1 現在時刻の取得 --- 98
3.12.2 値の取得と設定 --- 98
3.12.3 データ形式の変換 --- 99
3.12.3.1 Dateオブジェクト→文字列 --- 99
3.12.3.2 文字列→Dateオブジェクト --- 100
3.13 正規表現 --- 101
3.13.1 文字列探索（検索） --- 101
3.13.1.1 RegExpオブジェクト --- 102
3.13.2 パターンマッチ --- 102
3.13.2.1 マッチした部分の抽出 --- 102
3.13.2.2 行頭，行末でのパターンマッチ --- 103
3.13.2.3 パターンマッチの繰り返し実行 --- 103
3.13.2.4 複数行のテキストに対するパターンマッチ --- 103
3.13.3 置換処理 --- 104
3.14 例外処理 --- 106
3.14.1 エラーオブジェクト --- 106
3.14.1.1 例外（エラー）の種類 --- 107
3.14.2 例外を発生させる方法 --- 108
3.15 その他の便利な機能 --- 110
3.15.1 forEachによる反復処理 --- 110
3.15.2 配列の全要素に対する一斉処理 --- 111
3.15.2.1 対象要素のインデックスを取得する方法 --- 111
3.15.3 配列に対する二項演算の連鎖的実行 --- 112
4 Webアプリケーション開発のための基礎 --- 113
4.1 HTMLとJavaScript --- 113
4.2 DOMに基づいたプログラミング --- 114
4.2.1 DOMの最上位のオブジェクト --- 114
4.2.1.1 グローバル変数の所在 --- 114
4.2.2 HTMLの最上位のオブジェクト --- 114
4.2.3 HTML要素のクラス --- 114
4.2.4 HTMLの木構造（階層構造） --- 115
4.2.4.1 子要素，親要素を取得する方法 --- 115
4.2.4.2 document直下の子要素 --- 116
4.2.4.3 childNodesプロパティ --- 116
4.2.5 HTML要素のid属性から要素ノードを取得する方法 --- 117
4.2.6 HTML要素の要素名（タグ名）の取得 --- 117
4.2.7 HTML要素の生成 --- 117
4.2.7.1 HTML要素の属性を設定する方法 --- 117
4.2.7.2 HTML要素の属性を取得する方法 --- 118
4.2.7.3 HTML要素のデータ属性 --- 118
4.2.8 テキストノードの作成 --- 118
4.2.9 子ノードの追加 --- 119
4.2.9.1 子ノードの追加位置の指定 --- 119
4.2.10 子ノードの削除 --- 120
4.2.11 HTML要素にテキストコンテンツを与える方法 --- 121
4.2.12 HTML要素のclass属性から要素ノードを取得する方法 --- 121
4.2.13 CSSのセレクタからHTML要素を取得する方法 --- 122
4.3 JavaScriptでCSSにアクセスする方法 --- 124
4.3.1 HTML要素のスタイルの取得 --- 124
4.3.2 スタイルの動的な変更 --- 124
4.3.2.1 styleプロパティ配下のCSS属性名に関する注意 --- 125
4.4 イベント駆動型プログラミング --- 126
4.4.1 イベントハンドリングの仕組み --- 126
4.4.2 イベントの種類 --- 127
4.4.2.1 ページの読込み，離脱 --- 127
4.4.2.2 マウスの操作 --- 127
4.4.2.3 キーボードの操作 --- 127
4.4.2.4 変化や選択によって発生するイベント --- 127
4.4.2.5 その他のイベント --- 128
4.4.3 addEventListenerによるイベントハンドラの登録 --- 128
4.4.4 イベント名のプロパティにイベントハンドラを登録する方法 --- 129
4.4.5 イベントオブジェクト --- 129
4.4.5.1 イベントオブジェクトの使用例（マウス関連） --- 130
4.4.5.2 イベントオブジェクトの使用例（キーボード関連） --- 131
4.4.6 タイマー --- 132
4.4.6.1 タイマー処理の反復 --- 132
4.4.6.2 タイマーの反復処理の応用例 --- 133
4.5 表示環境に関する事柄 --- 134
4.5.1 ディスプレイ（スクリーン）関連 --- 134
4.5.2 ブラウザウィンドウ，コンテンツページ関連 --- 134
4.5.3 表示の解像度を求める方法 --- 135
4.5.4 px（ピクセル）からpt（ポイント）への単位の変換 --- 136
4.5.5 ビューポート内でのHTML要素の位置とサイズ --- 137
4.6 ローカル環境でのデータの保存 --- 139
4.6.1 localStorage --- 139
4.6.1.1 データの保存 --- 139
4.6.1.2 データの取得 --- 140
4.6.1.3 キーの取得 --- 140
4.6.1.4 データの消去 --- 141
4.6.2 sessionStorage --- 141
4.7 画像，音声の扱い --- 142
4.7.1 静止画像の扱い --- 142
4.7.1.1 静止画像を動的に切り替える方法 --- 142
4.7.1.2 img要素の生成と追加 --- 142
4.7.2 音声，動画の扱い --- 144
4.7.2.1 HTMLMediaElementクラス --- 144
4.7.2.2 再生と一時停止 --- 144
4.7.2.3 各種のプロパティ --- 144
4.7.2.4 各種のイベント --- 145
4.7.2.5 動画：HTMLVideoElementオブジェクト --- 145
4.7.2.6 応用例 --- 145
4.8 ファイルの入出力 --- 147
4.8.1 ファイルの読込み --- 147
4.8.1.1 input要素によるファイル選択ダイアログ --- 147
4.8.1.2 FileReaderによるファイルの読込み --- 148
4.8.2 ファイルの保存 --- 150
4.9 ドラッグアンドドロップ --- 152
4.9.1 ドラッグアンドドロップに伴う処理 --- 152
4.9.1.1 dragstart イベントを受けて行う処理 --- 153
4.9.1.2 dragover イベントを受けて行う処理 --- 153
4.9.1.3 drop イベントを受けて行う処理 --- 153
4.9.1.4 イベントオブジェクトの target 属性 --- 153
4.10 プログラムの分割開発 --- 155
4.10.1 単純な分割開発 --- 155
4.10.2 モジュールによる分割開発 --- 155
4.10.2.1 モジュール内のオブジェクトを公開する方法(1)：DOMを介する --- 156
4.10.2.2 モジュール内のオブジェクトを公開する方法(2)：exportで公開する --- 156
4.10.2.3 モジュール毎の名前空間を実現するための工夫 --- 157
5 Web Workers --- 160
5.1 基本的な考え方 --- 160
5.1.1 ワーカーのプログラミングの考え方 --- 160
5.2 ワーカーの並行実行 --- 162
5.3 メッセージ送信におけるデータの複製と移転 --- 164
6 グラフィックスの作成(1)：canvas要素 --- 166
6.1 座標と角度の考え方 --- 166
6.2 描画領域のサイズ --- 166
6.3 描画コンテキスト --- 167
6.3.1 フィルに関する描画の設定 --- 167
6.3.2 輪郭線に関する描画の設定 --- 167
6.3.2.1 線幅（線の太さ）と始点，終点の座標の考え方 --- 167
6.3.2.2 線の端の形状の設定 --- 167
6.3.2.3 線の結合部の形状の設定 --- 167
6.3.2.4 破線の設定 --- 168
6.4 描画メソッド --- 169
6.4.1 矩形（四角形）の描画 --- 169
6.4.2 テキストの描画 --- 169
6.4.2.1 矩形とテキストを描画するサンプル --- 169
6.4.3 パスの描画 --- 170
6.4.3.1 折れ線の描画 --- 170
6.4.3.2 円弧の描画 --- 172
6.4.3.3 楕円弧の描画 --- 173
6.4.4 画像の描画 --- 174
6.4.5 画素（ピクセル）の描画と取得 --- 175
6.4.5.1 ImageDataオブジェクトの画素の構造 --- 175
6.4.5.2 ImageDataオブジェクトの描画 --- 175
6.4.5.3 canvasから画素を取得する方法 --- 177
6.5 スケール，傾き，原点の変更 --- 177
6.5.1 描画コンテキストの状態の保存と復元 --- 178
7 グラフィックスの作成(2)：SVG --- 179
7.1 基礎事項 --- 179
7.1.1 座標系と大きさ，角度の単位 --- 179
7.1.2 記述の形式 --- 179
7.1.3 ビューポートとビューボックス --- 179
7.1.4 HTMLへのSVGの配置 --- 180
7.1.4.1 img要素として配置する方法 --- 180
7.1.4.2 object要素として配置する方法 --- 181
7.1.5 defs要素による定義の再利用 --- 182
7.2 SVGの図形要素 --- 183
7.2.1 多角形，折れ線 --- 183
7.2.2 輪郭線に関する設定事項 --- 184
7.2.2.1 破線の設定 --- 184
7.2.2.2 線の端の形状の設定 --- 185
7.2.2.3 線の結合部の形状の設定 --- 185
7.2.3 矩形：rect要素 --- 186
7.2.4 円：circle要素 --- 186
7.2.5 楕円：ellipse要素 --- 187
7.2.6 直線：line要素 --- 187
7.2.7 テキスト（文字列）：text要素 --- 187
7.2.7.1 テキストの描画位置の基準 --- 188
7.2.7.2 テキストの強調 --- 188
7.2.7.3 フォントスタイル --- 188
7.2.7.4 下線，上線，打消し線 --- 188
7.2.7.5 文字の回転 --- 189
7.2.8 パス：path要素 --- 189
7.2.8.1 直線の描画 --- 189
7.2.8.2 楕円弧 --- 190
7.2.9 画像データの配置 --- 192
7.2.10 transform属性 --- 193
7.2.10.1 変換の重ね合わせ --- 194
7.2.10.2 use要素による定義の展開 --- 194
7.2.10.3 図形要素のグループ化 --- 195
8 プログラムライブラリ(1)：jQuery --- 196
8.1 jQueryの導入 --- 196
8.2 jQueryオブジェクト --- 196
8.2.1 関数の起動 --- 197
8.2.2 HTML要素へのアクセス --- 197
8.2.3 イベントハンドリングの登録 --- 198
8.2.4 HTML要素の生成とDOMへの追加 --- 198
8.2.5 jQueryオブジェクトが保持するHTML要素 --- 198
8.2.6 jQueryで扱うHTML要素 --- 199
8.2.7 jQueryにおけるwindow，document --- 199
8.3 CSS属性へのアクセス --- 199
8.4 イベントハンドリングのためのメソッド --- 200
8.5 HTML要素の属性へのアクセス --- 200
8.5.1 属性値の動的な扱い --- 201
8.5.1.1 チェックボックスの扱い --- 201
8.5.1.2 ラジオボタンの扱い --- 202
8.5.1.3 データ属性の扱い --- 203
8.5.2 class属性の扱い --- 203
8.6 DOMの操作 --- 205
8.6.1 要素の追加 --- 205
8.6.2 要素の削除 --- 207
8.6.3 子要素，親要素，内部要素の取得 --- 207
8.7 要素の選択 --- 209
8.8 アニメーション効果 --- 211
8.9 Webアプリケーション実装に関すること --- 212
9 プログラムライブラリ(2)：MathJax --- 214
10 プログラムライブラリ(3)：React --- 216
10.1 基礎事項 --- 216
10.1.1 基本的なライブラリ --- 216
10.1.2 Reactアプリのレンダリング --- 216
10.1.3 React要素とコンポーネント --- 217
10.1.3.1 JSX --- 217
10.1.3.2 クラスコンポーネント，関数コンポーネント --- 218
10.1.4 コンポーネントに値を渡す方法：Props --- 219
10.1.5 コンポーネントのStateとライフサイクル --- 220
10.1.5.1 State --- 220
10.1.5.2 ライフサイクル --- 221
10.1.5.3 コンポーネントのスタイルの設定 --- 221
10.1.5.4 条件付きレンダリング --- 221
10.1.5.5 実装例に沿った解説 --- 222
10.1.6 コンポーネントのイベントハンドリング --- 226
10.1.7 複数コンポーネントの一括デプロイ：リストとキー --- 227
10.2 実用的な使用方法 --- 229
10.2.1 npmによる開発作業の概観 --- 229
10.2.1.1 必要なソフトウェアのインストール --- 229
10.2.1.2 ソースコードの用意 --- 230
10.2.1.3 ビルド作業のための設定ファイルの準備 --- 230
10.2.1.4 ビルド作業の実行 --- 231
10.2.2 ソースコードの分割開発 --- 232
10.2.3 ビルド作業時のリソース複製の設定： copy-webpack-plugin --- 234
10.2.4 コンポーネント実装のための簡便な方法 --- 234
A Webサーバ関連 --- 236
A.1 ローカルの計算機環境でWebサーバを起動する方法 --- 236
A.1.1 Node.jsによる簡易な方法 --- 236
A.1.2 Pythonによる簡易な方法 --- 236
B Webブラウザ関連 --- 237
B.1 スクリプトのキャッシュの抑止 --- 237
written by 中村勝則