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

【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】プログラミングを始めようとしている方・初心者向け初中級者向けプログラミング解説プログラマー向け実装解説

2026/03/30
【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】

 40年以上のゲームプログラミング経験をマンガで可視化。 今回はプログラミングにおける基本アルゴリズムの代表格「基本ソート」。 1つの単純なルールを繰り返すだけで、複雑に見える並べ替えを解決するエピソードです。
【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】

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


[PR]

【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~


【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 社長(腕組み)「うーん。。。」 クリスタル「どうされました?」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道パーツがバラバラに並んでいる:3,4,1,5,2 社長「運動加速装置を手に入れたのだが…」「順番がバラバラで…」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 社長「背の高い順に並べ替えてもらえますか」 クリスタル「承知しました」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 基本ソート ~1つのルールを繰り返して並べ替え~ 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 メカ・アイ クリスタル「メカ・アイ!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 メカ・ジェイ クリスタル「メカ・ジェイ!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 メカ・アイが0番目に、メカ・ジェイが1番目に クリスタル「そこに並んで」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「まず」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:3,4,1,5,2 アイ、ジェイ アイのところに薄く○ クリスタル「アイの前に一番高いパーツを持ってきます」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:3,4,1,5,2 アイ、ジェイ ジェイの可動範囲に薄く角丸長方形 クリスタル「ジェイがそのパーツを探します」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「ルールは1つだけ」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:3,4,1,5,2 アイ、ジェイ 高さ比較ラインと交換矢印が薄く出てる クリスタル「ジェイの方が高ければすぐ交換します」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「オッケー?」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:3,4,1,5,2 アイ、ジェイ クリスタル「じゃあ基本ソート始めるよー」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「高さ比較!」 坂道配列:3,4,1,5,2 アイ「3」 ジェイ「4」 クリスタル「アイが3でジェイが4だから…」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:3,4,1,5,2 交換矢印 クリスタル「ジェイの方が高いから交換!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:4,3,1,5,2 交換したところに赤丸 クリスタル「交換完了!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「ジェイは一歩横に!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 ジェイが一歩横に(=2) 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「高さ比較!」 アイ「4」 ジェイ「1」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「アイの方が高いからそのまま!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「ジェイは一歩横に!」 ジェイが一歩横に(=3) 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「高さ比較!」 アイ「4」 ジェイ「5」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「ジェイの方が高いから交換!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,3,1,4,2 クリスタル「ジェイは一歩横に!」 ジェイが一歩横に(=4) 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「高さ比較!」 アイ「5」 ジェイ「2」 クリスタル「アイの方が高いからそのまま!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,3,1,4,2 5をクリスタルが示しながら クリスタル「OK!これで1番高いパーツが決定!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「アイは一歩横に、ジェイはアイの隣に!」 アイ=1 ジェイ=2 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,3,1,4,2 i=1の位置、j=2-4の位置に記 クリスタル「次は2番目に高いパーツを持ってきます」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「高さ比較!」 アイ「3」 ジェイ「1」 クリスタル「そのまま!」「ジェイは横へ!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 ジェイ=4 アイ「3」 ジェイ「4」 クリスタル「交換!」 坂道配列:5,4,1,3,2 ジェイ=5 アイ「4」 ジェイ「2」 クリスタル「そのまま!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,4,1,3,2 5と4に○ クリスタル「2番目もOK!、アイは横に、ジェイは隣に」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,4,1,3,2 アイ=2 ジェイ=3 アイ「1」 ジェイ「3」 クリスタル「交換!」 坂道配列:5,4,3,1,2 ジェイ=4 アイ「3」 ジェイ「2」 クリスタル「そのまま!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,4,3,1,2 クリスタル「3番目もOK!では最後!」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,4,3,1,2 shaアイ=3 ジェイ=4 クリスタル「高さ比較!」 アイ「1」 ジェイ「2」 クリスタル「交換!」 交換矢印 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道配列:5,4,3,2,1 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 クリスタル「社長!完了いたしました」 社長「ありがとう」 【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 坂道を転がり落ちる社長 社長「運動加速ゥゥゥ!!」 クリスタル白け顔

基本ソートのソースコード例


JavaScript

// i を 0 から 3 まで(4箇所)繰り返し処理
for ( let i = 0 ; i < 5-1 ; ++i ) {
    // j を (i+1) から 4 まで繰り返し処理
    for ( let j = i+1 ; j < 5 ; ++j ) {
        // もし a[j] が a[i] より大きければ
        if ( a[i] < a[j] ) {
            // a[i] と a[j] を交換
            [ a[j] , a[i] ] = [ a[i] , a[j] ];
        }
    }
}

