🛣️

[Laravel] route関数をフロントにも

に公開
Laravel
ziggy
tech

第44回関西PHP勉強会（Laravel特集）の登壇資料を記事にしたものです。

Laravelで定義したルートをフロントで使う方法

Laravelのルート、フロントにどうやって渡してますか

こんなルートをサーバーサイドで定義していて

フロントでそこにPOSTしたいみたいなとき。

方法としては2つ

  • パスを直書き

    • 変更に弱い
    • タイポに気付くのが遅い

  • サーバーサイドからdata属性とかで渡す

    • 使う分だけ記述量が増える
    • datasetは型が不明

Ziggyを使うと

少ない記述で、変更に強くて、type-safeなURLを生成できる！

Ziggy

ziggyとは

Ziggyは、Laravelのように動作するJavaScriptのroute()関数を提供し、JavaScriptで名前付きLaravelルートを簡単に使えるようにします。

(DeepL訳)

あまり知られていない？

inertia.jsのドキュメントにチラッと出てくる

LaravelのStarter Kitに同梱されてるけどLaravel側のドキュメントにはほとんど説明が無い

使い方

インストール方法

  • composer側にインストール
composer require tighten/ziggy

in README.md

  • ziggy-jsのエイリアス設定
// vite.config.js resolve.alias
'ziggy-js': path.resolve('vendor/tightenco/ziggy'),

in README.md

  • 型を生成
php artisan ziggy:generate --types-only
// resources/js/ziggy.d.ts
  • global.d.tsにroute関数を追加

  • @routesディレクティブをbladeに追加
<head>
@routes
</head>
  • tsで補完が効く🙌🏻

パラメータもタイポしてるとエラーで教えてくれる

型安全にする方法

  • strictRouteNames
    さっきのglobal.d.ts

    これをtrueにしておくことで、存在するroute nameしかroute関数の第一引数に渡せなくなる

  • vendor/tightenco/ziggy/src/js/index.d.ts

    strictRouteNamesがデフォルトでfalseなので、stringも許容される。

    なぜかドキュメントに説明がない

  • Discussionに投げておいた

    https://github.com/tighten/ziggy/discussions/824

ディレクティブ使う時の注意

  • 全部出力すると全ルートがバレるので絞って

    @routes の中身

    // config/ziggy.php

return [
    'groups' => [
        'admin' => ['admin.*', 'users.*'],
        'author' => ['posts.*'],
    ],
];

    {{-- admin.blade.php --}}

@routes(['admin', 'author'])

    in README.md

Discussion