100本ノック中に、「どこまで処理が動いている？」となったときに、すぐ確認できるようにデバッグ方法をまとめました。
JS（React・TypeScript・Vue.js）
console.log()
値を確認するときに使う。
console.log(data);
何の値か分かるようにするなら、
console.log("data:", data);
処理がどこまで進んでいるか確認する場合は、
console.log("① 処理開始");
const data = await getData();
console.log("② データ取得完了");
displayData(data);
console.log("③ 処理終了");
例えば、
① 処理開始
② データ取得完了
までしか表示されなければ、②〜③の間を確認する。
ブラウザでは、
F12 → Console
から確認する。
PHP（Laravel・CodeIgniter）
var_dump()
値・型・中身を確認するときに使う。
var_dump($data);
配列の中身などを確認するときにも使える。
Laravel：dd()
Laravelでは dd() が便利。
dd($data);
dd() は Dump and Die の略。
値を表示して、その場所で処理を止める。
例えば、
$data = User::find($id);
dd($data);
return $data;
dd() のところで処理が止まる。
処理開始
↓
User::find()
↓
dd($data)
↓
処理停止
「ここまで処理が来ているか」と「値の中身」を同時に確認できる。
CodeIgniter：var_dump()
CodeIgniterでは var_dump() で値を確認する。
var_dump($data);
ログとして確認する場合は、
log_message('info', '処理開始');
を使う。
使い分け
| 環境 | 使用するもの | 用途 |
|---|---|---|
| React | console.log() |
値・処理確認 |
| TypeScript | console.log() |
値・処理確認 |
| Vue.js | console.log() |
値・処理確認 |
| Laravel | dd() |
値を確認して処理を止める |
| PHP | var_dump() |
値・型・中身を確認 |
| CodeIgniter | var_dump() |
値・型・中身を確認 |
API処理を確認するとき
例えば、
React / Vue
↓
API
↓
Laravel / CodeIgniter
↓
DB
↓
レスポンス
↓
React / Vue
という処理があるとする。
それぞれの場所で確認する。
① フロント側
console.log("① API送信前");
② Laravel
dd($request->all());
③ DB取得後
dd($data);
④ フロントで受信
console.log("④ 受信データ:", data);
「動かない」ときの考え方
「動かない」と考えるのではなく、
どこまでは動いているのか？
を確認する。
例えば、
① API送信前
↓
② PHPに到達
↓
③ DBからデータ取得
↓
④ PHPからレスポンス
↓
⑤ JSでデータ受信
それぞれに確認用のコードを入れる。
最後に確認できた場所が分かれば、
その次の処理に原因がありそう
と絞り込める。
ブラウザのNetworkも確認する
API通信の場合は、Console だけでなく Network も確認する。
F12 → Network
確認するポイントは、
- Request URL
- Request Method
- Status Code
- Request
- Response
など。
よく使うデバッグ方法
JS
console.log(data);
console.error(error);
Laravel
dd($data);
Log::info('処理開始');
PHP / CodeIgniter
var_dump($data);
CodeIgniter
log_message('info', '処理開始');
最低限これだけ覚える
JS
console.log(data);
Laravel
dd($data);
PHP / CodeIgniter
var_dump($data);
CodeIgniterのログ
log_message('info', '処理開始');
Laravelのログ
Log::info('処理開始');
まとめ
デバッグするときは、
「どこまで処理が動いたか」
「そのときの値は何だったか」
の2つを確認する。
処理開始
↓
API
↓
PHP
↓
DB
↓
レスポンス
↓
画面表示
処理の途中で console.log()、dd()、var_dump() などを使って確認する。