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

【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】プログラミングを始めようとしている方・初心者向け初中級者向けプログラミング解説プログラマー向け実装解説

2026/03/30
【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】

 40年以上のゲームプログラミング経験をマンガで可視化。 今回はデータ入れ替えの基本「交換(スワップ)」。 変数の中身は直接交換できませんが、 一時的な保存場所を利用するパズルのような工夫で解決するエピソードです。
【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】

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


[PR]

【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~


【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 社長「あっ!」 クリスタル「どうされました?」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 アイとジェイ [メカ・アイ][メカ・ジェイ]の表示 アイが白い杯(ジェイ用)、ジェイが赤い杯(アイ用)を持っている (社長)「間違えて渡しちゃった」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 社長「交換して!」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 アイ・ジェイが渡そうとするが手詰まり クリスタル「交換できませんね」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 社長(涙目) クリスタル「少々お待ちください」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 交換~一時的な保存場所を利用して入れ替え~ 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 ケイ登場 クリスタル「メカ・ケイ、手伝って」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 クリスタル「じゃあ交換するよー」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 交換前:アイ・(奥に)ケイ・ジェイの順に並ぶ 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 右にジェイ 矢印でわかりやすく クリスタル「まず、アイからケイに渡して」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 奥にケイ 矢印でわかりやすく クリスタル「次は、ジェイからアイへ」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 左にアイ 矢印でわかりやすく クリスタル「最後に、ケイからジェイへ渡して」 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 完了:アイ・(奥に)ケイ・ジェイの順に並ぶ 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 クリスタル「社長!交換完了いたしました」 社長「よかった!ありがとう!」(号泣) 【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 丸枠内でアイとジェイが杯から飲んでいる
次のエピソードへ
【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 基本ソート

交換(スワップ)のソースコード例


JavaScript

// 一時的な保存場所 k を用意して交換
let k = i; // k ← i
i = j;     // i ← j
j = k;     // j ← k

Python

# 一時的な保存場所 k を用意して交換
k = i    # k ← i
i = j    # i ← j
j = k    # j ← k

[PR]

「交換」の本質:一時的な保存場所を利用して入れ替え


 交換の本質は「一時的な保存場所を利用して入れ替え」です。
 変数の中身を入れ替えるためには代入が必要です。 そのとき、代入される側のデータをどこかへ避けておかないと、上書きされて消えてしまいます。 この「一旦どこかへ置く」というパズルのような手順が、交換の、そしてあらゆるデータ操作の基礎となります。

交換(スワップ)のアルゴリズム解説


3つのステップで入れ替える


 交換は、マンガでメカ・ケイが手伝ったように、プログラムでも変数 k (一時変数)を仲介役にして3段階の手順を踏みます。 こうすることで、データを消失することなく交換できます。

1.退避

 i の荷物を k に預ける( k = i )

2.移動

 j の荷物を、空いた i に渡す( i = j )

3.復帰

 k に預けていた、もともと i が持っていた荷物を j に渡す( j = k )

【補足】プログラムでは「移動」ではなく「複製」


 マンガでは荷物を物理的に「移動」させていますが、実際のコンピューター内部では、データは「複製(コピー)」されています。 i = j と実行したとき、 j の中身が消えるわけではなく、同じ値が i に書き込まれます。

スマートな1行交換の書き方


 マンガの例は、ほぼすべてのプログラミング言語で適用できる手法です。 実はプログラミング言語の特性を利用して、交換はシンプルに1行で書くことも可能です。
 以下はその代表例です。

JavaScript

[ j , i ] = [ i , j ];

Python

( j , i ) = ( i , j )

C++

std::swap( i , j );

【職人の視点】1行交換のパフォーマンス


 前記 C++ の方法は、テンプレートという仕組みにより、基本的にはそのデータの型および実行環境における最適な実装が提供されています。
 一方、JavaScript と Python の方法は、右辺で一時的にペアを作成し、左辺に一気に代入することで、一時変数 kを使わずに、1行で交換を実現しています。 このペアは、JavaScriptは配列、Pythonはタプルと呼ばれるものです。
 この挙動をマンガ的に表現しますと、メカ・アイとメカ・ジェイがいったん、双子のメカに荷物を預けて(一時的ペア作成)、場所を入れ替えて、それぞれ受け取り直す(代入)、というイメージです。
 つまり、プログラムには明示されていない場所に一時的に保存する処理になります。 その一時保存場所を a[] で表現して内部処理を展開すると、以下のようになります。

JavaScript(内部イメージ)

a[0] = i;
a[1] = j;
j = a[0];
i = a[1];

パフォーマンスとのトレードオフ?


 1行交換の場合、一時保存場所が2箇所になりますので、kだけの場合にくらべて倍の容量が必要です。 また、代入回数も増えていて、一見してパフォーマンスが落ちるプログラムです。 1行の方がスマートに書けて読みやすいけど、パフォーマンスとのトレードオフのようです。
 しかし実際には、内部処理で最適化されるため、パフォーマンスの差は微々たるものです。 スーパースカラと呼ばれる機能を考慮すると、データ間の依存関係が少ない分、むしろこちらの方が高速な可能性があります。
 このあたりはハードウェアの深い話になりますので、後のエピソードで解説します。

結論:読みやすさ(可読性)が最優先


 いずれにしても重要なのは、3行のプログラムより1行の方が「読みやすい(可読性が高い)」という点です。 よほど特殊な場合を除き、もし1行で記述できるプログラミング言語を使用しているならば、筆者は1行で記述することを推奨します。

ゲームプログラミングにおける交換


 交換は、ゲームプログラミングにおいて、例えばUIで配置を入れ替える場合などで必要です。
 ただそれよりも重要なのは、この一時変数を利用した交換が、最もシンプルなアルゴリズムという点です。 そのため交換は、ゲームプログラミングを含むすべてのプログラミングの考え方の基本です。
 このアルゴリズムを正確に把握して、より複雑なプログラム内部動作の理解に繋げましょう。

【プログラミングの醍醐味】できることとできることを組み合わせる


 今回は、kという一時変数を用意して、代入という「既に用意されている機能」、つまり「できること」「できること」を組み合わせることで、 簡単にはできないことを実現しました。
 このような方法を発見して課題を解決できたときは、パズルが解けたような楽しさがあります。 これぞプログラミングの醍醐味で、筆者がずっと魅了され続けてきたものです。
[PR]

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


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

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


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

登場人物紹介

【マンガで感じる】交換 ~一時保存場所を利用して入れ替え~ 【本当の基礎から学ぶゲームプログラミング】 登場人物 社長 クリスタル メカたち  マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

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

クリスタル

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

メカたち

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

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


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

AIを専属の家庭教師にして交換を学ぼう


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

補足

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

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