皆さん、こんにちは。最近、腰を気にしてそこそこ良い座椅子の購入を検討しているt-odaです。

さて前回の最後で簡単なビューファイルを作成しました。そして、{{ }}を使ってビューに値を渡すこともしました。今回の目標はビューの作成とBladeディレクティブの理解です。裏側の処理ではなくフロントエンド寄りになりますね。また、Bladeでよく使うディレクティブ(指定子)を先に紹介します。これを覚えておけば作業効率は格段に向上します。

  • @include:外部のBladeファイルを読み込む
  • @extends:継承するビューを指定する
  • @section:コンテンツのセクションを表す
  • @endsection(@stop):セクションの終わりを表す
  • @yield:@sectionのセクションを表示
  • @asset:cssや、javascript等のファイルを読み込む
  • @if ():PHPのifと同じように使用する
  • @foreach ():PHPのforeachと同じように使用する

レイアウト

ビューファイルを作る前にレイアウトを考えましょう。前回作ったファイルは記述量が少ないので、DOCTYPE宣言してHEADタグを書いてBODYタグを書いて・・・、としましたが、画面数が多くなったりアプリケーションの規模が大きくなった場合いちいち同じことを書いていては効率が悪いです。また、たいていのアプリケーションにおいて複数の画面間で共通する部分がでてきます。下記で示した部分が多くの画面で共通しているのは、簡単にイメージできますね!

  • ヘッダー
  • フッター
  • ナビゲーションバー
  • サイドバー
  • エラー表示部分
  • etc...

これらのファイルは複数のビューで同じように記述するよりも、外部ファイルとして読み込んだほうが可読性や保守性の向上につながります。 そこで、今回のアプリケーションのHTML構造で共通している部分はどこか考えてみましょう(まぁ、今回は画面がひとつしかないので例としては悪いですが)。今回はエラー表示の部分が共通していますので外部ファイルとして読み込んだほうがよさそうです。画面がひとつしかないのd(ry...

また、DOCTYPE宣言やHEADタグの部分は、大枠のレイアウト(親ファイル)として記述し、各画面(子ファイル)で継承したほうがいいですね。これは僕がよく利用する方法なので正解があるとは言えません。各自でビューの設計を考えて一番しっくりくる設計を採用すればいいと思います。ただ、特定の画面でしか使わないようなcssやjsのファイルの読み込みまで記述してしまうのは無駄ですね。その時は、レイアウトとなるファイルに@yield('css')のように定義し、各画面で追加したいcssファイルを@section('css')に記述すれば無駄がなくなると思います。

話が逸れましたが今回で作るビューファイルは以下の通りです。

  • レイアウト(親):layouts/master.blade.php
  • コンテンツ(子):tasks.blade.php
  • エラーのビュー(外部ファイル):common/errors.blade.php

基本的にレイアウト(親)を継承したコンテンツ(子)ごとにビューを作っていくという設計になります。従って別の画面があっても同じレイアウトを継承すれば同じcssやjavascriptを適用することができます。

ビュー

では実際に上記の3つのビューファイルを作成しましょう。まずはレイアウトからです。またcssのフレームワークであるBootstrapを利用します。BootstrapはCDNで利用します。CDNは「Contents Delivery Network」の略で、簡単に言うとネットワーク経由でBootstrapやjQueryが使えるようになるってことですね。僕はよく利用しています。なぜなら、楽したいから!自分のサーバーにファイルを置かなくてもコードを1行増やせば使えるんで楽ですよね!

僕はcssを自分で作り上げられるほどの力はない(一から作るのは面倒くさい)のでBootstrapやMaterialyzeCSSに頼ってますね。そのうちMaterialyzeCSSについては記事にしたいと思ってます。Google is great !!!

layouts/master.blade.php:レイアウト(親)

tasks.blade.php:コンテンツ画面(子)

common/errors.blade.php:エラー画面(コンテンツ画面で利用)

さて各ファイルをみていきましょう。レイアウトは共通の部分しかないのでそこまで深く見なくてもよさそうですね。しいて言うならbootstrapのcssとjsはCDNを利用しているということでしょうか。

ではメインとなるtasks.blade.phpを見ましょう。 まず親のビューを継承するために@extendsディレクティブを利用します。またディレクトリは.(ドット)で区切って表現します。

次にこの画面で表示したい内容を@sectionの中に記述していきます。終わりは@endsectionでも@stopでもどちらでもいいです。そして中身ですがとても簡単なフォームになってます。大きく分けてエラー表示とフォームですね。エラー表示は再利用できるため外部ファイルにしてます。フォームはformタグがあるのでわかりやすいと思います。

ここで重要なことがひとつあります。それはCSRF対策としてトークンを隠すことです。ビューを見ればわかりますが{{ csrf_field() }}でそのトークンを生成しています。formタグのmethod属性がGET以外の時は必ず埋め込みましょう。

詳しいことは 別の記事で紹介しようと思います。簡単に言うと、リクエストを送信してるのってほんとに本人なんですかー?ってことを確認しています。あとは同じフォームの構造ですね。最後に現在のタスクを表示してます。ifやforeachはPHPと同じように使えるので戸惑うことはないと思います。

次で最後のビューですがerrors.blade.phpを見ましょう。ここではただ単純にバリデーションエラーが あったときはエラー内容を$errorsで表示できるようにしています。バリデーションは妥当性って訳されることが多いですね。記述・入力されたデータがあらかじめ規定された条件や仕様、形式などに適合しているかどうかを検証するということです。

例えば、ユーザー登録する時にユーザー名は必ず入力しないといけないのに空だと登録のしようがないですね。”あらかじめ規定された条件”は空じゃないって条件なのに”記述・入力されたデータ”は空だから条件に適合してません。だからエラーを表示して正しい条件のデータを入力するように誘導するのです。エラー処理は次回で解説します。

さて全てのビューが揃いました!ビルトインサーバーを起ち上げてlocalhost:8000/tasksにアクセスしてみましょう!

エラーがなければタスクの名前を入力する欄と追加ボタンが表示されていると思います!画面が少ないとやっぱりビューの継承などはそこまで効果を発揮しませんが、画面数が多くなるとその良さがわかるようになります!

次回は、登録処理とバリデーションとエラー処理についてです。