2026年9月27日 · @Hideyoshi Namba
結論から言うと、プログラミング経験がほぼゼロでも、GPTに質問しながら進めれば、数時間で動くWebすごろくが作れました。
ただし、つまずいたのはコードではありませんでした。「ファイルとフォルダの違い」や「拡張子」といった、もっと手前の基本です。
この記事では、Version 0.1が完成するまでの流れを、失敗も含めてそのまま書きます。
なぜすごろくを作ろうと思ったのか
世の中には、お金の知識をすごろく形式で学べるゲームがあります。これをスマホで気軽に遊べるWeb版にしたら面白いのでは、と思ったのがきっかけでした。
既存のゲームをコピーするつもりはありません。参考にするのは「すごろくでお金を学ぶ」という発想だけです。中身は自分で考えたオリジナルにします。
目的は3つあります。ゲームを完成させること。GPTを使いながらプログラミングを学ぶこと。そして、完成品をポートフォリオとして公開することです。いずれは「こういうWebアプリを作れます」と人に見せられるレベルまで育てたいと考えています。
方針：いちばん小さいすごろくから育てる
最初から完成版は目指しませんでした。まず極めて単純なすごろくを完成させ、そこに機能を一つずつ足していきます。
Version 0.1の中身はこれだけです。
- 30マス
- 1人用
- サイコロを振る
- コマが進む
- ゴールしたら終わり
この後、イベント、所持金、収入と支出、投資、クイズ、選択肢、セーブ機能と、段階的に追加する予定です。
この進め方を選んだ理由は2つです。一度に作ると複雑になりすぎて、何が起きているのか分からなくなる。そして、v0.1、v0.2と積み上げた過程そのものが、ポートフォリオとして残せるからです。
使った技術：HTML・CSS・JavaScriptだけ
Reactなどのフレームワークは使っていません。
HTMLは画面の骨組み。CSSは見た目。JavaScriptはサイコロやコマの動き。役割はこう分かれています。
GitHubやCodexも、最初はあえて使いませんでした。まず基本の構造を自分で理解したかったからです。GitHubはv0.2〜v0.3あたりから履歴管理と公開のために、Codexは機能が増えてコードが複雑になってから導入する予定です。
つまずき①：ファイルを作ったつもりがフォルダだった
Macのデスクトップに「すごろく」というフォルダを作りました。ここまでは順調でした。
問題はその次です。index、style、scriptの3つを、ファイルではなくフォルダとして作ってしまいました。
必要だったのは、index.html、style.css、script.js という3つのファイルです。そこでようやく、フォルダとファイルは別物だと理解しました。
つまずき②：勝手に「.txt」が付く
Mac標準のテキストエディットで保存すると、index.html.txt、style.css.txt のように、末尾に .txt が自動で付いてしまいました。これでは正しく動きません。
解決策はテキストエディットの設定でした。「標準テキストファイルに拡張子“.txt”を追加」のチェックを外します。これで index.html、style.css、script.js として保存できました。
こういう初歩的な落とし穴は、実際に手を動かすまで分かりませんでした。
iCloudのデスクトップでも問題なし
僕のMacはデスクトップがiCloud同期されています。それでも、そのまま開発場所として使えました。3つのファイルを同じフォルダに置いておけば、問題なく動きます。
Version 0.1で作ったもの
index.html（画面の骨組み）
ゲーム画面の基本構造です。タイトル、サイコロボタン、現在位置、サイコロの結果、メッセージ表示欄を用意しました。
style.css（見た目）
30マスを5列×6行のグリッドで表示しました。マスは白地・角丸・枠線付き。プレイヤーのコマは赤い丸です。サイコロボタンは青にして、ゲームらしい見た目にしました。
script.js（動き）
30個のマスをJavaScriptで自動生成し、1マス目をSTART、30マス目をGOALに設定しました。ボタンを押すと1〜6の乱数が出て、その数だけコマが進みます。30マスを超えたら30で止まり、ゴールメッセージを表示してゲーム終了です。
動いた瞬間
Safariで index.html を開くと、30マスの盤面が表示されました。
「🎲 サイコロを振る」を押すたびに数字が出て、赤いコマがその数だけ進む。現在位置も更新される。最後は30マス目に到達し、「🎉 ゴール！おめでとう！」と表示されました。
これでVersion 0.1は完成としました。
やってみて分かったこと
未経験でも、GPTに質問しながら一つずつ進めれば、数時間で動くWebゲームの原型は作れました。
ただ、大事だったのはコードを書くことより、基本の理解でした。フォルダとファイルの違い。拡張子とは何か。HTML・CSS・JavaScriptがそれぞれ何を担当しているか。どれも、手を動かして初めて腑に落ちました。
もう一つの発見は、一度動くものができると、次にやりたいことが急に具体的になることでした。
次はイベントマスを追加する
Version 0.2では、止まったマスによって処理が変わる仕組みを作ります。「お小遣い＋1,000円」「買い物−2,000円」「3マス進む」「2マス戻る」「1回休み」といったマスです。
その先は、所持金、毎月の収入と支出、固定費、生活防衛資金、投資、副業、保険、詐欺。お金の学びにつながる要素を少しずつ足していきます。
最終目標は、iPhoneのSafariで遊べて、ホーム画面に追加でき、途中保存もできるWebアプリです。
このブログでは、うまくいったことだけでなく、失敗も隠さず記録していきます。分からない、質問する、試す、失敗する、修正する、動いた。この過程そのものが、同じように未経験から始める人の役に立つと思っています。
コメント