Laravelの変数を外部JSに渡す方法(PHP-Vars-To-Js-Transformer)

  
  

はじめに

目標

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以降は、サービスプロバイダに登録しません。(今回のケース)
  • Laravel4は ~1.0 、Laravel5は ~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に追加する
  }
}

  
  

ルーティング

routes/wep.php

Route::get('/test', 'SampleController@geolocation');

   
  

設定ファイル

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みたいにちゃんと指定します。
  

   
初投稿お読みいただき、ありがとうございました👋🏻
拙い部分はご容赦くださればと思います💦
誤字脱字は後日修正しますね。
 
  
    

参考リンク

PHP-Vars-To-Js-Transformer