再帰でハノイの塔を攻略せよ：コーディングに役立つ！ アルゴリズムの基本（3）（1/3 ページ）

プログラマたるものアルゴリズムとデータ構造は知っていて当然の知識です。しかし、教科書的な知識しか知らなくて、実践的なプログラミングに役立てることができるでしょうか（編集部）

» 2008年10月01日 00時00分 公開
[山下寛人，オイシックス株式会社]

最大公約数を求める

　「最大公約数を求めるプログラムを作って」といわれて、すぐに書けるでしょうか。

　一般的には小学校で最大公約数の求め方を教わります。2つの数を共通する素数で割っていくというものです。そのままプログラムしようとすると、まず素数を求めるところから始めなければならず、少々難しそうです。

　最も単純にやるとすれば、2つの数の小さいほうから1ずつ減らして両方の数を割っていき、どちらも余りが0になるものを求めるという方法でよいでしょう。しかしこのやり方は無駄が多そうです。

　「ユークリッドの互除法」という方法を使うと簡単にプログラムにすることができます。ユークリッドの互除法とは以下のような方法で最大公約数を求めるやり方です。

  • 2つの整数a、bがある
  • aをbで割った余りをrとする
  • aとbの最大公約数はrとbの最大公約数になる
  • 次にbをrで割った余りを求める
  • これを繰り返して余りが0になったときの除数が最大公約数

　このやり方なら非常に簡単にプログラムにすることができます。

  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4.   function saidaikouyakusuu(a, b) {
  5.     display("saidaikouyakusuu", "計算中：" + a + "と" + b + "の最大公約数"); 
  6.     var r = a % b;
  7.     if (r == 0) {
  8.       return b;
  9.     }
  10.     return saidaikouyakusuu(b, r);
  11.   }
  12.   function display(id, str) {
  13.     var element = document.getElementById(id);
  14.     element.innerHTML += str + "<br/>";
  15.   }
  16. </script>
  17.  
  18. <div id="saidaikouyakusuu"></div>
  19.  
  20. <script type="text/javascript">
  21.   display("saidaikouyakusuu", "最大公約数は" + saidaikouyakusuu(14, 21));
  22. </script> 
  23.  
  24. </body> 
  25. </html>

　21行目のdisplay関数でプログラムの実行が始まります。

　4～11行目のsaidaikouyakusuu関数が最大公約数を求める関数です。非常に短いプログラムです。

　この関数の最後の部分でsaidaikouyakusuu関数を呼び出しています。このように関数の中で自分自身を呼び出すようなやり方を「再帰」といいます。さまざまなアルゴリズムで再帰をよく使いますので、今回は再帰を使ったアルゴリズムを紹介して理解を深めます。

青い部分を赤くする

　HTMLのすべてのタグを調べて、背景色が青くなっているタグの背景色を赤に変えるプログラムを作ってみましょう。

　タグの名前やidが限定されていればdocument.getElementByTagName()やdocument.getElementById()を使うことができます。しかし、この場合はすべてのタグを調べないといけないので適用できません。

　ループして調べていくとすると、タグの入れ子が問題になります。あるタグの子ノードのリストはchildNodesとして取得できます。このリストに対してループしてそれぞれの要素を調べればよいのですが、さらに子ノードがある場合があります。子ノードの入れ子が何重か最初から分かっていればそれだけループを入れ子にすればよいのですが、何重なのかは分かりません。

　こういう場合は再帰を使うと簡単に実装できます。

  1. <html>
  2. <script type="text/javascript">
  3.   function changeColor(element) {
  4.     if (element == null) {
  5.       var element = document.body;
  6.     }
  7.     if (element.childNodes.length > 0) {
  8.       changeColor(element.firstChild);
  9.     }
  10.     if (element.nodeType == 1) {
  11.       if (element.style.backgroundColor == "blue") { 
  12.         element.style.backgroundColor = "red";
  13.       }
  14.     }
  15.     if (element.nextSibling != null) {
  16.       changeColor(element.nextSibling);
  17.     }
  18.   }
  19. </script>
  20. <body>
  21.  
  22. <form>
  23. <table border="1">
  24.   <tr>
  25.     <td style="background-color: blue;">赤くしたい</td>
  26.     <td>赤くしない</td>
  27.   </tr> 
  28.   <tr>
  29.     <td><span style="background-color: blue;">赤くなれ</span></td>
  30.   </tr>
  31. </table>
  32. <div style="width: 200px; border-style: solid;">
  33. <span>ここは赤くしない</span>
  34. </div>
  35. <div id="test1"><span id="test2">タグを入れ子にする</span></div>
  36. </form>
  37. <input type="button" value="実行開始" onclick="changeColor()" />
  38.  
  39. </body>
  40. </html>

