b 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] | AOYAMA Koji's プログラミングブログ
AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】プログラミング初心者向け・入門編・基礎編初中級者向けプログラミング解説プログラマー向け実装解説[初心者向けゲーム開発入門]

2026/04/27
【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

　40年以上のゲームプログラミング経験をマンガで可視化。 今回は「変数」(へんすう)。 名前付きの、値の保持場所です。 色々な値が入れられます。 名札が付けられている、箱やコップをイメージしましょう。
　マンガでは、メカのお腹に保持します。
【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

プログラミングブログ記事一覧


[PR]

【マンガで感じる】変数(へんすう) ～名前付き、値の保持場所～


【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「では」「OXゲームの対戦を始めましょう」 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「先手はクリスタル君でお願いします」 クリスタル(ほんのちょっとだけ驚きとまどう表情) 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「どちらの手番か示してもらえますか」 クリスタル「承知しました」」 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 変数 ～名前付き、値の保持場所～ 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「メカ・プレイヤーナンバー！」 メカ・プレイヤーナンバー登場：表示は空 (クリスタル)「プレイヤー番号の**値を保持**して！」 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバーのお腹アップ 白い枠が出現 iPlayerNumber の名札付き 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「まずは」「1を保持」 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバー：1 保持、フラッグは空白 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「1のときは、先手の 赤O を掲げて！」 メカ・プレイヤーナンバー：1 と 赤O 表示 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「次に、2を保持」 メカ・プレイヤーナンバー：2 保持、フラッグは空白 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「2のときは、後手の 青X を掲げて！」 メカ・プレイヤーナンバー：2 と 青X 表示 【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「社長、これでいかがでしょうか？」 社長「ブラボー！！！」(大げさに喜ぶ)
次のエピソードへ
【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 演算子

OXゲーム開発編 第3話：エピソード「変数」


　本エピソード「変数」は、OXゲーム開発編 第3話です。
　OXゲーム開発編は、OXゲーム(三目並べ・マルバツ)の開発を通じて、ゲームプログラミングの基礎の基礎を解説しています。
　OXゲーム開発編の各エピソードは、それまでのエピソードのマンガ(と解説)を前提としていますので、 もし途中から読み始めた方は、ぜひ最初のエピソード「プログラム」から読み進めてください。
【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] プログラム

「変数」のソースコード例


JavaScript

// 手番(プレイヤー番号)
let iPlayerNumber = 1;                  // O:1, X:2

OXゲーム(三目並べ・マルバツ)：プレイヤー番号を保持する「変数」実装検証



[PR]

「変数」とは：名前付き、値の保持場所


　「変数」の本質は「名前付き、値の保持場所」です。
　変数は、値を保持する場所です。 そしてプログラマーが名前を付けることができます。
　変数に保持した値は、その変数名を使用することで、条件判断や、計算など、色々なプログラムに利用できます。 OXゲーム開発でも利用しますので、続くエピソードで順次解説してまいります。

ゲームプログラミングにおける「変数」


　変数は、ゲームプログラミングを含めたすべてのプログラミングの基本要素です。
　上手に変数を使って値を保持することで、効率的なプログラミングが可能になります。 変数を使いこなすことができれば、立派なプログラマーと言えるでしょう。

ソースコードの仕組み


変数の定義と初期化

// 手番(プレイヤー番号)
let iPlayerNumber = 1;                  // O:1, X:2
　このプログラムは、iPlayerNumber という名前の変数を定義し、初期値として 1 を設定しています。
　JavaScriptは let という命令で、それに続く名前の変数を定義できます。 さらに続く =(イコール) にて、初期値を設定できます。
　変数定義の記述方法はプログラミング言語によって異なることが多いので、コーディングする場合は調べてみてください。

「実装検証」で体験しよう


　「実装検証」節にあるボタンで、iPlayerNumber に保持する値を指定できます。 ぜひ体験して、「変数」を感じてください。

変数には適切な名前を付けよう


　変数には、その用途に応じた適切な名前を付けましょう。
　マンガでは、プレイヤーの番号を保持する目的の変数として iPlayerNumber と名付けました。 この名前から、この変数がプレイヤー(Player)の番号(Number)を保持していることは容易に想像できます。 iの意味はデータ型に関する後のエピソードにて解説予定です。
　一方、これを例えば a という名前にしても、プログラムは動作します。 ただし、この a が何なのか、別途説明が無いとわからない、読みづらいプログラムになります。
　プログラムは経験上、書く回数より読む回数の方が多いです。 そのため、書きやすさのために短くするよりも、可読性(読みやすさ)を重視すべきです。

