こんにちは！
WebXRクリエイターの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebXRの事を中心に情報発信中です。
よかったらフォローお願いします！
Follow @ALAKIWebVRAR1
Web制作の現場において、コーディング時にプログラムの不具合等に遭遇することがあります。
その際、ただ闇雲に手当たり次第プログラムを調整して、デバッグ作業に相当な時間を費やしてしまった経験がある方もいらっしゃるのではないでしょうか。
ALAKIでは、そのような生産性の低い状態に陥らないよう、社内向けに「デバッグについてのガイドライン」を整備しています。
日々業務効率化に奮闘されている開発者のみなさんに少しでもお役立ちできればと思い、今回はその一部を公開したいと思います。
【フェーズ1】不具合を可視化する
不具合が起きた時にその問題に対処することが難しいと感じる場合、よくあるのが「何が原因で不具合が起きているのかすらわからない」という状況です。この状態でどんな対策をとっても、ほとんどの場合があてずっぽうになってしまって効率が悪いです。まずはさまざまな方法を使って「不具合を可視化」しましょう。
①Consoleを確認する
Javascriptが原因の不具合の場合、Google Chromeの標準機能である「DevTools」の「Console」の部分にエラー表示が出ているか確認しましょう。
②変数、関数の実行結果を出力する
Javascriptであれば「console.log( … )」コンソールログにエラーを表示し、PHPであれば「var_dump( … )」を使用することで変数、関数の実行結果をブラウザ上に可視化することができます。
③スマホ（iPhone）実機のエラーを確認する
iPhoneとMac端末を有線で接続し、PC側のSafariでデバッグを行うことができます。
※詳しくはこちら
https://qiita.com/unsoluble_sugar/items/2a3d06631a6b8259dc44
④プラグインや関数が用意している、エラー時のコールバックを活用する
例えばjQueryのajaxの構文には、「通信が失敗した時に発火するイベント」が用意されています。そのイベントが発火した際に実行する関数を設定し、console.log()等でエラーの内容を表示することも可能です。
ajax以外にも、さまざまなプラグインにも用意されているケースが多いので、調べてみてください。
※ajaxのエラー構文に関して詳しくはこちら
https://js.studio-kingdom.com/jquery/ajax/ajax
【フェーズ2】原因を特定する
不具合が可視化されてくると、可視化された情報の中でも「直接的に不具合に影響がありそうなもの」と「不具合に影響がなさそうなもの」が見えてきます。影響度が高そうなものから、不具合の直接的な原因を特定するための作業を行います。
※【フェーズ3】で実施する解決策がすぐに実行できるものの場合は、【フェーズ2】をとばすこともあります。
①怪しい部分のコードを消してみる
例えば、if分の中身の記述が実行されていないような不具合の場合、そのif文を消してみて中身のプログラムのみにしたら実行されるのかとか、コンソールエラーを吐き出しているコードを消したら、それより下のプログラムは正常に実行されるのか、など、検討をつけているプログラムが確実に影響していることを確認します。
②プログラムの「実行順」を疑ってみる
不具合の現象とは直接関係なさそうなプログラムでも、そのプログラムが原因でそれ以降の処理が止まってしまっている、といったことはよくあります。【フェーズ1】で見えてきたエラーコードが直接不具合の現象とは関係がない場合でも、プログラムの実行順などで干渉しているケースを疑います。
実行順に関しては、単純にプログラムの記述の順番ではないことがあるので注意してください。例えば、関数として上の方に宣言されていても、その関数を呼び出す記述がなければ関数内のプログラムは実行されませんし、ajaxのように非同期であれば同時に処理が走っていたりする可能性があります。
③変数の「スコープ」を疑ってみる
変数とは、その名の通り「値が変化するデータの入れ物」であり、その中身に入った値は、プログラム内のあらゆるところで代入されて変化します。
その変化の値を、どの範囲まで保つのかという概念が「スコープ」です。
開発者の意図しないような値が扱われている場合には、「スコープ」による原因を疑ってみてください。
※Javascriptのスコープ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var
※PHPのスコープ
https://www.php.net/manual/ja/language.variables.scope.php
【フェーズ3】解決策を実施する
【フェーズ1】【フェーズ2】までで不具合の原因を明確に特定することができたら、ほとんどの場合は「エラーコード」や「解決策の実装方法」で検索して実施内容を見つけることができると思います。
逆に、明確に何を調べていいのかわからない場合は、【フェーズ1】【フェーズ2】で問題の切り分けができていない状態の可能性がありますので、可能な限り可視化して特定、ということを徹底しましょう。
最後に
ALAKIでは、これからどんどん海外に向けたビジネスを展開していきます。
クリエイティブ業務における修正依頼にかかる時間を1/5にできる自社サービス「MONJI」は海外のユーザー様にも好評です。
以下のサイトより、超直感的な修正依頼をぜひ体験してみてください！
■MONJI サービス紹介サイト
https://monji.tech/ja/
また最近では、閲覧しているサイトから修正依頼を1クリックで作成可能なChrome拡張機能「MONJI-izm」をリリースしました。
従来の読み込みと比較すると、読み込み速度が2倍に高速化。あっという間に読み込みが完了します。
これまでにない、爆速な読み込みを体験してみてください！
■MONJI Chrome拡張機能「MONJI-izm」
https://chrome.google.com/
※Chrome ウェブストアのページが開きます
ALAKI株式会社では、「MONJI」をはじめとするサービスで世界中に価値を提供するため、一緒に大きな目標に挑戦する仲間を募集中です！
さまざまな国で、さまざまな人たちと、ワクワクするビジネスに挑戦したい方のご応募をお待ちしております！
■ALAKI リクルートサイト
https://recruit.alaki.co.jp/
