viewとblade

フレームワークでは、MVCの「V」にあたる「view」の説明です。
前項でコントローラのお話をしましたが、コントローラからhtmlファイルなどのレイアウトファイルの出力もできます。ただLaravelでは、もっと便利なレイアウトファイルで「blade」というレイアウトファイルがあるので通常はそれを使います。
「blade」ファイルを使うことでコントローラからから受け取った値をレイアウトファイルで便利に扱えるようになるのでよりシステマチックな処理を実現します。

レイアウトファイル（blade）の作成

LaravelでBladeファイルは、作る場所が決まっています。
「resources」ディレクトリの中の「views」の中に作成します。
ファイルが多い場合は、この中にサブディレクトリを作成して整理します。
前項でコントローラに「index」メソッドを作成したのでそれに対応するレイアウトファイルを作成しましょう。

今回は、viewsディレクトリの中にUserControllerに対応するレイアウト用のサブディレクトリを作成しましょう。
resources/views/user の中に「index.blade.php」を作成します。
空のファイルが出来ましたので以下のhtmlソースを記述します（普通のHTMLソースです）。

<!DOCTYPE html>
<html lang="ja">
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>index</title>
</head>
<body>
   <h1>インデックス</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

<h1>インデックス</h1>

</body>

</html>

レイアウトファイル（blade）の呼び出し

bladeファイルをコントローラから呼び出して出力します。
（前項で作成したコントローラファイルのindexメソッドの内容を以下に変更）

public function index(Request $request)
{
   return view('user.index');
}

public function index(Request $request)

{

return view('user.index');

}

以下のURLにアクセスすると作成したBladeがブラウザの画面に表示されます。
http://localhost:8000/user

ここでは、Laravelのviewメソッドをリターンしてます。
引数に作成したbladeファイルを指定していますが「blade.php」という文字列は省略します。
引数の「user」がディレクトリ名を「.」で区切り、ファイル名「index」を指定しています。
難しいことは、考える必要はありません。
こう書けばレイアウトファイルが出力されます。

レイアウトファイルへの値渡し

今度はコントローラーで保持している値をレイアウトファイル（index.blade.php）で出力できるようにしましょう。
先ほど出力する際に以下のようにして出力しました。
このviewメソッドの第1引数に配列（連想配列）を指定することで第1引数のBladeファイルで扱えます。

UserController.php

$data['msg'=>'こんにちは','name'=>'山田太郎'];

return view('user.index',$data);

$data['msg'=>'こんにちは','name'=>'山田太郎'];

return view('user.index',$data);

bladeファイルでは、第2引数のデータを出力します。
bladeで変数を出力する際は、二重波カッコで囲みます。
{{ 変数 }}

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>index</title>
</head>
<body>
   <h1>インデックス</h1>
   <p>{{ $msg }}</p>
   <p>私は、{{ $name }}です。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

<h1>インデックス</h1>

</body>

</html>

PHPで出力する時みたいに「echo」や「print」は不要です。
bladeファイルでは、「二重波カッコ」です。
さらにこの中では関数や制御文も動かせます。色々と試してみましょう。

外部ファイルの読み込み

ブレードファイルでブラウザ出力まで出来るようになりました。
画面を整えて表示するためにはCSSを使います。また画像を表示したりJavaScriptも使ってリッチなコンテンツも追加したいですよね。
bladeでもHTML同様にヘッダー部分にリンクを記述することができます。
Laravelの起点は、「Public」ディレクトリなので、この中にリンクファイルを配置することで読み込みが出来ます。
とりあえず「assets」ディレクトリを作成してその中に「images」、「css」「js」ディレクトリも作成しましょう。
publicディレクトリが起点なのでリンクのパスは以下のようになります。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/assets/css/style.css">
   <script src="/assets/js/app.js"></script>
   <title>index</title>
</head>
<body>
   <img src="/assets/images/ph.png" >

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

もう一つの記述方法も説明しておきます。

<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">

1	<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">

アセット関数を使用することでもpublicディレクトリのファイルを読み込めます。

Laravelでは、モジュールを読み込む必要もなくどこからでも利用できる便利な関数が多数用意されてます。
今回のasset関数は、ヘルパ関数とも呼ばれています。

「Laravel」の一覧を表示する