目次
Chapter 1 イントロダクション
- 1.1 JavaScriptとは？
- 1.1.1 JavaScriptの歴史
- 1.1.2 復権のきっかけはAjax，そしてHTML5の時代へ
- 1.1.3 JavaScriptライブラリからフレームワークの時代へ
- 1.2 標準JavaScript「ECMAScript」とは？
- 1.2.1 ECMAScriptのバージョン
- 1.2.2 ECMAScript仕様策定の流れ
- 1.2.3 ブラウザーの対応状況
- 1.3 JavaScript実行環境のもう1つの選択肢 Node.js
- 1.3.1 Node.jsとは？
- 1.3.2 実行環境によって利用できる機能は異なる
- 1.4 JavaScriptアプリを開発／実行するための基本環境
- 1.4.1 準備すべきソフトウェア
- 1.4.2 Visual Studio Codeのインストール
- 1.4.3 サンプルファイルの準備
- 1.5 ブラウザー付属の開発者ツール
- 1.5.1 開発者ツールを概観する
- 1.5.2 HTML／CSSのソースを確認する
-［要素］タブ - 1.5.3 通信状況をトレースする
-［ネットワーク］タブ - 1.5.4 スクリプトをデバッグする
-［ソース］タブ - 1.5.5 ストレージ／クッキーの内容を確認する
-［アプリケーション］タブ - 1.5.6 ログ確認／オブジェクト操作などの万能ツール
-［コンソール］タブ
Chapter 2 基本的な書き方を身につける
- 2.1 JavaScriptの基本的な記法
- 2.1.1 JavaScriptで「こんにちは，世界！」
- 2.1.2 文字コードのルール
- 2.1.3 JavaScriptをHTMLファイルに組み込む
- <script>要素 - 2.1.4 文（Statement）のルール
- 2.1.5 コメントを挿入する
- 2.2 変数
- 2.2.1 変数を宣言する
- 2.2.2 識別子の命名規則
- 2.2.3 よりよい命名のための指針
- 2.2.4 定数を宣言する
- 2.3 データ型
- 2.3.1 データ型の分類
- 2.3.2 論理リテラル（boolean）
- 2.3.3 数値リテラル（number）
- 2.3.4 文字列リテラル（string）
- 2.3.5 配列リテラル（array）
- 2.3.6 オブジェクトリテラル（object）
- 2.3.7 関数リテラル（function）
- 2.3.8 未定義値（undefined）とヌル値（null）
Chapter 3 値の演算操作を理解する
- 演算子
- 3.1 演算子とは？
- 3.2 算術演算子
- 3.2.1 加算演算子（+）
- 3.2.2 インクリメント演算子（++）とデクリメント演算子（--）
- 3.2.3 小数点を含む演算には注意
- 3.3 代入演算子
- 3.3.1 基本型と参照型による代入の違い
-「=」演算子 - 3.3.2 定数は「再代入できない」
- 3.3.3 分割代入（配列）
- 3.3.4 分割代入（オブジェクト）
- 3.3.1 基本型と参照型による代入の違い
- 3.4 比較演算子
- 3.4.1 等価演算子（==）
- 3.4.2 厳密な等価演算子（===）
- 3.4.3 小数点数の比較
- 3.4.4 条件演算子（?:）
- 3.5 論理演算子
- 3.5.1 ショートカット演算（短絡演算）
- 3.6 ビット演算子
- 3.6.1 ビット論理演算子
- 3.6.2 ビットシフト演算子
- 3.6.3 例：ビットフィールドによるフラグ管理
- 3.7 その他の演算子
- 3.7.1 配列要素，プロパティを削除する
- delete演算子 - 3.7.2 値の型を判定する
- typeof演算子 - 3.7.3 補足：型の変換
- 3.7.1 配列要素，プロパティを削除する
- 3.8 演算子の優先順位と結合則
- 3.8.1 優先順位
- 3.8.2 結合則
Chapter 4 スクリプトの基本構造を理解する
- 制御構文
- 4.1 制御構文とは？
- 4.2 条件分岐
- 4.2.1 条件式の真偽で処理を分岐する
- if命令 - 4.2.2 複数の条件式で多岐分岐を表現する
- else if命令 - 4.2.3 if命令の入れ子
- 4.2.4 補足：中カッコの省略は要注意
- 4.2.5 条件式を指定する場合の注意点
- 4.2.6 式の値によって処理を分岐する
- switch命令
- 4.2.1 条件式の真偽で処理を分岐する
- 4.3 繰り返し処理
- 4.3.1 条件式によってループを制御する
- while／do...while命令 - 4.3.2 補足：無限ループ
- 4.3.3 指定回数だけループを処理する
- for命令 - 4.3.4 連想配列の中身を順に処理する
- for...in命令 - 4.3.5 配列の要素を順に処理する
- for...of命令 - 4.3.6 配列を反復処理するための専用メソッド
- 4.3.1 条件式によってループを制御する
- 4.4 ループの制御
- 4.4.1 ループを途中で終了する
- break命令 - 4.4.2 特定の周回をスキップする
- continue命令 - 4.4.3 入れ子のループをまとめて中断／スキップする
- ラベル構文
- 4.4.1 ループを途中で終了する
- 4.5 制御命令のその他の話題
- 4.5.1 例外を処理する
- try...catch...finally命令 - 4.5.2 例外をスローする
- throw命令 - 4.5.3 JavaScriptの危険な構文を禁止する
- Strictモード - 4.5.4 デバッガーを起動する
- debugger命令
- 4.5.1 例外を処理する
Chapter 5 基本データを操作する
- 組み込みオブジェクト
- 5.1 オブジェクトとは？
- 5.1.1 オブジェクト＝プロパティ＋メソッド
- 5.1.2 オブジェクトを生成するための準備
- new演算子 - 5.1.3 メソッド／プロパティの呼び出し
- ドット演算子 - 5.1.4 静的プロパティ／静的メソッド
- 5.1.5 組み込みオブジェクトとは
- 5.2 文字列を操作する
- Stringオブジェクト- 5.2.1 文字列の長さを取得する
- 5.2.2 文字列を大文字⇔小文字で変換する
- 5.2.3 部分文字列を取得する
- 5.2.4 文字列を検索する
- 5.2.5 文字列に特定の部分文字列が含まれるかを判定する
- 5.2.6 文字列の前後から空白を除去する
- 5.2.7 文字列を置き換える
- 5.2.8 文字列を分割する
- 5.2.9 文字列が指定長になるように指定文字で補足する
- 5.2.10 文字列をn回繰り返したものを取得する
- 5.2.11 文字列をUnicode正規化する
- 5.3 数値リテラルを操作する
- Numberオブジェクト- 5.3.1 Numberオブジェクトの定数
- 5.3.2 数値形式を変換する
- 5.3.3 文字列を数値に変換する
- 5.3.4 基本的な数学演算を実行する
- 5.4 日付／時刻値を操作する
- Dateオブジェクト- 5.4.1 日付／時刻値を生成する
- 5.4.2 日付／時刻要素を取得する
- 5.4.3 日付／時刻要素を設定する
- 5.4.4 日付／時刻値を加算／減算する
- 5.4.5 日付／時刻の差を求める
- 5.4.6 日付／時刻値を文字列に変換したい
- 5.5 値の集合を管理／操作する
- Arrayオブジェクト- 5.5.1 配列を生成する
- 5.5.2 要素を追加／削除する
- 5.5.3 配列に複数要素を追加／置換／削除する
- 5.5.4 配列から特定範囲の要素を取得する
- 5.5.5 配列の内容を検索する
- 5.5.6 入れ子の配列をフラット化する
- 5.5.7 配列内の要素を結合する
- 5.5.8 配列内の要素を移動する
- 5.5.9 配列ライクなオブジェクトを配列化する
- 5.5.10 配列を複製する
- 5.5.11 配列の要素を並べ替える
- 5.5.12 配列の内容を順に処理する
- 5.5.13 配列を指定されたルールで加工する
- 5.5.14 任意の条件式によって配列を検索する
- 5.5.15 条件式に合致する要素が存在するかを判定する
- 5.5.16 配列から条件に合致した要素だけを取得する
- 5.5.17 配列内の要素を順に処理して1つにまとめる
- 5.6 連想配列を操作する
- Mapオブジェクト- 5.6.1 マップを初期化する
- 5.6.2 マップの値を設定／取得する
- 5.6.3 マップから既存のキーを削除する
- 5.6.4 マップからすべてのキー／値を取得する
- 5.6.5 Object⇔Mapを相互変換する
- 5.6.6 弱い参照キーのマップ
- 5.7 重複しない値の集合を操作する
- Setオブジェクト- 5.7.1 セットを初期化する
- 5.7.2 セットの値を追加／削除する
- 5.7.3 セットの内容を取得／確認する
- 5.8 正規表現で文字列を自在に操作する
- RegExpオブジェクト- 5.8.1 正規表現の基本
- 5.8.2 RegExpオブジェクトを生成する
- 5.8.3 文字列が正規表現パターンにマッチしたかを判定する
- 5.8.4 正規表現パターンにマッチした文字列を取得する
- 5.8.5 正規表現オプションでマッチングの方法を制御する
- 5.8.6 正規表現のマッチング結果をまとめて取得する
- 5.8.7 正規表現で文字列を置き換える
- 5.8.8 正規表現で文字列を分割する
- 5.8.9 例：正規表現による検索
- 5.9 その他のオブジェクト
- 5.9.1 JavaScriptでよく利用する機能を提供する
- Globalオブジェクト - 5.9.2 オブジェクト⇔JSON文字列を相互に変換する
- JSONオブジェクト - 5.9.3 シンボルを作成する
- Symbolオブジェクト
- 5.9.1 JavaScriptでよく利用する機能を提供する
Chapter 6 繰り返し利用するコードを1ヵ所にまとめる
- 関数
- 6.1 関数の基本
- 6.1.1 ユーザー定義関数が必要な理由
- 6.1.2 ユーザー定義関数の基本
- 6.1.3 関数名
- 6.1.4 仮引数と実引数
- 6.1.5 戻り値
- 6.2 関数を定義するための3種の記法
- 6.2.1 Functionコンストラクター経由で定義する
- 6.2.2 関数リテラルで定義する
- 6.2.3 アロー関数で定義する
- 6.2.4 関数定義の際の注意点
- 6.3 変数はどの場所から参照できるか
- スコープ- 6.3.1 スコープの基本
- 6.3.2 仮変数のスコープ
- 6.3.3 スコープから見たvar／let命令
- 6.3.4 スコープに関わるその他の注意点
- 6.4 引数のさまざまな記法
- 6.4.1 JavaScriptは引数の数をチェックしない
- 6.4.2 引数の既定値を設定する
- 6.4.3 可変長引数の関数を定義する
- 6.4.4 スプレッド構文による引数の展開
- 6.4.5 名前付き引数でコードを読みやすくする
- 6.5 関数呼び出しと戻り値
- 6.5.1 複数の戻り値を返したい
- 6.5.2 関数自身を再帰的に呼び出す
- 再帰関数 - 6.5.3 関数の引数も関数
- 高階関数 - 6.5.4 「使い捨ての関数」は匿名関数で
- 6.6 高度な関数のテーマ
- 6.6.1 テンプレート文字列をアプリ仕様にカスタマイズする
- タグ付きテンプレート文字列 - 6.6.2 変数はどのような順番で解決されるか
- スコープチェーン - 6.6.3 その振る舞いオブジェクトの如し
- クロージャ
- 6.6.1 テンプレート文字列をアプリ仕様にカスタマイズする
Chapter 7 JavaScriptらしいオブジェクトの用法を理解する
- Objectオブジェクト
- 7.1 オブジェクトを生成する
- 7.1.1 オブジェクトをリテラルで表現する
- 7.1.2 コンストラクター経由でオブジェクトを生成する
- new演算子 - 7.1.3 より詳しい設定付きでオブジェクトを生成する
- 7.2 オブジェクトの雛型「プロトタイプ」を理解する
- 7.2.1 プロトタイプの基本
- 7.2.2 プロトタイプチェーンの挙動を確認する
- 7.2.3 プロパティを追加／更新／削除した場合の挙動
- 7.3 すべてのオブジェクトの雛型
- Objectオブジェクト- 7.3.1 オブジェクトをマージする
- 7.3.2 オブジェクトを複製する
- 7.3.3 プロパティを操作する
- 7.3.4 不変オブジェクトを定義する
Chapter 8 大規模開発でも通用する書き方を身につける
- オブジェクト指向構文
- 8.1 クラスの基本
- 8.1.1 最もシンプルなクラスを定義する
- 8.1.2 クラスに属する情報を準備する
- プロパティ - 8.1.3 クラスに属する処理を準備する
- メソッド - 8.1.4 クラスを初期化する
- コンストラクター - 8.1.5 静的プロパティ／静的メソッドを定義する
- 8.1.6 文脈によって中身が変化する変数
- thisキーワード - 8.1.7 既存のクラスにメソッドを追加する
- 8.2 利用者に見せたくない機能を隠蔽する
- カプセル化- 8.2.1 カプセル化とは？
- 8.2.2 プライベートメンバーの実装
- 8.2.3 ゲッター／セッター
- 8.2.4 補足：不変クラスを定義する
- 8.3 既存のクラスを拡張する
- 継承- 8.3.1 継承の基本
- 8.3.2 基底クラスのメソッド／コンストラクターを上書きする
- 8.3.3 基底クラスのメソッドを呼び出す
- superキーワード - 8.3.4 継承以外のクラス再利用の手段
- 委譲 - 8.3.5 補足：ミックスイン
- 8.3.6 オブジェクトの型を判定する
- 8.4 アプリを機能単位にまとめる
- モジュール- 8.4.1 モジュールを定義する
- 8.4.2 モジュールを利用する
- 8.4.3 import命令のさまざまな記法
- 8.4.4 export命令のさまざまな記法
- 8.5 オブジェクト指向構文の高度なテーマ
- 8.5.1 列挙可能なオブジェクトを定義する
- イテレーター - 8.5.2 列挙可能なオブジェクトをよりかんたんに実装する
- ジェネレーター - 8.5.3 オブジェクトを基本型に変換する
- 8.5.4 オブジェクトの基本的な動作をカスタマイズする
- Proxyオブジェクト
- 8.5.1 列挙可能なオブジェクトを定義する
Chapter 9 HTMLやXMLの文書を操作する
- DOM（Document Object Model）
- 9.1 DOMの基本を押さえる
- 9.1.1 マークアップ言語を操作する標準のしくみ「DOM」
- 9.1.2 文書ツリーとノード
- 9.2 クライアントサイドJavaScriptの前提知識
- 9.2.1 要素ノードを取得する
- 9.2.2 文書ツリー間を行き来する
- ノードウォーキング - 9.2.3 イベントをトリガーにして処理を実行する
- イベントドリブンモデル
- 9.3 属性値やテキストを取得／設定する
- 9.3.1 属性値を取得する
- 9.3.2 属性値を設定する
- 9.3.3 属性値を削除する
- 9.3.4 要素のプロパティを取得／設定する
- 9.3.5 JavaScriptからスタイルを操作する
- 9.3.6 テキストを取得／設定する
- 9.4 フォーム要素にアクセスする
- 9.4.1 入力ボックス／選択ボックスの値を取得する
- 9.4.2 チェックボックスの値を取得する
- 9.4.3 ラジオボタンの値を取得する
- 9.4.4 ラジオボタン／チェックボックスの値を設定する
- 9.4.5 複数選択できるリストボックスの値を取得する
- 9.4.6 アップロードされたファイルの情報を取得する
- 9.5 ノードを追加／置換／削除する
- 9.5.1 innerHTMLプロパティとどのように使い分けるか
- 9.5.2 ページに新たなコンテンツを追加する
- 9.5.3 既存のノードを置換／削除する
- 9.5.4 HTMLCollection／NodeListを繰り返し処理する場合の注意点
- 9.6 より高度なイベント処理
- 9.6.1 イベントリスナーを削除する
- 9.6.2 イベントに関わる情報を取得する
- イベントオブジェクト - 9.6.3 イベント処理をキャンセルする
- 9.6.4 イベントの動作オプションを指定する
- 9.6.5 イベントリスナーに任意の追加情報を引き渡す
Chapter 10 クライアントサイドJavaScript開発を極める
- 10.1 ブラウザーオブジェクトで知っておきたい基本機能
- 10.1.1 ブラウザーオブジェクトの階層構造
- 10.1.2 ブラウザーオブジェクトにアクセスするには
- 10.1.3 確認ダイアログを表示する
- confirmメソッド - 10.1.4 タイマー機能を実装する
- setInterval／setTimeoutメソッド - 10.1.5 ウィンドウサイズ／位置などの情報を取得する
- 10.1.6 コンテンツのスクロール位置を設定／取得する
- scrollXxxxxメソッド - 10.1.7 表示ページのアドレス情報を取得／操作する
- locationオブジェクト - 10.1.8 履歴に沿ってページを前後に移動する
- historyオブジェクト - 10.1.9 JavaScriptによる操作をブラウザーの履歴に残す
- pushStateメソッド
- 10.2 デバッグ情報を出力する
- consoleオブジェクト- 10.2.1 コンソールにログを出力する
- 10.2.2 知っておくと便利なログメソッド
- 10.3 ユーザーデータを保存する
- Storageオブジェクト- 10.3.1 ストレージにデータを保存／取得する
- 10.3.2 既存のデータを削除する
- 10.3.3 ストレージからすべてのデータを取り出す
- 10.3.4 ストレージにオブジェクトを保存／取得する
- 10.3.5 ストレージの変更を監視する
- 10.4 非同期通信の基本を理解する
- Fetch API- 10.4.1 SPAとは？
- 10.4.2 Fetch APIの基本
- 10.4.3 リクエスト時にデータを送信する
- 10.4.4 異なるオリジンにアクセスする
- 10.4.5 補足：クロスドキュメントメッセージングによるクロスオリジン通信
- 10.5 非同期処理を手軽に処理する
- Promiseオブジェクト- 10.5.1 Promiseオブジェクトの基本を押さえる
- 10.5.2 非同期処理を連結する
- 10.5.3 複数の非同期処理を並行して実行する
- 10.5.4 Promiseの処理を同期的に記述する
- 10.5.5 非同期処理を伴う反復処理を実装する
- 10.6 バックグラウンドでJavaScriptのコードを実行する
- Web Worker- 10.6.1 ワーカーを実装する
- 10.6.2 ワーカーを起動する
Chapter 11 現場で避けて通れない応用知識
- 11.1 コマンドラインからJavaScriptコードを実行する
- Node.js- 11.1.1 Node.jsのインストール
- 11.1.2 JavaScriptファイルの実行
- 11.1.3 ライブラリをインストールする
- 11.1.4 ライブラリの復元
- 11.2 アプリのテストを自動化する
- Jest- 11.2.1 テストコードの基本
- 11.2.2 実行コマンドの準備
- 11.2.3 単体テストの実行
- 11.2.4 テスト実行時の役立つオプション
- 11.3 フロントエンドアプリの開発環境をすばやく立ち上げる
- Vite- 11.3.1 Viteの特徴
- 11.3.2 Viteの基本
- 11.3.3 本番環境向けのビルドを実施する
- 11.3.4 JavaScript以外のリソースにも対応
- 11.4 JavaScriptの「べからず」なコードを検出する
- ESLint- 11.4.1 ESLintの基本
- 11.4.2 リアルタイムに解析結果を確認する
- 11.4.3 ESLintルールのカスタマイズ
- 11.5 ドキュメンテーションコメントでコードの内容をわかりやすくする
- JSDoc- 11.5.1 ドキュメンテーションコメントの記述ルール
- 11.5.2 ドキュメントの生成
- Column
- VSCodeの便利な拡張機能（1）
- Trailing Spaces - VSCodeの便利な拡張機能（2）
- Regex Previewer - 本書の読み進め方
- 著者からのメッセージ - ブラウザー環境でJavaScriptのコードを実行する
- paiza.IO - VSCodeの便利な拡張機能（3）
- JavaScript (ES6) code snippets - VSCodeの便利な拡張機能（4）
- IntelliSense for CSS class names in HTML - よく見かけるエラーとその対処法
- VSCodeの便利な拡張機能（5）
- Code Spell Checker - VSCodeの便利な拡張機能（6）
- Todo Tree - 知っておきたい！JavaScriptの関連キーワード（1）
- altJS - 知っておきたい！JavaScriptの関連キーワード（2）
- TypeScript - ECMAScript期待の機能
- VSCodeの便利な拡張機能（7）
- Bookmarks - 知っておきたい！JavaScriptの関連キーワード（3）
- WebAssembly - 知っておきたい！JavaScriptの関連キーワード（4）
- コンポーネント指向 - VSCodeの便利な拡張機能（8）
- SFTP - 知っておきたい！JavaScriptの関連キーワード（5）
- Web Components - 知っておきたい！JavaScriptの関連キーワード（6）
- importmaps - <script>要素の知っておきたい属性（1）
- async属性 - <script>要素の知っておきたい属性（2）
- integrity属性 - VSCodeの便利な拡張機能（9）
- 拡張テーマ - <script>要素の知っておきたい属性（3）
- integrity属性の作り方 - <script>要素の知っておきたい属性（4）
- crossorigin／referrerpolicy属性 - 本書を読み終えた後に
- VSCodeの便利な拡張機能（1）