アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信!

初心者HTMLコーダー、プログラマーの時短術。バグに悩んだら単純化して考えよう

      2015/12/21

Webコンテンツが広く浸透したことで、HTMLコーディングやJavaScriptやPHPなどのプログラミングのハードルがぐっと下がり、独学で学ぶ人が以前よりも増えたように感じます。

独学でもプロとして通用するレベルにまで成長することは可能ですし、むしろ独学でプロになるほうが多数派かも知れません。しかし、独学であるがゆえに犯しがちな失敗があります。

それは、バグで行き詰った時の対処の仕方です。

経験が浅い初心者は勿論のこと、独学で学んできた人も正攻法を知らず、デバックに無駄な時間をかけているように感じます。数分で解決できる問題を数時間、あるいは丸1日かけてしまうことも珍しくありません。

バグに遭遇したら要素を切り離し単純化しよう

例えば、HTML、CSSコーディングで「どうしてもうまく表示されない」とハマることがありますよね? 最近はjQueryのプラグインを使用する機会が多くなったと思いますが、そういった部分の表示に不具合が出てしまうことも珍しくありません。

そういったバグに遭遇した場合、ほとんどの人は制作中のページ上で色々と試行錯誤する人がほとんどだと思います。でも、これは誤りです。これがトラブルを複雑化させています。

修正に時間がかかりそうなバグなら制作中のページ上でデバッグをするのではなく、何も書かれていないHTMLを用意し、そこに問題のありそうなコード抜き出し貼り付けます。CSSが原因なら同じくその問題部分を貼り付けましょう。

code-debug

WebページにはCSSやJS、さらにはサーバー側の問題など、バグの原因となり得るものが数多く含まれているんですよね。これらを切り離さないで闇雲にデバッグしていては大幅に時間を無駄にする可能性があります。例えば、「CSSに問題があると思ってCSSをデバッグしたけど一向に原因が掴めない・・・。実はJavaScriptが原因でした・・・(涙)」なんてことが普通に起こり得るわけです。時間、勿体ないですよね。

ここまでHTMLコーディングのデバッグを例に挙げましたが、JavaScriptやPHPのデバッグについても同じことが言えます。関数ごとにデバッグするようにします。もちろんその為にはデバッグし易い設計をする必要がありますが。そもそも初心者は関数を作らないでプログラミングしてしまうケースも珍しくありません。これをやると後々大変なことになるので、まずはしっかり関数の作り方を学びましょう。

おわりに

単純化はコーディング・プログラミングをする上で基本中の基本ですが、意外と忘れがちで、自分もたまにやらかすことがあります・・・(笑) これを知ってるだけで大幅に作業効率が変わるので初心者の方は是非試してみてくださいね。

 - Web制作テクニック , , , , ,