変数が保持する値の意味もプログラマーが決める


　マンガでは、1のときに O 、2のときに X を、メカ・プレイヤーナンバーのフラッグ看板に表示していました。 これらは、その変数が保持する値の意味を表現しています。
　実際にそれらを画面に表示するためのプログラムも参考として後述しますが、理解には後のエピソードで解説する技術も必要で、読み飛ばしていただいて問題ありません。
　現時点では、「変数」は「名前付き、値の保持場所」ということと、 その「値の意味」はプログラマーが決める、というところを理解してください。

「定数」は「名前付き、固定値の保持場所」


　変数は、後から何度でも値を変更できる、値の保持場所です。
　一方、「定数」と呼ばれる、最初に設定した以降は変更不可能な固定値の保持場所もあります。
　JavaScriptにおいては、以下のように const を使用して定義することで、定数として扱うことができます。 
const iPLAYER_O = 1;
const iPLAYER_X = 2;

【職人の視点】マジックナンバーを避け定数を使おう


　マンガでは、1 が先手、2 が後手としました。

意味不明なマジックナンバー


　このように意味をもたせた数値をそのまま使う場合、その直値はマジックナンバーと呼ばれます。 マジックナンバーを使用したプログラムは、それだけでは意味不明です。 別途の説明が必要になります。

定数を使用


　そのためプロとしては、マジックナンバーではなく、例えば以下のように定数を使うべきです。 
// プレイヤー番号定義
const iPLAYER_O = 1;
const iPLAYER_X = 2;
// プレイヤー番号(手番)変数定義
let iPlayerNumber = iPLAYER_O;         // 初期値はO(先手)

解説ではマジックナンバーを使用


　プロとしてはこうあるべきですが、初心者向けプログラミング解説としては読みづらいプログラムになってしまう可能性があります。 そのため本エピソード以降も含めて、解説ではマジックナンバーを遠慮なく使用しますが、ご了承ください。
　保守性については、後のエピソードに「保守編」を予定していますので、改めてそこで詳細に解説予定です。

【参考】手番プレイヤー表示プログラムの実装解説


　本エピソードで解説している本質、変数は「名前付き、値の保持場所」という部分については、前述の通りです。
　ただし、マンガの iPlayerNumber変数は値を保持しているだけです。 フラッグ看板に O や X を表示するプログラムは、別途必要です。
　そこで以下に、実装検証における O と X を表示する実装部分を解説します。 ただし正確な理解には関数や条件分岐、文字列など後のエピソードで詳述する技術が必要です。 そのため、ここは読み飛ばしていただいて問題ありません。 もし用語を理解してから、この仕組みに興味が沸いたら、ぜひ戻ってきてください。


手番プレイヤー表示JavaScriptプログラム全体

//**********************************************************************
// 手番プレイヤー表示
//**********************************************************************
function printPlayer() {
    // プレイヤー表示divエレメント取得して、変数 oDiv に保持
    let oDiv = document.getElementById( "loIdDivOXPlayer" );
    // 表示用HTML文字列(OX部分)を生成して、変数 sPlayer に保持
    let sPlayer = (1 === iPlayerNumber) ? '<span style="color:red;">O</span>' : '<span style="color:blue;">X</span>';
    // 表示用文字列を設定
    oDiv.innerHTML = `手番${sPlayer} (iPlayerNumber:${iPlayerNumber})`;
}


1.プレイヤー表示divエレメント取得して、変数 oDiv に保持

// プレイヤー表示divエレメント取得して、変数 oDiv に保持
let oDiv = document.getElementById( "loIdDivOXPlayer" );
　まずは、プレイヤー情報を表示する div エレメントを取得します。


2.表示用HTML文字列(OX部分)を生成して、変数 sPlayer に保持

// 表示用HTML文字列(OX部分)を生成して、変数 sPlayer に保持
let sPlayer = (1 === iPlayerNumber) ? '<span style="color:red;">O</span>' : '<span style="color:blue;">X</span>';
　次に、変数 sPlayer に、OX 部分の HTML 用文字列を設定します。
　より具体的には、iPlayerNumber が 1 なら '<span style="color:red;">O</span>' を、 それ以外(つまり2) なら '<span style="color:blue;">X</span>' を sPlayer に設定する、三項演算子を利用したプログラムです。


