AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】プログラミング初心者向け・入門編・基礎編初中級者向けプログラミング解説プログラマー向け実装解説[初心者向けゲーム開発入門]

2026/05/18
【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

 40年以上のゲームプログラミング経験をマンガで可視化。 今回は「条件分岐」。 if文を用いることで、状況に応じて対応するプログラミングができます。 使い方次第で、ゲームを遊びやすく、楽しくできます。
【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

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


[PR]

【マンガで感じる】条件分岐 ~状況に応じた指示~


【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面 XO. .X. .OO 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバーが「2」「X」の表示 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「私の手番ですね!」 クリスタルにこやか 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「では…」考えている風 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] インデックス表示された盤面 (社長)「6番!」 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ドローX と メカ・ドローO が遊んでいる(反応無し) 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「O か X かを指定していただけますか」やや困った風低姿勢 社長きょとんとしている 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「めんどう!」ちょっとスネた感じ クリスタル「承知しました」おじぎ 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 条件分岐 ~状況に応じた指示~ 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「メカ・イフ!」 メカ・イフ登場 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバー全身 (クリスタル)「プレイヤーナンバーの値が 1 かどうかを調べて」 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「true ならドローOに」「false ならドローXに」「マス位置インデックスを伝えて」 メカ・ドローO 了解 メカ・ドローX 了解 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフがOK 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「では社長、お願いいたします」 社長「では改めて…」頷く 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (社長)「6番!」 インデックスが示された盤面 012 XO. 345 .X. 678 .OO 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「イフ、お願い」 メカ・イフが考えている 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフきょろきょろ 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフが右へ走る メカ・プレイヤーナンバーと合流 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバーのお腹「2」 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ「2」「1 === 2」 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ「false」確認 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフが左へ走る メカ・ドローXと合流 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ「6」説明風 メカ・ドローXが考えている 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ドローXが左へ走っていく 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 空きコマ 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 012 XO. 345 .X. 678 XOO 6番が強調されたエフェクト付き 【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「自動判別ゥゥゥ!!!」絶叫喜び クリスタルおじぎ状態
次のエピソードへ
【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] イベント駆動

OXゲーム開発編 第6話:エピソード「条件分岐」


 本エピソード「条件分岐」は、OXゲーム開発編 第6話です。
 OXゲーム開発編は、OXゲーム(三目並べ・マルバツ)の開発を通じて、ゲームプログラミングの基礎の基礎を解説しています。
 OXゲーム開発編の各エピソードは、それまでのエピソードのマンガ(と解説)を前提としていますので、 もし途中から読み始めた方は、ぜひ最初のエピソード「プログラム」から読み進めてください。

OXゲーム(三目並べ・マルバツ):OとXを自動判別する「条件分岐」ソースコード


JavaScript

// プレイヤー番号に合わせて O か X を描画
if ( 1 === iPlayerNumber ) {
    // 1なら drawO を呼んで O を描画
    drawO( oContext , iIndex );
} else {
    // 1でなければ(つまり2なら) drawX を呼んで Xを描画
    drawX( oContext , iIndex );
}

OXゲーム(三目並べ・マルバツ):OとXを自動判別する「条件分岐」実装検証



[PR]

「条件分岐」とは:状況に応じた指示


 「条件分岐」の本質「状況に応じた指示」です。
 条件分岐により、様々な状況に応じた指示を出すことで、その時々に合わせた処理を行うことができます。

ゲームプログラミングにおける「条件分岐」


 条件分岐は、ゲームプログラミングにおいて欠かせない、とても重要な機能です。

ゲームはインタラクティブ:条件分岐はゲームそのもの


 ゲームはインタラクティブ(双方向)であることが、映画やアニメなどと大きな違いであり、特徴です。 その時々の状況や、プレイヤーの操作に対応した処理を行います。
 例えば、「はい」「いいえ」などのプレイヤーの選択でNPCの応答やストーリーが変わる、自キャラクターの攻撃が敵に当たったかどうかなどは、条件分岐で行います。 ゲームクリアやゲームオーバーの判定なども、条件分岐で行います。
 つまり条件分岐はゲーム要素そのものと言っても過言ではありません。

遊びやすくできる条件分岐


 また、例えば本マンガのように、自動的にプレイヤーの順番を条件分岐で自動判別することで、プレイヤーが遊びやすくすることができます。 条件分岐を駆使することで、良質なゲームを作ることができます。

ソースコードの仕組み


 マンガでメカ・イフが担った役割、条件を判断して分岐する if は、JavaScriptでは以下の構造になります。

JavaScript

if ( 条件 ) {
    // 条件が真の時の指示
} else {
    // 条件が偽の時の指示
}

 if は、条件が真(true)ならば、続く{}内の処理を実施します。
 elseは、条件が偽(false)ならば、続く{}内の処理を実施します。 なお else は無くても大丈夫です。


 それでは、本ソースコードの例について、具体的に見てまいりましょう。

条件分岐

