デバッグ、それはコーディング、
プログラミングをするにあたって避けては通れないものです。
Webデザインを行っている筆者は主に
jQuery、Java Script、PHPを使用しますが、
どれもデバッグは必須です。
それぞれ何をつくっているかによってどんなデバッグをするか、異なってきます。
今回はjQuery、Java Script、PHPでコードを書く、という点に焦点をあて、
デバッグの基本中の基本とありがちなミスをご紹介します。
■デバッグの基本コードをおさえましょう
デバッグするときには値がきちんと入っているか、返っているかを確認しますよね。
その時に使用するコードはしっかり抑えておきましょう。
【jQuery・Java Script】 コンソールへログを出力しよう
・console.log( );
()内に 値、変数、オブジェクトを入れてみましょう。
そしてデベロッパーツールのコンソールログを確認します。
変数、オブジェクトに何が入っているかがわかります。
また()内の引数は「,」で区切ることで複数指定もできます。
是非活用してください。
jQuery・Java Scriptはコンソールを確認しないことにはデバッグは成り立ちません。
常に注視するくらいの気構えで取り組みましょう。
たまに案件に手を付ける前からコンソールエラーが出ている……
なんていうこともあります。
【PHP】 デバッグ結果を画面に表示しよう
・<?php var_dump(); >
()内に 値、変数、オブジェクトを入れてみましょう。
表示しているWebページをリロードするとあら不思議。
()内に入れたものの値が表示されます。
このvar_dump();なのですが、これだけだとオブジェクト等のデバッグをするときには内容がフォーマットされていない形でダーッと表示され、結構見づらいです。
それを解決するのが<pre></pre>タグです。
以下のように記述してみてください
・<pre><?php var_dump(); ></pre>
これだけで出力されたログが整然と並んでくれます。
便利ですね。
■疑うべきは我にあり！ よくあるデバッグミス
デバッグとは難儀なもので、大きなミスばかりが原因とは限りません。
些細な、自分の手による、手痛いミスが原因となる事が多いです。
- スペルミス（体感遭遇率：50％）
些細なスペルミス。これはもうプログラミングを行う上では致命的です。何も動きません。
大きなミスもないのに制作物が動かない……、そんな時はこれを真っ先に疑いましょう。
- 実は変数に値が入っていなかった（体感遭遇率：15％）
変数に取得した値を入れたのになんで動かないんだろう……と悩んだ時はありませんか？
そう、入れたと思った変数の値が取れていないのです。
「デバッグの基本コードをおさえましょう」でご紹介したデバッグコードを用いて、今一度設定した変数を確認しましょう。実はnullだった……、なんてことはよくあること。
ドンマイです。
- 文字列の加工を間違っている（体感遭遇率：15％）
文字列を加工する、すなわち特定の文字列を抽出、削除等を行った時のことですね。
これはWordpressで正規表現を使用している時に起こりやすいのではないでしょうか。
確かに目的の文字列を抽出したはずなのに、ページ遷移したら機能が上手く動かない！
などということもまま見られるケース。
WordPressではページ遷移した後にURLに予期せぬ（いや、予期して作るべきなのです……）文字列が追加されている場合があります。
ページャーや検索ページを利用している時などがそうですね。
URLの後にページ番号等が付加されます。
そこまで読んで文字列加工をしましょう。
- 全角スペースの罠（体感遭遇率：20％）
半角スペースだと思っていたものが全角スペースだった！
これも痛いです。
これもスペルミス同様致命的なミスとなります。
更に言うならば、スペルミスよりも断然探しづらいミスです。
ご使用のテキストエディタによっては半角、全角スペースを見分けられるツールが付いている場合もあります。
それがあるのであればフル活用しましょう。
以上、デバッグの基本の基本をご紹介しました。
大きなミスというものは、作業工程を進めていくなかで比較的初期に気づきます。
気づかないのは小さな、ごく小さなミスだったりします。
システムを疑う前に、ふと立ち止まり、自分の作業を振り返ってみましょう。
抱えていた問題が氷解するかもしれません。
- 1792 views
- キム
