Laravel：部分的に使用しているreactにview変数を受け渡す方法

構成

基本はbladeを使用し、reactは特定画面の指定div要素内のみで使用

目的

controllerから渡されたviewの変数をreactで使用したい

対応方法

javascriptのglobal変数として渡すことも可能だが、今回はdata属性にパラメータを指定して受け渡す。

受け渡し変数

HogeController.php

$fuga = json_encode([
	['key' => 'key1', 'value' => 'hoge1'],
	['key' => 'key2', 'value' => 'hoge2'],
	['key' => 'key3', 'value' => 'hoge3'],
]);

return view('home', compact('fuga'));

hoge.blade.php

<!-- idおよびblade部分は任意の文字列-->
<div id='react' data-blade={{$fuga}}/>

app.tsx

componentDidMount() {
	const element = document.getElementById('react');
	if (element && element.dataset.blade) {
	    const object = JSON.parse(element.dataset.blade);
	    console.log(object);
	}
}

所感

javascriptのglobal変数に持たせるやり方もありますが、個人的にはこちらのほうが管理しやすいと思います。
vueのv-bindは便利ですね。