はじめに
目標
PHP-Vars-To-Js-Transformerを使って、
Laravelの変数を、別ファイルのJavascriptに渡して処理します。
前提
ダイジェストでお送りいたします。
申し訳ありませんが、ベストプラクティスあれこれは考慮してません🙇🏻♀️
また、環境によって不要なステップの記載も飛ばしてます💦
背景
Google Maps PlatformのAPIを使う場面がありました。
マップを表示してピンを立てるときに、DBのデータも合わせて使いたかったので、今回は上記のライブラリを使用しました。
フロントエンドの知識が乏しいと、なかなかつらいですね。
めもらんだむを残しておきます。
導入
インストールしてデフォルト設定を適用
# インストール composer require laracasts/utilities # 設定ファイルが作られる → config/javascript.php php artisan vendor:publish --provider="Laracasts\Utilities\JavaScript\JavaScriptServiceProvider"
注意
- Laravel5.5以降は、サービスプロバイダに登録しません。（今回のケース）
- Laravel４は ~1.0 、Laravel５は ~2.0 を指定してインストールします。
PHP-Vars-To-Js-Transformer公式を参照してください。
使い方
成果物の全体像
こんな状態になります。
プロジェクトルート/
├ app/
│ └ Http/
│ └ Controllers/
│ └ SampleController.php
│
├ config/
│ └ javascript.php
│
├ public/
│ └ top/
│ └ sample.js
│
├ routes/
│ └ wep.php
│
└ resources/
└ views/
└ top/
└ sample.blade.php
コントローラ
app/Http/Controllers/SampleController.php
use JavaScript;
class SampleController extends Controller {
public function geolocation() {
$model = app("App\Models\User");
$data = $model::select(["id", "name"])->get()->toArray();
JavaScript::put(["laravel_data" => $data]);
return view('top.sample'); // => このViewを設定ファイルconfig/javascript.phpに追加する
}
}
設定ファイル
config/javascript.php
return [
'bind_js_vars_to_this_view' => ['footer', 'top.sample'], // putしたいViewを追加
// ... 省略
];
この設定ファイルを更新したら、キャッシュをクリアします。
（ついでにほかのキャッシュもまとめてクリアしてます。）
php artisan view:clear php artisan config:clear
ビュー
resources/views/top/sample.blade.php
<html> <head> ... </head> <body> <script type="text/javascript" src="{{asset('top/sample.js')}}"></script> <script async defer src="https://GoogleMapsPlatformAPI&callback=topSample"></script> <div id="googlemap"></div> </body> </html>
外部JSファイル
public/top/sample.js
ここでいろいろ使うことができます。
function topSample() { console.log(laravel_data); // OK // ... いろんな処理 }
確認
ページにアクセスすればJSが走ってくれると思います。
まとめ
キャッシュの関係で、ルーティングやJSの変更が読み込まれないときがあります。
適宜キャッシュクリアが必要なんですが、シェルでまとめておくと便利でした。
ビューを触るならLaravel-Mixでまとめて管理すると良い、みたいな記事もたくさん見かけました。また今度ですね。
ちなみに、GoogleMapを表示するときは
CSSでwidth:600px , height:600pxみたいにちゃんと指定します。
初投稿お読みいただき、ありがとうございました👋🏻
拙い部分はご容赦くださればと思います💦
誤字脱字は後日修正しますね。