Python

# i を 0 から 3 まで(4箇所)繰り返し処理
for i in range( 0 , 5-1 ):
    # j を (i+1) から 4 まで繰り返し処理
    for j in range( i+1 , 5 ):
        # もし a[j] が a[i] より大きければ
        if a[i] < a[j]:
            # a[i] と a[j] を交換
            ( a[j] , a[i] ) = ( a[i] , a[j] )

[PR]

「基本ソート」の本質:1つのルールを繰り返して並べ替え


 基本ソートの本質は「1つのルールを繰り返して並べ替え」です。
 この「1つのルールを繰り返す」ことはプログラミングの本質とも言える、とても重要なものです。

基本ソート(単純交換法)のアルゴリズム解説


今回のアルゴリズム:基本ソート(単純交換法)


 データを大きい(小さい)順に並べ替える処理をソートと呼びます。
 マンガの中で社長の「運動加速装置(坂道パーツ)」を並べ替えるために使用されたアルゴリズムは、ソートの基本的なものです。 「先頭(基準位置)」を決め、残りのすべてのデータと順番に比較し、 もし「もっと大きい(または小さい)」データが見つかったら交換します。 これをデータの数だけ繰り返すことで、最終的にきれいに整列(ソート)されたデータが完成します。
 これは単純交換法(Exchange Sort)と呼ばれる場合もあります。

ソースコードの仕組み(JavaScript)


 今回のプログラムは、以下のような「2重ループ」構造になっています。

1.基準位置を決める(外側のループ)

