【2023年】JavaScript本「人気・高評価のおすすめ本20冊」

Chapter 1　基本のHTML&CSSを使おう
1-1　Webの開発って、なに？
1-2　HTMLを使おう
1-3　スタイルシートでデザインしよう
1-4　さまざまなスタイルを利用しよう
Chapter 2　JavaScriptの基本を覚えよう
2-1　値と変数をマスターしよう
2-2　構文を覚えよう
2-3　関数とオブジェクト
Chapter 3　Webを操作しよう
3-1　DOMを操作しよう
3-2　DOMオブジェクトを操作しよう
Chapter 4　グラフィックを操作しよう
4-1　Canvasを使おう
4-2　グラフィックを動かそう
Chapter 5　サーバープログラムを作ろう
5-1　PHPを使えるようになろう
5-2　Webのさまざまな機能を使おう
Chapter 6　本格アプリに挑戦しよう
6-1　アイテム収集ゲーム「Collect It!」
6-2　2D 擬似アドベンチャーゲーム「Adventurer」
Chapter 7　スマホアプリに挑戦！
7-1　Monacaを使いこなそう
7-2　プレビューとデバッグ

第１章　イントロダクション
第２章　基本的な文法・基本的な型
第３章　オブジェクトの基本とオブジェクトの型
第４章　ＴｙｐｅＳｃｒｉｔｐの関数
第５章　ＴｙｐｅＳｃｒｉｐｔのクラス
第６章　高度な型
第７章　ＴｙｐｅＳｃｒｉｐｔのモジュールシステム
第８章　非同期処理
第９章　ＴｙｐｅＳｃｒｉｐｔのコンパイラオプション
付録

鈴木僚太（スズキリョウタ）
２０１３年からＴｙｐｅＳｃｒｉｐｔを使用中。ＬＩＮＥ株式会社でフロントエンドエンジニアとして自社開発に従事しながら、技術顧問なども行っている（『プロを目指す人のためのＴｙｐｅＳｃｒｉｐｔ入門ー安全なコードの書き方から高度な型の使い方まで』発行当時）。専門はＴｙｐｅＳｃｒｉｐｔとＲｅａｃｔで、講演やインターネット上での記事公開を通じて初心者向けから上級者向けまでさまざまな情報を発信している。ＯＳＳ活動にも積極的だが自作のライブラリはあまり流行っていない（本データはこの書籍が刊行された当時に掲載されていたものです）

１　Ｎｅｘｔ．ｊｐとＴｙｐｅＳｃｒｉｐｔによるモダン開発
２　ＴｙｐｅＳｃｒｉｐｔの基礎
３　Ｒｅａｃｔ
Ｎｅｘｔ．ｊｓの基礎
４　コンポーネント開発
５　アプリケーション開発１-設計・環境設定
６　アプリケーション開発２-実装
７　アプリケーション開発３-リリースと改善
Ａｐｐｅｎｄｉｘ　Ｎｅｘｔ．ｊｓのさらなる活用

手島拓也（テジマタクヤ）
ＩＢＭやＬＩＮＥにて主にＷｅｂ製品開発を約７年間担当。その後、共同創業者兼ＣＴＯとしてタイにて起業、事業譲渡を経験。現在はシンガポールを拠点に東南アジア発のスタートアップスタジオＧＡＯＧＡＯを設立し代表を務める

吉田健人（ヨシダタケト）
日本経済新聞社、タイの総合商社系企業でアプリケーション開発を経験。現在はアドビ株式会社でＳｏｆｔｗａｒｅ　Ｄｅｖｅｌｏｐｍｅｎｔ　Ｅｎｇｉｎｅｅｒとして働く。ＤＸ（デジタルエクスペリエンス）系のプロダクト開発とローカリゼーションテクノロジーの研究開発に従事

高林佳稀（タカバヤシヨシキ）
シンガポールの金融系スタートアップにＷｅｂフロントエンドエンジニアとして就職し、取引ツールの開発を行う。その後、フリーランスとして複数のＷｅｂアプリ開発案件に携わる。現在は医療系スタートアップのＷｅｂアプリ開発にフルスタックエンジニアとして参画しつつ、ブロックチェーンのＯＳＳプロジェクトの開発に従事（本データはこの書籍が刊行された当時に掲載されていたものです）

