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

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

B5変形判/456ページ

定価(本体2,980円+税)

ISBN 978-4-7741-8411-1

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

30,000部突破のベストセラー,日本で1番売れているJavaScriptの本が,6年ぶりに全面リニューアル!

「ECMAScript 2015」によって,いっそう進化をつづけるJavaScriptの新記法はもちろんのこと,基本からオブジェクト指向構文,Ajax,クライアントサイド開発まで,そしてテスト,ドキュメンテーション,コーディング規約など,現場で避けられない知識もしっかり押さえました。
これからのJavaScript開発者必携の1冊です。

こんな方におすすめ

  • JavaやC言語などほかのプログラミング言語の経験があり,JavaScriptを新規に学びたい方
  • JavaScriptを多少使えるけど基本が不安な方
  • ECMAScript 2015による新たなJavaScript記法を学びたい方

著者の一言

JavaScriptはなんら新しい言語ではありませんし,古くから初学者にやさしい言語として,多くのユーザーに親しまれてきました。しかし,2000年前後から以降数年間はむしろ,「プログラミングの素人が使う低俗な言語」「ブラウザー間の互換性がなく,開発生産性の低い言語」「セキュリティホールの原因となる」などなど,むしろマイナスイメージが付きまとう不遇の言語でもありました。
そんなJavaScriptが時代を経て,Webアプリ開発には欠かせない言語として再評価されるのは2005年2月 の こ と。Adaptive Path 社 のJesse James Garrett氏 が コ ラ ム「Ajax: A NewApproach to Web Applications(http://adaptivepath.org/ideas/ajax-new-approach-webapplications/)」で発表したAjax(Asynchronous JavaScript+XML)にあります。Ajax技術の登場によって,単にWebページを華美に装飾するだけであったJavaScriptは,高いユーザビリティを実現するための重要な手段として,その価値が見直されることになります。
 さらに,2000年台後半には,HTML5がこの状況に追い風を与えます。HTML5では,マークアップの見直しにくわえて,アプリ開発のためのJavaScript APIを大幅に強化しています。HTML5によって,ブラウザーネイティブな機能だけで実現できる範囲が格段に広がったのです。
JavaScript復権の流れの中で,JavaScriptによるプログラミングスタイルも大きく変化しています。従来の簡易な――手続き的な記法は残しつつも,大規模なコーディングでは本格的なオブジェクト指向による記述が求められるようになっています。この傾向は,一過性の流行ではなく,今後もよりいっそう強まっていくことでしょう。
本書は,このような時流の中で,今一度,JavaScriptという言語の理解を確かなものにしたい方のための書籍です。JavaScriptはよくいえば「柔軟な」,悪くいえば「あいまいでいい加減な」言語です。ただなんとなく他人のコードを真似するだけでもそれなりのコードは書けてしまいますが,それだけにバグやセキュリティ上の問題をはらみやすい言語でもあります。本格的にマスターするには,基礎段階での確かな理解が欠かせません。本書が,JavaScriptプログラミングを新たにはじめる方,今後,より高度な実践を目指す方にとって,確かな知識を習得する1冊となれば幸いです。
(「はじめに」より)

この書籍に関連する記事があります!

JavaScript本のベストセラー,待望の新版!
2010年刊行の『JavaScript本格入門』はご好評いただき,30,000部突破のベストセラーとなりました。それから6年,ようやく今に合わせて「改訂新版」を刊行することができました。

目次

はじめに

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標準のコーディングスタイル

著者プロフィール

山田祥寛(やまだよしひろ)

千葉県鎌ヶ谷市在住のフリーライター。Microsoft MVPfor ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。書籍執筆を中心に,雑誌/ サイト記事,取材,講演までを手がける多忙な毎日。最近の活動内容は公式サイトを参照。