Laravel Breezeのダッシュボードカスタマイズ方法

Laravel開発を始めたばかりの方にも優しい「Laravel Breeze」。

シンプルな認証機能を提供するこのパッケージですが、「標準のダッシュボードをカスタマイズしたい！」という声も多いです。

今回は、Laravel Breezeのダッシュボードカスタマイズ方法を、実践的に解説していきます。

[目次を開く]

Breezeとは？おさらいカスタマイズの大まかな流れ実際にカスタマイズしてみよう 1. ビューの場所を確認する 2. Bladeファイルを編集する 3. 必要に応じてルーティングやコントローラーも編集 4. コンポーネントを増やすのもアリまとめ

Breezeとは？おさらい

Laravel Breezeは、最小限の認証機能を素早く導入できるスターターパックです。

ログイン、登録、パスワードリセットなど、基本的な機能がすべて揃っており、Tailwind CSSとBladeまたはInertia.js/React/Vueが選択可能。

初心者にもわかりやすく、拡張もしやすいのが特徴です。

カスタマイズの大まかな流れ

Breezeのダッシュボードをカスタマイズする基本的な手順は以下の通りです。

Breezeインストール時に選んだスタック（Blade/Inertiaなど）を確認
ダッシュボード用のビュー（Bladeファイル）を編集
コントローラーやルートも必要に応じて変更
スタイル（CSS）やコンポーネントを自由に追加

ポイントは、Breezeは「ただのLaravelアプリ」なので、通常のLaravel開発と同じ感覚で進められることです。

実際にカスタマイズしてみよう

今回はBlade版のBreezeを例に進めます。

1. ビューの場所を確認する

インストール後、ダッシュボードは以下にあります。

resources/views/dashboard.blade.php

このファイルがログイン後に表示されるページです。

2. Bladeファイルを編集する

例えば、シンプルなカードレイアウトに変更したい場合、以下のように編集できます。

<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                <h1 class="text-2xl font-bold mb-4">ようこそ、{{ Auth::user()->name }}さん！</h1>
                <p>ここからアプリケーションを管理できます。</p>
            </div>
        </div>
    </div>
</x-app-layout>

Tailwind CSSを活用することで、デザインもサクサク変更できます。

3. 必要に応じてルーティングやコントローラーも編集

ダッシュボードに表示するデータを増やしたい場合は、コントローラーを作成または編集します。

たとえば、DashboardControllerを作って、そこに処理を書く形もおすすめです。

php artisan make:controller DashboardController

そして、ルーティングを変更します。

Route::get('/dashboard', [DashboardController::class, 'index'])
    ->middleware(['auth'])
    ->name('dashboard');

DashboardControllerのindexメソッドでデータを取得し、ビューに渡しましょう。

public function index()
{
    $posts = Post::latest()->get();

    return view('dashboard', compact('posts'));
}

これで、ダッシュボード上に最新記事一覧などを表示できます！

4. コンポーネントを増やすのもアリ

Bladeコンポーネント（resources/views/components配下）を活用すると、再利用性の高いパーツを作れます。

たとえば、簡単な「ステータスカード」コンポーネントを作成し、ダッシュボード内に並べることで、管理画面っぽい雰囲気が出せます。

まとめ

Laravel Breezeのダッシュボードカスタマイズは、想像以上にシンプルです。

BreezeはあくまでLaravelの基本機能を薄くラッピングしているだけなので、自由自在に編集可能。

最初はビューの編集から始め、慣れてきたらコントローラーやコンポーネントまで手を広げていくと、オリジナル性の高い管理画面が作れるでしょう！

自分だけのカスタムダッシュボードを作って、Laravelアプリ開発をもっと楽しく、もっと便利にしていきましょう！

アルアカ - Arcadia Academia