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() などを使って確認する。