クロクロ・ショップ
サイトTOP

リバーシを作りながら学ぶ
JavaScript

twitter ツイッターはこちら
pixiv fanbox
開発支援はこちら
ツイート@rutenさんをフォロー
表紙画像

 「ゲームを作りながら学ぶ」という学習ルートを簡易的にたどりながら、プログラミング(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 完成したリバーシで遊ぼう
  完成したリバーシで遊ぶ
  サンプルのリバーシを改良する

あとがき
付録:ファイルとメソッドの一覧

QR コード

情報

著作権者 : 柳井 政和

Web Site : http://crocro.com/

This Page : https://crocro.com/shop/item/js_reversi.html

Twitter : ruten