Laravel 9.x スターターキット

イントロダクション

新しいLaravelアプリケーションの構築をすぐに取りかかれるようするため、認証とアプリケーションのスターターキットを提供しています。これらのキットはアプリケーションのユーザーを登録および認証するために必要なルート、コントローラ、ビューを自動的にスカフォールドします。

皆さんがこうしたスターターキットを使用してくれるのは大歓迎ですが、これらは必須でありません。Laravelの真新しいコピーをインストールするだけで、自分自身のアプリケーションを自由にゼロから構築できます。いずれにせよ、みなさんが素晴らしいものを作り上げるのはわかっています!

Laravel Breeze

Laravel Breezeへログイン、ユーザー登録、パスワードのリセット、メールの検証、パスワードの確認など、Laravelのすべての認証機能を最小限シンプルに実装しました。Laravel Breezeのデフォルトビュー層は、Tailwind CSSでスタイルを設定したシンプルなBladeテンプレートで構成しています。あるいは、Breezeで、VueやReactとInertiaを使用したアプリケーションのスカフォールドを生成できます。

Breezeは、新しいLaravelアプリケーションを始めるための素晴らしい出発点となり、BladeテンプレートをLaravel Livewireを使用し、レベルを上げる計画をしているプロジェクトにも最適な選択肢です。

Laravel Bootcamp

Laravelが初めての方は、気軽に【Laravel Bootcamp】(https://bootcamp.laravel.com)に飛び込んでみてください。Laravel Bootcampでは、Breezeを使用して最初のLaravelアプリケーションを構築する手順が説明されています。LaravelとBreezeのすべてを知るには最適な方法です。

インストール

まず、新規Laravelアプリケーションの作成、データベースの設定、データベースマイグレーションを実行してください。Laravelアプリケーションを新規作成したら、Composerを使用してLaravel Breezeをインストールできます。

composer require laravel/breeze --dev

Breezeをインストールしたら、以下のドキュメントで説明するBreeze「スタック」のいずれかを使用し、アプリケーションのスカフォールドを生成できます。

BreezeとBlade

ComposerでLaravel Breezeパッケージをインストールしたら、breeze:install Artisanコマンドを実行してください。このコマンドは、認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開します。Laravel Breezeは、すべてのコードをアプリケーションへリソース公開するため、その機能と実装を完全に制御し、可視化することができます。

デフォルトのBreeze「スタック」はBladeスタックで、シンプルなBladeテンプレートを使用して、アプリケーションのフロントエンドをレンダします。Bladeスタックは、breeze:installコマンドを追加引数なしで実行することでインストールできます。Breezeの雛形をインストールしたら、アプリケーションのフロントエンドアセットをコンパイルする必要があります。

php artisan breeze:install

php artisan migrate
npm install
npm run dev

続いて、Webブラウザでアプリケーションの/loginまたは/registerのURLにアクセスしてください。Breezeのすべてのルートは、`routes/auth.php'ファイル内に定義しています。

Note: アプリケーションのCSSとJavaScriptのコンパイルについて詳しく知りたい方は、LaravelのViteドキュメントを参照してください。

BreezeとReact/Vue

Laravel Breezeは、Inertiaフロントエンド実装により、ReactとVueを使用するスカフォールドも提供しています。Inertiaは、従来のサーバサイドルーティングとコントローラを使用して、モダンなシングルページのReactとVueのアプリケーションを構築することができます。

Inertiaは、ReactとVueが持つフロントエンドのパワーと、Laravelの驚異的なバックエンドの生産性、そしてViteの軽快なコンパイルを組み合わせた開発を楽しめます。Inertiaスタックを使用するには、breeze:install Artisanコマンドを実行する際に、使用するスタックとしてvueまたはreactを指定します。Breezeの雛形をインストールしたら、アプリケーションのフロントエンドアセットをコンパイルする必要があります。

php artisan breeze:install vue

# もしくは

php artisan breeze:install react

php artisan migrate
npm install
npm run dev

続いて、Webブラウザでアプリケーションの/loginまたは/registerのURLにアクセスしてください。Breezeのすべてのルートは、`routes/auth.php'ファイル内に定義しています。

サーバサイドレンダリング

BreezeのInertia SSRのscaffoldサポートを使う場合は、breeze:installコマンドを実行時に、ssrオプションを指定してください。

php artisan breeze:install vue --ssr
php artisan breeze:install react --ssr

BreezeとNext.js/API

Laravel Breezeは、NextNuxtなどのモダンなJavaScriptアプリケーションで認証するAPIもスカフォールドできます。これを使い始めるには、breeze:install Artisanコマンドを実行する時に、apiを希望スタックとして指定します。

php artisan breeze:install api

php artisan migrate

インストール中、Breezeはアプリケーションの.envファイルへ、FRONTEND_URL環境変数を追加します。このURLは、JavaScriptアプリケーションのURLである必要があります。ローカル開発では、これは通常http://localhost:3000になります。さらに、APP_URLhttp://localhost:8000に設定する必要があります。これは、serve Artisanコマンドで使用されるデフォルトのURLです。

Next.jsリファレンス実装

ついに、このバックエンドとお好みのフロントエンドを組み合わせる準備ができました。BreezeフロントエンドのNextリファレンス実装はGitHubで公開しています。このフロントエンドはLaravelがメンテナンスし、Breezeが提供する従来のBladeスタックやInertiaスタックと同じユーザーインターフェイスを備えています。

Laravel Jetstream

Laravel Breezeは、Laravelアプリケーションを構築するためのシンプルで最小限の開始点を提供しますが、Jetstreamはより堅牢な機能と、追加のフロントエンドテクノロジースタックで、その機能を強化します。Laravelを初めて使用する場合は、Laravel Jetstreamへ進む前に、Laravel Breezeで勘所を掴むことをおすめします。

Jetstreamは、Laravelのために美しくデザインされたアプリケーションのスカフォールドを提供し、ログイン、登録、電子メール検証、二要素認証、セッション管理、Laravel Sanctum経由のAPIサポート、およびオプションのチーム管理を備えています。Jetstreamは、Tailwind CSSを使用して設計しており、LivewireまたはInertia駆動のフロントエンドスカフォールドから選択可能です。

Laravel Jetstreamをインストールするための完全なドキュメントは、公式Jetstreamドキュメントにあります。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる