React 入門

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

コメントダミーデータを設定する

ここでは，API から取得できるはずであるコメント一覧と同じ形式のダミーデータを準備して React アプリケーションで表示してみます．API から得られる JSON 形式と同じ形式にしておくと後の処理が非常に楽になります．まずは，API にターミナル（またはコマンドプロンプト）から 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"}]}

CommentListPage コンポーネントで，results 定数オブジェクトを準備します．このときオブジェクトに与える値は上の API から得られた結果をそのままコピー＆ペーストして改行などを整えると良いでしょう．また，TypeScript では変数，関数の返値などに型付けを行うことが必要になります．アロー関数 CommentListPage からの返値の型は関数コンポーネント (FC: Function Component) であるので，次のように型付けすることができます．

src/components/CommentListPage.tsximport React from 'react'

const CommentListPage: React.FC = () => {

  const results = {
    "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"
      }
    ]
  };

  console.log(results);
  // console.log(results.results);

  return (
    <h1>コメント一覧</h1>
  )
}

export default CommentListPage

ブラウザで確認します．25行目の console.log(results) によって Google Chrome のコンソールに結果が表示されます．Google Chrome ではページの空白部分で右クリックして表示されたコンテキストメニューから「検証」を選ぶと開発者ツール (DevTools) を表示できます．開発者ツールから「Console」のタブを開くことで，results オブジェクトの形式を確認することができるようになります．

なお，26行目の console.log(results.results) を有効にするとコメントの一覧を配列形式で取得できることに注意してください．次のページ以降では results.results を頻繁に利用することになります．

また，DevToolsの表示位置は右側にある3点アイコンをクリックして変更することができます．

目次に戻る