【マンガで感じる】ループ ～繰り返し処理～ プログラマーが乗り越えるべき最大の壁【本当の基礎から学ぶゲームプログラミング】[初級者向け]

2026/06/29

　40年以上のゲームプログラミング経験をマンガで可視化。 今回は「ループ(繰り返し処理)」。 数行の記述で大量の処理を実行できるループは、初心者プログラマーが乗り越えるべき重要かつ最大の壁です。 その内部動作を直感的に理解しましょう。

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

【マンガで感じる】ループ ～繰り返し～

「ループ」のソースコード例

Python

JavaScript

「ループ」とは：繰り返し処理

　「ループ」の本質は「繰り返し処理」です。
　プログラムはたった数行でも、ループを用いて100回でも100万回でも繰り返すことが可能です。 これをうまく使いこなせるかどうかが、プログラマーとして重要なポイントです。

「ループ」のソースコードの仕組み(Python,JavaScript)

　ループのソースコードを解説します。
　比較的わかりやすい Python を先に解説し、続けて JavaScript を解説します。

Python の for..in によるループ

　まずは Python におけるループのソースコードを解説します。

席番号変数の初期値を設定

　まずこの行で、席番号の初期値を設定します。

初期値から最終値手前まで変数に設定して繰り返す

　for は、ループを指示する代表的な制御文です。
　Python では for 変数 in range( 初期値 , 最終値 ): が基本形式です。 変数が、初期値から 1 ずつ増やしながら、「最終値のひとつ前」までの値を取りながら繰り返します。
　つまりこの行は、変数 i の値が、最初 0 になり、次に 1、2、と変わっていきながら、 その度に for のブロックを実行します。
　そして最後に 4 の処理をして、このループを終了します。

席番号を設定

　この行は、配列と呼ばれる形式で示された場所 aiSeatNumber[i] に、iSeatNumber の値を設定します。
　つまり iが 0 で、iSeatNumber が 11のときは aiSeatNumber[0] = 11 の意味になります。

席番号変数をインクリメント

　席番号変数 iSeatNumber に 1 を加えます。

別の書き方

　前述 プログラムは、このように 5 行で書き直すこともできます。
　ただし、こう書いてしまうと、繰り返し回数が多くなると、それだけプログラムが長くなります。 ループプログラムの良いところは、range で指定している 5 を 100にするだけで、ループ回数が 100 に増えるところです。
　forループを使用してプログラミングすれば、少ない記述で大量の繰り返し処理が可能です。

JavaScript の for によるループ

　次に JavaScript におけるループのソースコードを解説します。

席番号変数の初期値を設定

　まずこの行で、席番号の初期値を設定します。

for文で初期化、継続条件、更新処理を繰り返す

　JavaScript および C#、C++ 系の言語における for 文は、for ( 初期化 ; 継続条件 ; 更新処理 ) の形式です。
　つまりこれは、以下の順番で実行されます。

1. 初期化(let i = 0)
2. 継続条件(i < 5)が false ならループ終了
3. forに続く中身({aiSeatNumber[i] = iSeatNumber++;})
4. 更新処理(++i)
5. 2へ戻る

席番号を設定し、席番号変数をインクリメント

　この行は aiSeatNumber[i] に iSeatNumber の値を設定し、iSeatNumberをインクリメントします。
　iSeatNumber++ は、iSeatNumber に 1 を加えつつ、加える前の iSeatNumber の値を返します。
　すなわち i が 0、iSeatNumber が 11 のときは、 aiSeatNumber[0] が 11 になり、iSeatNumber が 12 になります。
　わかりづらければ、Python のように2行に分けても問題ありません。

配列について

　変数aiSeatNumberは配列と呼ばれるデータ型の値を保持しています。
　詳しくは後のエピソードで解説予定ですが、ここでは配列の変数の各要素を「番号付きの変数」だと考えてください。 つまり、aiSeatNumber[0] や aiSeatNumber[1] という名前の変数のようなものです。 ただし、その添字の数字を変数にして aiSeatNumber[i] などとも指定できます。
　また、配列の値は [ と ] を使用し、各要素の値を「,」(カンマ)区切りで繋げて書くことができます。 これを配列リテラルと呼びます。 例えば aiSeatNumber = [ 11 , 12 , 13 , 14 , 15 ] なら、aiSeatNumber[0] は 11、 aiSeatNumber[1] は 12、aiSeatNumber[4] は 15、です。

0から始まることについて

　プログラムにおける先頭の数値は 0 が原則です。 配列の番号も 0 から始まります。 ※プログラミング言語や状況にもよります
　今回のソースコードでは、Python が range( 0 , 5 )、JavaScript は for ( let i = 0 ; i < 5 ; ++i ) と記述しています。 このように、ループは 0 から始め、5回ループなら「5未満まで」と指定するのが、基本的なプログラミングです。

JavaScriptのループ処理を展開

