LaravelでコントローラーからJSに変数を渡す@jsonと改良版とJS::from()

8 回閲覧されました

公開日 : 2024年12月27日
最終更新日 : 2024年10月14日

みなさんこんにちは、jonioです。

今回はコントローラーからJavaScriptやJQueryに変数を渡す方法の解説をします。

Laravelのバージョン

今回は8系で解説しますが8系以上で使えます。

コントローラーで下記の記述をします。

$data = ['name' => 'hoge','age' => 99 ];

return view('テンプレート名', compact('data'));

そしてJavaScriptに下記の記述をします。

console.log(@json($data));

データを受け取っているかを確認する為にデベロッパーツールを見ると下記の表示がされます。

▼{name: 'hoge', age: 99}
    age: 99
    name: "hoge"
  ▶︎[[Prototype]]: Object

@jsonはBladeComponentに引き渡した場合にコンパイルされない問題があったので改良版が登場しました。

それが次に解説する@jsです。

コントローラーで下記の記述をします。

$data = ['name' => 'hoge','age' => 99 ];

return view('テンプレート名', compact('data'));

そしてJavaScriptに下記の記述をします。

console.log(@js($data));

データを受け取っているかを確認する為にデベロッパーツールを見ると下記の表示がされます。

▼{name: 'hoge', age: 99}
    age: 99
    name: "hoge"
  ▶︎[[Prototype]]: Object

JavaScriptで「@json」と書いたのが「@js」に変わっただけです。

コントローラーに下記の記述をします。

use Illuminate\Support\Js;

$data = ['name' => 'hoge','age' => 99 ];

return view('テンプレート名', compact('data'));

そしてJavaScriptに下記の記述をします。

console.log(console.log({{ $data }}););

デベロッパーツールでデータを受け取ることができているかを確認すると@jsonの時と同じになります。

▼{name: 'hoge', age: 99}
    age: 99
    name: "hoge"
  ▶︎[[Prototype]]: Object

JS::fromのメリットはコントローラーから送る変数をそのままJavaScriptで使える点です。

個人的にはコントローラーの変数がJavaScriptでそのまま使えるこの書き方が好きです。