書籍概要

本格入門

改訂3JavaScript本格入門
~モダンスタイルによる基礎から現場での応用まで

著者
発売日
更新日

概要

2010年の刊行から約100,000部の実績を誇るロングセラーを,ECMAScript 2022に対応した内容で200ページ増の大幅改訂。最新の基本文法から,開発に欠かせない応用トピックまで解説します。JavaScriptらしく書くために大切なオブジェクトの扱い方や,大規模開発でさらに実用的になったオブジェクト指向構文を学び,しっかりと動くプログラムの作り方を本質から理解できます。

こんな方におすすめ

  • JavaやC言語などほかのプログラミング言語の経験があり,JavaScriptを新規に学びたい方
  • JavaScriptを多少使えるけど基本が不安な方
  • ECMAScript 2022による新たな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属性
    • 本書を読み終えた後に

サポート

ダウンロード

本書のサンプルは,以下のページで公開しています。

(2023年1月27日更新)

https://wings.msn.to/index.php/-/A-07/978-4-297-13288-0/

正誤表

最新の正誤表は,以下のページにてご確認ください。

(2023年1月27日更新)

https://wings.msn.to/index.php/-/A-05/978-4-297-13288-0/

商品一覧