LaravelからTypeScriptコードを自動生成して効率良く型安全なフロントエンド開発を目指す by Urata Daiki

最近LaravelのスターターキットであるLaravel BreezeにもTypeScriptサポートが追加されたように、LaravelにもTypeScriptを導入したフロントエンド開発需要が高まっています。
しかしTypeScriptでの開発を行っていると、Laravel側のコードと重複している箇所が多くあると感じます。

例えば

• 「Laravelのusersテーブルのカラム名が変更になった場合は、マイグレーションファイルを修正した後、TypeScriptのUserタイプも修正する必要がある」
• 「LaravelのEnumをそのままTypeScriptでも使用したい場合」
• 「Laravelのルーティングを修正した場合は、フロントエンド側のHttpリクエスト処理のURLも修正する必要がある」
• 「Laravelのバリデーションルールをフロントエンド側のフォームバリデーションにもそのまま適用したい場合」
  などです。

OpenAPI Specificationなどを利用してのフロントエンドコード生成やバックエンドのAPIテストを行うことでこれらの問題は解決されるかもしれませんが、APIスキーマファイル運用コストや開発速度の観点から採用が難しい場合もあります。
さらにInertia.jsなどそもそもAPIの送受信処理を省いてしまっている構成の場合にはこのようなAPI仕様書は有効ではありません。

そこで私はLaravelのModelからTypeScriptの型などを生成できるライブラリを自作し、ライブラリとして公開しました。
これを実際に業務でも採用しており、バックエンドとフロントエンドでの型共通化による開発の効率化やバグ防止に繋がったと感じています。
その他にもLaravelのバリデーションルールからTypeScriptのバリデーションライブラリZodのコード生成を行うライブラリを作成したりなど、バックエンドとフロントエンドでコードの重複をなくす取り組みを行っています。

本セッションではLaravel（PHP）のコードから型定義などのTypeScriptコードを自動生成する仕組みを導入することでコード重複問題を解決し、効率良く型安全なフロントエンド開発を行う手法を紹介します。