ちょっと小回りが利かない
webアプリケーション開発の過程で変数の内容をちょっと確認したいとき、Laravelならdump()
やdd()
が使えるが、エラーの場合は内容が確認できなかったり、確認の都度実行を停止しなければならなかったりする。
実行させながら変数の内容を表示させるには、var_dump()
などの関数でブラウザーに内容を表示させるのが一般的だが、表示が崩れ、ページが遷移すると確認できない。
JSを使った簡易な対応
Railsのようにサーバーコンソールへの出力やJavascriptのconsole.log
のように、ページとは別のところで変数の内容を確認したいとき、標準出力に振り向けるような設定もあるようだが、以下のコードでとりあえずブラウザーのコンソールへの表示ができる。
1 |
echo '<script>console.log(' . json_encode($var, JSON_UNESCAPED_UNICODE) . ');</script><br>'; |
文字列や配列の表現中にシングルクォートやダブルクォートが含まれるとエラーが出る場合もあるので、変数を結合するときにjson_encode()
を使っている。
実行例
以下はPHPでの実行例で、上のコードを関数化している。Laravelならヘルパー、static
クラス、static
メソッドのトレイトなどで準備することが考えられる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php function console_log($var) { echo '<script>console.log(' . json_encode($var, JSON_UNESCAPED_UNICODE) . ');</script>'; } $int = 100; $str = '文字列'; $arr = [1, 2.0, 'three', '四']; $asc = [ 'one' => 1, 2 => '弐', '実数3' => 3.0, ]; console_log($int); console_log($str); console_log($arr); console_log($asc); echo <<<END <html> <head> <title>console.logテスト</title> </head> <body> <h1>console.logテスト</h1> </body> </html> END; console_log($int); console_log($str); console_log($arr); console_log($asc); |
以下は実行の結果生成されたHMTL例で、HTMLドキュメント出力の前段だとhead
要素内、出力後だとbody
要素内にscript
要素が配置される。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <script>console.log(100);</script> <script>console.log("文字列");</script> <script>console.log([1,2,"three","四"]);</script> <script>console.log({"one":1,"2":"弐","実数3":3});</script> <title>console.logテスト</title> </head> <body> <h1>console.logテスト</h1> <script>console.log(100);</script> <script>console.log("文字列");</script> <script>console.log([1,2,"three","四"]);</script> <script>console.log({"one":1,"2":"弐","実数3":3});</script> </body> </html> |
以下はコンソールへの出力部分。これで実行を止めずに変数の確認ができる。
1 2 3 4 |
100 文字列 ▶(4) [1, 2, 'three', '四'] ▶{2: '弐', one: 1, 実数3: 3} |
Laravelの場合
コントローラーのメソッドに定義
コントローラーでメソッドを定義する方法で可能。
- コントローラーの
static
メソッドでconsole_log()
を定義 - コントローラー内は
$this->console_log()
で呼び出し - ビューでは
{{ namespace\controller::console_log() }}
で呼び出し
コントローラーの例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class ConsoleLogController extends Controller { public static function console_log($var) { echo '<script>console.log(', json_encode($var, JSON_UNESCAPED_UNICODE), ');</script>'; } public function show() { $this->console_log('log in action before calling view'); return view('console_log_test'); } } |
ビューの例
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>console_logテスト</title> </head> <body> <h1>console_logテスト</h1> {{ App\Http\Controllers\ConsoleLogController::console_log('log in view') }} </body> </html> |
ルーティングからConsoleLogController@show()
が実行されると、ブラウザーにビューが表示され、F12キーで以下の表示が確認できる。
1 2 |
log in action before calling view log in view |
ヘルパーコントローラーを作成する方法
以下のようにヘルパーコントローラーをapp/Http/Controllers
下に作成し、static
メソッドとしてconsole_log()
を定義。
php artisan make:controller HelperController
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class HelperController extends Controller { public static function console_log($var) { echo '<script>console.log(', json_encode($var, JSON_UNESCAPED_UNICODE), ');</script>'; } } |
コントローラーのアクションでは以下の様に呼び出す。
1 |
HelperController::console_log('log in action before calling view by Helper'); |
ビューでは以下の様に呼び出す。
1 |
{{ App\Http\Controllers\HelperController::console_log('log in view by Helper') }} |