導入

文章にすると長くなって全体を理解しにくい状況でも、図を一枚ぱっと見せられるとそれだけでストンと納得することがあります。ソフトウェアも同様に、図を活用するとモヤモヤが晴れ仕事が捗る場合があります。

また、組織内での複雑な手続きをその担当者に伝えれば見事な結果を返してくれることがあります。ソフトウェアも同様に、中で何が行われているか考えなくて済むように、処理を代表する名前を知っていれば目的を果せるようにする仕組みがあります。

前回と今回で構造化プログラミングで学習し身につけておきたい大事な要素、共通点をまとめることを学習しています。今回は作図法や関数機能を生かして、比較的大きな部分の共通点をまとめ、すっきりしたコードを作成するスキルを取り扱います。

展開

流れ図を活用しよう

かつて、MS-DOS上で動くプログラムを書いていたとき、どうにも不具合が多くて何とかならないものかと困ったことがありました。既にあるコードを流れ図に落としてみたところ、その形に共通点が多く見られる部分がいくつも見つかりました。それらの部分をまとめたところ、コードの見通しがずいぶん良くなり、機能の追加も楽にすることができたのでした。

流れ図（フローチャート）は設計にもデバッグにも役に立たない、という意見をよく聞きます。究極のところ、ソフトウェアの動きを最も正確に書き表しているのはコードそのものだけです。流れ図を描くことはプログラマにとって、問題文を英語に一度翻訳するようなものです。流れ図をコードに落とすことは、英語を日本語に訳することに似ています。かえって誤りを作り込みかねないという危惧があります。つまり、問題文を直接コードに書き落すほうが直接的で誤りを起こしにくいという意見です。

ここでお伝えしたいことは、流れ図が、設計者やプログラマが「気付いていない」問題を見いだすことに有効なことです。コードがプログラムを具現化する道具であるのと似ていて、流れ図も問題を図式化する道具です。 流れ図が役に立たないという意見は、実のところ道具を役に立てていないというだけなのです。コードの流れ図を描くことは大変有効なのです。

関数やメソッドといった一画面に収まる程度のコードについて、コードの構造を視覚化する流れ図は大変有効です。さらに美しいコードに磨き上げる助けになります。 一画面に収まらない大きなコードについては、大まかな処理のまとまりごとに流れ図を描きましょう。そのような流れ図はソフトウェアの大局的な動きを検討する場合に有効です。

[作業] 前回第6回に掲載したsketchSum1ToN.pdeの流れ図を描きましょう。

メソッドにまとめよう

似たコードが何度か登場するならば、その部分をメソッドにしましょう。長いコードは読みにくく、理解もしにくいものです。そして何度も似たコードを書くと書き誤りの元です。 メソッドを作成する基準は、2度同じ式・構造が現れたときにすべきです。これをDRY原則といいます。

はるか昔、サブルーチンや関数を書くと実行速度が落ちるため、繰り返し登場する式やコードでもそのまま書くほうが良い、などと言われた頃がありましたが、今はそんなことはありませんのでDRY原則に従いましょう。

さて、次のsketchはGSWPの26ページに掲載されているサンプルコードです。

// Example 03-14 from "Getting Started with Processing" 
// by Reas & Fry. O'Reilly / Make 2010

size(480, 120);
smooth();
background(0);                // Black
fill(204);                    // Light gray
ellipse(132, 82, 200, 200);   // Light gray circle
fill(153);                    // Medium gray
ellipse(228, -16, 200, 200);  // Medium gray circle
fill(102);                    // Dark gray
ellipse(268, 118, 200, 200);  // Dark gray circle

順次実行構造のシンプルなsketchです。このコードは次のような手順を繰り返しています。

1. 塗りつぶしのグレースケール値を指定する
2. ellipseを描く

これをメソッドを使って書き直してみましょう。書き直したsketchのファイル名はEx_03_14WithMethod.pdeとします。

Processingでメソッドを使うためには、主たるコードをひとつのメソッドとしてまず独立させます。

一度だけ実行するコードならsetupメソッドが適しています。