ＪａｖａＳｃｒｉｐｔの概要
字句構造
型、値、変数
式と演算子
文
オブジェクト
配列
関数
クラス
モジュール
ＪａｖａＳｃｒｉｐｔ標準ライブラリ
イテレータとジェネレータ
非同期ＪａｖａＳｃｒｉｐｔ
メタプログラミング
Ｗｅｂブラウザ上のＪａｖａＳｃｒｉｐｔ
Ｎｏｄｅ上のサーバサイドＪａｖａＳｃｒｉｐｔ
ＪａｖａＳｃｒｉｐｔのツールと拡張機能

フラナガン，デイビッド（Flanagan,David）
１９９５年からＪａｖａＳｃｒｉｐｔのプログラマ兼著者。妻や子供と一緒に、ワシントン州シアトル市とブリティッシュコロンビア州バンクーバーの間のパシフックノースウェストに暮らしている。マサチューセッツ工科大学でコンピュータ科学とコンピュータ工学の学位を取得し、ＶＭｗａｒｅでソフトウェアエンジニアとして働いている

村上列（ムラカミレツ）
兵庫県生まれ。京都大学大学院工学研究科修了。計算機やネットワークの世界に足を踏み入れ現在にいたる（本データはこの書籍が刊行された当時に掲載されていたものです）

桜庭洋之（サクラバヒロユキ）
中学生でインターネットに出会いプログラミングにはまる。自宅サーバやルータ自作をし、大量トラフィックサービスを運営してきた。現在は、株式会社ベーシックに所属し、Ｗｅｂからスマホアプリまで様々な開発をしている。自身のＹｏｕＴｕｂｅ「ムーザルちゃんねる」でプログラミング動画を発信している