// i を 0 から 3 まで(4箇所)繰り返し処理
for ( let i = 0 ; i < 5-1 ; ++i ) {
 ここでは変数 i が基準位置、つまり「今、どこの場所を確定させたいか」を指しています。 マンガでは、メカ・アイの位置にあたります。
 初期値は 05-1(つまり4)未満の間、++iで1ずつ増やしてループ。 つまりこの場合は 0,1,2,3 の 4 パターンです。
 JavaScript や Python に おける、プログラム上の先頭(1番目)は 0 のため、注意が必要です。 この処理ではつまり、各パーツの 1番目から4番目までを動きます。


2.残りの要素を探す(内側のループ)

    // j を (i+1) から 4 まで繰り返し処理
    for ( let j = i+1 ; j < 5 ; ++j ) {
 変数 j は、iより後ろにある残りすべての要素を順番にチェックしていく役割です。 マンガでは、メカ・ジェイが次々と確認しに行っている動きです。
 より具体的には、まず i が 0 のときには、j は 1 から 4 まで 1 ずつ増えながら、後述の3.比較4.交換を処理します。 それが終了すると、このforループが終了して外側のループに戻ります。
 すると外側のforループで i が 0 から 1 増えて 1 になり、再びこのforループに入ります。 そのとき j は、2 から 4 まで 1 ずつ増えながら繰り返し処理します。
 同様に、i が 2 のときは j が 3 から 4 まで、 i が 3 のときは j が 4 になり、同様に繰り返します。


3.比較換する

        // もし a[j] が a[i] より大きければ
        if ( a[i] < a[j] ) {
 「基準位置にあるもの」より「探してきたもの」の方が条件に合う(今回は大きい)かどうかを比較します。 探してきたものの方が条件に合えば、交換を行います。


4.交換する(スワップ処理)

            // a[i] と a[j] を交換
            [ a[j] , a[i] ] = [ a[i] , a[j] ];
 こちらは別記事の交換にて詳述していますので、ぜひご覧ください。

その他のソートアルゴリズム


 ソートには、本記事で紹介した基本ソート以外にも、有名なアルゴリズムが複数あります。

プクプク移動するイメージのバブルソート


 ソートアルゴリズムの入門として有名なものにバブルソート(Bubble Sort)があります。 バブルソートも単純交換法と同様に「基本のソート」として扱われますが、コードの書き方やデータの動き方に個性があります。

単純交換法

 今回のマンガの方法です。 基準位置(i)と、離れた場所にある比較対象(j)を直接交換します。

バブルソート

 同様の2重ループの中で「隣り合う2つ(例えば jj+1 )」を比較して交換します。 大きな値が泡(バブル)のようにプクプクと端っこまで移動していくイメージの動きになります。

より高速なソートアルゴリズム


 基本ソートは「比較回数がデータ量の2乗のペースで増える」アルゴリズムです。 専門用語ではこれを計算量オーダーと呼び \(O(n^{2})\) と表現します。
 厳密な比較回数は \(n^{2}\) ではありませんが、データ量が増加したときに、最も大きく影響を受けるところだけを考慮すると \(n^{2}\) になります。
 \(O(n^{2})\) の場合、データ数がマンガのように5個程度であれば、一瞬で終わります。 しかし、データが100万などに増えると、計算量が爆発的に増え、処理が非常に遅くなります。
 それに対し、クイックソートなど、より高速なアルゴリズムが多数考案されています。 これらはより多くのメモリーを活用したり、同じ値の時に順番が入れ変わることを許容するなどのトレードオフも含めた、時に感動するような工夫により、基本的に \(O(n\log{n})\) の計算量オーダーを実現しています。 データ量が多いとき、\(O(n\log{n})\) は \(O(n^{2})\) より圧倒的に高速です。
 それらのアルゴリズムを理解するためにも、 まずはこの「基本ソート」で「配列操作」と「2重ループ」をマスターすることが重要です。 高速化の技術(最適化)については、今後のエピソードで詳しく触れていく予定です。

ゲームプログラミングにおける「基本ソート」


基本ソートはすべてのプログラミングの基本


 基本ソートは、ゲームプログラミングの基本であり、すべてのプログラミングの基本です。
 プログラムを理解する上で、必ず通る道と言えます。 小学校のプログラミング学習のカリキュラムにも採用されています。
 基本ソートのプログラムに登場する「変数の内容が変化しながら繰り返す」という要素は、 「この動きが理解できたらプログラマーを名乗って良い」と筆者は考えています。 プログラミングでとても重要なものです。
 しかも基本ソートは、それが2重構造になっています。 これが理解できる小学生は多くないでしょう。 大人でも、小学校の先生を含めて、プログラミング未経験であれば、短時間で理解する人は少ないはずです。
 筆者は中学2年生のときにプログラミングの勉強を始めて、 このレベルを理解したと言える状態になるまで半年を要しました。
 そのため、基本ソートやプログラミングについて、このマンガでイメージだけでも掴んでもらえたら幸いです。 できるだけ多くの小学生および小学校の先生方、プログラムを勉強し始めた方に読んでいただきたいです。 興味が出たら本記事の解説を読んだり、AIと会話するなどして、ちょっとずつ理解を深めていきましょう。

ゲームプログラミングで基本ソートはあまり使用しない


 実際にゲームプログラミングでソート(並び替え)が必要な場合、最近では基本ソートを使うケースはあまりありません。
 プログラムが単純でメモリー消費量が少ないというメリットはあるので、ファミコン世代の家庭用ゲーム機では使用されていました。
 しかし現在は、既存の高速なソートを使用するケースが多いです。 例えばキャラAIバトルロイヤルでは、バトル結果をスコアの降順にソートして表示しています。 そのプログラムは、自作ではなく、JavaScript に用意されている関数 sort を使用しています。
adResult.sort( (dA,dB) => dB['score']-dA['score'] );

 速度効率と作業時間のどちらの面でも、基本ソートやバブルソートを使用する理由はほとんど無いでしょう。

【プログラミングの醍醐味】シンプルな共通ルールを繰り返すことで解決する


 今回のように、シンプルな共通ルールを繰り返すことで課題解決に導くことは、プログラミングの醍醐味であり、重要なポイントです。
 例えば基本ソートでは「2箇所のデータを比較して条件に合致したら交換する」という、 とても単純な1つの共通ルールが用いられています。 これ順番に繰り返して実行するだけで、大きい順(小さい順)に並び替えられます。
 これが基本ソートの本質であり、プログラミングの本質でもあります。
 解決したい課題に対して、こうしたシンプルな共通ルールを発見し、それを繰り返すことで課題を解決できたときは、パズルが解けたような楽しさがあります。 これぞプログラミングの醍醐味です。
[PR]

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


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

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


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

登場人物紹介

【マンガで感じる】基本ソート ~1つのルールを繰り返して並べ替え~【本当の基礎から学ぶゲームプログラミング】 登場人物 社長 クリスタル メカたち  マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

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

クリスタル

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

メカたち

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

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


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

AIを専属の家庭教師にして基本ソートを学ぼう


 本エピソードでは、プログラミングの基本アルゴリズムの代表格「基本ソート」を紹介しました。
 マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 基本的な内容でも、深い部分でも、それぞれに応じた質疑応答ができて、理解が深まりますので強くオススメします。
 本シリーズが、皆さまのプログラミング学習および、ゲームプログラミングの楽しさと本質の理解に少しでもお役に立てれば幸いです。

補足

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

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