【ウェブカツ#4】初心者のデバッグ作業のポイント

ウェブカツ11日目。MySOLの入門が終わり、
ログインフォーム機能、マイページ機能など、
いわゆるWEBサービスに必要な機能の節々を
作る段階になってきました。

それに伴い、コードを書いて実行したけれど
本来の動き通りに動作してくれない、
いわゆる、エラーが発生する場面が多くなります。

このデバッグ作業、実際にやってみて分かりましたが
初心者特有のつまづくポイント、コツがあるので、
これからプログラミングを学ぶ人は是非覚えてください。

デバッグ作業が泥沼に入りやすい理由

初心者のデバッグ作業が泥沼に入りやすいケースは、

・コードのミスを探すことに慣れていない
・自力でゼロからコードを組み上げる事が無く、
 サンプルコードを書き写して動かすため、
 コードの全体像が把握できていない

この二点が原因です。

一般的に、プログラムが動かない原因の99%は
単純なスペルミスや記号の付け忘れなのですが、
初心者の場合、エラーに遭遇する経験が圧倒的に少ない為、
そもそもどんな間違いがあるのか、想像がつきません。

その為、最初にサンプルコードを全て入力し、
いざ動かそうと思って正常に動作しない場合、
冗談抜きで、ひとつのエラーを探すのに
2時間3時間もかかってしまうことが普通にあります。

それが繰り返されると、どんなに時間を確保しても
勉強に時間を割く意味が無くなり、神経もかなり擦り減る為、
デバッグの作業は、早急にポイントを抑える必要があります。

デバッグを初心者が最短で解決する方法

とにかく慎重に、石橋を叩いて渡るようにコードを組む

例えば、サンプルコードを提示されて、
「まずはこれを全部書いてください、それから~」
という内容でも、いきなり全部を書くのは辞めてください。

一行ずつ、if文などの条件分岐ひとつずつ、
少しずつコードを書き足していき、
こまめにブラウザで表示を確認していってください。

すると、どこかの段階でエラーが発生したり
表示が崩れたとしても、直前で触った場所や
書き足した場所は限られ、原因の発見が容易になります。

書く順番も大事で、最初はHTML、
次にCSS、最後にJSやPHPです。

何故なら、HTMLで画面上に表示する文字などを
最初に一通り出しておかないと、それを飾る
CSSの間違いを検知できないからです。

同じように、PHPも、HTMLのデータが無いと
画面上に元々あるデータを表示/非表示させたり
画面を遷移させたりする変化が確認できません。

なので、PHPプログラムを先に上から全部書くと、
後から間違いを探すのが、本当に大変になります。

よって、最初は少しずつ、少しずつ
プログラムを書き足していき、定期的に
ブラウザで表示や動作を確認するようにしましょう。

仕事を請ける上では、チマチマ一行一行確認するなど
やってる余裕は無いと思いますが、書けば書くほど
ミスも減り、自分がエラーを出す傾向も分かってくるので
徐々に慣れて、スピードも上がってくると思います。

よく使う表現や定型文はコピペ用に管理しておく

PHPでエラーを画面上に表示させるための命令、
SQLでデータベースに接続する前の設定、正規表現など、
色々コードを書いていると、毎回同じような文章を
何度も使うことが多くなってきます。

そういう時の為に、これまた使いそうだなと思ったら
エバーノートなどのメモ帳アプリに保存しましょう。

単に時間を短縮できるだけでなく、長い定型文の場合は
スペルミスを無くす意味でも、大いに役立ちます。
(ただ、意味を理解せずコピペに慣れると、エラーの原因を
特定する際に今後かなり大変になるとのことなので、
内容の意味を最初はしっかり理解しておきましょう)

エバーノートはパソコン間で共有もでき、
動作も軽く、メモ帳としてはかなりお勧めします。

今まで自分が犯したミスを箇条書きにしておく

私がこれまでやってきたミスの大半は、
文末のセミコロン忘れと、メソッドのスペルミスです。

逆に言えば、エラーが発生したら、それを念頭に置いて
最初にまずプログラムを一通りサーっと目を通すと
意外と早く、原因が特定できます。

しかし、初めての頃は何故エラーが出たのか
想像もつかず、途方に暮れてしまったり、
何時間も荒探しをしてしまうのも無理はありません。

ですが、ミスを記録すればするほど、
エラーがいざ起こっても、どうせ過去にやった
凡ミスのどれかだろうという心の準備ができるので
メンタルを維持するのがかなり楽になります。

そして、実際にエラーを解決するまで
かかる時間も、目に見えて短縮していきます。

自分のエラーの内容は、例え面倒だと思っても
必ず最初は記録するようにして、
チェックリストみたいな形で使いましょう。

まとめ

プログラミングは、最初は覚えることが多く、
エラーの対応も、慣れるまでは頭がしんどいです。

ですが、自分の出来ることが増えていくと、
あれを作ってみたい、これを作ってみたいという
妄想や企画案がどんどん広がってきます。

多分、その境目の最初にある壁は
今回書いたデバッグ作業だと思うので、最初は辛くても
粘り強く、エラーの原因探しに慣れていってください。

試行錯誤は、絶対に無駄になりません。