望月幸太郎（モチズキコウタロウ）
Ｗｅｂアプリケーションを開発するエンジニア。大学では数学、アルゴリズムの計算量などについて学んだ。より良いソフトウェアを求めて、チームづくりやコード設計について日々試行錯誤している（本データはこの書籍が刊行された当時に掲載されていたものです）

Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
1-1 モダンJavaScript 概説
1-2 DOM、仮想DOM
1-3 パッケージマネージャー(npm/yarn)
1-4 ECMAScript
1-5 モジュールバンドラー、トランスパイラ
1-6 SPA と従来のWeb システムの違い .. .
Chapter1 まとめ
Chapter2 モダンJavaScript の機能に触れる
2-1 const、let での変数宣言
2-2 テンプレート文字列
2-3 アロー関数 ( ) => { }
2-4 分割代入 { } [ ]
2-5 デフォルト値 =
2-6 スプレッド構文
2-7 オブジェクトの省略記法
2-8 map、filter
Chapter2 まとめ
Chapter3 JavaScript でのDOM 操作
3-1 JavaScript によるDOM アクセス
3-2 DOM の作成、追加、削除
3-3 JavaScript によるDOM 操作実践
Chapter3 まとめ
Chapter4 React の基本
4-1 React 開発の始め方
4-2 JSX 記法
4-3 コンポーネントの使い方
4-4 イベントやスタイルの扱い方
4-5 Props
4-6 State（useState）
4-7 再レンダリングと副作用（useEffect）
4-8 export の種類
Chapter4 まとめ
Chapter5 React とCSS
5-1 Inline Styles
5-2 CSS Modules
5-3 Styled JSX
5-4 styled components
5-5 Emotion
5-6 Tailwind CSS
Chapter5 まとめ
Chapter6 再レンダリングの仕組みと最適化
6-1 再レンダリングが起きる条件
6-2 レンダリング最適化1（memo）
6-3 レンダリング最適化2（useCallback）
6-4 変数のmemo 化（useMemo）
Chapter6 まとめ
Chapter7 グローバルなState 管理
7-1 グローバルなState 管理が必要な理由
7-2 Context でのState 管理
7-3 その他のグローバルstate を扱う方法
Chapter7 まとめ
Chapter8 React とTypeScript
8-1 TypeScript の基本
8-2 API で取得するデータへの型定義
8-3 Props への型定義
8-4 型定義の管理方法
8-5 コンポーネントの型定義
8-6 省略可能な型の定義
8-7 オプショナルチェイニング（Optional chaining）
8-8 ライブラリの型定義
Chapter8 まとめ
Chapter9 カスタムフック
9-1 カスタムフックとは
9-2 カスタムフックの雛形を作成
9-3 カスタムフックの実装
Chapter9 まとめ
付録 React × TypeScript 実践演習

Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
1-1 モダンJavaScript 概説
1-2 DOM、仮想DOM
1-3 パッケージマネージャー(npm/yarn)
1-4 ECMAScript
1-5 モジュールバンドラー、トランスパイラ
1-6 SPA と従来のWeb システムの違い .. .
Chapter1 まとめ
Chapter2 モダンJavaScript の機能に触れる
2-1 const、let での変数宣言
2-2 テンプレート文字列
2-3 アロー関数 ( ) => { }
2-4 分割代入 { } [ ]
2-5 デフォルト値 =
2-6 スプレッド構文
2-7 オブジェクトの省略記法
2-8 map、filter
Chapter2 まとめ
Chapter3 JavaScript でのDOM 操作
3-1 JavaScript によるDOM アクセス
3-2 DOM の作成、追加、削除
3-3 JavaScript によるDOM 操作実践
Chapter3 まとめ
Chapter4 React の基本
4-1 React 開発の始め方
4-2 JSX 記法
4-3 コンポーネントの使い方
4-4 イベントやスタイルの扱い方
4-5 Props
4-6 State（useState）
4-7 再レンダリングと副作用（useEffect）
4-8 export の種類
Chapter4 まとめ
Chapter5 React とCSS
5-1 Inline Styles
5-2 CSS Modules
5-3 Styled JSX
5-4 styled components
5-5 Emotion
5-6 Tailwind CSS
Chapter5 まとめ
Chapter6 再レンダリングの仕組みと最適化
6-1 再レンダリングが起きる条件
6-2 レンダリング最適化1（memo）
6-3 レンダリング最適化2（useCallback）
6-4 変数のmemo 化（useMemo）
Chapter6 まとめ
Chapter7 グローバルなState 管理
7-1 グローバルなState 管理が必要な理由
7-2 Context でのState 管理
7-3 その他のグローバルstate を扱う方法
Chapter7 まとめ
Chapter8 React とTypeScript
8-1 TypeScript の基本
8-2 API で取得するデータへの型定義
8-3 Props への型定義
8-4 型定義の管理方法
8-5 コンポーネントの型定義
8-6 省略可能な型の定義
8-7 オプショナルチェイニング（Optional chaining）
8-8 ライブラリの型定義
Chapter8 まとめ
Chapter9 カスタムフック
9-1 カスタムフックとは
9-2 カスタムフックの雛形を作成
9-3 カスタムフックの実装
Chapter9 まとめ
付録 React × TypeScript 実践演習

第１章　イントロダクション
第２章　基本的な文法・基本的な型
第３章　オブジェクトの基本とオブジェクトの型
第４章　ＴｙｐｅＳｃｒｉｔｐの関数
第５章　ＴｙｐｅＳｃｒｉｐｔのクラス
第６章　高度な型
第７章　ＴｙｐｅＳｃｒｉｐｔのモジュールシステム
第８章　非同期処理
第９章　ＴｙｐｅＳｃｒｉｐｔのコンパイラオプション
付録

鈴木僚太（スズキリョウタ）
２０１３年からＴｙｐｅＳｃｒｉｐｔを使用中。ＬＩＮＥ株式会社でフロントエンドエンジニアとして自社開発に従事しながら、技術顧問なども行っている（『プロを目指す人のためのＴｙｐｅＳｃｒｉｐｔ入門ー安全なコードの書き方から高度な型の使い方まで』発行当時）。専門はＴｙｐｅＳｃｒｉｐｔとＲｅａｃｔで、講演やインターネット上での記事公開を通じて初心者向けから上級者向けまでさまざまな情報を発信している。ＯＳＳ活動にも積極的だが自作のライブラリはあまり流行っていない（本データはこの書籍が刊行された当時に掲載されていたものです）

