初めてのLaraval ③。ビューの使い方

Laravel
初めてのLaraval ③。ビューの使い方
この記事はこんな悩みを解決します
  • Laravelのビューの使い方が知りたい
  • Laravelに用意された便利な機能が知りたい
  • 基本をもう一度復習したい

Laravelには blade と呼ばれるというテンプレートが用意されています。ファイルの拡張子を .blade.php とすることで blade が使えます。blade には様々な便利な機能があるので覚えておきたいところです。

この記事を読む事で基本的な blade の使い方がわかります。

初めてのLaravel ②。データベースの使い方

初めてのLaraval ③。ビューの使い方

blade で一番使うのは継承機能だと思います。継承する事で同じことを何度も書く事が無くなります。

継承

親ファイルのデータを引き継いで子ファイルを作る事が出来ます。
例えば以前作った hi.blade.php を見てみましょう。

<!doctype thml>
<html lang="ja">

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hi</title>
</head>

<body>
	<div class="container">
		<h1>hi</h1>
		<p> {{ $comment->comment }} </p>　//TrainingControllerのshowメソッドからデータを受け取っています
	</div>
</body>

</html>

コントローラーはこんな感じです。

class TrainingController extends Controller
{
    public function show($post){
    	$comment = \DB::table('comment')->where('id', $post)->first();

    	return view('hi', [
    	'comment' => $comment
    ]);
    }
}

このファイルを継承を使って書くと下記のようになります。（親の layout.blade.php と子の hi.blade.php に分けています。）

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comment</title>
</head>
<body>
	<div class="container">
		<h1>hi</h1>
		@yield('content')　//ここにhi.blade.phpだけの内容を書いていきます
	</div>
</body>
</html>
@extends ('layout')

@section('content')
	<p> {{ $comment->comment }} </p> //TrainingControllerのshowメソッドからデータを受け取っています
@endsection

layout.blade.php に共通となる部分を書くことで hi.blade.php に書く情報が大幅に減ってますね。

こっちの方がコードがすっきりとしてます。
実際にアクセスして見ます。

予想通りの結果になっています。

ルーティングの使い方

継承の次によく使うのがルーティングだと思います。
aタグなどで href を設定する際などに使います。

href="/index/{{test->id}}"
href="{{ url('/index', $test->id) }}"
href="{{ action('Controller@show', $test->id) }}"
//web.phpでRoute::get('/index/{id}', 'CategoryController@show');のような記述が必要

この３つは全て同じことを意味しています。
どれを使うかは好みかと思います。好きなものや状況に応じてわかりやすいものを使いましょう。

制御構文の使い方

よく使う制御構文としてforeachとforelseがあります。これも使うときが多い構文の１つです。
まずはそれぞれの使い方について見ていきましょう。

foreachの使い方

foreachを使うことで全てのコメントを取り出すことが簡単に出来ます。

まずはcommentテーブルから全てのコメントを取るようにTrainingControllerを編集します。

class TrainingController extends Controller
{
    public function show(){
    	$comments = \DB::table('comment')->get();　//コメントテーブルの全てを取り出してます。

    	return view('hi', [
    	'comments' => $comments
    ]);
    }
}

ビューはforeachを使ってそれぞれのコメントを取り出すようにしています。

@extends ('layout')

@section('content')
	<ul>
		@foreach($comments as $comment)　//コメントを$commentとして１つずつ取り出してます。
		<li><a href="">{{ $comment->comment }}</a></li>　//$commentのcommentカラムを取り出してます。
		@endforeach
	</ul>
@endsection

ルーティングもワイルドカードを使う必要がなくなったので変えました。

// Route::get('/hi/{post}', 'TrainingController@show');
Route::get('/hi', 'TrainingController@show');

実際にアクセスしてみます。

予想通りの結果になっています。

forelseの使い方

foreachはデータが何もない時に何も表示されません。そんな時はforelseを使って@emptyに何も無い時の処理を書いていきます。

まずはコントローラーを編集します。

class TrainingController extends Controller
{
    public function show(){
      // $comments = \DB::table('comment')->get();
    	$comments = [];　//空の配列を渡します。

    	return view('hi', [
    	'comments' => $comments
    ]);
    }
}

ビューをforelseを使って書き直します。

@extends ('layout')

@section('content')
	<ul>
		{{-- @foreach($comments as $comment)
		<li><a href="">{{ $comment->comment }}</a></li>
		@endforeach --}}
　　//{{-- --}}でコメントアウトの意味になります。

		@forelse($comments as $comment)
		<li><a href="">{{ $comment->comment }}</a></li>
		@empty
		<p>コメントはありません</p>　//配列に何も無い時の処理
		@endforelse
	</ul>
@endsection

では確認して見ます。

予想通りの結果になっています。

その他の制御構文

他にもPHPのように使う事ができる制御構文があります。シンプルな構文なので簡単に使えるようになると思います。

@if (条件１)
    //条件１が成り立つ場合の処理
@elseif (条件２)
    //条件２が成り立つ場合の処理
@else
    //それ以外の場合の処理
@endif
@for ($i = 0; $i < 10; $i++)
    現在の値は： {{ $i }}
@endfor
@switch($i)
    @case(1)
        最初のケース
        @break

    @case(2)
        ２番めのケース
        @break

    @default
        デフォルトのケース
@endswitch

どれもPHPのように使う事ができます。
こんなのもあるんだな、ぐらいに覚えておきましょう。

コンポーネントとスロットの使い方

同じ要素を何度も使い回したい、という時もあると思います。
そういった時にスロットを作っておいてコンポーネントとして取り出すと便利です。

例えば、alert.blade.php に下記のように書きます。

<div class="alert-danger">
    <div class="title">{{ $title }}</div>
    <div class="message">
        {{ $slot }}
    </div>
</div>

これを@componentを使って取り出します。

@component('alert')　//取り出すファイルの名前
	@slot('title')　
		アラートタイトル　//{{ $title }}に入る文字列
	@endslot
	    <strong>エラー！</strong> 確認してください!　//{{ $slot }}に入る文字列
@endcomponent

HTMLを見てみると下記のようになっています。

<div class="alert-danger">
    <div class="title">アラートタイトル</div>
    <div class="message">
        <strong>エラー！</strong> 確認してください!
    </div>
</div>

予想通りになっていますね。

スタイルを整える

スタイルを決めるCSSファイルですが、public の css フォルダに作ります。

─── training
    ├── public 
        ├── css

今回はstyles.css を作ったとします。
これをlayout.blade.php で読み込みます。

<link rel="stylesheet" href="/css/styles.css">

これでスタイルが変更できます。

sassを使う方法

他にもsassを使ってcssファイルを作る方法もあります。
sass のapp.scss にコードを書いてコンパイルします。

─── training
    ├── resources
        ├── sass
　　　　　　　├── app.scss

webpack.mix.js を見てみると下記のようになっています。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

リソースのsass/app.scss を public/css にコンパイルするという事が書かれています。

コンパイルするにはTerminalで下記のコマンドを使います。

npm -v　//インストールしているバージョンの確認
npm install　//インストールされてない場合はインストール
npm run dev　//コンパイルの実行

これで public のなかに app.css ができていると思います。

まとめ

今回はビューの基本的な使い方を紹介しました。

一先ずこれらの機能が使えれば困ることは無いでしょう。他にも様々な機能があるので必要に応じて調べて使うようにしましょう。

関連記事