React 入門

TypeScript コメント掲示板アプリの開発

コメント総数とページ切り替えボタンの表示

ここではデータベースに格納されたコメントの総数を表示し，ページを切り替えるためのボタンを配置します．確認のために再びターミナル（またはコマンドプロンプト）から curl コマンドでコメント一覧をリクエストします．なお，出力結果は確認しやすいように改行・インデントを加えています．

% curl 127.0.0.1:8000/comments/ ⏎
{
  "count":10,
  "next":"http://127.0.0.1:8000/comments/?page=2",
  "previous":null,
  "results":[
    {"id":9,"title":"9個目のコメント","body":"コメントの本文9","updated_at":"2023-11-21T11:20:00"},
    {"id":10,"title":"10個目のコメント","body":"コメントの本文10","updated_at":"2023-11-21T11:10:00"}
  ]
}%

上の結果を見ると，総数は "count" プロパティで取得できることがわかります．また，次のページや前のページを取得するための URL が "next"，"previous" プロパティで取得できることもわかります．したがって，コメントの総数を次のようにして表示し，ページ切り替えボタンも配置します．

src/components/CommentListPage.tsx（抜粋）
return (
  <div className="container">
    <h1>コメント一覧</h1>

    <div className="commentsHeader">
      <div>コメント総数：{results.count}</div>
      <div>
        <button>前のページ</button>
        <button>次のページ</button>
      </div>
    </div>

    {commentItems}

    <CreateForm
      onSubmit={handelCreateFormSubmit}
    />
  </div>
)

さらに，これらの文字サイズを少し小さくするために，index.css に次の内容を追加します．

src/index.css（抜粋）
.commentsHeader {
  font-size: 0.8em;
}

ブラウザで確認します．コメント総数が正しく表示されました．次のページではボタンをクリックしたときの処理をコーディングしていきます．

目次に戻る