■第1章　［入門］グラフィックスプログラミング　……長く役立つ基礎の基礎
■■1.1　グラフィックスとグラフィックスプログラミングの基本　……CG、2D、3D、画素
■■■コンピューターグラフィックス　……コンピューターによって描き出されたグラフィックス
■■■2Dと3D　……グラフィックスの生成手順やデータ管理方法が違うだけ
■■■グラフィックスを構成するもの　……出力先は「画素」の集まり
■■■グラフィックスプログラミングの課題や目的　……画素をどう塗りつぶすか
■■1.2　グラフィックスプログラミングの分類　……活躍の舞台は広い
■■■情報を伝えるためのグラフィックス
■■■情報を正しく理解するためのグラフィックス
■■■エンターテイメントとしてのグラフィックス
■■■アートとしてのグラフィックス
■■1.3　グラフィックスプログラミングと技術　……原則、プログラミング言語、API
■■■グラフィックスプログラミングの原則
■■■グラフィックスプログラミングと、プログラミング言語＆ツール　……手軽にグラフィックスを生成する選択肢
■■■■Processingでできること
■■■■ゲームエンジンから学び始める
■■■■ツールと基礎/原理の学習
■■■グラフィックスAPI　……DirectX、OpenGL、OpenGL ES
■■■■［まとめ］DirectXとOpenGLの特徴
■■■グラフィックスAPIを利用するアプリケーション
●Column　Metal、Vulkan　……AppleとKhronos Groupのその他のグラフィックスAPI
■■■Webとグラフィックス　……JavaScriptと動的なグラフィックス生成機能
■■■JavaScriptとWebブラウザによる効率的な学習の実現
■■■JavaScriptのメリットを活かす　……本書の構成と解説の流れ
■■1.4　本章のまとめ
■第2章　［グラフィックスプログラミングで役立つ］JavaScript/ES2015入門　……開発環境から文法基礎まで
■■2.1　本書における開発言語と開発環境　……JavaScript、Chrome、Windows＆macOS
■■■サンプルの実行環境　……Google Chrome
■■■開発環境とテキストエディタ
■■■Webとアプリケーション
■■■■クライアントサイドとサーバーサイド
■■■JavaScriptとECMAScript
●Column　ECMAScript規格とWebブラウザの実装の関係
■■■JavaScriptの進化と、グラフィックスプログラミング
■■2.2　サンプルと実行環境について　……ファイル構成、ブラウザ＆開発ツール
■■■サンプルの構成と実行方法
■■■Chromeの開発者ツールの基本　……JavaScriptのデバッグ準備
■■■開発者ツールのパネル＆JavaScriptのデバッグ
■■■■Elementパネル　……HTMLドキュメントの構造を確認
■■■■Sourcesパネル　……JavaScriptプログラムの実行制御をデバッグに活用
■■■■Consoleパネル　……JavaScriptのインラインコードの実行結果を確認できる
■■■コメントとJSDoc　……サンプルに含まれるコメントの読み方
■■2.3　［グラフィックスプログラミングのための］JavaScript/ES2015の基本　……基本操作、変数、関数、オブジェクト、演算子
■■■アラートやコンソールの活用
■■■変数　……変数名、キーワード、基本的な規約
■■■変数宣言キーワードとスコープ
■■■■ローカルスコープ、グローバルスコープ
■■■■var　……スコープは関数内部限定
■■■■let　……スコープは関数内部とブロック内部
■■■■const　……スコープは関数内部とブロック内部。再代入が行えない
■■■JavaScriptのデータ型
■■■変数の動的型付け　……JavaScriptでは変数自身は型を持たない
●Column　変数宣言キーワードの取捨選択
■■■■動的型付けの言語で気をつけたいこと
●Column　null、undefined、Symbol
■■■関数　……名前付きの関数の定義と呼び出し、関数の戻り値
■■■関数式　……文と式
■■■■関数式による関数の定義と呼び出し
■■■■無名関数
■■■■アロー関数
●Column　関数の引数と既定値
■■■■関数式と関数の引数
●Column　非同期処理とコールバック関数
●Column　JavaScriptと「自動セミコロン挿入」機能
■■■オブジェクト型　……JavaScriptではプリミティブなデータ以外、すべてがオブジェクト型
■■■配列　……データをまとめて格納できる。（グラフィックス）プログラミングで頻出のオブジェクト
■■■■配列の要素へのアクセス　……インデックスを指定
■■■オブジェクト　……多種多様なオブジェクトで成り立つJavaScript
■■■■オブジェクトの構造
■■■■オブジェクトの要素へのアクセス
●Column　プロパティとメソッド
●Column　ビルトインオブジェクトとプロトタイプチェーン
■■■制御構文　……条件や繰り返し。ロジックを記述する
■■■■if文　……ある条件に一致した場合＆しなかった場合、処理へ進む
■■■■for文　……カウンター変数を用いて繰り返し処理を行う
●Column　JavaScriptの真偽値判定
■■■■while文　……柔軟な継続条件で繰り返し処理を行う
●Column　無限ループ
■■■■switch文　……特定の条件に応じた分岐処理
■■■演算子　……算術、代入、比較、論理、条件
■■■■算術演算子　……四則演算、剰余
■■■■インクリメント演算子、デクリメント演算子　……接頭辞と接尾辞に注意
■■■■代入演算子　……変数に値を代入
■■■■比較演算子　……原則として厳密比較を使用
■■■■論理演算子　……&&（AND）、||（OR）
■■■■条件演算子　……条件に合わせて異なる値を用いたい場合
■■2.4　本章のまとめ
●Column　条件演算子とif文
■第3章　［基礎］グラフィックスプログラミングと数学　……三角関数、線型代数、乱数＆補間
■■3.1　角度と三角関数　……ラジアン、sin（サイン）、cos（コサイン）
■■■ラジアン　……弧度
■■■■角度の表現　……度数法と弧度法
■■■■プログラミングと角度　……ラジアンで考える
●Column　ラジアンの捉え方
■■■グラフィックスプログラミングのためのsin、cos　……ラジアン、半径1の円とともに
●Column　グラフィックスプログラミングで大活躍（!?）の三角関数
■■3.2　ベクトルと行列　……点から始める線型代数
■■■ベクトルとスカラー　……量と向き
■■■原点とベクトルの始点と終点　……点を結ぶ
■■■ベクトルの向き　……単位化、単位ベクトル、（再び）半径1の円
●Column　座標とベクトル　……配列[x, y]は座標なのか、ベクトルなのか
■■■ベクトルと演算　……加算、減算
●Column　単位化、正規化、規格化、標準化　……単位化と同様の意味で使われる言葉？
■■■ベクトルのスカラー倍
■■■ベクトルの内積、外積
■■■■内積　……内積はベクトルAとベクトルBの成す角θに対するコサイン
●Column　ベクトルのスカラー倍で速度が変わる
■■■■外積　……外積はベクトルAとベクトルBの成す角θに対するサイン
●Column　ベクトルの内積と外積の使いどころ
■■■行列　……ベクトルの変形や変換
■■■■回転行列　……ベクトルを回転させる
■■3.3　乱数/擬似乱数と補間＆イージング　……グラフィックスプログラミングに役立つ数学関連知識
■■■乱数と擬似乱数　……ランダムな状態と擬似乱数の品質
■■■■JavaScriptと乱数（擬似乱数）　……Chrome/V8のXorshift
■■■補間とイージング　……滑らかさや緩やかさの変化の表現
■■3.4　本章のまとめ
●Column　あらゆる場面で活躍する補間関数
●Column　擬似乱数とシード値
■第4章　Canvas2Dから学べる基本　……Canvas2Dコンテキストと描画命令
■■4.1　Canvas2Dの基礎知識　……コンテキストオブジェクト、Document Object Model
■■■HTML5とCanvas、Canvas API　……ほとんどのブラウザはCanvasに対応
■■■コンテキストオブジェクト　……描画処理のための機能と設定を持つオブジェクト
■■■Canvas2Dコンテキストの取得　……CanvasRenderingContext2D
■■■HTML要素としてのCanvas　……Canvas要素にはCSSによる余分な装飾は極力行わない
●Column　コンテキストの種類
●Column　RetinaディスプレイとCanvas要素の大きさ　……CSSサイズ、物理サイズ
■■■Document Object Model　……Canvas要素をはじめ、HTML要素をJavaScriptから参照する
■■4.2　Canvas2Dの基本プリミティブ　……矩形、線、多角形、円、円弧、ベジェ曲線...
■■■矩形の描画　……fillRect
■■■塗りつぶしと線のスタイル　……fillStyle、strokeStyle
■■■［予習］Canvas2Dサンプルの構成と動作確認
■■■■サンプルの実行　……HTMLファイルをダブルクリック
■■■■スクリプトファイルの読み込み　……<script>タグ
●Column　CSSのrgb関数とrgba関数
■■■■即時関数を使って全体を囲う
■■■■読み完了タイミングの検出　……addEventListenerとloadイベント
■■■■初期化処理　……loadイベント後?
■■■■描画処理　……loadイベント後?
●Column　addEventListenerの第3引数の意味
●Column　即時関数と無名関数
■■■■［まとめ］本書サンプルの基本構成のポイント
■■■処理の役割に応じた関数化　……シンプルな役割
■■■線分（ライン）の描画　……Canvas2Dコンテキストではパスを利用
■■■■サブパス　……パスを区切る仕組み
■■■■パス＆サブパスを使ったラインの描画
■■■■［まとめ］Canvas2Dコンテキストでパスを用いた描画の流れ
■■■パスを利用した多角形の描画　……一筆書きで座標を連続でつなぐ
■■■ランダムに変化する多角形の描画
■■■円の描画　……円や円弧の描画もパスを利用
■■■円弧の描画　……乱数によってランダムに変化する円弧の例
●Column　arcメソッドの第6引数
■■■ベジェ曲線　……2次ベジェ曲線、3次ベジェ曲線、複雑な曲線を描画する
●Column　パスを閉じずに描く　……closePath、stroke
■■■画像を利用した描画　……読み込みの待機にaddEventListener（再び）
■■4.3　Canvas2Dコンテキストの描画効果＆演出機能　……テキスト、ドロップシャドウ、グラデーション、パターン、アルファブレンディング、コンポジットオペレーション
■■■テキストの描画　……グラフィックスとしてテキストを描く
■■■ドロップシャドウの描画　……一様に設定内容が反映される点には注意
●Column　文字列のfillとstroke
■■■グラデーションとパターン　……まずは効果を適用する実体のオブジェクトを生成
■■■■グラデーション　……線形グラデーション、円形グラデーション
■■■■パターン　……repeat、repeat-x、repeat-y、no-repeat
■■■アルファブレンディング　……アルファ値で、透明や半透明の描画処理
■■■コンポジットオペレーション　……さまざまな合成の種類
■■■■コンポジットオペエレーションの設定
■■4.4　本章のまとめ



