フロントエンド
- リクエストのライフサイクル
- 設定
- ディレクトリ構成
- フロントエンド
- サービスコンテナ
- ファサード
イントロダクション
Laravelは、ルーティング、バリデーション、キャッシュ, キュー, ファイルストレージなど、最新のウェブアプリケーション構築に必要となる全ての機能が提供されているバックエンド・フレームワークです。しかし、私たちはアプリケーションのフロントエンドを構築するための強力なアプローチを含む、美しいフルスタック体験を開発者に提供することも重要であると考えています。
Laravelでアプリケーションを構築する場合、フロントエンドの開発には主に２つの方法があります。どちらの方法を選択するかは、PHPを活用してフロントエンドを構築するか、VueやReactなどのJavaScriptフレームワークを使用するかにより決まります。以下では、こうした選択肢について説明し、あなたのアプリケーションに最適なフロントエンド開発のアプローチの情報を十分に得た上で、決定してもらえるようにします。
PHPでの開発というとバックエンド側に目がいきがちですが、ここではフロントエンド側にフォーカスしているようです。
１．PHPを使う
以前、ほとんどのPHPアプリケーションでは、リクエスト時にデータベースから取得したデータを表示するため、PHPのecho文を散りばめた単純なHTMLテンプレートを使用し、ブラウザでHTMLをレンダしていました。このHTML表示の手法を使う場合、LaravelではビューとBladeを使用して実現できます。Bladeは非常に軽量なテンプレート言語で、データの表示や反復処理などに便利な、短い構文を提供しています。
ビュー
resources/viewsディレクトリに格納されます。resources/viewsディレクトリ内に保存するようです。<!-- View stored in resources/views/greeting.blade.php -->
<html>
<body>
<h1>Hello, {{ $name }}</h1>
</body>
</html>
PHPの便利なツールで、機能を記述する部分と画面の表示部分を分割する事が出来ます。
テンプレートエンジンとは、「機能を記述する内容（PHP）」と「画面の表示内容（HTML＆CSSなど）」を分けて管理できるツールです。HTMLの中に埋め込められるPHPは、初心者にも扱いやすいのが大きなメリットですが、PHPとHTMLが混在したファイルは、2つのルールが一緒に書かれているので読み取りにくいのが難点でした。修正を行う場合はページ数が多いほど膨大な時間がかかり、保守やメンテナンスが行き届きません。
そんな状況を回避するために、テンプレートエンジンは誕生しました。処理内容と表示内容を分けて作成できます。
PHPでは、HTMLページ内に<?php ?>タグで括る事によって、 HTML（デザイン部分）とプログラム（ロジック部分）を同一ページに記述できます。しかし、同じファイル内にデザイン部分とロジック部分を記述するとメンテナンスが非常に困難となります。とてもシンプルなデータの埋め込み（変数を<h1>タグで囲って表示するだけ）ならいざ知らず、ループで一覧を表示したり、画面遷移やステータスによっては表示するものを変えたりロジックというか処理を書かないといけない気がします。
PHP では、Template Engineという技術によってデザイン部分とロジック部分を分離させメンテナンスを向上させることができるようになりました。
- ビュー：結果表示だけ、デザイナーの担当
- モデル（ビジネスロジック）：プログラマーの担当
この方法でアプリケーションを構築する場合、フォーム送信や他のページへの操作は、通常サーバから全く新しいHTMLドキュメントを受け取り、ページ全体をブラウザで再レンダします。現在でも多くのアプリケーションは、シンプルなBladeテンプレートを使い、この方法でフロントエンドを構築するのが、最も適していると思われます。なるほど、昔ながらのHttpRequestに対してページ全体をブラウザ側で再描画するってことですね。
高まる期待
しかし、Webアプリケーションに対するユーザーの期待値が高まるにつれ、多くの開発者がよりダイナミックなフロントエンドを構築し、洗練した操作性を感じてもらう必要性を感じてきています。そのため、VueやReactといったJavaScriptフレームワークを用いた、アプリケーションのフロントエンド構築を選択する開発者もいます。
一方で、自分が使い慣れたバックエンド言語にこだわる人たちは、そのバックエンド言語を主に利用しながら、最新のWebアプリケーションUIの構築を可能にするソリューションを開発しました。たとえば、Rails のエコシステムでは、Turbo や[Hotwire]、Stimulus などのライブラリ作成が勢いづいています。
Laravelのエコシステムでは、主にPHPを使い、モダンでダイナミックなフロントエンドを作りたいというニーズから、Laravel LivewireとAlpine.jsが生まれました。
Laravelに慣れていない方は、ビューとBladeの基本的な使い方に、まず慣れることをお勧めします。その後、公式のLaravel Livewireドキュメントを参照し、インタラクティブなLivewireコンポーネントでアプリケーションを次のレベルに引き上げる方法を学んでください。ということでまずは従来通りの開発の方法を学ぶことにします。
２．VueやReactを使う
LaravelやLivewireを使用してモダンなフロントエンドを構築することは可能ですが、多くの開発者はVueやReactなどのJavaScriptフレームワークのパワーを活用することをまだ好んでいます。このため、開発者はNPMを使い、利用可能なJavaScriptパッケージやツールの豊富なエコシステムを活用できます。
しかし、LaravelとVueやReactを組み合わせるには、クライアントサイドのルーティング、データハイドレーション、認証など、様々な複雑な問題を解決する必要があり、追加のツールがなければLaravelを使うことはできません。クライアントサイドのルーティングは、NuxtやNextなど主義的なVue／Reactフレームワークを取り入れて簡素化されていることが多いですが、Laravelなどのバックエンドフレームワークとこれらのフレームワークを組み合わせる場合、データのハイドレートと認証で、複雑で面倒な問題が残ります。
さらに、開発者は２つの別々のコードリポジトリを管理することになり、しばしばメンテナンス、リリース、デプロイメントを両方のリポジトリにまたがって調整する必要が起きます。こうした問題は克服できないものではありませんが、アプリケーションを開発する上で、生産的で楽しい方法とは思えません。
Inertia
幸運にも、Laravelは両方の世界の最良を提供しています。Inertiaは、LaravelアプリケーションとモダンなVueまたはReactフロントエンドの間のギャップを埋めるもので、VueやReactを使って本格的でモダンなフロントエンドを構築しながら、ルーティング、データハイドレート、認証にLaravelルートとコントローラを活用できます。すべて単一のコードリポジトリ内で行えます。このアプローチではどちらのツールの能力も損なうことなく、LaravelとVue／Reactの両能力を享受することができます。
また新しい機能が出てきました。
アセットの結合
BladeとLivewire、Vue／ReactとInertiaのどちらを使用してフロントエンドを開発するにしても、アプリケーションのCSSをプロダクション用アセットへバンドルする必要があるでしょう。もちろん、VueやReactでアプリケーションのフロントエンドを構築することを選択した場合は、コンポーネントをブラウザ用JavaScriptアセットへバンドルする必要があります。
Laravelは、デフォルトでViteを利用してアセットをバンドルします。Viteは、ローカル開発において、ビルドが非常に速く、ほぼ瞬時のホットモジュール交換（HMR）を提供しています。
今度はViteですか、これも知らないですね。
とりあえずメモっておいて、後で時間があったらキャッチアップすることにします。
0 件のコメント:
コメントを投稿