こんちゃっす、ダイブツです！
あなたは今までに「プログラムが思った通りに動かず、原因を見つけるのに1時間以上かかった」ことはありませんか？
もしかしたら「原因が分からず、そのまま挫折してしまった・・・」ということもあるかもしれません。
そんなあなたは今回お伝えする「最高のデバッグ方法」をぜっっったいに知っておくべきです。
いや、むしろ知っておかなければいけません。
これを知っているか知っていないかで、バグを見つけ出せる確率が3倍以上変わってきます。
ここでしっかりとこのデバッグ方法を身に付けていきましょう。
今回、バグとかデバッグとか新しい用語をいくつか使っているので、分からない用語があれば、こちらを参照してください。
目次
手軽にできるデバッグが実は1番難しい
単にデバッグ方法といっても、その方法は1種類だけではないんです。
細かく分けると色々ありますが、大きく分けるとデバッグの方法は2種類あります。
その方法は次の通りです。
方法1：(上級者向け)プログラムの実行結果だけ見て原因を予想し修正するデバッグ
まず最初に挙げるデバッグの方法は、プログラムの実行結果を見てプログラムを修正する。
これだけです。
「え？」とか、「当たり前じゃない？」と思うかもしれません。
そうなんです、プログラムを作ったらまず実行結果を見るから当たり前と言えば当たり前なんです。
そして当たり前のことをしている中でバグの原因を探るので、デバッグの準備なんてものは何もいりません。
だからとても手軽にできるデバッグ方法なんですね。
ただですよ！！
これが複雑なプログラムになってくるとまぁ～じで原因が分かんなくなるんです。
しかも必ずしもプログラムを見ながら原因を探るわけでもないので、頭の中でプログラムを実行させながら何が悪いか考えるんですよ。
ね？とってもめんどくさいでしょ？
だからこの方法はとてもプログラミング初心者がやるようなデバッグ方法じゃないんですよ。
なので、僕は次に挙げるデバッグ方法を推奨します。
方法2：(初心者向け)開発環境に備わっている機能を用いたデバッグ
プログラミング初心者にもってこいなデバッグ方法とは、開発環境に備えられているデバッグ機能を使ってデバッグする、という方法です。
このデバッグ機能を使うと、ブレークポイントというもので実行途中のプログラムを停止させて、このタイミングでは変数に何の値が入っていただとか、プログラムのありえない箇所に分岐が進んでいってた、なーんてことがわかるようになります。
しかも方法1の内容とは違って、この方法では目で見て処理がどう進んでいるのかが分かるので、とってもプログラムの動きがわかりやすいんですよ。
だから僕はあなたにこのデバッグ方法を伝授します。
大丈夫です、Processingにもこのデバッグ機能は備わっています。
それじゃあ今からこの方法2のデバッグ方法について説明していきますね。
Processingに備わっている最高なデバッグ機能の使い方
Processingでデバッグ機能を使うのに、何か特別なソフトのインストールなんていりません。
ちょちょっと、ペペッと設定してしまえばいいだけです。
実際に設定の仕方を見てもらった方が早いので、この通りにProcessingを操作してみてください。
1、1クリックでデバッグモードの設定をする
最初に、Processingの画面の右上にある何とも言い難いボタン（デバッグボタン）を押してください。
Javaと書かれている所のすぐ左にあるボタンですね。
このボタンをクリックすると、デバッグボタンがこのように水色になります。
これでデバッグモードの設定は完了です。
デバッグモードにしたことで表示されるボタンはこの２つです。
2、ブレークポイントの設定も1クリックだけ
次に、ブレークポイントを設定していきます。
上の方でもチラッと書きましたが、このブレークポイントを設定することで、止めたいタイミングでプログラムを一時停止させることができるんです。
それで、このブレークポイントを設定するにはデバッグモードのまま、プログラムの行番号をクリックします。
行番号をクリックすることで、クリックした箇所が数字から◆に表示が変わります。
これでブレークポイントの設定は完了です、
このブレークポイントを設定している状態でプログラムを実行すると、ブレークポイント行の処理を実行する前にプログラムが一時停止します。
一時停止後は、継続実行ボタンを押すことで続きの処理を実行することができるんです。
(注意！)：ブレークポイントで停止させても描画のタイミングはほとんど合いません。
なので、ブレークポイントで停止させた時に上手く描画の確認ができなければ、ブレークポイントを外して確認しましょう。
3、変数の値を丸見えにする
デバッグボタンを押した時にちゃっかり表示されていたウィンドウがあることには気づいていましたか？
もし表示されていなかったら、もう1度デバッグボタンを押しなおしてください。
それでまたウィンドウが表示されるはずです。
↓こんなウィンドウが表示される。
このウィンドウに、今プログラム上で使用している変数名とその値が表示されるんです。
プログラムの実行中は変数の値は変わっていきますよね？
なので、このウィンドウに表示される値も、処理を進めていくことで自動で変わっていきます。
これを凝視することでプログラムが今どんな処理をしているか分かるんですね。うーん、ホントに画期的！！
どうやって動作させるかイメージが付きやすいように、GIF動画を撮ったので参考にしてください。
この動画では、こんな順番で操作を行っています。
この内容と動画を照らし合わせると何をやっているかわかるはず！
１、プログラムの実行ボタンを押す。
２、ブレークポイントを設定した箇所でプログラムが一時停止する。
３、ステップボタンを押してプログラムを1行ずつ動作させている。
この時、一緒に変数に表示されている値も変わっている。
その次にやっていること。
４、実行ボタンを押して、プログラムを最初から実行。
５、続行ボタンを押して、プログラムが毎回ブレークポイントの箇所で一時停止させている。
バグを滅亡へと導くデバッグ方法
ここからが本番です。
今紹介したデバッグ機能を使って、実際にどうやってデバッグを進めていくか見ていきましょう。
まず、いつものように例を出しますね。
プログラムは以前に繰り返し文の講座で使ったものを一部改変したこの内容を使います。
int iRectSize = 50;
int iRectPosX = 20;
final int RECT_X_NUM = 6;
final int RECT_INTERVAL = 100;
size(600,400);
for(int i = 1; i < RECT_X_NUM; i++){
rect(iRectPosX,20,iRectSize,iRectSize);
iRectPosX = iRectPosX + RECT_INTERVAL;
}
このプログラムを使って、本当は横一列に6個の四角形を表示したかったけれど、プログラムを実行してみたら四角形が5個しか表示されなかった、という場面を想定してみましょう。
この時、for文で四角形の表示個数を決めているのに、その表示個数が間違っているなら疑うべきなのはfor文での繰り返し回数ですよね？
なのでfor文中の変数iが正しく判定されているか確認を行うことにします。
じゃあ順番に確認していきましょう。
まず、確認したい場所にブレークポイントをはる
変数iの値を確認したいので、最初に上で説明した方法と同じようにfor文の中にブレークポイントを設定しましょう。
プログラムを実行して、ブレークポイントの箇所で停止させる
次にプログラムの実行ボタンを押して、ブレークポイントを設定した箇所でプログラムを停止させます。
そうすると、この時点では変数iに1が入っていることが分かりますね。
6回繰り返しを実行したいなら、この変数iは1～6まで入っていないといけません。それをこれから確認します。
それか、6回分継続実行ボタンを押して、本当に6回処理しているのか確認してもいいですね。
継続実行ボタンで6回分プログラムを実行させてみる
実際に継続実行ボタンを使って6回分プログラムを実行してみると、こんな画面になります。
ちょっと分かりにくいかもしれませんが、変数の表示が黒から灰色に変わっています。
これはプログラムの処理が終わったということです。
で、この時の変数iの値を見てみると、「5」！
変数iが6まで増えてないじゃん！！
っていうことが分かるんですね。
だから、この変数iが6まで増えていない原因を探っていけばいいわけです。
このfor文の中で変数iが6までいかない時に疑うなら、変数iの繰り返し条件を判定している式ですよね？
この式で変数iに6が入った時のことを想定してみると「6 < RECT_X_NUM(6)」で「条件満たしてないじゃん！」ってことに気付くわけですね。
そして条件を満たす為には、<に＝を付けてあげればいいから「6 <= RECT_X_NUM(6)」が正しいプログラムだ！と修正することができるんです。
このような流れでデバッグモードを使うとプログラムの細かい動きが確認できて、デバッグが格段に捗ります。
このデバッグ方法はホント使いますから体に叩き込みましょう。
繰り返しデバッグをすることで、プログラムを修正するまでのスピードがグイグイ早くなってきますよ♪
今回はデバッグの方法をお伝えしましたがどうだったでしょうか？
プログラム作成途中が一番つまづきやすい所なのに、意外とほとんどのプログラミング学習サイトでこのデバッグ方法を載せていないですよね。
本当に説明しない意味が分からない。絶対に必要な内容でしょ。
でもこのデバッグ方法を身に付けるのはホントにマジで大事なので、何度も繰り返してください。
この記事の感想をコメントでもらえたら泣いて喜びます！
これでプログラミング入門講座は終了になります！
あなたがここまで読んでくれたことに本当に感謝しています。
僕も感謝の気持ちを恩返ししたいので、プログラムを学習する上で分からないことがあれば、こちらから遠慮なく質問してください。
精一杯回答させてもらいます！
それではプログラミングスキルを身に付けて、思い描いた動きを作れるようになりましょうね！
それじゃあまた！
ありがとうございます！
デバッグ方法とか知ってて当たり前でしょ的な感じで話してくる方結構いますからね。こういった絶対必要な基本的な情報ありがたいです。
>春さん
コメントありがとうございます！
そうなんですよね、こんなデバッグ方法は教えてもらわないと絶対分からないですもんね。
参考になったみたいで良かったです！