React 入門

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

削除ボタンを押したときに，API にリクエストすべき URL が正しく生成されているか確認します．

src/components/CommentListPage.js（抜粋）const handleDeleteButtonClick = (commentId) => {
  if (!window.confirm("削除しますか？")) {
    return;
  }
  const newComments = [...results.results].filter((comment) => {
    return comment.id !== commentId;
  });
  const newResults = {
    "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}/`;
  console.log(url);
};

一覧表示から先頭のコメントについて「削除」ボタンをクリックします．

確認画面で「OK」をクリックします．

useState で管理するコメント一覧から先頭のコメントが削除されました．また，ブラウザのコンソールには API に DELETE リクエストを送信するための URL が出力されましたが，まだ API へのリクエストは送信されていません．

したがって，ブラウザで再読込すると API に GET リクエストが送信されて，削除したはずのコメントが復活します．

削除のための URL を正しく生成できていることが確認できました．次のとおり axios を使って DELETE メソッドを送信すると API 側のデータベースからもコメントを削除することができます．

src/components/CommentListPage.js（抜粋）const handleDeleteButtonClick = (commentId) => {
  if (!window.confirm("削除しますか？")) {
    return;
  }
  const newComments = [...results.results].filter((comment) => {
    return comment.id !== commentId;
  });
  const newResults = {
    "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)
    .catch(err => console.log(err.message));
};

もう一度先頭のコメントに対する「削除」ボタンをクリックします．

確認画面では「OK」をクリックします．

useState で管理するコメント一覧だけでなく，API のデータベースからもコメントが削除されました．

したがって，ブラウザで再読み込みすると最新の2件のコメントが表示されます．

削除ボタンを押すと，まず CommentListPage コンポーネントから削除されて画面が更新され，表示コメントは1件になります．その後 API へ DELETE メソッドが送信されます．このとき削除が完了するまで3秒間が必要であることから，完了までの間にブラウザで再読込すると削除されたコメントが一時的に復活して2件が表示されます．3秒以上経過後にブラウザを再読込すると，削除したコメントは表示されず，最新の2件が表示されるようになります．

削除した後，ブラウザの操作をしなければコメントの表示は2件から1件に減った状態のままになります．仕様によっては削除完了後にトップ画面に戻すことも考えられます．API に DELETE メソッドを送信し削除が成功したときには HTTP 204 ステータスコードが戻ってきます．これは，次の手順でブラウザで API に接続するとわかります．まず，ブラウザで API の URL に直接接続し，右上にある「DELETE」ボタンをクリックします．

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

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

削除完了後にトップに戻すためには，次の通り，then の中でアロー関数を作って，その中で削除に成功したときだけページを移動するコードを書くとよいでしょう．

src/components/CommentListPage.js（抜粋）const handleDeleteButtonClick = (commentId) => {
  if (!window.confirm("削除しますか？")) {
    return;
  }
  const newComments = [...results.results].filter((comment) => {
    return comment.id !== commentId;
  });
  const newResults = {
    "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」をクリックします．

削除完了後に自動的に API から最新の2件が取得されるようになりました．

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

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

目次に戻る