【Laravel + Inertia】快適な"開発"のためのエコシステムの紹介

Laravel + Inertia はとても快適なスタックなのですが、関連ライブラリやエディタを導入することで、さらに快適になります！

機能ではなく、開発の快適さに絞っていくつか紹介します。

コード補完（ide-helper）

必須級のライブラリです。
こんな感じでモデルとかの TypeHint が表示できます。

インストール

$ composer require --dev barryvdh/laravel-ide-helper

以下のコマンドを実行すると、各種ヘルパーファイルが出現します。

$ php artisan ide-helper:generate
$ php artisan ide-helper:models -M
$ php artisan ide-helper:meta

それぞれ生成されるファイルは以下の感じ。

• _ide_helper.php
  • Laravel のファサード系をエディタに認識させる
  • 自分で作った macro にも対応！
• _ide_helper_models.php
  • モデルの属性、リレーション、をエディタに認識させる
  • 動的生成される Eloquent のメソッドも認識するようになる！
  • 直接 Model ファイルに書き込むこともできる（オプション多）
• .phpstorm.meta.php
  • PHPStorm 向けに、app() 系のメソッド群を補完します
  • VSCode では使われない？詳細不明

これらのファイルはサイズが大きいので .gitignore に入れておいたほうが良いです。

.gitignore

_ide_helper.php
_ide_helper_models.php
.phpstorm.meta.php

ide-helper:models だけは、モデル編集時に実行しましょう。

Laravel の常時デバッグ（debugbar）

Laravel の画面の左下に鎮座して、通信の内容から発行された SQL、各処理にかかった時間、その他リクエスト～セッションの内容まで、開発時に見たい情報が全て確認きる神ツールです！
ajax にも対応していて、Inertia 環境でも便利に使うことができます！

$ composer require barryvdh/laravel-debugbar --dev

$ php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

表示可否は .env の DEBUGBAR_ENABLED で制御できます。
ただし、APP_DEBUG=true の時のみです。安心ですね。

設定項目は config/debugbar.php にあり、多岐にわたるのですが、一か所 editor をデフォルトで使っているものに変えておくと良いです。

config/debugbar.php

-   'editor' => env('DEBUGBAR_EDITOR') ?: env('IGNITION_EDITOR', 'phpstorm'),
+   'editor' => env('DEBUGBAR_EDITOR') ?: env('IGNITION_EDITOR', 'vscode'),

簡単に説明すると

• collection 系を true にすると、タブが増える
• options の timeline 系を true にすると、時間取得が厳格になる
  • （options.db.timeline=true で、各クエリ単位まで粒度を下げることができます）

いつか解説記事作りたい...（私がほしい）

更なる詳細確認（telescope）

Laravel 公式で、ほぼ全ての情報を蓄えて閲覧することができるツールです。
debugbar じゃ足りない...という場合に利用しましょう。

注意点として、データベースに専用のテーブルを作成する必要があります。

$ composer require laravel/telescope
$ php artisan telescope:install

$ php artisan migrate

設定は config/telescope.php に記載されます。
Telescope は本番利用も想定されているため TELESCOPE_ENABLED で利用の制御ができます。
ただ常時利用するものでもないので enable は debugbar と同等にしましょう。

config/telescope.php

-   'enabled' => env('TELESCOPE_ENABLED', true),
+   'enabled' => env('TELESCOPE_ENABLED', env('APP_DEBUG', false)),

Telescope は http://localhost:8000/telescope にアクセスすると確認できます。

こんな感じでデータまで含めた、ほぼすべてのデータが閲覧できてしまうのですよね。。。
恐ろしい！！

もしデータベースを分けたい！って場合は、以下記事を参考にしてください。

他にも Clockwork というライブラリもおすすめです。
ファイルベースなのでデータベースいらず。
ブラウザの拡張機能を利用してシンプルに利用できます。

DBの入出力コマンド化（db snapshot）

はい Spatie社 さんのライブラリです。

Laravel の開発、Web全般ですね、開発中にいったん処理を行ってデータを確認したいときってあるじゃないですか。
また他の開発者に事象を説明するとき、データを渡したくなる時ないですか？
はたまた本番環境で謎のエラーが起きて、ひたすらデータの検証をする時ってないですかね？？？

そんな時に便利なライブラリです。

$ composer require spatie/laravel-db-snapshots

そして、出力設定を filesystems.php に書き込みます。

config/filesystems.php

return [
    'disks' => [
    // ...
        'snapshots' => [
            'driver' => 'local',
            'root' => database_path('snapshots'),
        ],
    ],
];

この書き方からわかる通り s3 とかに出すこともできます。

使い方は簡単！ snapshot コマンドを使います。

# ただ保存する
$ php artisan snapshot:create

# 名前を付けて保存する
$ php artisan snapshot:create named

# 一覧を確認する
$ php artisan snapshot:list
+---------------------+---------------------+----------+
| Name                | Created at          | Size     |
+---------------------+---------------------+----------+
| named               | 2025-12-14 05:04:53 | 31.23 KB |
| 2025-12-14_05-04-20 | 2025-12-14 05:04:20 | 29.83 KB |
+---------------------+---------------------+----------+

# 読み込む
$ php artisan snapshot:load
 Which snapshot? [named]:
  [0] named
  [1] 2025-12-14_05-04-20
 > 0

各 SQL のくそ覚えにくいインポートエクスポートコマンドはもう覚えなくて大丈夫です！

ファイルは先ほど指定した database/snapshots/* に出力されます。
.gitignore に加えておきましょう。

VSCode の拡張機能

最後に最低限の拡張機能も紹介しておきましょう。

Laravel

なんと！Laravel公式から！拡張機能が誕生しました！
ほぼすべてのデータ補完が強化されるので、入れない選択肢はないです。

今までいろんな拡張機能を導入していたと思いますが、今はこれだけで十分です。
まだ出たばかりなので今後に期待ですね！

PHP Intelephense

PHP の言語機能の強化拡張機能ですね。
これがないと VSCode での Laravel の運用は難しいです...。

注意点として、導入後に標準の PHP 言語機能を消す必要があります。
これを忘れている人が多いです。

有料ライセンスもあるのですが、今は個人なら $35 買い切りになってます。（昔は $20 くらいでドル円レートも安かったのに...）
1つライセンスがあれば、個人に限り何台分でも利用できるお得なライセンス形態です。
名前変更がやりやすくなったりと買って損はないです。

Vue (Official)

名前の通り Vue のオフィシャル拡張機能です。
これを入れないとコードシンタックスなどが微妙なので入れましょう。
よくバグがあるのですが...、即日修正レベルで比較的対応が早いです。

やはり Vue はマクロに舵を切ってるので、静的解析が難しいんでしょうねぇ...。

Tailwind CSS IntelliSense

これも公式。
Tailwind で利用する class の TypeHint が利用できるようになります！
あいまいに覚えていても大丈夫！

ここでの説明になるのですが Tailwind を導入する際に利用する at-rule は VSCode 側が認識できず警告が表示されます...。

この方の記載を参考に以下の設定を追加すると解消します！

setting.json

  "files.associations": {
    "*.css": "tailwindcss"
  }

おわりに

他にもいろいろ便利なものはあるのですが、

• できる限り公式に寄せる
• 利用者が多い
• メンテナンス放棄される可能性が低い
  • または、放棄されたときに対処できる

という条件を考えた時は、最低限上記の対応をしておくと快適です。

あとは環境に合わせて Laravel Lang とか unplugin シリーズとか実益のあるライブラリを選定すると良いかもしれませんね！
（記事を書くかは未定）