内容

以下の順番にまとめます。
1. MacへのXAMPP+Laravelインストール
2. ユーザログイン機能の追加
3. MVCとルーティングの説明
4. ユーザリストの表示
5. ユーザリストのペジネーション表示 ←いまここ
6. ユーザ管理APIの追加
7. Vue.jsとAPIベースのユーザ管理アプリの追加準備
8. Vue.jsとAPIベースのユーザ管理アプリの追加
9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加
10. APIへのJWTAuth認証の追加
11. Vue.jsとAPIベースのユーザ管理アプリへの認証の追加

5. ユーザリストのペジネーション表示

たくさんのユーザが登録されるとリスト表示する場合に表がページからはみ出してしまいます。そのような場合、１ページに表示するユーザ数に上限を設けて、次へと前へといったボタンと一緒にページ送りの機能があると便利です。この機能をペジネーションと呼びます。

ペジネーションの実装はそこそこ複雑で開発者泣かせなのですが、Laravelにはペジネーションを簡単に実装できる機能があらかじめ備わっています。

まずは、「app/Http/Controllers/HomeController.php」のindex関数を編集します。

...
class HomeController extends Controller
{
...
    public function index()
    {
        $users = User::paginate(1); // ←修正
        return view('home', ['users' => $users]);
    }

paginate関数の引数の数字（ここでは1）は、１ページに表示するユーザ数に上限を表します。通常はブラウザの下限に達する程度のもう少し大きめの数字になると思いますが、ここではペジネーションのテストを容易にするために、1行表示したら次へボタンが表示されるように設定しています。

次に「resources/views/home.blade.php」を編集し、テーブルの後に「{{ $users->links() }}」を追記します。

...
<table class="table table-striped table-bordered">
  <tr>
    <th>ID</th>
    <th>NAME</th>
  </tr>
  <tr>
  @foreach($users as $user)
    <td>{{ $user->id }}</td>
    <td>{{ $user->name }}</td>
  @endforeach
  </tr>
</table>
{{ $users->links() }} <!--追加-->
...

それでは「php artisan serve」を実行して、http://localhost:8000 にアクセスしてみましょう。ログインページからログインを行うと下図のようにペジネーションが表示されます。

表には「paginate(1)」と設定したとおり１ページに１行のみ表示されます。また、表下のペジネーションで２ページを選択すると下図のとおりページが遷移します。

ペジネーションのデザインはbootstrapを利用していますがCSSでカスタマイズが可能です。

以上、「5. ユーザリストのペジネーション表示」が完了です。旧来型のHTML/CSSベースのWebアプリケーションが簡単に作れることがわかったと思います。

次からは、Vue.jsというJavaScriptベースのシングルページアプリケーション構築ライブラリとREST APIの組み合わせのWebアプリケーションを開発します。まずは「6. ユーザ管理APIの追加」を行います。