■第5章　ユーザーインタラクションのプログラミング　……ゼロから作るシューティングゲーム?
■■5.1　［まずは準備から］シューティングゲームを作る　……ファイル構成とルール
■■■なぜ、ゲーム作り？　……種々の関連技術の集合体で、小さなゴールを設定しやすい
■■■作成するゲームのファイル構成
■■■作成するゲームの枠組み　……最低限のルールの定義
■■5.2　ゲームの骨格を作る　……土台となるプログラムの設計
■■■HTMLページとしての構造　……ゲームの舞台となるCanvas要素のための設定
■■■class構文　……独自の機能や属性を持つクラスを定義できる
●Column　loadイベントとDOMContentLoadedイベント
■■■■クラス再入門　……クラスの概念を持つ言語、持たない言語
■■■■プロトタイプとクラス　……JavaScriptにクラスは存在しない
■■■■［まとめ］クラスベースとプロトタイプベース
■■■■プロトタイプベースの言語の記述と振る舞い　……prototype、new演算子、コンストラクタ関数
■■■■class構文の使い方　……プロトタイプの記述をわかりやすくする
●Column　プロトタイプは拡張できる　……ただし、注意点も
■■■canvas2d.jsに記述したCanvas2DUtilityオブジェクト　……class構文で定義
■■■■コンストラクタ関数でインスタンスを生成できるオブジェクト　……便宜上の「クラス」
■■■■constructor（コンストラクタ）
■■■■property（プロパティ）
■■■■propertyとgetter（プロパティとゲッター）　……プロパティを取得する際に関数を実行したい
●Column　setter（セッター）　……プロパティを設定する際に関数を実行したい
■■■■method（メソッド）　……オブジェクトが持っている関数
●Column　プロトタイプを用いるメリット　……プロトタイプチェーン
■■■script.jsに記述されたメインプログラム　……シューティングゲーム作成のひな形
■■■メインループ　……アニメーション処理のための基盤を実装
■■■■タイムスタンプの格納と取得
■■■■描画処理　……塗りつぶし、経過時間の計測、画像の描画、描画処理の再帰呼び出し
■■■ユーザーインタラクション　……ユーザーの入力とaddEventListener
●Column　キー入力系イベントの発生順序とリピート
■■■シーン構成を整える　……各種シーンの状態管理の基盤
■■5.3　本章のまとめ



