Board Game Arenaで自分のゲームを遊べるようにするまで（2023年6月）
2023年度の年間目標の1つとして、サイコロ塾で作成したボードゲームを「Board Game Arena」（BGA）でプレイすることができるようにする、ことを掲げました。
このnoteは、1週間に一度追記していき、その1週間のうちにどんなことを学習したかを書き残していく個人的なメモの2023年6月ver.です。
2023年5月のまとめは以下の記事をご覧ください。
第1週：5月29日（月）〜6月3日（土）
BGA Studioの仕様を読んだことにより、次に学習すべき項目が明らかになりました。しばらく、これまでHTMLやCSSといったクライアントサイドのプログラム言語を学習してきましたが、サーバーサイドのプログラム言語であるPHPやMySQLなどは学習していませんでした。
しかし、BGA Studioでボードゲームのオンラインへの実装をするにあたり、それらも必須であるということがわかりました。そこで、5月末からPHPに取り組み始め、6月も引き続きPHPを使ったプログラミングの学習をしています。
使用している参考書は、『スラスラ読めるPHPふりがなプログラミング』です。
特徴などについては、5月のまとめnoteに書きましたのでご参照ください。
さて、6月の第1週では、いわゆる「条件分岐」と「繰り返し」を学習しました。
より具体的には、「条件分岐」においてはifやelseif、elseを用いたプログラムを書く練習をしました。その際、ブール値を返すさまざまな演算子についても学習しました。演算子がどのプログラミング言語においても共通なのかどうかはわかりませんが、少なくとも条件分岐の考え方やtrue（真）、false（偽）の考え方は共通していると思います。以前から、この辺りの知識は多少はあったのですが改めて学習できてよかったです。
もう一方の「繰り返し」文の方では、foreach関数という今まで見たことがなかった関数を用いました。（なんとなくwhileの方に親しみがあったので）
繰り返し分では、配列という考え方を学び、その中を操作するarreyから始まる各種の関数などについて学びました。
繰り返し文では、どの部分に繰り返しが必要なのか、といったことや、繰り返し文の入れ子構造、条件分岐も含めた繰り返しなどかなりたくさんのことが表現できるなと感じました。
ちなみに、この書籍では各章の最後に練習問題のようなものがあり、それまで学んだ知識を用いてプログラムを書くのですが、今回は次のような内容でした。
九九の三の段の答えを表示するプログラムを書け。
はじめ、数字が入れられた配列が必要になると思って、以下のようなプログラムを書いていました。
<?php
$number = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
foreach ($number as $cnt){
var_dump ( 3 * $cnt);
}
?>これでも、結果としては求められたことを実行できたのですが、実際に回答として書いてあったプログラムは以下のものでした。
<?php
foreach(range(1,9) as $cnt){
var_dump( 3 * $cnt);
}
?>そう、range関数というものをすっかり忘れてしまっていたのでした。
わざわざ配列を作って、そこから要素を呼び出して・・・とせずともrange関数で示した範囲の数値をforeach関数で繰り返し引数として使えるという。
ちょくちょく見直しをしないと直前の記憶だけでプログラムを書いていこうとすると、遠回りをしてしまうなと感じたのでした。
現在、上記の書籍の進捗は5分の3ほどといったところです。次週も引き続き、書籍を読みながら実際にプログラムを書いて進めていきたいと思います。
第2週：6月5日（月）〜6月10日（土）
書籍も後半に入り、「関数」を作ったり、HTMLにPHPを埋め込んだりといった新しい内容が入ってきました。少し内容が難しく、理解に時間がかかる部分が多かったため、進捗少なめです。
Chapter4:関数を作ろう
既存の関数ではなく、関数を定義してそれを呼び出して使う、ということに取り組みました。関数を作ること自体は、FF12のガンビットの設定を弄るみたいなところがあり、「面白い」と感じました。今回、作った関数は下のようなものです。
<?php
function createMsg($name){
$msg = <<< EOM
{$name}様
お世話になっております。\n
EOM;
echo $msg;
}
createMsg("佐藤");
?>「createMsg」という関数を定義しました。これは、引数として変数$nameを取り、メッセージを作成して表示するという関数です。実際に呼び出して使用すると、createMsg()の引数に入力した値を元に以下のような実行結果になります。
佐藤様
お世話になっております。
もう1つ別の関数も作りました。
<?php
function getPrice ($cnt){
if ($cnt < 0){
return 0;
}
return 500 * $cnt;
}
var_dump(getPrice(-3));
?>getPrice関数は、変数$cntを引数として、その値に500をかけた値を戻り値として返す関数です。そこに、もし個数が0よりも小さければ「0」という値を返すというif文も組み込まれています。このプログラムを実行すると、最終行の引数として「-3」が入力されているため、実行結果は、
int(0)
となります。上記2つの関数を定義したphpファイル（"cahp4_func.php"）を新たに作成し、呼び出して使うことにも取り組みました。その際、"require_once"文を用いたりしました。さらにそこに、foreach文も組み合わせて、配列からデータの数だけ関数を呼び出すということにもチャレンジしました。この辺から、各プログラムを読み解くのが難しいなと感じました。
<?php
require_once __DIR__ . "/chap4_func.php";
$orders =[
["name"=>"三浦", "cnt"=> 6],
["name"=>"高野", "cnt"=> 8]
];
foreach( $orders as $order ){
$price = getPrice( $order["cnt"]);
createMsg ( $order["name"], $price);
}
?>require_once文で、対象のディレクトリから関数を定義したphpファイルを呼び出して、キーを設定した$ordersという連想配列を作り、そこから変数$orderとして、値を取り出す間crateMsgを実行する。creatMsgは配列から取り出したキー"name"の値と変数$priceという2つの引数をとって実行される。$priceには配列から取り出したキー"cnt"の値を引数としてgetPrice関数が実行された値が入れられる、みたいな感じで合ってますかね。実際にこれを実行すると下のようになります。
三浦様
ご注文を承りました。
合計3000円です。
高野様
ご注文を承りました。
合計4000円です。
「関数」を作るのは楽しいと感じました。こういうふうなことを実現したい、という実現したいビジョンがある時、どういう組み合わせにすれば良いか、ということを考えるのが難しくもあり、楽しくもあるなという感想です。とはいえ、そもそも「こういうふうなことを実現したい」というその中身（プログラムを作ることの目的）を持っていないことには手のつけようがなく、そこを考えさせることも必要だなと思いました。
Chapter5:webアプリを作ろう（途中まで）
このチャプターから、HTMLに中にPHPを埋め込むということに取り組み始めました。まだ途中ですので、その一部だけですが、特に理解に苦しんだところをメモとして残しておきたいと思います。
PHPがそのままWebブラウザに表示されるんじゃなくて、実行結果がHTMLとして表示されるんだ
読んでそのままなのですが、この部分の理解にすごく苦しみました。実際には、以下のプログラムをwebサーバー上で実施し、ブラウザで表示させました。
<!DOCTYPE_html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<?php
var_dump("ハロー！");
echo("<p>ハロー！</p>");
?>
</body>
</html>これまでと大きく違うのは、webサーバー上で実施し、ブラウザで表示させるという点になります。これまでは、PCのコマンドライン上でプログラムの実行結果を確認していました。HTMLを学習していた際に、プログラムの実行結果をブラウザ上で確認しながら進めていたので、コマンドラインではなくブラウザで表示させるという部分に引っ掛かりはなかったのですが、実際にブラウザで実行して「検証」で該当箇所を見てみると、上のプログラムがそのまま表示されるのではなくて、<body></body>に挟まれた部分が以下のようになったことに戸惑いました。
これが分からなくて、元のプログラムからPHPに該当する部分だけを取り出して、コマンドラインで実行したところ、ちょうど上記の<body></body>を除いた部分が実行結果として出力されました。これがわかるために、書籍に図解しているページがあったので、その部分を模写したのが以下になります。
この図に示された関係がスッと入ってくるまでかなり時間がかかりました。理解のためには、「サーバーサイド」と「クライアントサイド」のプログラムの違いがわかっていないといけないですし、その両者がどういう関係になっているかわかっていないといけないですね。模写することで、ちょっと理解が進んだので、やっと次に進めそうです。
第3週〜第4週：6月12日（月）〜7月1日（土）
第3週は、PHPを使ってできることとして、以前の書籍でも取り組んだ入力フォームを作成することに取り組みました。
入力するためのボックスを作成するためのタグ（formタグとinputタグ）の存在をすっかり忘れてしまっていたため、以前の書籍の該当箇所に戻って復習しました。
formタグにはアクション属性としてデータの送信先を指定する必要があり、この部分をphpで作成することになります。
データの送信方法を指定する際（formタグのmethod属性の指定）には、getとpostの2つがあり、それぞれ送ることができるデータの種類などの違いはあるけれど、大きく違うのはデータを送信した先のURLに入力内容が表示されるかどうかというところです。
このあたりはinputで取得するデータの性質の違い（送信データを秘匿すべきかどうか）などが反映されるということでした。
その後、実際にmethod属性をgetとpost両方にして入力フォームを作成し、2つの違いをブラウザ上のアドレスバーのURLを比べてみるなどを行いました。
干支チェックアプリを作ろう
6月15日から19日にかけて『九州ボードゲームカーニバル』出展のため、福岡に行っていたことがあり、その間プログラミングの学習ができませんでした。
福岡から戻ってきて、テキストに従いながら【干支チェックアプリ】の作成をしていきました。
このアプリはブラウザ上の入力フォームに、「年」を西暦で入力するとその年の干支が表示される、というプログラムです。
入力フォームの部分は先に作ったHTMLを元にしていて、PHPの要素としては、セキュリティ対策の部分と干支を入力された年数から求める部分、入力値を受け取る処理、結果を表示する処理を作りました。
まずは、PHPの部分（関数の定義）を先に作っていきました。この時、$yearという変数を作成したのですが、意図しないデータが入力されないようにfilter_input関数を用いたり、少しずつ新しい内容も加えられました。
また、続くHTMLを書いていく部分では、短縮構文（ショートタグ）というものが出てきました。ここにきて、これまで書いてきた方法に置き換わる書き方が出てきたので、少しアンラーンが難しく思いました。初めからショートタグを教えてもらいたかったというのが本音です。
引き続きHTML要素にPHP要素としてif文を埋め込んでだり、phpによってサーバーサイドで実行された結果を表示させるプログラムなどを書きました。
ここまで書いたところで概ね干支チェックアプリが完成したので、ブラウザ上で干支計算機が動くかどうか確認しました。
年の横の入力ボックスに西暦を入れれば、干支が計算された結果が表示されるはず・・・でしたが、何度西暦を入れても画面が遷移せずに、元の画面（つまり上の画像）のままになってしまいました。
入力後のURLを見てみると、確かにURLの末尾に入力した西暦と思しきものが追加されていました（これは、データの送信方法をmethod属性において、getにしたからですね！）。どこかが間違っている・・・・
結局、「$year変数に関わる行の場所を関数etosの定義をするブロックの中に含めていたこと」が問題であるということがわかりました。
本当にたったこれだけでプログラムがうまく動作しないので、すごく繊細だなと感じました。晴れて、西暦を入力した結果が次のように表示されます。
ちなみに、目視ではとても間違いを見つけることができなかったため、今回ChatGPTを使用して、プログラムの誤りを見つけてもらうことをしてみました。
上は途中までのプログラムですが、実際には最後までコピー＆ペーストをしています。
丁寧に「正しいコード」まで提示してくれるので本当に助かりました。実際には、ChatGPTにプログラムのおかしなところを指摘してもらって修正自体は自分で考えましたが、今後も同様に躓いた時には活用していこうと思いました。
6月後半と7月からの学習について
6月の後半に体調を崩してしまい、以上までのところ以上に学習を進められませんでした（実質6月23日から7月1日までお休み）。といっても、『スラスラ読めるPHPふりがなプログラミング』は終わりまで進みました。
ここまでPHPの学習を進めてきましたが、HTMLやCSSに比べて学習の習熟度が低いと自己評価しています。自分の頭で考えながら進めていったとはいえ、内容自体も難しく一度や二度プログラムをなぞるだけでは身に付かないと感じています。
そこで、PHPについてもう少し踏み込んで学習をしてみたいと思い、別のテキストを購入しました。『確かな力が身につくPHP「超」入門』です。
書籍の厚さ的にもちょうど良さそうですし、『スラスラ読めるPHPふりがなプログラミング』では触れられていなかった内容（データベース？の話）もありそうなので、これにじっくり取り組もうと思います。
7月も出張などで学習ができない日もあるかと思いますが、無理のないペースでガッチリ、しっかり「確かな力」を身につけていきたいところです。
ここまで読んでくださった方ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？