読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【プログラムアレルギーの克服法】

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

得体のしれないモノへの拒否反応

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

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

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

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

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

プログラムアレルギーの克服法

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

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

と感じておられます。

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

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

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

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

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

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

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

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

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

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

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

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

javascript の具体例

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個のデータが順番に
ポップアップウィンドウで表示されますので、何番目のデータが間違って
いるのか視覚的に確かめることができます。

▽alert() について詳しい説明はこちら
ウィンドウ名.alert()−JavaScriptリファレンス

これだけ覚えておこう

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

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

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

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

PHP デバッグ 方法」

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

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

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

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

プログラムの動きを追跡できれば楽しくなる

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

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

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

こんな方におすすめのプログラミングレッスンを行っています

  1. Webデザイナーを目指しておられる方
  2. ホームページやブログの更新はできるけれど、レイアウトやデザインの変更ができない方
  3. ホームページの制作経験はあるけれどWordpressのカスタマイズができない方
  4. HTMLは分かるけれどもスマホ対応のやり方が分からない方
  5. 複雑なスタイルシートjQueryの使い方が分からない方
  6. HTML、CSSjQueryPHP の正しい書き方に自信がない方

oshierumanaberu.net

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

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

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