■第6章　キャラクターと動きのプログラミング　……ゼロから作るシューティングゲーム?
■■6.1　キャラクターの実装　……キャラクター管理クラス、キーの入力によるインタラクティブな移動
■■■クラスの抽象化　……共通して必要となるパラメーターをまとめて管理
■■■■Positionクラス　……座標を管理するためのクラス
●Column　コンストラクタによる値の代入
■■■■Characterクラス　……キャラクターのベースとなる汎用的なクラス
■■■■クラスの継承と自機キャラクタークラス　……class構文のextendsと、super
■■■自機キャラクタークラスを利用したメインプログラム
■■■クラスに特有の処理を一元管理する
■■■キャラクターの幅を考慮した描画
■■■キャラクターの移動をなめらかに行う
■■■■windowオブジェクトへのプロパティ追加
●Column　キャラクターの中心　……3Dでも活かせる座標を意識する感覚
■■■■オブジェクトのプロパティへのアクセス　……ドット記法とブラケット記法
■■■■テンプレートリテラル
■■■■ブラケット記法とテンプレートリテラルを組み合わせる
■■■画面の外に出ないように制限する　……画面の端の判定と座標の補正
●Column　速度をspeedというプロパティに置き換えた意味
■■6.2　ショットの実装　……大量ショットのインスタンス、程良い速度、回転描画
■■■ショットはキャラクターの一種　……Characterクラスを継承してShotクラス
■■■キャラクターからショットを放つ　……Characterクラス、Shotクラス、Viperクラス
■■■ショットのことを踏まえた初期化処理　……大量のショットのインスタンスを扱う
■■■ロードの完了と描画処理
■■■■render関数の呼び出し
■■■ショットが高速に生成されることを防ぐ　……密生するショットの原因と対策
●Column　setTimeoutとsetInterval
■■■ショットの進行方向を設定可能にする
■■■異なる種類のショットを同時に放てるようにする
■■■ショットを回転させて描画する
■■■■Canvas2Dコンテキストにおける回転表現
■■■■原点を意識して回転処理を行う
■■■■Canvas2Dコンテキストの状態保存と状態復元
■■■■その他の変更点
●Column　Math.PI * 1.5の意味するもの
■■6.3　敵キャラクターの実装　……敵キャラクターの配置、シーン管理＆更新、敵キャラクターのタイプ
●Column　サイン、コサインで作るベクトルは常に単位ベクトル
■■■敵キャラクターのためのクラスを実装する
■■■「シーン」という概念　……SceneManagerクラス
■■■シーン管理クラスの利用とシーン更新用の関数
■■■■［まとめ］シーン関連の変更点
■■■連続して敵キャラクターが出現するシーン
■■■キャラクターに「タイプ」の概念を追加する
■■6.4　本章のまとめ



