Laravel 12スターターキット解説：React、Vue、Livewire

新しいLaravelプロジェクトを始めるとき、ゼロからすべてを構築する必要はありません。Laravelは スターターキット.これらは、ルート、コントローラ、認証、フロントエンドのスキャフォールディングボイラープレートコードなどの基本的な部分をケアしてくれます。

と Laravel 12で、これらのスターターキットは、今日最も人気のある2つのJavaScriptシングルページアプリケーションのフロントエンドの選択肢をサポートするように近代化されました： Reactと Vueのシンプルなアプローチを使用するオプションも提供しています。 Bladeテンプレートまた Livewireコンフィギュレーションを使用することもできます。これらのスターターキットはそれぞれ、アプリを構築するためのアプローチが若干異なります：

• リアクトよりコンポーネントベースのアプローチで構築したい場合

• ビューより伝統的なJavaScriptに近いものがお好みなら（たとえばJSXは使わない）

• Livewire重いJavaScriptを使わず、ほとんどをPHPとBladeで管理したい場合

この記事では、それぞれのキットが何を提供するのか、どのように違うのか、そしてあなたの次のLaravel 12プロジェクトにはどれが最も理にかなっているのかを見ていきます。

リアクト・スターター・キット

もしあなたが、以下のような高度にインタラクティブなウェブアプリを構築しているのなら。 Trello, Slackや GitHub、再利用可能なUIコンポーネントを扱うのが好きなら Reactスターターキットはぴったりだ。Reactでは、これらの部品を コンポーネント自己完結型のビルディング・ブロックで、自身の状態を管理し、親コンポーネントからデータを受け取り、アプリ全体で再利用することができます。

スターター・キットでは Inertia.jsを使用して、ReactとLaravelのルートとコントローラーを接続します。簡単に言うと、バックエンドとフロントエンドの両方が一緒に動作するメリットを得ることができます。Laravelは、ルーティング、認証、データベース操作など、すべてのバックエンドロジックを処理します。一方、Reactはインタラクティブなフロントエンドを処理し、全ページをリロードすることなくページを自動的に更新できるようにします。カスタムAPIを構築する必要がないので、よりシンプルで高速になります。その上、このキットには TypeScriptが付属しています、 TailwindCSS高速なスタイリングのための shadcn/uiを利用することができる。これにより、レスポンシブなUIを構築するための強固で柔軟なベースが提供されます。

レイアウトとバリエーション

Reactスターターキットをインストールしたら、フロントエンドのコードのほとんどは resources/js.デフォルトでは、アプリはサイドバーレイアウトを使用しますが、ヘッダーレイアウトに簡単に切り替えることができます。 resources/js/layouts/app-layout.tsx.

サイドバーレイアウト自体には、デフォルト、"インセット"、"フローティング "の3つのバリエーションがあります。を更新することで、あなたのアプリに最も合うものを選ぶことができます。 variantの resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

ログイン、登録、パスワードリセットなどの認証ページのレイアウトのバリエーションには、シンプル、カード、分割の3つのレイアウトオプションがあります。

の上部にあるインポートを更新することで、簡単に切り替えることができる。 resources/js/layouts/auth-layout.tsx.

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

ビュー・スターター・キット

柔軟で簡単に使えるフロントエンドをお望みなら Vueスターターキットは堅実な選択だ。ここでも Inertia.jsを使用してVueとLaravelのルートやコントローラを接続するため、カスタムAPIを必要とせず、シングルページアプリのようなインタラクティブなページを構築できます。つまり、Laravelがすべてのバックエンドロジックを処理する一方で、Vueのリアクティブなフロントエンド機能を得ることができます。

このキットには、Vue 3 コンポジションAPI, TypeScriptが付属しています、 TailwindCSSで素早くスタイリングし shadcn/uiで再利用可能なUIコンポーネントを提供している。これらを組み合わせることで、レスポンシブなインターフェイスを簡単かつ柔軟に構築できる、クリーンなセットアップが実現します。

レイアウトとバリエーション

Vueフロントエンドのコードのほとんどは resources/jsにあり、コンポーネント、ページ、レイアウト、フックを簡単に見つけてカスタマイズできるように整理されています。デフォルトでは、アプリはサイドバーレイアウトを使用しますが、ヘッダーレイアウトに切り替えるには resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

サイドバーレイアウトには、デフォルト、インセット、フローティングの3種類があります。を更新することで最適なものを選ぶことができます。 variantプロパティを更新することで最適なものを選ぶことができます。 resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

ログイン、登録、パスワードリセットなどの認証ページにも、シンプル、カード、分割の3つのレイアウトオプションがあります。これらのレイアウトを切り替えるには、インポートの一番上にある resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Reactのようにコンポーネントは再利用可能なので、レイアウトやUI要素を変更してもページを書き直す必要はない。

ライブワイヤースターターキット

より伝統的な モデル-ビュー-コントローラLaravelのBladeテンプレートエンジンを使ってフロントエンドにアプローチしたい場合は Livewireスターターキットは良い選択です。Livewireには、テンプレートにちょっとした魔法が散りばめられています。 Laravel Livewireコンポーネント(基本的に、ステートを持つコントローラと、DOMの更新を指示するAPIメソッドの組み込みセット)に従ってJavaScriptをレンダリングします。これにより、コードをシンプルに保ちながら、ページがユーザーの入力にリアルタイムで反応できるようになります。このキットには TailwindCSSも含まれています。 FLUX UIコンポーネントライブラリも含まれています。

フロントエンドのコードのほとんどは resources/viewsにあり、Livewireコンポーネントのバックエンドロジックは app/Livewire.再利用可能なBladeコンポーネント、Fluxコンポーネント、ページ固有のLivewireコンポーネント、パーシャルコンポーネントが整理されているので、簡単に修正や拡張ができます。

レイアウトとバリエーション

Livewireスターターキットには、サイドバー（デフォルト）とヘッダーという2つのメインレイアウトが付属しています。で使用されているBladeコンポーネントを更新することで切り替えることができます。 resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

認証ページ（ログイン、登録、パスワードリセット）には、シンプル、カード、分割の3つのレイアウトオプションもあります。のBladeコンポーネントを変更するだけで切り替えることができます。 resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

ReactやVueのように、Livewireの再利用可能なコンポーネントとモジュール化されたレイアウトは、ページを一から書き直すことなく、さまざまな外観を簡単に試すことができます。

結論

Laravel 12スターターキットは、どのフロントエンドを選択しても、しっかりとした基礎を提供します。Reactは完全なシングルページアプリに理想的で、Vueは柔軟で初心者に優しく、Livewireは動的でリアクティブなインターフェイスをサポートしながらも、物事のほとんどをPHPとBladeに保ちます。3つのキットにはすべて、再利用可能なコンポーネント、モジュール化されたレイアウト、組み込みのスタイリングが含まれており、ページを書き直すことなく簡単にデザインを試すことができる。本当に 本当にフロントエンドのコードを書くのが本当に嫌で、Livewireを選んだ人には、Laravel Echoを追加することもできます。 ララベルエコーと Reverbを追加することもできます！

Laravelを始めたばかりなら、初心者に優しいリソースがたくさんあります。Laravelコミュニティメンバーから、彼らのお気に入りの お気に入りのおすすめ.