Laravel - Views: A Beginner's Guide

こんにちは、未来のLaravel開発者たち！今日は、Laravelの中でも最も楽しい部分之一的Viewsに潜り込みましょう。codingの経験がなくても心配しないでください。私はステップバイステップで説明します。このチュートリアルの最後までに、プロのように美しいウェブページを作成できるようになるでしょう！

Laravel - Views

Viewsとは？

LaravelのViewsは、アプリケーションの美しい顔のようなものです。ユーザーがウェブサイトを訪れたときに実際に見るものを担当しています。ViewsをHTMLテンプレートとして考え、データをユーザーフレンドリーな方法で表示するものと考えてください。

最初のViewを作成する

簡単な例から始めましょう。私たちがウェブサイトのウェルカムページを作成したいとします。以下の手順で行います：

Laravelプロジェクトのresources/viewsディレクトリに移動します。
新しいファイルwelcome.blade.phpを作成します。
以下のコードを追加します：

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

これは基本的なHTML構造で、温かいウェルカムメッセージがあります。.blade.phpという拡張子は、LaravelがテンプレートエンジンであるBladeを使用するように指示しています。Bladeについては後ほど詳しく説明します。

Viewを表示する

Viewを作成したので、誰かがウェブサイトを訪れたときにそれを表示するようにしましょう。routes/web.phpファイルに以下のコードを追加します：

Route::get('/', function () {
return view('welcome');
});

これはLaravelに「誰かがホームページを訪れたとき、'welcome'のViewを表示する」と指示しています。

Viewにデータを渡す

Viewsは素晴らしいですが、データを動的に挿入できるとさらに強力になります。それをどうやるか見てみましょう。

シンプルなデータ渡し

ウェルカムメッセージをパーソナライズしたいとします。以下のようにデータをViewに渡します：

Route::get('/', function () {
$name = "Sarah";
return view('welcome', ['name' => $name]);
});

そして、welcome.blade.phpを以下のように更新します：

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
</body>
</html>

{{ $name }}という構文はBladeがデータをエコーする方法です。ページを訪れると、「Hello, Sarah!」が「Hello, World!」の代わりに表示されます。

複数の変数を渡す

必要なだけ多くの変数を渡すことができます。以下のようにいくつか追加してみましょう：

Route::get('/', function () {
$data = [
'name' => "Sarah",
'age' => 28,
'hobbies' => ['reading', 'coding', 'hiking']
];
return view('welcome', $data);
});

そしてViewを以下のように更新します：

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Site</title>
</head>
<body>
<h1>Hello, {{ $name }}!</h1>
<p>Welcome to my awesome Laravel website.</p>
<p>You are {{ $age }} years old.</p>
<p>Your hobbies are:</p>
<ul>
@foreach($hobbies as $hobby)
<li>{{ $hobby }}</li>
@endforeach
</ul>
</body>
</html>

ここでは、Bladeディレクティブ@foreachを導入して、hobbies配列をループしています。BladeはView内でのデータ操作を非常に簡単にします！

すべてのViewでデータを共有する

時々、アプリケーション内のすべてのViewで特定のデータを共有したい場合があります。例えば、ナビゲーションバーに現在のユーザーの名前を表示したい場合などです。

View Composersを使用する

Laravelはこの目的のためにView Composersという機能を提供しています。以下のように使用します：

新しいファイルapp/Providers/ViewServiceProvider.php（存在しない場合は）を作成します。
以下のコードを追加します：

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;

class ViewServiceProvider extends ServiceProvider
{
public function boot()
{
View::composer('*', function ($view) {
$view->with('currentUser', 'John Doe');
});
}
}

config/app.phpにこのプロバイダを登録します：

'providers' => [
// 他のプロバイダ...
App\Providers\ViewServiceProvider::class,
],

今、$currentUserはすべてのViewで利用可能です！

結論

ViewsはLaravelアプリケーションのユーザーインターフェースの中心です。プレゼンテーションロジックをビジネスロジックから分離することで、コードをクリーンでメンテナンスしやすいものにします。実践が大事ですので、さまざまなレイアウトやデータ渡しの技術を試してみてください！

以下に、カバーしたメソッドの簡単なリファレンス表を示します：

メソッド	説明
`view('name')`	Viewを返します
`view('name', ['key' => 'value'])`	データを含むViewを返します
`View::composer('*', function)`	すべてのViewでデータを共有します

ハッピーコーディング、そしてあなたのViewsが常に素晴らしいものになることを祈っています！ ?

Credits: Image by storyset

前のチュートリアル:

Laravel - 応答

次のチュートリアル:

Laravel - Bladeテンプレート