【初心者向け】phpとjavascriptのデバッグを知って、予期せぬエラーと戦えるコーダーになろう！

みなさんこんにちは。エンジニアの橋本です。
今回はデバッグのおはなし。○○の処理が動かない、○○が出力されない、エラーが起きているんだけど原因が分からない！！
...こんなお悩みは、WEB制作の現場も数多く見られます。
特に1～2年かけてhtml,cssを学び、wordpressを扱う過程でphpやjavascriptの道をずんずん突き進んでいる方は、以前より悩むようになったのではないでしょうか。
無我夢中で走り続け、手あたり次第コピペをしていた時期よりも、当然スキルアップしていると思います。
冷静にソースを見つめる時間もでき、少し今までとは違う機能の実装が求められた...そんな時に必要になってくるのが、デバッグ能力です。
とはいえ、難しいことはご紹介しません。
WEB制作の現場で本当に使えるものだけ抜粋してご紹介します。
エンジニアではないけれど、これらの問題と戦えるようにはなりたい、そんな方にもおすすめです。

デバッグって具体的に？

具体的には、WEB制作の場面で詰まりやすいphpとjavascript要素の中身を展開することを中心にご紹介します。さまざまなツールはありますが、まずはここからvar_dumpとconsole.logです。
例えば、phpで下記のソースがあったとします。

$area_terms = get_terms(array('taxonomy'=>'area');
echo $area_terms[0]->name;

これは、ネット上に落ちていたソースで、タクソノミーとして用意した地域情報が取得できるんだよと書かれていたとします。さらに、次の行を書けば、地域名が表示できるとありました。本来であれば、表示されるでしょう。しかし、下記のような形で公開されていたら、どうでしょうか。

$area_terms = get_terms(array('taxonomy'=>'area');
echo $area_terms[0]->taxsonomy_name;

この場合、$area_terms内にtaxsonomy_nameは定義されていないので出力されません。
しかしながら今回はネット上のソースを疑った方がよい、という話ではなく、このままでは得られたヒントを活かせないことになります。いやですよね。
こんなときに、要素の中身を落ち着いて展開することができれば、実装の迂回を回避できます。

phpはvar_dump()

基本的に、phpであればvar_dump()の利用が分かりやすいです。具体的に何をしてくれるの？　といった話ですが、【型＋中身】を教えてくれます。echoはあくまでも値の出力なので、nullをはじめ、型も教えてはくれません。そこで、型を教えてくれるvar_dumpは役に立ちます。例えば、先ほどのソースを例にしてみましょう。

var_dump($area_terms[0]->taxsonomy_name);

この場合、結果はNULLです。つまり、値が存在がしません。

var_dump($area_terms);

このようにすればどうでしょう。

array(2) {
  [0]=>
  object(WP_Term)#xxxx (10) {
    ["term_id"]=>
    int(7)
    ["name"]=>
    string(9) "千葉県"
    ["slug"]=>
    ~~~~~~~略
  }
  [1]=>
  object(WP_Term)#xxxx (10) {
    ["term_id"]=>
    int(8)
    ["name"]=>
    string(9) "船橋市"
    ["slug"]=>
    ~~~~~~~略
  }
}

このように、非常に多くの情報を取得することができました。欲しいのは地域名なので、$area_terms[0]->nameでOKですね。更に、今回の$area_termsは配列であることも分かりました。
であれば、ループ処理をして、$area_terms[$i]->nameのような形で出力してそのほかにも、name以外の情報も手に入れられましたし、そもそも配列であることやこのように、デバッグをすることで得られる情報は非常に多くなります。
ちなみに、var_dump()を<pre></pre>で囲むと、見やすくなるのでおすすめです。
表面的なエラーだけをみることなく、要素の詳細へピックアップするだけで大きく成長ができると日々感じています。

javascriptはconsole.log

javascriptにおけるよく使うデバッグはこちら、console.logです。こちらは使ったことがある方もいらっしゃるのではないでしょうか。
例えば、document.getElementById("hoge")という要素取得があったとします。こちらはhtml上に存在しません。

console.log(document.getElementById("hoge"))

上記のようにconsole.logを出してあげれば、nullが返ってきます。確認場所はGooglechromeを例にあげると、右クリック→検証→Consoleタブです。これによって、明確にdocument.getElementById("hoge")が存在しないことが確認できます。しかし、Consoleはもともと便利で、エラーが起こっていればエラーの場所を教えてくれます。

ですので、WEB制作の現場的感覚では、エラーが出てない場所の確認として使うことがおすすめです。

function targetAddClass(delayHeight) {
    let target = document.querySelectorAll(".target");
    target.forEach(function(elm) {
        const scriptTime = elm.dataset.scripttime;
        const rect = elm.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const elmPosison = rect.top + scrollTop; 
        const windowHeight = window.innerHeight
        const delayHeightpx = windowHeight * delayHeight;
        console.log(scrollTop);
        console.log(elmPosison);
        console.log(windowHeight);
        console.log(delayHeightpx);

        if (scrollTop > elmPosison - windowHeight + delayHeightpx) {
            console.log("is scroll")
            let delay = scriptTime ? scriptTime : 0;
            setTimeout(elm.classList.add("is-active"), delay, "");
        }

    });
}

window.addEventListener('scroll', () => {
    targetAddClass("500");
})

例えばこのソース。ちょっと長いですね。
要約するとスクロール量によってクラスを付与するスクリプトですが、この状態では動きません。
targetAddClass("500");の引数が間違っています。
こちらはWindowの高さを与えられた引数で掛け算をし、表示を遅延させる仕組みにしています。
今回はpxで遅延させると勘違いして引数を与えてしまったことを例にしています。
このような勘違いは、まずまずありますよね。

ここで問題なのは、一切のエラーが起こっていないこと。
そのような時に、console.logがとても有効です。
delayHeightpxが明らかにおかしいことが分かるので、修正位置の特定が容易になります。
ソース全体を見ていると時間がかかってしまう、もしくはよく分からない場合もこのようにピンポイントで修正を行い、問題の解決に導くことができます。
小さな点で問題が解決できるようになれば、あとはこの繰り返し。
徐々に分かることが増え、初心者から中級者になっているということです。

まとめ

今回はデバッグの初歩について、書かせていただきました。
これができる、できないでは、問題解決における力が格段に違います！
目の前のエラーを回避し、別の実装方法で対処することも時には必要なことですが、まずは目の前の問題を真っ向勝負で解決できるようになれると良いですね。
それではまた！