目次
はじめに
Chapter 1 イントロダクション
1.1 JavaScriptとは?
- 1.1.1 JavaScriptの歴史
- 1.1.2 復権のきっかけはAjax,そしてHTML5
- 1.1.3 マイナスイメージの誤解
- 1.1.4 言語としての4つの特徴
1.2 次世代JavaScript「ECMAScript 2015」とは?
- 1.2.1 ブラウザーの対応状況
1.3 ブラウザー付属の開発者ツール
- 1.3.1 開発者ツールを起動する
- 1.3.2 HTML/CSSのソースを確認する - [Elements]タブ -
- 1.3.3 通信状況をトレースする - [Network]タブ -
- 1.3.4 スクリプトをデバッグする - [Sources]タブ -
- 1.3.5 ストレージ/クッキーの内容を確認する - [Application]タブ -
- 1.3.6 ログ確認/オブジェクト操作などの万能ツール - [Console]タブ -
Chapter 2 基本的な書き方を身につける
2.1 JavaScriptの基本的な記法
- 2.1.1 JavaScriptで「こんにちは,世界!」
- 2.1.2 JavaScriptをHTMLファイルに組み込む - <Script>要素 -
- 2.1.3 文(Statement)のルール
- 2.1.4 コメントを挿入する
2.2 変数/定数
- 2.2.1 変数を宣言する
- 2.2.2 識別子の命名規則
- 2.2.3 定数を宣言する
2.3 データ型
- 2.3.1 JavaScriptの主なデータ型
- 2.3.2 リテラル
2.4 演算子
- 2.4.1 算術演算子
- 2.4.2 代入演算子
- 2.4.3 比較演算子
- 2.4.4 論理演算子
- 2.4.5 ビット演算子
- 2.4.6 その他の演算子
- 2.4.7 演算子の優先順位と結合測
2.5 制御構文
- 2.5.1 条件によって処理を分岐する - if命令 -
- 2.5.2 式の値によって処理を分岐する - switch命令 -
- 2.5.3 条件氏によってループを制御する - while/do...while命令 -
- 2.5.4 無限ループ
- 2.5.5 指定回数だけループを処理する - for命令 -
- 2.5.6 連想配列の要素を順に処理する - for...in命令 -
- 2.5.7 配列などを順に処理する - for...of命令 -
- 2.5.8 ループを途中でスキップする/中断する - break/continue命令 -
- 2.5.9 例外を処理する - try...catch...finally命令 -
- 2.5.10 JavaScriptの危険な構文を禁止する - Strictモード -
Chapter 3 基本データを操作する - 組み込みオブジェクト -
3.1 オブジェクトとは
- 3.1.1 オブジェクト=プロパティ+メソッド
- 3.1.2 オブジェクトを利用するための準備 - new演算子 -
- 3.1.3 静的プロパティ/静的メソッド
- 3.1.4 組み込みオブジェクトとは
3.2 基本データを扱うためのオブジェクト
- 3.2.1 文字列を操作する - Stringオブジェクト -
- 3.2.2 数値を操作する - Numberオブジェクト -
- 3.2.3 シンボルを作成する - Symbolオブジェクト -
- 3.2.4 基本的な数学演算を実行する - Mathオブジェクト -
3.3 値の集合を管理/操作する - Array/Map/Setオブジェクト -
- 3.3.1 配列を操作する - Arrayオブジェクト -
- 3.3.2 連想配列を操作する - Mapオブジェクト -
- 3.3.3 重複しない値の集合を操作する - Setオブジェクト -
3.4 日付/時刻データを操作する - Dateオブジェクト -
- 3.4.1 Dateオブジェクトを生成する
- 3.4.2 日付/時刻値を加算/減算する
- 3.4.3 日付/時刻の差分を求める
3.5 正規表現で文字を自在に操作する - RegExpオブジェクト -
- 3.5.1 JavaScriptで利用可能な正規表現
- 3.5.2 RegExpオブジェクトをを生成する方法
- 3.5.3 正規表現による検索の基本
- 3.5.4 正規表現のオプションでマッチング時の挙動を制御する
- 3.5.5 matchメソッドとexecメソッドの挙動の違い
- 3.5.6 マッチングの成否を検証する
- 3.5.7 正規表現で文字列を置き換える
- 3.5.8 正規表現で文字列を分割する
3.6 すべてのオブジェクトのひな形 - Objectオブジェクト -
- 3.6.1 オブジェクトを基本型に変換する - toString/valueOfメソッド -
- 3.6.2 オブジェクトをマージする - assignメソッド -
- 3.6.3 オブジェクトを生成する - createメソッド -
- 3.6.4 不変オブジェクトを定義する
3.7 JavaScriptプログラムでよく利用する機能を提供する - Globalオブジェクト -
- 3.7.1 Numberオブジェクトに移動したメソッド
- 3.7.2 クエリ情報をエスケープ処理する - encodeURI/encodeURIComponent関数 -
- 3.7.3 動的に生成したスクリプトを実行する - eval関数 -
Chapter 4 くり返し利用するコードを1箇所にまとめる - 関数 -
4.1 関数とは
- 4.1.1 function命令で定義する
- 4.1.2 Functionコンストラクター経由で定義する
- 4.1.3 関数リテラル表現で定義する
- 4.1.4 アロー関数で定義する
4.2 関数定義における4つの注意点
- 4.2.1 return命令の直後で改行しない
- 4.2.2 関数はデータ型の一種
- 4.2.3 function命令は静的な構造を宣言する
- 4.2.4 関数リテラル/Functionコンストラクターは実行時に評価される
4.3 変数はどの場所から参照できるか - スコープ -
- 4.3.1 グローバル変数とローカル変数の違い
- 4.3.2 変数宣言にvar命令が必須な理由
- 4.3.3 ローカル変数の有効範囲はどこまで?
- 4.3.4 仮引数のスコープ - 基本型と参照型の違いに注意する -
- 4.3.5 ブロックレベルのスコープは存在しない(ES2015以前)
- 4.3.6 ブロックスコープに対応したlet命令
- 4.3.7 関数リテラル/Functionコンストラクターにおけるスコープの違い
4.4 引数のさまざまな記法
- 4.4.1 JavaScriptは引数の数をチェックしない
- 4.4.2 可変長引数の関数を定義する
- 4.4.3 明示的に宣言された引数と可変長引数を混在させる
- 4.4.4 名前付き引数でコードを読みやすくする
4.5 ES2015における引数の記法
- 4.5.1 引数のデフォルト値
- 4.5.2 可変長引数の関数を定義する
- 4.5.3 「...」演算子による引数の展開
- 4.5.4 名前付き引数でコードを読みやすくする
4.6 関数呼び出しと戻り値
- 4.6.1 複数の戻り値を個別の変数に代入する
- 4.6.2 関数自身を再帰的に呼び出す - 再帰関数 -
- 4.6.3 関数も引数も関数 - 高階関数 -
- 4.6.4 「使い捨ての関数」は匿名関数で
4.7 高度な関数のテーマ
- 4.7.1 テンプレート文字列をアプリ仕様にカスタマイズする - タグ付きテンプレート文字列 -
- 4.7.2 変数はどのような順番で解決されるか - スコープチェーン -
- 4.7.3 その振る舞いオブジェクトの如し - クロージャ -
Chapter 5 大規模開発でも通用する書き方を身につける - オブジェクト指向構文 -
5.1 JavaScriptにおけるオブジェクト指向の特徴
- 5.1.1 「クラス」はなく「プロトタイプ」
- 5.1.2 最もシンプルなクラスを定義する
- 5.1.3 コンストラクターで初期化する
- 5.1.4 動的にメソッドを追加する
- 5.1.5 文脈によって中身が変化する変数 - thisキーワード -
- 5.1.6 コンストラクターの強制的な呼び出し
5.2 コンストラクターの問題点とプロトタイプ
- 5.2.1 メソッドはプロトタイプで宣言する - prototypeプロパティ -
- 5.2.2 プロトタイプオブジェクトを利用することの2つの利点
- 5.2.3 プロトタイプオブジェクトの不思議(1) - プロパティの設定 -
- 5.2.4 プロトタイプオブジェクトの不思議(2) - プロパティの削除 -
- 5.2.5 オブジェクトリテラルでプロトタイプを定義する
- 5.2.6 静的プロパティ/静的メソッドを定義する
5.3 オブジェクト継承 - プロトタイプチェーン -
- 5.3.1 プロトタイプチェーンの基礎
- 5.3.2 継承関係は動的に変更可能
- 5.3.3 オブジェクトの型を判定する
5.4 本格的な開発に備えるために
- 5.4.1 プライベートメンバーを定義する
- 5.4.2 Object.definePropertyメソッドによるアクセサーメソッドの実装
- 5.4.3 名前空間/パッケージを作成する
5.5 ES2015のオブジェクト指向構文
- 5.5.1 クラスを定義する - class命令 -
- 5.5.2 オブジェクトリテラルの改善
- 5.5.3 アプリを機能単位にまとめる - モジュール -
- 5.5.4 列挙可能なオブジェクトを定義する - イテレーター -
- 5.5.5 列挙可能なオブジェクトをより簡単に実装する - ジェネレーター -
- 5.5.6 オブジェクトの基本的な動作をカスタマイズする - Proxyオブジェクト -
Chapter 6 HTMLやXMLの文書を操作する - DOM(Document Object Model) -
6.1 DOMの基本を押さえる
- 6.1.1 マークアップ言語を操作する標準のしくみ「DOM」
- 6.1.2 文書ツリーとノード
6.2 クライアントサイドJavaScriptの前提知識
- 6.2.1 要素ノードを取得する
- 6.2.2 文書ツリー間を行き来する - ノードウォーキング -
- 6.2.3 イベントをトリガーにして処理を実行する - イベントドリブンモデル -
6.3 属性値やテキストを取得/設定する
- 6.3.1 多くの属性は「要素ノードの同名のプロパティ」としてアクセスできる
- 6.3.2 不特定の属性を取得する
- 6.3.3 テキストを取得/設定する
6.4 フォーム要素にアクセスする
- 6.4.1 入力ボックス/選択ボックスの値を取得する
- 6.4.2 チェックボックスの値を取得する
- 6.4.3 ラジオボタンの値を取得する
- 6.4.4 ラジオボタン/チェックボックスの値を設定する
- 6.4.5 複数選択できるリストボックスの値を取得する
- 6.4.6 アップロードされたファイルの情報を取得する
6.5 ノードを追加/置換/削除する
- 6.5.1 innerHTMLプロパティとどのように使い分けるか
- 6.5.2 新規にノードを作成する
- 6.5.3 既存のノードを置換/削除する
- 6.5.4 HTMLCollection/NodeListをくり返し処理する場合の注意点
6.6 JavaScriptからスタイルシートを操作する
- 6.6.1 インラインスタイルにアクセスする - styleプロパティ -
- 6.6.2 外部のスタイルシートを適用する - classNameプロパティ -
- 6.6.3 スタイルクラスをより簡単に操作する - classListプロパティ -
6.7 より高度なイベント処理
- 6.7.1 イベントリスナー/イベントハンドラーを削除する
- 6.7.2 イベントに関わる情報を取得する - イベントオブジェクト -
- 6.7.3 イベント処理をキャンセルする
- 6.7.4 イベントリスナー/イベントハンドラー配下のthisキーワード
Chapter 7 クライアントサイドJavaScript開発を極める
7.1 ブラウザーオブジェクトで知っておきたい基本機能
- 7.1.1 ブラウザーオブジェクトの階層構造
- 7.1.2 確認ダイアログを表示する - confirmメソッド -
- 7.1.3 タイマー機能を実装する - setInterval/setTimeoutメソッド -
- 7.1.4 表示ページのアドレス情報を取得/操作する - locationオブジェクト -
- 7.1.5 履歴に沿ってページを前後に移動する - historyオブジェクト -
- 7.1.6 JavaScriptによる操作をブラウザーの履歴に残す - pushStateメソッド -
- 7.1.7 アプリにクロスブラウザー対策を施す - navigatorオブジェクト -
7.2 デバッグ情報を出力する - Consoleオブジェクト -
- 7.2.1 コンソールにログを出力する
- 7.2.2 知っておくと便利なログメソッド
7.3 ユーザーデータを保存する - Storageオブジェクト -
- 7.3.1 ストレージにデータを保存/取得する
- 7.3.2 既存のデータを削除する
- 7.3.3 ストレージからすべてのデータを取り出す
- 7.3.4 ストレージにオブジェクトを保存/取得する
- 7.3.5 ストレージの変更を監視する
7.4 サーバー連携でリッチなUIを実装する - Ajax -
- 7.4.1 PHPのHello, WorldとAjaxのHello, Worldを比較してみる
- 7.4.2 Ajaxアプリ実装の基本
- 7.4.3 Ajaxアプリで構造化データを扱う
- 7.4.4 クライアントサイドでクロスオリジン通信を可能にする - JSONP -
- 7.4.5 クロスドキュメントメッセージングによるクロスオリジン通信
7.5 非同期処理を簡単に表現する - Promiseオブジェクト -
- 7.5.1 Promiseオブジェクトの基本を押さえる
- 7.5.2 非同期処理を連結する
- 7.5.3 複数の非同期処理を並行して実行する
7.6 バックグラウンドでJavaScriptのコードを実行する - Web Worker -
- 7.6.1 ワーカーを実装する
- 7.6.2 ワーカーを起動する
Chapter 8 現場で避けて通れない応用知識
8.1 単体テスト - Jasmine -
- 8.1.1 Jasmineのインストール方法
- 8.1.2 テストの基本
- 8.1.3 テストスイートを実行する
8.2 ドキュメンテーションコメントでコードの内容をわかりやすくする - JSDoc -
- 8.2.1 ドキュメンテーションコメントの記述ルール
- 8.2.2 ドキュメント作成ツール - JSDoc -
8.3 ビルドツールで定型作業を自動化する - Grunt -
- 8.3.1 Gruntによるソースコードの圧縮
8.4 今すぐECMAScript2015を実践活用したい - Babel -
- 8.4.1 コードを手動で変換する
- 8.4.2 Grunt経由でBabelを実行する
- 8.4.3 簡易インタプリターを利用する
8.5 読みやすく保守しやすいコードを書く - コーディング規約 -
- 8.5.1 JavaScriptの主なコーディング規約
- 8.5.2 JavaScript style guide(MDN)の主な規約
- 8.5.3 Google標準のコーディングスタイル