3.表示用文字列を設定

// 表示用文字列を設定
oDiv.innerHTML = `手番${sPlayer} (iPlayerNumber:${iPlayerNumber})`;
　最後に、 div エレメントの HTML に設定します。
　JavaScriptでは、「`」(逆シングルクォーテーション)で囲まれた文字列内に ${変数名} を書くと、変数の値を文字列にできます。 ここではその機能を利用して、動的に、手番プレイヤー表示用の HTML 文字列を作成し、設定しています。

【職人の視点】リソースはプログラムから分離しよう


　前述の「【参考】手番プレイヤー表示プログラムの実装解説」においては、color:red や color:blue など、色の指定をプログラムに直接記述しています。 これはプロ視点では悪い例です。

リソースの分離


　見た目情報や画像などのグラフィックリソースは、グラフィックデザイナーが作成できるように分離すべきです。
　さらに言うと「手番」などのテキストリソースも分離すべきです。 テキストリソースの分離は、プランナーやシナリオライターが作成できるようにする意味と、翻訳者が多言語対応できるようにするための意味があります。
　分離することにより、プログラマー以外の各担当者が自由に変更できるようになります。 また、挙動の変更以外でプログラムを変更する必要がなくなります。 いずれも保守性を高めます。

解説ではプログラムコード内に直接記述


　ただし、これを本格的に対応するには、複数ファイルにまたがる間接的な参照が必要です。 それは初心者向けプログラミング解説としては読みづらいプログラムになってしまいます。 そのため本エピソード以降も含めて、解説では気にせずプログラムコード内に直接記述しますが、ご了承ください。
　プログラムからリソースを分離し、アプリケーションリリース時に組み上げる「ビルド」については、後のエピソードで解説予定です。
[PR]

マンガで感じる！本当の基礎から学ぶゲームプログラミングとは


　「マンガで感じる！本当の基礎から学ぶゲームプログラミング」シリーズでは、 主に、ゲーム開発を題材として、プログラミング時に筆者が脳内でイメージするコンピューター内部動作や本質を、マンガにてお伝えします。

プログラミングの本質をマンガで理解


　AI時代のプログラミングは、本質理解が重要です。 本質を理解していれば、あとはAIに任せて、自身を持って完成したプログラムに責任が持てるでしょう。
　そのため本シリーズでは、コーディングの実例や詳細よりも、「本質をイメージとして感じられること」を最優先としています。 まずマンガで、情報をできる限り絞り、プログラミングの仕組みやコンピューターの内部動作を、物理的に可視化してお届けします。
　そして文章の解説で徹底的に深堀りします。

登場人物紹介

【マンガで感じる】変数 ～名前付き、値の保持場所～ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 登場人物 社長 クリスタル メカたち 　マンガで感じる！本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

　本シリーズの偉い人です。
　マンガでは、指示すなわち「要件定義」を行います。

クリスタル

　社長の指示を、メカを活用して解決します。
　名前は、コンピューター内部で指揮者の役割を果たす「水晶発振器」に由来します。

メカたち

　用途に応じて多数存在し、果たす役割がそれぞれ与えられています。
　クリスタルの指示に従い、ある時はプログラムの変数や関数のように、ある時はデジタル回路の素子や部品のように振る舞います。

「マンガで感じる！本当の基礎から学ぶゲームプログラミング」にかける想い


　筆者が本シリーズにかける想いや、 より詳しいコンセプトは「マンガで感じる！本当の基礎から学ぶゲームプログラミング」にて語っています。 そちらもぜひご覧ください。

AIを専属の家庭教師にして変数を学ぼう


　本記事では、プログラミングに重要な役割を果たす「変数」について解説しました。
　マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 各人の理解度に応じた質疑応答ができて、理解が深まりますので強くオススメします。
　本エピソードが、変数およびゲームプログラミングの本質理解に少しでもお役に立てれば幸いです。

補足

  • 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
  • 記事内容の検討および検証・添削に生成AIの Anthropic Claude と Google Gemini を利用しております。
  • 記事内の画像の作成に生成AIの Google Gemini を利用しております。
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのZen Antiqueを使用しております。
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
  • 数式表現にMathJaxを使用しております。
  • ※各社の登録商標または商標について「®」「™」等の表記はしておりません。



カテゴリー：マンガで感じる！本当の基礎から学ぶゲームプログラミング,【初心者向け】OXゲーム開発編
[PR]