【プログラムアレルギーの克服法】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20151012183726j:plain

先日、新規の生徒さんがWordPressをカスタマイズしたいというので
簡単なCSS変更のコードをお見せしたところ、

「うわ・・・英語・・(´Д｀)」

と、拒否反応を示されました。

テーマに備わっているカスタマイザーをダッシュボードから操作する
方法でしかカスタマイズをしたことがない（普通はそうです）ので、
突然目に飛び込んできたプログラムコードに当惑されたようです。

私たちWeb制作者は普段から見慣れているので何ともないのですが、
誰でも初めて目にするモノには拒否反応を示すものです。

プログラミングやコンピューターが苦手という人の多くは、

「プログラムコードは得体が知れない」

と感じておられます。

何が書いてあるのか意味不明だからです。
意味の分からないことは理解もできませんから、考えるだけ煩わしいのです。

プログラミングに馴染む一番の方法は、”楽しさを体験すること”です。

具体的には、
「自分が書いたコードが思った通りに動いた」
という小さな体験を繰り返すことです。

そのためには、デバッグ *1の方法を身に付けることが重要です。

なぜなら、プログラムは通常、動き始めたら処理の終わりに到達するまで
止まらないからです。

たった10行のプログラムコードが動かなかったとき、10行のうちどの行が
どう間違っていてどう修正すれば良いのかを見つけるのは難しいことです。

当てずっぽうではいつまでたっても間違いの原因に気付くことができずに
時間ばかりが過ぎてしまい、結果が出ないもどかしさがイライラに変わり、

「もういいや、自分にはプログラミングは向いていないんだ・・・」
「やっぱりプログラミングって難しすぎる・・・」

という諦めモードになっていくのです。

しかし、デバッグのやり方を知っていれば状況は一変します！

デバッグの方法は様々で、プログラム言語によっても文法の違いがあり、
デバッグの方法を覚えるだけでも相当な労力を要します。

でも、そんな奥深い方法までは知っていなくても良いのです。
ごくシンプルな方法論だけ押さえておけば、プログラム言語が変わっても
同じ考え方が通用するからです。

for(var i=0; i<10; i++) {
    html += data[i];
}
document.write(html);

data[0]～data[9]という名前の変数に入っているHTMLを連結して画面に
表示するプログラムです。

もし、思った通りのHTMLが表示されなかった場合、
data[0]からdata[9]までの10個のデータのうち何番目のデータが間違って
いるのかがわかれば、原因がピンポイントで特定できたことになりますから、
修正の糸口が見えてきます。

for(var i=0; i<10; i++) {
    alert(data[i]);
    html += data[i];
}
document.write(html);

alert() 関数を使えば、data[0]からdata[9]までの10個のデータが順番に
ポップアップウィンドウで表示されますので、何番目のデータが間違って
いるのか視覚的に確かめることができます。

この例で一番大事なことは、javascriptの文法でもなくalert関数の使い方でもありません。（もちろん大事な基礎ではありますが）

それは、「プログラムの途中経過を実際に見えるようにする」という着眼点です。

この着眼点さえ忘れなければ、扱っているプログラム言語がHTMLだろうと
PHPだろうとJAVAだろうとVBだろうとRubyだろうと、具体的な文法を忘れても
自分でネット検索して探し出すことができるようになります。

例えば、始めたばかりのPHPでデバッグしたいとおもったなら

「PHP　デバッグ　方法」

といったキーワードでGoogle検索すれば良いのですから。

実際このキーワードでGoogle検索してみるといくつかのサイトがヒットしますので、
いくつかのサイトを見ると、こんなことを感じるでしょう。

「どうやら、PHPの場合は var_dump() 関数というのがあるらしい」
「これを使えば、変数の中身を画面に表示することができるらしい」

javascriptの場合の alert() 関数と同様の目的に使うことができるわけですね。

このように、プログラムの途中経過を“見る”ための着眼点を身に付けると、
プログラミングの初心者でも、挫折することが減ります。

自分が書いたプログラムが、どのように動いていくのかが手に取るように
把握できるようになるからです。

ぜひ、デバッグ方法を身に付けてください。

↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。

ご相談のメッセージをいただきましたら２４時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には１時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。

*1:プログラミング用語。プログラムが想定通りに動くかどうかを確かめたり、処理の途中経過が正しいかどうかを検証する手法のこと。