　まずは、Webブラウザで実行してみてください。「実行開始」と書いてあるボタンをクリックすると、画面で青くなっている部分が赤く変わります。

　プログラムを解説します。大きな流れとしては以下のようになります。

  • 子ノードがあるか調べる
  • 子ノードがあれば下の階層に移動する
  • 子ノードがなくなるまで一番下まで下る
  • 子ノードがなければそのノードの背景色をチェックして青だったら赤に変える
  • 同じ階層に次のノードがあれば次のノードに移動する
  • 同じ階層に次のノードがなければ上の階層に戻って処理を続ける

　タグのチェック順を図にすると次のようになります。

図 タグのチェック順
  1. 子ノードがあるので下の階層に移動する
  2. 子ノードがあるので下の階層に移動する
  3. 子ノードがあるので下の階層に移動する
  4. 子ノードがあるので下の階層に移動する
  5. 子ノードがないので背景色をチェックする。次のノードに移る
  6. 子ノードがないので背景色をチェックする。次のノードがないので呼び出し元に戻る
  7. 呼び出し元に戻る
  8. 背景色をチェックする。次のノードがあるので次のノードに移動する

　あとは同じ要領で処理が続きます。なかなか難しい処理ですが非常にスマートに実装することができました。

再帰を使わないで実装する

　再帰を使わないで同じ処理を実装してみましょう。プログラムは以下のようになります。

  1. <html>
  2. <script type="text/javascript">
  3.   function changeColor() {
  4.     var current = document.body;
  5.     var stack = new Array();
  6.     var isPopped = false;
  7.     while (current != null) {
  8.       if (!isPopped) {
  9.         if (current.childNodes.length > 0) {
  10.           stack.push(current);
  11.           current = current.firstChild;
  12.           continue;
  13.         }
  14.       }
  15.       if (current.nodeType == 1) {
  16.         if (current.style.backgroundColor == "blue") {
  17.           current.style.backgroundColor = "red";
  18.         }
  19.       }
  20.       isPopped = false;
  21.       current = current.nextSibling;
  22.       if (current == null) {
  23.         current = stack.pop();
  24.         isPopped = true;
  25.       }
  26.     }
  27.   }
  28. </script>
  29. <body>
  30.  
  31. <form>
  32. <table border="1">
  33.   <tr>
  34.     <td style="background-color: blue;">赤くしたい</td>
  35.     <td>赤くしない</td>
  36.   </tr>
  37.   <tr>
  38.     <td><span style="background-color: blue;">赤くなれ</span></td>
  39.   </tr>
  40. </table>
  41. <div style="width: 200px; border-style: solid;">
  42. <span>ここは赤くしない</span>
  43. </div>
  44. <div id="test1"><span id="test2">タグを入れ子にする</span></div>
  45. </form>
  46. <input type="button" value="実行開始" onclick="changeColor()" />
  47.  
  48. </body>
  49. </html>

　大まかな処理の流れは再帰を使った場合と同様です。子ノードがないところまで階層を下ってゆき、同じ階層のノードを順にチェックしていきます。一番下の階層を全部調べ終わった後、上の階層に戻らないといけません。再帰の場合は特に意識しなくてすみましたが、どこに戻るのかを覚えておくためにスタックを使います（スタックの詳細については前回の解説を参照してください）。

　子ノードがあるとき、下の階層に移動する際に、後で戻れるよう、スタックに保存します。スタックは後入れ先出しなので、上の階層から下に移動していくと、戻るときは下から上に戻ることができます。

再帰を使わないプログラムの処理の流れ（スタック使用）

　popした後、その要素の子ノードがあるか調べると、必ず存在するので無限ループになってしまいます。子ノードがある場合にその要素をpushしているためです。この無限ループを避けるためisPoppedという変数を使い、popしたものについては子ノードがあるか調べる処理をしないで次のノードに移るようにします。

　このように再帰を使ったプログラムは再帰を使わないプログラムに書き換えることができます。書き換える際にはスタックを活用することがよくあります。ただし、この例を見ても分かるように、再帰を使ったほうがスマートに分かりやすく記述できる場合が多いです。

　　　　　　 1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

Coding Edge 記事ランキング

本日月間

注目のテーマ

4AI by ＠IT - AIを作り、動かし、守り、生かす
Microsoft ＆ Windows最前線2025
AI for エンジニアリング
ローコード／ノーコード セントラル by ＠IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by ＠IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。