【マンガで感じる】プログラム ~コンピューターへの指示~ 【本当の基礎から学ぶゲームプログラミング】

[初心者向けゲーム開発入門]
2026/04/13
![【マンガで感じる】プログラム ~コンピューターへの指示~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]](../img/pc/pcProgram/pcProgram00.webp)
40年以上のゲームプログラミング経験をマンガで可視化。 最初のエピソードは「プログラム」。 コンピューターはプログラムで指示された通りに正確に動くことを、マンガで直感的に解説します
![【マンガで感じる】プログラム ~コンピューターへの指示~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]](../img/pc/pcProgram/pcProgram00.webp)
プログラミングブログ記事一覧
[PR]
【マンガで感じる】プログラム ~コンピューターへの指示~
すべてはここから始まる:エピソード「プログラム」
ようこそ!「マンガで感じる!本当の基礎から学ぶゲームプログラミング」シリーズです。
ここから本シリーズが始まります。 本エピソード「プログラム」は、シリーズを通しての第1話であり、ゲームプログラミングの基礎の基礎を学ぶ「OXゲーム開発編」の第1話でもあります。
「OXゲーム開発編」では、プログラミングを初めて学ぶ初心者の方でも、マンガで直感的に理解できるように構成されています。
まずはOXゲーム開発(マルバツ・三目並べ)を通して、ゲームプログラミングを感じてみましょう!
「プログラム」のソースコード例
JavaScript
// ゲームスタート宣言 alert( 'ゲームスタート!' );
OXゲーム(マルバツ・三目並べ):ゲームスタートを宣言する「プログラム」実装検証
[PR]
「プログラム」とは:コンピューターへの指示
「プログラム」の本質は「コンピューターへの指示」です。
コンピューターはプログラムの指示に従い、過不足なく正確に動きます。 つまり指示されたことはするし、指示されていないことはしません。
ソースコードの仕組み
今回のプログラムは、以下のような構造になっています。
コメント(実行しない)
// ゲームスタート宣言
//」(スラッシュ・スラッシュ)以降はコメントです。
コメントは、何も実行されません。
コンピューターへの指示ではないことを記すものです。プログラムの内容について説明が必要な場合に、コメントを書きましょう。
筆者の経験上、コメントが役に立つケースが多いのは「未来の自分」です。 未来の自分が、このプログラムを読み直す時に、すっかり忘れてしまったと想定して、必要な情報を書いておくことが重要です。
「ゲームスタート!」と表示
alert( 'ゲームスタート!' );
alertは、JavaScriptにおいて、画面に括弧内のメッセージを表示するプログラムです。
ここでは、「ゲームスタート!」と表示します。そして、それでプログラム終了です。 ゲームが始まりそうな雰囲気ですが、ゲームプレイはできません。 ゲームをプレイできるようにするには、ゲームをプレイするためのプログラムを記述する必要があります。
コンピューターは、指示されたことはするし、指示されていないことはしないのです。
ゲームプレイのためのプログラムは、今後のエピソードで順次解説します。
「実装検証」で体験しよう
実装検証節の【 alert( 'ゲームスタート!' ) 】ボタンを押すと、このプログラムが実行されますので、ぜひお試しください。
プログラムは正確に指示を出す必要がある
プログラムは、1文字も間違えずに正確に指示を記述する必要があります。 プログラミング言語にもよりますが、大文字と小文字が違えば、まったく別の指示と解釈されます。 AIと異なり、良い感じに解釈することはありません。
例えば、前述の「ゲームスタート!」を「ゲームオーバー!」に変更すれば、 「ゲームオーバー!」と表示されます。
一方で
alert を Alert などと変更すると動きません。
より正確には、Webブラウザーのコンソールにエラーが表示され、期待したalertの動作はしません。alert( 'ゲームスタート!' );
「ゲームスタート!」と表示されます。alert( 'ゲームオーバー!' );
「ゲームオーバー!」と表示されます。Alert( 'ゲームスタート!' );
動きません。(エラーが発生します)OXゲーム開発編:OXゲーム(三目並べ・マルバツ)から学ぶゲーム開発
本エピソードからしばらくは「OXゲーム開発編」です。 エピソードを通じて、「OXゲーム」(マルバツ・三目並べ)を開発、完成させます。 一緒に学んでまいりましょう。
Webブラウザーで試せるプログラミング言語「JavaScript」
OXゲーム開発では、JavaScriptというプログラミング言語を用いてゲーム開発を進めます。 前述のプログラムに関する説明は、すべて JavaScript を前提としたものです。
プログラミング言語は、プログラムを記述するルールです。 私たちは、プログラミング言語を介して、コンピューターへ指示を出します。
プログラミング言語には色々な種類があります。 それぞれ特徴があり、プログラムの書き方が異なります。
初心者によく使われるのはビジュアルスクリプトと呼ばれるスクラッチ。 マウス操作でプログラミングできて、わかりやすいのが特徴です。 一方、最近の家庭用ゲーム機向けのゲーム開発では C++ や C# 、AI 開発では Python が主に使われています。
その中で JavaScript は、 Webブラウザーで実行される言語です。 パソコンがあれば、皆さん自身でプログラミングして試すことが容易なため、採用しました。 例えばパソコン内に Game.html というファイルを作り、中身に以下を書きます。
<script> // ゲームスタート宣言 alert( 'ゲームスタート!' ); </script>
【コラム】コンピューターが自分の命令通りに動く!
筆者がまだプログラムについてよくわかっていなかったとき、 衝撃と共に理解したのが「コンピューターはプログラムで命令した通りに動作する」ことでした。
それがわかってからは、もう楽しくて楽しくて。 「コンピューターが有れば何でもできる!」と、本当にワクワクしたものです。
その当時は、まだファミコンはありませんでした。 将来ゲームプログラマーという仕事ができることも知りませんし、 ましてやそのために勉強しているなどという感覚は、まったくありませんでした。
筆者は中学2年生でしたが、まだプログラムの授業が無かった時代です。 だからこそ完全に遊びで、純粋に楽しくてプログラムの勉強(?)をしていました。
好きだからこそ、自然と全力になり、広く深くプログラムをマスターするようになりました。 皆さんにも、このマンガや記事が、好きになるきっかけになったらとても嬉しいです。
【コラム】プログラムの指示は英語が基本
プログラムの指示には英単語を使います。 スクラッチなど主に日本語が使われるプログラミング言語もありますが、基本的には英語が使用されます。
今回の例にある
alert は、最近夏によく聞く「熱中症警戒アラート」のアラートです。
そのため日本人も使いやすいでしょう。
しかし馴染みのない単語も少なくないですし、同じ意味でも別の単語ではプログラムの指示にならないので、プログラム用として覚えるしかありません。ただし、名称は忘れたらAIに聞けば良いので、記憶することよりも、どういったことができるのかなどの概念や仕組みを理解するほうが重要です。
[PR]
マンガで感じる!本当の基礎から学ぶゲームプログラミングとは
「マンガで感じる!本当の基礎から学ぶゲームプログラミング」シリーズでは、 主に、ゲーム開発を題材として、プログラミング時に筆者が脳内でイメージするコンピューター内部動作や本質を、マンガにてお伝えします。
プログラミングの本質をマンガで理解
AI時代のプログラミングは、本質理解が重要です。 本質を理解していれば、あとはAIに任せて、自身を持って完成したプログラムに責任が持てるでしょう。
そのため本シリーズでは、コーディングの実例や詳細よりも、「本質をイメージとして感じられること」を最優先としています。 まずマンガで、情報をできる限り絞り、プログラミングの仕組みやコンピューターの内部動作を、物理的に可視化してお届けします。
そして文章の解説で徹底的に深堀りします。
登場人物紹介
マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。
※実在の人物とは関係ありません社長
本シリーズの偉い人です。マンガでは、指示すなわち「要件定義」を行います。
クリスタル
社長の指示を、メカを活用して解決します。名前は、コンピューター内部で指揮者の役割を果たす「水晶発振子」に由来します。
メカたち
用途に応じて多数存在し、果たす役割がそれぞれ与えられています。クリスタルの指示に従い、ある時はプログラムの変数や関数のように、ある時は電子回路の素子のように振る舞います。
「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にかける想い
筆者が本シリーズにかける想いや、 より詳しいコンセプトは「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にて語っています。 そちらもぜひご覧ください。
AIを専属の家庭教師にしてプログラムを学ぼう
本記事では、本シリーズの根本となる「プログラム」について解説しました。
マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 基本的な内容でも、深い部分でも、それぞれに応じた質疑応答ができて、理解が深まりますので強くオススメします。
また、例えば html ファイルにプログラムを書いたけれど、ダブルクリックで動かない場合があるかもしれません。 その場合も、 AI と細かく状況を共有して試行錯誤すれば、解決できるでしょう。
本シリーズが、皆さまのプログラミング学習および、ゲームプログラミングの楽しさと本質の理解に少しでもお役に立てれば幸いです。 ここから始まる今後のエピソードにもご期待ください。
補足
- 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
- 記事内容の検討および検証・添削に生成AIの Anthropic Claude と Google Gemini を利用しております。
- 記事内の画像の作成に生成AIの Google Gemini を利用しております。
- 画像内のラスタライズ文字フォントにOpen Font Licenseの Noto Sans Japanese、 Zen Antiqueを使用しております。
- ※各社の登録商標または商標について「®」「™」等の表記はしておりません。
カテゴリー:マンガで感じる!本当の基礎から学ぶゲームプログラミング,OXゲーム開発編
[PR]
![【マンガで感じる】プログラム ~コンピューターへの指示~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] プログラミング](../img/tn/pcCoding00Tn.webp)