改訂3版JavaScript本格入門

書籍情報

発売日 : 2023年02月13日

著者/編集 : 山田 祥寛

出版社 : 技術評論社

発行形態 : 単行本

書籍説明

内容紹介

常にアップデートを続けるJavaScriptのプログラミングスタイルを基礎から解説。正しい基本文法から最新の言語機能、見逃しがちな「JavaScriptらしさ」まで徹底的に解説し、知識を本質から理解して活用できます。

目次

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.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.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.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.4 ループの制御
4.4.1 ループを途中で終了する - break命令
4.4.2 特定の周回をスキップする - continue命令
4.4.3 入れ子のループをまとめて中断/スキップする - ラベル構文
4.5 制御命令のその他の話題
4.5.1 例外を処理する - try...catch...finally命令
4.5.2 例外をスローする - throw命令
4.5.3 JavaScriptの危険な構文を禁止する - Strictモード
4.5.4 デバッガーを起動する - debugger命令


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オブジェクト


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 その振る舞いオブジェクトの如し - クロージャ


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オブジェクト


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属性
本書を読み終えた後に

著者情報

山田 祥寛
千葉県鎌ヶ谷市在住のフリーライター。Microsoft MVPfor ASP/ASP.NET。執筆コミュニティ「WINGS プロジェクト」代表。書籍執筆を中心に,雑誌/ サイト記事,取材,講演までを手がける。 『Angularアプリケーションプログラミング』(技術評論社)、『独習シリーズ(Java・C#・Python・PHP・Ruby・ASP.NET など)』(翔泳社)ほか著書多数。
山田, 祥寛