■第7章　状態に応じた判定や演出のプログラミング　……ゼロから作るシューティングゲーム?
■■7.1　衝突判定　……オブジェクト同士の衝突、エフェクト、補間関数/イージング関数
■■■衝突を判定するロジック　……形状に応じた判定の基本
■■■■矩形との衝突判定の注意点
■■■ベクトルを利用した衝突判定　……ベクトルの長さを測る方法の応用
■■■Positionクラスの拡張　……2つの座標間の距離を計測
■■■自機キャラクターのショットと敵との衝突判定　……攻撃力とライフ
●Column　キャラクターのサイズ
■■■破壊を演出する　……爆発エフェクト
■■■■Explosionクラス
■■■爆発エフェクトの質感を向上する　……ランダム要素を取り入れる
■■■補間関数で減衰するような動きを表現　……より自然な変化
■■7.2　自機キャラクターの状態に応じた処理　……ライフの減算、ゲームオーバーの演出、再スタート
■■■自機キャラクターと敵ショットとの衝突判定　……敵キャラクターの攻撃
■■■ゲームオーバーの演出とゲームの再スタート　……ゲームの終わり。しかし、実装と演出は続く...
■■7.3　ゲームの品質向上　……スコア、敵キャラの攻撃力＆耐久力、シーン管理、背景、音声、ボスキャラ
■■■スコアを集計して表示する
●Column　String.padStartメソッド
■■■敵キャラクターのバリエーションを増やす
■■■■自機狙い弾を放つ敵キャラクター
■■■■耐久力の高い敵キャラクター
■■■■シーン管理の見直し　……よりゲームらしく
■■■背景を追加する　……ゲームの舞台を表現する演出
■■■効果音を再生する　……シーンの雰囲気を底上げする演出
■■■■ユーザーの操作を受けてから初期化処理を行う
■■■■音声データを扱う自作クラスを実装する　……Soundクラス
■■■■Promiseと非同期処理
■■■■AudioContextによる音声データの再生
●Column　コールバック関数とPromise
●Column　JavaScriptとガベージコレクタ
■■■［いよいよ最終仕上げへ］ボスキャラクターやホーミングショットの実装に挑戦！
■■■■ボスキャラクター本体の実装　……キャラクター自身が「モード」を持つ
■■■■ホーミングショットの実装　……内積＆外積の知識をフル活用
●Column　プログラミングと数学や物理
■■7.4　本章のまとめ



