目次
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)