本記事では、LaravelのBladeテンプレートとJavaScriptを組み合わせる方法について解説します。

Blade × JavaScript

Laravel開発では以下のようなケースが頻出します。

フォーム送信前のバリデーション
モーダル表示の制御
Ajax（fetch）による非同期通信
ページごとの簡易的なUI制御

パターン①：Blade内にそのままJavaScriptを書く

最もシンプルな方法です。

<button id="btn">クリック</button>

<script>
    document.getElementById('btn').addEventListener('click', function () {
        alert('クリックされました');
    });
</script>

注意点

HTML読み込み後に実行する
大規模になると可読性が低下する

小規模ページ向けの方法です。

パターン②：@push と @stack を使う

レイアウトファイルで以下を定義します。

layout.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
</head>
<body>
    @yield('content')

    @stack('scripts')
</body>
</html>

子ビュー

@extends('layout')

@section('content')
<button id="btn">クリック</button>
@endsection

@push('scripts')
<script>
    document.getElementById('btn').addEventListener('click', function () {
        console.log('実行');
    });
</script>
@endpush

メリット

レイアウト構造を崩さない
ページごとにJSを分離できる

実務ではこの方法がよく使われます。

パターン③：BladeからJavaScriptへデータを渡す

Laravel側のデータをJSで使いたい場合があります。

Controller

return view('sample', [
    'user' => $user,
]);

Blade

<script>
    const user = @json($user);
    console.log(user.name);
</script>

なぜ @json を使うのか？

XSS対策
オブジェクトとして安全に渡せる

文字列連結で埋め込むのは危険です。

パターン④：CSRFトークンを使ったfetch通信

LaravelではCSRF対策が必須です。

metaタグをlayoutに追加

<meta name="csrf-token" content="{{ csrf_token() }}">

JavaScript側

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

fetch('/api/sample', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': token,
    },
    body: JSON.stringify({ name: 'Taro' })
});

これを忘れると419エラーになります。

パターン⑤：バリデーションエラーの表示連携

Laravel側のバリデーションエラーをBladeで表示できます。

<input type="text" name="name">

@error('name')
    <p class="error">{{ $message }}</p>
@enderror

JavaScript側でのリアルタイムチェックと、サーバー側バリデーションを併用するのが実務の基本です。

意識すべきポイント

① JSは可能な限り分離する

resources/js にまとめる
Viteでビルドする

② データ埋め込みは最小限に

大量データはAPI経由にする

③ Bladeは表示、JSは挙動に責任を持たせる

役割分担を明確にすることで保守性が向上します。

まとめ

小規模ならscript直書き
実務では @push を活用
データ受け渡しは @json を使う
fetch時はCSRFを忘れない

Laravel Blade × JavaScript