Laravel によるコメント掲示板の開発

ビューを使ってレコードを表示する

コントローラでデータベースのテーブルから全てのレコードを取り出すことができたので，この結果をビューに渡して実際にブラウザに一覧で表示してみよう．ビューはユーザに対して情報を出力する役割を担当します．

では，実際にコントローラからビューにデータを渡すように CommentsController.php を編集します．index 関数では $comments オブジェクトに全てのレコードが格納されているので，comments.index というビューに comments パラメータを渡します．具体的には次のように記載します．なお，comments.index とは，resources/views/comments ディレクトリにある index.blade.php を呼び出すという意味であることに注意してください．またパラメータは with を使ってビューに渡します．

app/HTTP/Controllers/CommentsController.php（抜粋）
    public function index()
    {
        $comments = Comment::get();    // SELECT * FROM comments; のイメージ
        return view('comments.index')
                ->with('comments', $comments);
    }

ビューは resources/views ディレクトリに保存されています．Laravel では独自の Blade テンプレートエンジンを利用することができます．Blade を利用するためには，ファイル名を「ビュー名.blade.php」とします．上では，comments.index と指定したことから，resources/views ディレクトリに comments サブディレクトリを作成し，index.blade.php ファイルを次のように作成します．

resources/views/comments/index.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>コメント一覧</title>
</head>
<body>
    <h1>コメント一覧</h1>
</body>
</html>

Web サーバを起動して，トップページ /comments にアクセスしてみます．（Web サーバを終了するには Ctrl + C を押下してください）

vagrant@ubuntu2204 comment_app $ php artisan serve --host=192.168.56.101 --port=8000 ⏎

   INFO  Server running on [http://192.168.56.101:8000].

  Press Ctrl+C to stop the server

ビューではまだコントローラから渡された情報を利用していません．見出しだけが表示されました．

では，コントローラから受け取った情報をビューで表示してみます．渡されたパラメータは Comment クラスの配列形式になっているはずなので，@foreach を使って順番に取り出してタイトルだけを箇条書きで表示してみます．このために，index.blade.php を次のように編集します．Blade では変数の中身を表示するために {{ }} を用います．この方法で出力される内容は XSS（クロスサイトスクリプティング）攻撃を防ぐためにタグの記号などがエスケープされるため，安心して利用できます．

resources/views/comments/index.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>コメント一覧</title>
</head>
<body>
    <h1>コメント一覧</h1>
    <ul>
        @foreach ($comments as $comment)
            <li>{{ $comment->title }}</li>
        @endforeach
    </ul>
</body>
</html>

Web サーバを起動して，トップページ /comments にアクセスしてみます．（Web サーバを終了するには Ctrl + C を押下してください）

vagrant@ubuntu2204 comment_app $ php artisan serve --host=192.168.56.101 --port=8000 ⏎

   INFO  Server running on [http://192.168.56.101:8000].

  Press Ctrl+C to stop the server

コメントのタイトルが一覧で表示されることが確認できました．また，出力された HTML ソースも確認してください．{{ $comment->title }} で出力された HTML ソースは，12行目のようにタグ記号が自動的にエスケープされています．

目次に戻る

« 戻る次へ »