　この JavaScript のプログラムは、ひとつひとつ分解すると、この表の通りに動いています。 この動きを理解できていることが重要です。
　なおここでは、? を「何が設定されているかわからない」という意味で使用しています。 実際には何かの値が入っています。
　また、定義されていない変数の欄は - としています。 配列の変数 aiSeatNumber は、事前に定義済みという想定です。

【プログラミングの醍醐味】1種類のプログラムをループ

　マンガおよびソースコード例では、数行で5回繰り返し処理を実行しました。 最終値や継続条件を変更すれば、100回でも100万回でも、同じ行数で繰り返すことができます。
　このように、1種類のプログラムを、数値を指定するだけで多数繰り返し処理することができる。 これぞプログラミングの醍醐味です。

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

　ゲームプログラミングを含めたすべてのプログラミングの基本要素のうち、筆者が最も重要と考えているのが「ループ」です。

ゲームで使用される各種「ループ」

　例えば、MMORPGのプレイヤーキャラクターに対する処理は、ループで実施しています。 仮に1つのサーバーに1000人いた場合、1000行のプログラムを実行するわけではありません。 キャラクター番号等を保持する変数の値を変えながら、1種類のプログラムを1000回ループ実行します。
　敵キャラクターも同様ですし、目に見える見えないに関わらず様々な要素が、ループで処理するからこそ実現できています。
　さらにゲームプログラミングでは、大本の処理がメインループと呼ばれます。 つまり、処理全体がループで動いています。
　ゲームプログラミングとループは、切っても切り離せないほど、重要な要素です。
　なお、メインループについては、後の「フレーム」のエピソードで詳しく解説予定です。

「ループ」を理解すれば「プログラマー」

　ループを正確に理解してプログラミングできるかどうかが、プログラマーかどうかの差だと、筆者は考えています。
　これはあくまでも筆者の独自基準ですが、ループを理解できれば、プログラマーを名乗って問題ありません。

「ループ」はプログラム最大の特徴

　ループはプログラムにおける最大の特徴です。 基本的に、他のドキュメントには無いものです。
　ただし、理解するには少々高い壁を超える必要があります。 筆者は個人的に、これがプログラマーにとっての最大の壁だと考えています。

ソースコードを正確に理解しよう

　ループの理解のために、本エピソードのソースコードで示されるプログラムが、同じ変数の値を順次変えつつ処理が行われていくことを詳細かつ正確に理解しましょう。
　比較的 Python の方が理解しやすいと思います。 JavaScript は大変かもしれませんが、ぜひ、前述の表を確認して、内部動作を漏らさず把握してください。
　難しいと感じたら、前エピソード「列挙ループ」に戻って、そちらの理解を確認してください。
　筆者は中学生の時に、半年かかって理解できました。 ですので時間がかかって構いませんし、理解が曖昧なまま先に進むのも良いでしょう。

応用してみよう

　理解できたと感じたら、OXゲーム開発のエピソード「ゲームオーバー」で、全インデックス番号を指定していた勝敗判定プログラムを、 ループを使用して書き直してみてください。
　また、19×19の碁盤の5目並べの勝利判定にも、挑戦してみてください。

【職人の視点】Python の for はすべて列挙ループ？

　Python の forループは、すべて for..in の形です。 つまり前エピソードで解説した「列挙ループ」と言えます。
　ただし、range( 0 , 5 ) の内部処理は、[0,1,2,3,4] をその場で作るのではなく、 JavaScript の for ループで解説した ++i のような、i を 1 ずつ増やす動作をしています。 なお、range は第3引数で「ステップ数」(増分)を指定できます。 本エピソードでは省略しているため、デフォルトの 1 が適用されています。 Python で ++i という書き方ができない点にも注意
　そのため、列挙ループと呼ぶべきか、汎用的なループとして扱うべきかは微妙なところですが、 無駄なメモリーは使用していないというところは、プロとして把握しておくべきでしょう。

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

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

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

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

登場人物紹介

　マンガで感じる！本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

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

クリスタル

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

メカたち

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

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

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

本エピソードから読み始めた方へ

　もしあなたがプログラム初心者で、「マンガで感じる！本当の基礎から学ぶゲームプログラミング」シリーズを本エピソードから読み始めた場合は、 ぜひ最初のエピソード「プログラム」から読むことをご検討ください。

AIを専属の家庭教師にしてループを学ぼう

　本エピソードでは、プログラミングに重要な役割を果たす「ループ」について解説しました。
　マンガを読んで興味が湧いた、ソースコードや解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 各人の理解度に応じた質疑応答ができて、理解が深まりますので強くオススメします。
　おそらくこの「ループ」が、プログラミング学習において最大の高い壁になると思います。 本エピソードおよび、比較的理解しやすい前エピソード「列挙ループ」と併せて、焦らず確実に理解していきましょう。
　皆さまのループおよびゲームプログラミングの本質理解に少しでもお役に立てれば幸いです。

補足

カテゴリー：マンガで感じる！本当の基礎から学ぶゲームプログラミング,基本アルゴリズム編