void setup(){
  size(480, 120);
  smooth();
  background(0);                // Black
  fill(204);                    // Light gray
  ellipse(132, 82, 200, 200);   // Light gray circle
  fill(153);                    // Medium gray
  ellipse(228, -16, 200, 200);  // Medium gray circle
  fill(102);                    // Dark gray
  ellipse(268, 118, 200, 200);  // Dark gray circle
}

マウスやキーボードの操作に応じて画像を刻々と描き替えたいならば、drawメソッドが適しています。それはまた別のときに説明します。

さて、fillメソッドとellipseメソッドのセットをひとつのメソッドにまとめます。メソッドを呼び出す際に与えたい変化は引数で与えます。ここでは次の情報を引数として与えます。

1. 塗りつぶしの濃さであるグレースケール値（float）
2. 楕円中心の(x,y)座標値（float）
3. 楕円を囲む矩形の幅と高さ（float）

以上の引数を受け取って楕円を描くメソッドをdrawGrayEllipseとします。

void setup(){
  size(480, 120);
  smooth();
  background(0);                // Black
  drawGrayEllipse(204,132, 82, 200, 200); // Light gray circle
  drawGrayEllipse(153,228, -16, 200, 200); // Medium gray circle
  drawGrayEllipse(102,268, 118, 200, 200);  // Dark gray circle
}

void drawGrayEllipse(
    float gScale,  // 真っ白を0,真っ黒を255とする。
    float xCenter, // 楕円の中心x座標
    float yCenter, // 楕円の中心y座標
    float eWidth,  // 楕円の横幅
    float eHeight){// 楕円の高さ

  fill(gScale);
  ellipse(xCenter,yCenter,eWidth,eHeight);
}

実行結果は次のとおりです。

今回の場合はsketchの行数が増えましたが、もっとたくさん様々な濃さや大きさの円を描きたい場合にはメソッドの恩恵なしにはやっていられません。

[作業] この節の手順を実際に追体験してください。Processingを起動して入力し実行しましょう。Processingに付属のその他の順次実行構造のsketchについてもメソッド化してみてください。

C言語では同等のことを「関数」と呼びます。Processingはオブジェクト指向言語なので、言語の機能としての関数はクラスに付随するためメソッドと呼ぶのが一般的です。関数型言語がメジャーになってきた今、関数という言葉は誤解を呼びやすく、使用に注意が必要でしょう。

演習

演習1（難易度：easy）

サンプルsketch Ex_03_16.pdeをメソッドを使って書き直しましょう。色付きの円を描くメソッドをdrawColorEllipse、ファイル名はEx_03_16WithMethod.pdeとしてください。

// Example 03-16 from "Getting Started with Processing" 
// by Reas & Fry. O'Reilly / Make 2010

size(480, 120);
noStroke();
smooth();
background(0, 26, 51);        // Dark blue color
fill(255, 0, 0);              // Red color
ellipse(132, 82, 200, 200);   // Red circle
fill(0, 255, 0);              // Green color
ellipse(228, -16, 200, 200);  // Green circle
fill(0, 0, 255);              // Blue color
ellipse(268, 118, 200, 200);  // Blue circle

演習2（難易度：middle）

次の流れ図をコードにしましょう。ファイル名はExercise07_02.pdeにしてください。

まとめ

• 流れ図の活用をお勧めしました。
• メソッドの活用をお勧めしました。

学習の確認

それぞれの項目で、Aを選択できなければ、本文や演習にもう一度取り組みましょう。

1. 流れ図の大切さが理解できましたか？
   1. 理解できた。流れ図をコーディングに生かす決心をした。
   2. 理解できた。しかし、必要を感じない。
   3. 理解できない。
2. メソッドの大切さが理解できましたか？
   1. 理解できた。
   2. 理解はできるが必要を感じない。
   3. 理解できない。

参考文献

• 『Java言語で学ぶリファクタリング入門』（⁠結城浩 著、SBクリエイティブ）
  • 「第5章　メソッドの抽出」を読んでみてください。

演習解答

1. Ex_03_16WithMethod.pde
2. Exercise07_02.pde
   • ずいぶんあっさりしたものです。