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

イントロダクション

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

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

Laravel Breeze

Laravel Breezeは、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認など、すべての認証機能を最小かつシンプルにLaravelへ実装したものです。さらに、Breezeには、ユーザーが名前、電子メールアドレス、パスワードを更新できるシンプルな「プロファイル」ページが含まれています。

Laravel Breezeのデフォルトのビュー層は、Tailwind CSSでスタイルした、シンプルなBladeテンプレートで構成しています。また、VueやReactとInertiaを使用したアプリケーションのスカフォールドを作ることも可能です。

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

Laravel Bootcamp

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

インストール

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

composer require laravel/breeze --dev

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

breeze:installコマンドを実行すると、希望するフロントエンドスタックとテストフレームワークの入力を求められます:

php artisan breeze:install

php artisan migrate
npm install
npm run dev

BreezeとBlade

Breezeのデフォルト「スタック」はBladeスタックで、シンプルなBladeテンプレートを使用してアプリケーションのフロントエンドをレンダします。Bladeスタックをインストールするには、breeze:installコマンドを引数なしで実行し、Bladeフロントエンド・スタックを選択します。Breezeのスカフォールドがインストールされたら、アプリケーションのフロントエンドアセッツもコンパイルする必要があります。

php artisan breeze:install

php artisan migrate
npm install
npm run dev

次に、ウェブブラウザでアプリケーションの/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フロントエンドスタックを選択します。

VueまたはReactフロントエンド・スタックを選択したら、Breezeのインストーラは、Inertia SSRまたはTypeScriptのサポートを希望するかどうかの確認も行います。Breezeのスカフォールドをインストールしたら、アプリケーションのフロントエンドアセットもコンパイルする必要があります:

php artisan breeze:install

php artisan migrate
npm install
npm run dev

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

BreezeとNext.js/API

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

php artisan breeze:install

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)へ移動

その他

?

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