■第8章　ピクセルと色のプログラミング　ピクセルを塗る操作と感覚
■■8.1　［再入門］グラフィックスを構成するピクセル　……ピクセルと画像処理
■■■そもそもピクセルとは何か？　……グラフィックスを構成する最小の単位
■■■ピクセルを操作する画像処理　……ある意味ではグラフィックスプログラミングの本質
●Column　ペイントソフトは画像処理の宝庫
■■8.2　Canvas APIでピクセルを直接操作する　……ピクセル操作の窓口「ImageData」
■■■［基礎知識］同一生成元ポリシー　……ローカル環境とWebブラウザのセキュリティ
■■■ローカルサーバーを起動してファイルをプレビューする
■■■Chromeの拡張機能を利用したローカルサーバーの起動　……Web Server for Chrome
●Column　（比較的簡単な）その他のローカルサーバー起動方法
■■■ImageDataオブジェクト　……Canvas要素のピクセルを操作する窓口
■■■TypedArray　……数値を効率良く扱える型付き配列
■■■■Uint8ClampedArray形式　……値がクランプされる特殊な形式
●Column　JavaScriptとバイナリデータ　……TypedArray
■■■ピクセルの並び順とデータ構造　……ImageDataを利用したピクセル情報の抜き出し
■■8.3　画像処理プログラミングの基本テクニック　……ネガポジ反転、グレースケール、2値化、エッジ検出、ノイズ除去、モザイク
■■■ネガポジ反転
■■■グレースケール　……色の鮮やかさと引き換えに。白～灰色～黒の明暗を得る
■■■2値化　……白か黒か。色が二択
●Column　意外にも奥が深い（!?）グレースケールの世界
■■■エッジ検出　……色差分を可視化するラプラシアンフィルター
■■■ノイズ除去　……メディアンフィルターで極端に色が異なるピクセルを除去する
●Column　上下左右だけでなく、斜め方向も加えたラプラシアンフィルター
●Column　メディアンフィルターを繰り返し実行する
■■■モザイク　……ピクセルの大きさを変化させる
■■8.4　本章のまとめ