// プレイヤー番号に合わせて O か X を描画
if ( 1 === iPlayerNumber ) {
 この if文で、iPlayerNumber1 かどうかを判定して、 真(true)ならば直後の処理、偽(false)ならばelseの処理を行います。


真(iPlayerNumber1)の処理

    // 1なら drawO を呼んで O を描画
    drawO( oContext , iIndex );
 iPlayerNumber1 ならば、drawO を実行します。


偽(iPlayerNumber1)の処理

} else {
    // 1でなければ(つまり2なら) drawX を呼んで Xを描画
    drawX( oContext , iIndex );
}
 iPlayerNumber1 でなければ、drawX を実行します。
 このプログラムは、1 以外なら、つまり 2 でなかったとしても drawX を実行します。 iPlayerNumber1 または 2 ですので、基本的には問題ありませんが、関連した深堀り解説を後述します。

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


 前記「実装検証」セクションにて、解説した、手番に応じて OX を描くプログラムを体験できます。 ぜひ検証して、「条件分岐」を感じてください。

【コラム】「めんどう!」への対応は積極的にしよう


 マンガでは、社長の「めんどう!」に対応して、OX かを自動判別するようにしました。
 このように遊びやすくできたりしますので、「面倒くさい」への対応は、積極的にすべきです。
 特に本ケースでは、O の手番で X を描いてと指示されると「困る」ため、むしろ対応した方が良いです。 対応しないと、不具合に繋がるかもしれません。 「面倒くさい」に対応することが、総合的に考えると良い場合があります。

【職人の視点】1でも2でも無い場合


 マンガやソースコードを見て、「iPlayerNumberが 1 でも 2 でも無かった場合は…?」と気になった方はいらっしゃいますか。 スルドイです。
 エピソードでは、条件分岐の本質を明確にするため、「1」か、それ以外なら「2」と決めつけて処理しました。 しかし何かの手違いや不具合で、それ以外の値が iPlayerNumber に入るかもしれません。
 すべての値に明示的に対応した方が保守性が高まります。 具体的には、本エピソードの条件分岐は以下のように書くべきです。

JavaScript

// プレイヤー番号に合わせて O か X を描画
if ( 1 === iPlayerNumber ) {
    // 1なら drawO を呼んで O を描画
    drawO( oContext , iIndex );
} else if ( 2 === iPlayerNumber ) {
    // 2なら drawX を呼んで X を描画
    drawX( oContext , iIndex );
} else {
    // 1でも2でもない(エラー発生のため例外処理)
    throw new Error( `ILLEGAL iPlayerNumber: ${iPlayerNumber}` );
}

 なお保守については、後の章にて複数のエピソードで改めて解説予定です。

【職人の視点】条件がtruefalse「以外」の場合は?


 if の「条件」には、任意の「値」を指定できます。 では true でも false でもない値が渡された場合はどうなるでしょうか。 例えば 1 等です。
 結論としては、その値によって、「真の処理」か「偽の処理」かが決まります。

数値の真偽


 例えば数値では、 0false0以外が true 相当になります。
 そのため、以下のように書いてしまうと、iPlayerNumber = 11 になるため true 相当と判断されます。 エラーにはならないため、意図的で無い場合は発見の遅れる不具合になるので注意です。

JavaScript

if ( iPlayerNumber = 1 ) {
    // 常にここに来る
    drawO( oContext , iIndex );
} else {
    // ここには来ない
    drawX( oContext , iIndex );
}

 筆者は、間違えてこう書くのを防ぐために、同値比較演算子(「==」「===」)を使用するときは、 1 === iPlayerNumber のように、左側に定数を記述しています。
 なお Python は「=」を用いた代入が、値を返す式ではなく「文」のため、構文エラーになります。 筆者はこのようにエラーになる方が好みです。

Python

if iPlayerNumber = 1:
    # エラー

数値以外の真偽


 数値以外では、例えば JavaScript では、初期化していない変数などが持つ値 undefined および、無効なオブジェクトを示す値 null などが Falsy(偽値)と規定されています。 Falsy は if などの条件判定において false 相当の挙動になります。
 これはエピソード「演算子」で解説した、! などの論理演算子でも同様です。
 このあたりはプログラミング言語で異なります。 またデータ型について詳しくは、後の章にて複数のエピソードで解説予定です。

【職人の視点】条件分岐はパフォーマンスが悪い


 条件分岐は、実はパフォーマンスが悪いです。
 悪いといっても軽微ですので、普段は気にする必要はありません。 例えば、エピソード「演算子」で解説した iPlayerNumber の変更も、条件分岐を使用して以下のように書いても問題ありません。
if ( 1 === iPlayerNumber ) {
    iPlayerNumber = 2;
} else {
    iPlayerNumber = 1;
}
 ただし、もしここがパフォーマンスクリティカルな処理の中で、演算式で処理できるのであれば、前述のエピソードの通り以下と書くべきです。
iPlayerNumber = 3 - iPlayerNumber;

 これは現在のアーキテクチャがパイプラインを用いてプログラムを先読みしているからですが、 ハードウェアの深い話になりますので、詳細は後のエピソードで解説予定です。

[PR]

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


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

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


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

登場人物紹介

【マンガで感じる】条件分岐 ~状況に応じた指示~ if文でゲームを遊びやすく・楽しく【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 登場人物 社長 クリスタル メカたち  マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

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

クリスタル

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

メカたち

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

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


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

AIを専属の家庭教師にして条件分岐を学ぼう


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

補足

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



カテゴリー:マンガで感じる!本当の基礎から学ぶゲームプログラミング,OXゲーム開発編
[PR]