Laravel Jetstream 1.0 イントロダクション

Laravel Jetstream

Laravel (ジェットストリーム:ジェット気流)は、Laravelのためのに美しくデザインされたアプリケーションのスカフォールドです。ログイン、ユーザー登録、メール確認、2要素認証、セッション管理、Laravel Sanctumを使ったAPI、オプションとしてチーム管理を含んだ、次のLaravelアプリケーションの完璧なスタートポイントを提供します。

JetstreamはTailwind CSSを使用しデザインしており、LivewireInertiaの使用を選択していただけます。

Laravel Jetstreamのスクリーンショット

利用可能スタック

Laravel Jetstreamはフロントエンドスタックとして2つの選択肢を提供します。LivewireInertia.jsです。各スタックは生産性が高く、パワフルなアプリケーション構築のスタートポイントです。スタックの選択はテンプレートの言語に好みによります。

Livewire+Blade

Laravel Livewireはテンプレート言語としてLaravel Bladeを使い、モダンでリアクティブ、動的なインターフェイスを簡単に構築できるライブラリです。このスタックは動的でリアクティブなアプリケーションを構築したいが、Vue.jsのようなフルJavaScriptフレームワークへ飛び込むことへは躊躇する場合に、良い選択です。

Livewireを使用する場合、アプリケーションのどの部分をLivewireコンポーネントにするかを選ぶことになりますが、アプリケーションの残りの部分は、今まで使ってきたトラディショナルなBladeテンプレートでレンダーされます。

{tip} Livewireがはじめてでしたら、screencasts available on the Livewireのサイトに用意されているスクリーンキャスト(英語)をチェックしてみてください。

Inertia.js+Vue

Jetstreamが提供しているInertia.jsスタックは、テンプレート言語としてVue.jsを使います。Inertiaアプリケーションの構築は、多くの部分が典型的なVueアプリケーションの構築と似ています。しかし、Vueのルータの代わりにLaravelのルータを使います。InertiaはLaravelコンポーネントデータの名前を提供することにより、LaravelのバックエンドからVueコンポーネントの単一ファイルをレンダーできるようにする小さなライブラリーです。データはコンポーネントの"props"へ受け渡します。

言い換えればこのスタックは、複雑なクライアントサイドのルーティングを使用せず、Vue.jsのフルパワーを提供します。今まで使ってきたLaravelの標準ルータが使用できます。

Inertiaスタックは、Vue.jsをテンプレート言語として使用するのに慣れており、楽しんでいる場合に良い選択肢です。

ドキュメント章別ページ

スタック

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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