React 入門

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

削除で API に DELETE を送信

現状ではコメントの削除ボタンを押すと画面上からそのコメントが削除されます．しかしながら，API サーバ側のデータベースからは削除していないので，画面を再読込するとデータベースの最新情報に更新されることから，削除したはずのコメントが復活します．ここでは，削除操作で API に DELETE メッセージを送信し，API 側のデータベースからもコメントを削除することにします．

まず，ターミナル（またはコマンドプロンプト）から curl コマンドでコメントを削除する方法を示します．なお，コマンド最後の /15/ にはコメントの ID を指定することに注意してください．

% curl -X DELETE http://127.0.0.1:8000/comments/15/ ⏎

API からコメントを削除したときにどのような結果が API から得られるかを事前に確認しておく必要があるでしょう．実際，API に DELETE メソッドを送信し削除が成功したとき HTTP 204 ステータスコードが戻ってきます．これは，次の手順でブラウザで API に接続するとわかります．まず，ブラウザで API の URL に直接接続し，右上にある「DELETE」ボタンをクリックします．

確認画面で「DELETE」を押します．

削除後の画面に，「HTTP 204 No Content」という結果が表示されています．

API から得られる結果がわかったので，React で削除のコードを次の通り作成します．具体的には，16行目で削除のための URL を生成し，18行目で API に DELETE メッセージを送信します．20〜21行目では削除に成功したときだけ画面を最新の情報に更新するようにしています．

src/components/CommentListPage.tsx（抜粋）
const handleDeleteButtonClick = (commentId: number) => {
  if (!window.confirm("削除しますか？")) {
    return;
  }
  const newComments = [...results.results].filter((comment) => {
    return comment.id !== commentId;
  });
  const newResults: Results = {
    "count": results.count - 1, // コメント数は1減らす
    "previous": results.previous,
    "next" : results.next,
    "results": newComments
  };
  setResults(newResults);

  const url = `http://127.0.0.1:8000/comments/${commentId}/`;
  axios
    .delete(url)
    .then(res => {
      if (res.status === 204) {
        handleCommentsListChange('http://127.0.0.1:8000/comments/');
      } else {
        console.log("Delete失敗");
      }
    })
    .catch(err => console.log(err.message));
};

ブラウザで実際に削除の動作を確認します．まず，先頭のコメントについて「削除」ボタンをクリックします．

確認画面が表示されるので「OK」をクリックします．

先頭のコメントが削除されてコメント一覧の表示数が一旦1件になった後，画面が更新されて最新の2件が表示されました．

ここまでの作業で，API にリクエストを送信してコメントを一覧で表示したり，投稿，削除ができる React アプリケーションができました．なお，すべての処理はページの遷移と伴うことなく（つまり同じ URL で）行われていることに注意して下さい．同時に，画面の更新が行われるときも画面全体の再読み込みが行われるわけではなく，必要部分だけが更新されていることにも注意して下さい．この結果，ユーザ体験が向上しています．

以降のページではコメントの詳細表示機能と更新機能を実現します．引き続きページ遷移を伴わない方法で作成することはできるはずですが，今回はルーティング機能を用いて新たなページに移動する方法で作成することにします．

目次に戻る