bladeテンプレート内でのjsの書き方、値を引き継ぐ方法

jintajavascript・php

bladeテンプレート内のscriptタグでは

サーバー側から渡された値をscirpt内で使うことができる。

<script>
    var data = @json($variable);
    // JavaScriptのコードでdataを利用する
</script>

1. Bladeテンプレート内でのJavaScriptの書き方

直接Bladeテンプレート内に記述する方法

Bladeファイル内でJavaScriptを記述する場合、通常は<script>タグ内に書く。

<!-- resources/views/example.blade.php -->
@extends('layouts.app')

@section('content')
    <div>
        <h1>Hello, Blade!</h1>
        <button id="myButton">Click Me</button>
    </div>
@endsection

@section('scripts')
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
@endsection
  • @section('scripts') 内にJavaScriptを記述することで、親レイアウトファイルでそのセクションを@yield('scripts')で呼び出せるようになる。

外部JSファイルを読み込む方法

外部のJavaScriptファイルを読み込むには、<script>タグを使用して、public/js内にあるファイルを参照できる。

@section('scripts')
    <script src="{{ asset('js/custom.js') }}"></script>
@endsection

2. BladeからJavaScriptに値を渡す方法

方法1: @jsonディレクティブを使う

Laravelの@jsonディレクティブを使うと、BladeテンプレートからJavaScriptに簡単に値を渡せる。これにより、PHPの配列やオブジェクトをJSON形式に変換してJavaScriptで利用できる。

// コントローラ内
$user = [
    'name' => 'John',
    'email' => 'john@example.com'
];
return view('example', compact('user'));
↓
// ブレード内
<script>
    const user = @json($user);
    console.log(user.name);  // この場合、$userは連想配列で来るのでオブジェクトになる
</script>

方法2: Bladeの変数を直接埋め込む

Bladeで変数を埋め込む場合、{{ }}を使って直接JSに渡す方法。

<script>
    const userName = "{{ $user->name }}";
    console.log(userName);
</script>
  • 注意: 上記の方法はHTMLエスケープされるため、文字列に " や ' などが含まれている場合にエスケープされ変換される。（&quot;や&lt;などで壊れる）そのため、値が文字列の場合に@jsonを使用する方が安全。

3. APIのレスポンスを使用する方法

APIからのデータをJavaScriptで受け取る

JavaScript（特にfetchやaxiosを使う場合）でAPIからのレスポンスを受け取って、Bladeテンプレート内に埋め込む方法。

例1: fetchを使ってAPIを呼び出す
<script>
    fetch('/api/user')
        .then(response => response.json())
        .then(data => {
            console.log(data);  // APIから返されたJSONデータ
        });
</script>
  • ここでは、/api/userというAPIエンドポイントにGETリクエストを送り、レスポンスとして返ってきたJSONをdataに格納する。
例2: axiosを使う方法
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    axios.get('/api/user')
        .then(function (response) {
            console.log(response.data);  // APIレスポンスデータ
        })
        .catch(function (error) {
            console.error('Error fetching data:', error);
        });
</script>
  • axiosはブラウザ向けのHTTPクライアントライブラリで、簡単にAPIリクエストを扱うことがでる。

4. BladeからJavaScriptに値を引き継ぐ

上記と重複するが、AJAXリクエストを使ってサーバーにデータを送信し、そのレスポンスをBladeテンプレートで受け取る。

AJAXを使ってデータを送信する方法

<script>
    function sendDataToServer() {
        axios.post('/api/data', {
            name: 'John Doe',
            age: 30
        })
        .then(function(response) {
            console.log('Data sent successfully:', response.data);
        })
        .catch(function(error) {
            console.error('Error:', error);
        });
    }
</script>

<button onclick="sendDataToServer()">Send Data</button>
  • 上記の例では、POSTリクエストで/api/dataにデータを送信し、そのレスポンスを受け取る。