Laravel 10 入門トップページ


目次

  1. プロジェクトを作成する
  2. データベースファイルを作成する
  3. Visual Studio Code を設定する
  4. .env を編集して初期設定する
  5. タイムゾーンと言語を設定する
  6. Webサーバを起動して終了する
  7. マイグレーションファイルを生成する
  8. テスト用データを設定する
  9. モデルを作成する
  10. コントローラを作成する
  11. ルートを定義する
  12. データベースからデータを取り出す
  13. トップページにリンクを設置する
  14. ビューを使ってレコードを表示する
  15. コメントを個別に表示するページを作成する
  16. コメント投稿機能を実装する
  17. 投稿内容を検証する
  18. 投稿内容を編集する
  19. 投稿コメントを削除する
  20. テストの自動化を実現する
  21. テストカバレッジを計測する
  22. 複数のLinuxコマンドを実行し,履歴からも実行する
  23. ビューをレイアウト化する
  24. Bootstrap を導入する
  25. SQLite を操作する
  26. フェイカでシーダを拡張する
  27. ページネーションを作る
  28. シーダに登録日時と更新日時を追加する
  29. 一覧表示を更新日時の降順にする
  30. フラッシュメッセージを表示する
  31. スタイルシートでデザインを整える

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

フラッシュメッセージを表示する

ここではフラッシュメッセージを表示する機能を実装します.投稿や編集が成功したときに成功したという情報表示されたり,エラーが起こったときにはそのエラーの内容が表示されたりする機能がフラッシュメッセージです.

すでにビューのレイアウト化ができているので,default.blade.php にフラッシュメッセージの要素を配置するだけで,すべてのページでフラッシュメッセージを表示できるようになります.次のように,フラッシュメッセージを実現するには HTTP のセッションを利用します.セッション情報の中に flash_message というキーで何らかのデータが保存されていたらその内容を表示するというコードです.

resources/views/layouts/default.blade.php
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
    @if (session('flash_message'))
        <div>
            {{ session('flash_message') }}
        </div>
    @endif
    @yield('content')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

例えば,コメントの更新が完了したときに「更新しました」というメッセージをセッションに格納するコードを追加します.

app/HTTP/Controllers/CommentsController.php(抜粋)
public function update(Request $request)
{
    $this->validate($request, [
        'title' => 'required|max:10',  // 入力が必須で,最大10文字
        'body' => 'required'           // 入力が必須
    ]);
    $comment = Comment::where('id', '=', $request->comment_id)
                ->first();
    if (!$comment) {
        return redirect('/comments');
    }
    $comment->title = $request->title;
    $comment->body = $request->body;
    $comment->save();
    return redirect()->route('comments.show', ['comment_id' => $comment->id])
            ->with('flash_message', '更新しました');
}

実際に更新作業を行うと,画面の上部にフラッシュメッセージが表示されました.

laravel10-2023-comment-61.png

同様に,新規投稿などの成功や,個別表示等のエラー発生について,適宜フラッシュメッセージを設定すると良いでしょう.

app/HTTP/Controllers/CommentsController.php(抜粋)
class CommentsController extends Controller
{
    public function index()
    {
        $comments = Comment::orderBy('updated_at', 'DESC')
                ->paginate(5);
        return view('comments.index')
                ->with('comments', $comments);
    }

    public function show($comment_id)
    {
        // SELECT * FROM comments WHERE id = 2;  のイメージ
        $comment = Comment::where('id', '=', $comment_id)
                    ->first();
        if (!$comment) {
            return redirect('/comments')
                    ->with('flash_message', 'コメントが見つかりません');
        }
        return view('comments.show')
                    ->with('comment', $comment);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|max:10',  // 入力が必須で,最大10文字
            'body' => 'required'           // 入力が必須
        ]);

        $comment = new Comment();    // インスタンスを生成する
        $comment->title = $request->title; // タイトルをセット
        $comment->body = $request->body;   // 本文をセット
        $comment->save();                  // データベースに登録
        return redirect('/comments')       // リダイレクト
                        ->with('flash_message', '投稿しました');
    }

    public function edit($comment_id)
    {
        $comment = Comment::where('id', '=', $comment_id)
                    ->first();
        if (!$comment) {
            return redirect('/comments')
                    ->with('flash_message', 'コメントが見つかりません');
        }
        return view('comments.edit')  // show 関数との違いはここだけ
                    ->with('comment', $comment);
    }

    public function update(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|max:10',  // 入力が必須で,最大10文字
            'body' => 'required'           // 入力が必須
        ]);
        $comment = Comment::where('id', '=', $request->comment_id)
                    ->first();
        if (!$comment) {
            return redirect('/comments')
                    ->with('flash_message', 'コメントが見つかりません');
        }
        $comment->title = $request->title;
        $comment->body = $request->body;
        $comment->save();
        return redirect()->route('comments.show', ['comment_id' => $comment->id])
                ->with('flash_message', '更新しました');
    }

    public function destroy($comment_id)
    {
        $comment = Comment::where('id', '=', $comment_id)
                    ->first();
        if (!$comment) {
            return redirect('/comments')
                    ->with('flash_message', 'コメントが見つかりません');
        }
        $comment->delete();
        return redirect('/comments')
                ->with('flash_message', '削除しました');
    }
}

投稿完了時にもメッセージが表示されるようになりました.また,個別表示の URL に存在しない ID を入れるなどした場合にもメッセージが表示されることを確認してください.次のページではフラッシュメッセージのデザインを スタイルシート (CSS) によって整えます.

laravel10-2023-comment-62.png

目次に戻る