版元ドットコム

探せる、使える、本の情報

文芸 新書 社会一般 資格・試験 ビジネス スポーツ・健康 趣味・実用 ゲーム 芸能・タレント テレビ・映画化 芸術 哲学・宗教 歴史・地理 社会科学 教育 自然科学 医学 工業・工学 コンピュータ 語学・辞事典 学参 児童図書 ヤングアダルト 全集 文庫 コミック文庫 コミックス(欠番扱) コミックス(雑誌扱) コミックス(書籍) コミックス(廉価版) ムック 雑誌 増刊 別冊 ラノベ
[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 杉本 雅広(著/文) - 技術評論社
..

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本

発行:技術評論社
B5変型判
368ページ
定価 2,780円+税
ISBN
9784297110857
Cコード
C3055
専門 単行本 電子通信
出版社在庫情報
不明
書店発売日
登録日
2019年12月4日
最終更新日
2019年12月26日
このエントリーをはてなブックマークに追加

紹介

楽しく遊べる2Dゲームの開発を進めながら、
グラフィックスプログラミングの基本が学べる入門書。

一度習得すると、ゲームや映像生成、動的可視化をはじめ、
幅広い分野で長く役立つグラフィックスプログラミングの基礎。

本書では、リアルタイムに動く画像を描くために求められる技術や考え方を平易に解説します。
開発言語として、エディタとブラウザがあれば開発ができるJavaScriptを採用し、
すぐにスタートできる構成が特徴です。
豊富な図解に加え、いまどきのJavaScript(ES2015準拠)の基本文法、
これだけは知っておきたい数学知識も厳選収録。

一線の開発者による、現場で活かせるやさしい実践解説です。

目次

■第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ファイルをダブルクリック
■■■■スクリプトファイルの読み込み ……