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 によるコメント掲示板の開発

ページネーションを作る

コメントの件数が増加したときには，すべてのコメントを一度に表示することは考えられず，例えば10件ごとにページを分けて表示するというページネーションの機能が必須になります．Laravel ではこのページネーションを非常に簡単に実装することができます．

ページネーションで5件の結果だけを取得するには，コントローラにおいてこれまで get() で全件を取得していたところで paginate(5) と指定するだけです．これだけで，5件に限定するだけでなく，ページの切り替えなどもにもすでに実現できています．

app/HTTP/Controllers/CommentsController.php（抜粋）public function index()
{
    $comments = Comment::paginate(5);
    return view('comments.index')
            ->with('comments', $comments);
}

これにより先頭の5件のデータだけが表示されるようになりました．

次に，ページの切り替えのためのリンクを設置します．これも非常に簡単で，viewに {{ $comments->links() }} を追加するだけです．

resources/views/comments/index.blade.php（抜粋）<h1 class="my-5">コメント一覧</h1>
<div>
    {{ $comments->links() }}
</div>
@foreach ($comments as $comment)
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <a href="{{ route('comments.show', ['comment_id' => $comment->id]) }}">
                    {{ $comment->title }}
                </a>
            </h5>
            <p class="card-text">{{ $comment->body }}</p>
        </div>
    </div>
@endforeach

しかしながら，ページ切り替えのボタンのデザインが崩れてしまいます．

これは，Laravel 10 では標準のスタイルシートのセットが Tailwind CSS であるのに対して，今は Bootstrap を利用していることが原因です．全体を Tailwind CSS に切り替える方法もありますが，ここでは，app/Providers/AppServiceProvider.php を修正して，Bootstrap に対応させるようにします．まず，app/Providers/AppServiceProvider.php は次のような内容になっているはずです．

app/Providers/AppServiceProvider.php<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //
    }
}

これを次のように書き換えます．

app/Providers/AppServiceProvider.php<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Paginator::useBootstrap();
    }
}

この設定でページ切り替えのためのボタンのデザインが美しく整えられました．

2ページ目に移動した状態です．

最後の20ページ目にも移動できます．このとき，次のページへ移動するボタンが自動的に無効化されていることにも注意してください．

目次に戻る

---