「ゲームを作りながら学ぶ」という学習ルートを簡易的にたどりながら、プログラミング（JavaScript）を学ぶ本です。
Webブラウザーで動く「リバーシ」を作りながら、JavaScriptを学びます。付属のデータは出版社のページから入手可能。
「ゲームを作りながら学ぶ」という学習ルートを簡易的にたどりながら、プログラミング（JavaScript）を学ぶ本です。
Webブラウザーで動く「リバーシ」を作りながら、JavaScriptを学びます。付属のデータは出版社のページから入手可能。
よく、一部のプログラマーが「ゲームとか、アプリとか、作りたい物があってプログラミングを学ぶのが一番」と言います。
でも、ほとんどの人は「別に作りたいものはないんだけど」、あるいは「どう学べばよいのか分からないんだけど」と思うでしょう。
今回書いた本は、自分で目的があり、自学して完成させるタイプの人が、「リバーシ」をプログラムで書く際にたどるルートを体験することを目的としています。
それも、可能な限り負荷を減らして、なるべく図解しながらです。
「何かを作りたい」
「そのために、作りたいものを分解する」
「分解したものを、プログラムに置き換えていく」
「置き換えるために必要なプログラミングの知識は何なのかを学ぶ」
こうしたルートで、なるべく丁寧に解説しながら、プログラミングを学んでいきます。
| タイトル | リバーシを作りながら学ぶJavaScript |
| 著者 | クロノス・クラウン 柳井政和 |
| 書店発売日 | 2024/02/20 |
| 発売元 | 株式会社秀和システム（書籍ページ）（プレスリリース） |
| ISBN | 9784798071695 |
| 判型・ページ数 | B5変・304ページ |
| 定価 | 3080円（本体2800円＋税10%） |
簡略化した目次は、以下の内容になります。詳細な目次は、さらに下で示します。
第1章 準備をしよう 第2章 プレイヤーや盤面や石などをプログラムで表現しよう（値） 第3章 画面を表示するキャンバスを作ろう 第4章 紙芝居のように画面を書き換えよう 第5章 画像を読み込んで描画しよう 第6章 リバーシの盤面を作ろう 第7章 スコアを表示しよう 第8章 アニメーションを管理しよう 第9章 クリック操作に対応させよう 第10章 リバーシの盤面を読み取ろう 第11章 石を置くルールをプログラムで表現しよう 第12章 リバーシの進行をプログラムで表現しよう 第13章 操作画面からリバーシのプログラムを呼びだそう 第14章 コンピューターに考えさせよう 第15章 音声を利用しよう
まえがき この本はどんな人が読むとよいのか この本はどんな人が読まなくても大丈夫なのか この本でおこなうこと プログラミングの学習について 本書のサンプルについて 第1章 準備をしよう 1-1 作成するリバーシの遊び方を知ろう 作成するリバーシの遊び方 1-2 作成するリバーシに使う技術を知ろう リバーシで使う技術 1-3 リバーシのルールを書いてみよう ルールを書いてみよう 簡単な例 1-4 プログラムを書くツールをインストールしよう Visual Studio Code シンタックスハイライト エクスプローラー アウトライン タブ 設定 ファイル内を検索 プロジェクト内を検索 1-5 開発向きのWebブラウザーをインストールしよう Google Chrome コンソールの表示 コンソールに▶マークがある場合 プログラムからの情報出力 エラーの情報 1-6 Webブラウザーが読み込むファイルを知ろう Webブラウザーが読み込むファイル 1-7 HTMLファイルを知ろう タグ 相対パスと絶対パス DOM 1-8 CSSファイルを知ろう CSSファイルを読み込む CSSファイルの書き方 CSSのコメント この本のリバーシで使うCSSファイル 1-9 JavaScriptファイルを知ろう JavaScriptファイルを読み込む コンソールに表示する例 文字列 処理の順番と区切り コメント コンソールに情報を表示 1-10 DOMを操作してみよう DOMを操作する例 DOMの準備が整うのを待つ DOMの要素を操作する 1-11 さまざまな書き方があることも知っておこう HTMLファイルに直接書く モジュールを使う 1-12 全体の構成を知っておこう 技術的な視点 JavaScript固有の仕様 Webブラウザーの仕様 リバーシの構成 第2章 プレイヤーや盤面や石などをプログラムで表現しよう（値） 2-1 いろいろなデータに名前を付けよう（変数） 変数の宣言と代入 変数にまつわる用語やルール 変数を宣言する3つの構文 リバーシ用の変数を書く準備 2-2 自分と相手、2人のプレイヤーを表そう（数値） 数値 手番プレイヤーを表す変数 2-3 リバーシが終了しているか・いないかを表そう（真偽値） 真偽値 キャメルケース リバーシが終了しているかを表す変数 2-4 黒・白の石の数を表そう（配列） 配列 配列の要素の読み書き 各プレイヤーの得点（石の数）を表す変数 2-5 プレイヤーが人間かコンピューターかを表そう（文字列） 文字列 プレイヤーが人間かコンピューターかを表す変数 2-6 リバーシの盤面を表そう（2次元配列） 2次元配列 盤面を表す変数 2-7 プレイヤーが石を置いた場所を表そう（オブジェクト①） オブジェクト プロパティの読み書き 石を置いた場所を表す変数 メソッド 2-8 その他のデータにも名前を付けよう 石を置けるマスを記録する変数 裏返した石を記録する変数 2-9 JavaScriptにはどんな値があるのか知ろう プリミティブ値 nullとundefined 2-10 データをひとまとめにしよう①（オブジェクト②） データをグループ化する 2-11 データをひとまとめにしよう②（クラス） クラスとインスタンス class文 初期値を設定できるコンストラクター クラスでデータをまとめる 2-12 まとめたデータを便利にしよう（静的プロパティ） 静的プロパティとインスタンスプロパティ 静的プロパティの書き方 リバーシ データ用の静的プロパティを書く 2-13 リバーシのデータを振り返ろう 完成したリバーシのデータ リバーシのデータを利用する 作成したプログラムについて 第3章 画面を表示するキャンバスを作ろう 3-1 描画の基本を知ろう Webページの描画の流れ コンテクスト コンテクストへの描画 3-2 プログラムの処理の単位を知ろう（関数） 関数を利用する 引数 戻り値 関数の基本的な構造 組み込み関数 3-3 キャンバスを作って描画の準備をしよう 要素を作る 要素の属性を設定する コンテクストを得る まとめ 3-4 キャンバスをWebページに追加しよう DOMツリーへの追加 プログラムの実例 documentや要素の、プロパティやメソッド 3-5 キャンバスを塗りつぶそう canvasを塗りつぶすプログラム 色の書き方 色の設定と塗りつぶし 3-6 処理をまとめよう（ユーザー関数） 関数を書いてみる VSCodeのインデント機能 関数を使ってみる 関数の他の書き方 引数や戻り値がないとき return文で処理を打ち切る 3-7 キャンバスを作る処理をまとめよう プログラム作成の準備 キャンバスを生成する関数 略記プロパティ名 作成した関数の利用 クラスの静的メソッドを利用する方法 3-8 キャンバスをWebページに追加する処理をまとめよう キャンバスをWebページに追加する処理 this cobj 3-9 背景付きキャンバスをWebページに追加する処理をまとめよう 背景付きキャンバスをWebページに追加する関数 作成した関数の利用 第4章 紙芝居のように画面を書き換えよう 4-1 時間とともに処理をおこなおう setTimeoutとsetInterval コールバック関数 setTimeoutを使った例 setIntervalを使った例 処理の停止 処理の停止の例 同期処理と非同期処理 4-2 紙芝居をおこなおう canvasを四角形で消す コールバック関数の入れ子 4-3 待ってから続きの処理をおこなおう（Promise） Promiseとresolve then 4-4 待つ処理を簡単に書く方法を知ろう（async/await） async/await Promiseの処理の戻り値 一時停止用の関数を作る 一時停止用の関数を使う 4-5 関数を短く書く方法を知ろう（アロー関数） アロー関数 さらに短く書く 一時停止関数を短く書く 4-6 ふつうの関数とアロー関数の違いを知ろう ふつうの関数とアロー関数の違い functionの例1 アロー関数の例1 functionの例2 アロー関数の例2 アロー関数のコールバック関数での活用 第5章 画像を読み込んで描画しよう 5-1 画像描画の基本を知ろう JavaScriptでの画像の読み込み 画像の読み込み on＋イベント名 画像の描画 5-2 複数の画像を読み込んで描画しよう 2つの画像の読み込み Promiseとasync/awaitの利用 5-3 読み込んだ画像を管理して使おう 画像を管理するオブジェクトを作る 同時に読み込む 配列のpush()メソッド Promise.all()を使うときの注意点 Promise.all()を使うときの処理の流れ 5-4 ゲームの画像を読み込もう 画像管理と描画をおこなう関数を作る 画像管理と描画をおこなう関数を使う 実際のゲーム画像の読み込み部分を作る asyncが付いた関数の動作 読み込んだ画像 第6章 リバーシの盤面を作ろう 6-1 レイアウトを決めよう 最終的なレイアウト ゲーム画面のレイアウト ウィンドウにぴったり合わせる 描画単位を決める 盤面の位置やサイズを計算 得点の位置やサイズを計算 全体のレイアウト 演算子 6-2 盤面のマス位置から画面上の位置を求めよう 盤面のマス位置から画面のピクセル位置を求める 分割代入 6-3 画面上の位置から盤面のマス位置を求めよう 画面のピクセル位置から盤面のマス位置を求める1 条件分岐とif文 比較演算子 プログラムを人間の言葉に翻訳 画面のピクセル位置から盤面のマス位置を求める2 6-4 リバーシの描画の準備をしよう リバーシの描画の準備 キャンバスを作成する部分 背景と前景のcanvasを分ける理由 今回作成した初期化処理を呼び出す 6-5 リバーシの盤面を描こう for文 for文の処理の流れを細かく見る 盤面の横方向の描画 盤面の縦方向の描画 6-6 各マスを順に見ていく処理をまとめよう 全マスに対して処理をおこなう関数を作る 全マスに対して処理をおこなう関数を使う 6-7 白や黒の石を描こう リバーシのデータの初期化 石を描画する処理 プログラムを人間の言葉に翻訳 6-8 石を置けるマスを表示しよう 仮のデータを作る 石を置けるマスを描画する関数を作る 配列とfor文 配列の全要素処理 石を置けるマスを描画する関数を作る forEach版 第7章 スコアを表示しよう 7-1 文字描画の基本を知ろう Webフォント Webフォントの読み込み 文字の描画基準位置 読み込みの遅延 7-2 フォントの読み込みを管理しよう フォントの読み込みを管理する関数を作る フォントの読み込みを管理する関数を使う 7-3 ゲーム用の文字を描こう 文字描画関数を作る 文字列描画関数を使う 7-4 石の数を表示しよう 石画像の描画 文字列の描画 ラッパーオブジェクト 描画の反映 7-5 ゲーム画面をまとめて更新しよう ゲーム画面をまとめて更新する関数を作る ゲーム画面をまとめて更新する関数を使う 第8章 アニメーションを管理しよう 8-1 アニメーションの基本を知ろう requestAnimationFrame 描画間隔と移動距離 Dateオブジェクト 8-2 アニメーションを管理するプログラムを書こう アニメーションを管理するプログラムを作る 時間の管理とアニメーションの更新をするプログラムを作る アニメーションを登録する関数を作る アニメーションを削除する関数を作る アニメーションを管理するプログラムを使う 8-3 リバーシにアニメーションを追加しよう データを書き換えて反映させる 8-4 メッセージを動かしながら表示しよう ポップアップメッセージの動作 メッセージ表示の全体 関数の基本的な構造 アニメーションの基本的な構造 描画部分 ぴょこんとせり上がる移動 アニメーション部分と描画部分の分離 8-5 石を置いたときのエフェクトを作ろう どんなエフェクトを作るか 仮のデータを使った処理を作る 石を置いたときの描画処理を作る 描画の設定 置いた石の演出 裏返した石の演出 第9章 クリック操作に対応させよう 9-1 Webページのクリックについて知ろう イベントリスナー パソコンでもモバイルでも動くようにする イベントリスナーで座標を受け取る canvas要素の左上を原点とした座標を得る 9-2 クリックやタッチを管理するプログラムを書こう クリックの追加 クリックの追加～大きな流れ クリックの追加～クリック位置をコールバック関数に送る クリックの削除 クリック座標を得る実験 9-3 クリックした場所に石を置こう 仮のクリック受け付け処理 第10章 リバーシの盤面を読み取ろう 10-1 盤面の読み取りに必要なことを知ろう 盤面の読み取りに必要な処理 10-2 あるマスから8方向に確認しよう 8方向の表現 8方向を処理するプログラム 10-3 8方向のうちの1方向のマスの一覧を得よう 処理の流れ break文 1方向のマスの一覧を得る 10-4 作った処理を確かめよう 作った処理を確かめる 第11章 石を置くルールをプログラムで表現しよう 11-1 必要な処理を確かめよう リバーシのルールを表現する4つの処理 11-2 裏返せるとはどういう状態か知ろう 8方向のうちの1方向を考える 裏返せる条件 「裏返せるマスの配列」を1方向分得る関数を作る 前半の処理の詳細 後半の処理の詳細 11-3 石を置けるか確かめよう 石を置ける状態を考える 石を置けるか確かめる関数を作る 11-4 石を置けるマスの一覧を得よう 石を置けるマスの一覧を得る関数を作る 石を置けるマスの一覧を得る関数を使う 11-5 石を置いて裏返そう 石を置いて裏返すには 石を置いて裏返す関数を作る 処理の詳細 配列の結合 クリックして裏返す 処理の確認 第12章 リバーシの進行をプログラムで表現しよう 12-1 リバーシの進行に必要なことを確かめよう リバーシの進行処理に必要なこと 12-2 リバーシ開始の準備をしよう リバーシの内部処理の初期化を書き換える 12-3 盤面をコンソールに出力しよう 実行中のデータを確認しやすくする 配列のmap()メソッド 配列のjoin()メソッド 処理の詳細 12-4 勝利/敗北/引き分け用の盤面を作ろう プログラムのテスト 勝利/敗北/引き分け用の盤面 各盤面での出力 深い複製をおこなう関数を作る 浅い複製 深い複製 なぜテスト用の盤面を深い複製するのか 12-5 石を置けるマス/勝敗/スコアを得よう 各種値の更新をおこなう関数を作る 終了の判定をおこなう関数を作る 処理の詳細 AND演算子 OR演算子 実際のプログラムの条件式 スコアを計算する関数を作る 配列の平坦化 スコアの計算をおこなう 12-6 石を置こう 石を置く関数を作る 12-7 手番を次に進めよう 手番を次に進めるとは 手番を次に進める関数を作る 第13章 操作画面からリバーシのプログラムを呼びだそう 13-1 画面からの操作に必要なことを確かめよう ゲーム画面からリバーシを操作するのに必要な処理 ロック処理 ファイルの準備 13-2 ゲーム開始の準備をしよう ゲームの開始 ボタンを追加する関数を作る 処理の詳細 Startボタンを作る意味 13-3 盤面のクリックを受け付けよう 盤面クリックを受け付ける関数を作る ロック処理 重複登録を防ぐ処理 クリック時の処理 プログラムを人間の言葉に翻訳 13-4 ゲーム画面で石を置こう ゲーム画面で石を置く関数を作る 石を置く演出用の関数を作る 13-5 ゲームの状態を管理しよう ゲームの状態を管理する関数を作る 追加の説明 13-6 パスが必要か確かめよう 手番をパスするかの判定を作る パスのときの演出を作る テストの実施 13-7 ゲームが終了しているか確かめよう ゲームの終了判定を作る 終了時の演出をおこなう関数を作る テストの実施 人対人で遊ぼう 第14章 コンピューターに考えさせよう 14-1 石を置く場所をどう決めればよいのか考えよう 敵の3つの思考方法 敵思考の雛形を作る 処理の詳細 最大値を求める処理 最大値を求める処理の応用 COM手番判定の中身を作る 最大値を求める関数を使う 14-2 各マスに点数を付けよう 盤面評価表から評価値を得る関数を作る テストの実施 14-3 一手先、二手先を考えよう 二手先を考える関数を作る 処理の詳細 テストの実施 再帰関数 14-4 人間みたいに石を置こう 人間らしい置き方を考える 4方向を確認する関数を作る 人間みたいに石を置く関数を作る 外周か確認 敵に囲まれているか確認 有効な場合の評価値の補正 テストの実施 第15章 音声を利用しよう 15-1 Webページの音声の制約を知ろう ライブラリ 15-2 サーバーを手軽に用意しよう インストール方法 Webページの開き方1 127.0.0.1:5500 Webページの開き方2 Webサーバーの終了の仕方 15-3 音声をあつかおう これから作る音声をあつかう関数の一覧 音声をあつかうファイルを作る 初期化 Audioの読み込み 再生 while文 再生前半 読み込み待機部分 再生後半 音声再生部分 引数の数とデフォルト値 停止 演算子の短絡評価 15-4 音声の再生を試そう 音声の再生を試す処理を書く 処理の詳細 15-5 ゲームで音声を使おう 使用する音声データ 音声ファイルの読み込み 進行の演出 15-6 完成したリバーシで遊ぼう 完成したリバーシで遊ぶ サンプルのリバーシを改良する あとがき 付録：ファイルとメソッドの一覧
著作権者 ： 柳井 政和
Web Site ： http://crocro.com/
This Page ： https://crocro.com/shop/item/js_reversi.html
Twitter ： ruten