SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

notFoundの使い方：存在しないデータを専用画面へ切り替えるの解説動画

再生時間 7:24動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00今回は、ノットファウンドの使い方です。
  3. 0:03存在しない記事や商品のユーアールエルを開いたときに、真っ白な画面やエラーではなく、
  4. 0:08専用の案内画面へ切り替える方法を学びます。
  5. 0:12ノットファウンドは、ネクスト・ナビゲーションから読み込む関数で、データが見つからないときに呼び出します。
  6. 0:20案内画面そのものは、ノットファウンド・ティーエスエックスという別ファイルで用意します。
  7. 0:26見つからない場合と、通信障害の場合をどう分けるかも大切なポイントです。
  8. 0:31順に整理していきます。
  9. 0:33ブログの記事ページや商品ページのように、ユーアールエルごとに内容が変わるサイトでは、
  10. 0:37特に欠かせない仕組みです。
  11. 0:41まず前提です。
  12. 0:42この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  13. 0:48ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  14. 0:54タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  15. 1:01配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  16. 1:07ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  17. 1:15引数と戻り値を整理します。
  18. 1:17ノットファウンドは、引数を取らず、真偽値を返す関数ではありません。
  19. 1:21呼び出した時点で、現在のルートセグメントの描画を終了させる制御が発生します。
  20. 1:26そのため、ノットファウンドの後に処理が続く前提でコードを書いてはいけません。
  21. 1:31存在確認で見つからなければノットファウンドを呼び、そのあとには正常な場合の表示だけを読みやすく並べるのが基本形です。
  22. 1:39実際に表示される案内画面は、対応する場所に置いたノットファウンド・ティーエスエックスのコンポーネントです。
  23. 1:46関数は切り替えの合図、画面は別ファイル、と覚えてください。
  24. 1:50例外に近い仕組みで画面を切り替えるため、呼び出し位置がそのまま処理の境目になります。
  25. 1:56記事のコードです。
  26. 1:57ファイルは、アプリ、ルックアップ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。
  27. 2:04最初にネクスト・スラッシュ・ナビゲーションからノットファウンドを読み込みます。
  28. 2:10タイトルズという連想配列には、リアクトというキーで学習記録のタイトルが入っています。
  29. 2:16コンポーネントは非同期関数で、パラムズをアウェイトしてスラッグを取り出します。
  30. 2:21オブジェクト・ハズオウンでキーがあるか確認し、なければノットファウンドを呼び出します。
  31. 2:27ある場合だけ、タイトルを見出しに表示します。
  32. 2:30スライドでは表示崩れを避けるため、埋め込みを文字列の連結で示しています。
  33. 2:36次に専用画面です。
  34. 2:37アプリ、ルックアップ、角括弧スラッグのフォルダーに、ノットファウンド・ティーエスエックスを追加し、
  35. 2:44デフォルトエクスポートのリアクトコンポーネントとして定義します。
  36. 2:50画面には、見つかりませんでしたという見出しと、存在しないか削除された可能性があるという説明を置きます。
  37. 2:58さらに、リンクで一覧へ戻れる道を用意すると、迷った読者がその場で行き止まりになりません。
  38. 3:06ノットファウンドを呼ぶ側のページと、案内を表示する側のファイルは役割が分かれています。
  39. 3:13どちらのファイルが欠けても、意図した画面にはなりません。
  40. 3:17実行結果と処理の順序です。
  41. 3:19スラッグがリアクトなら記事が表示され、ミッシングのような未知の値なら、見つからない状態として専用画面に切り替わります。
  42. 3:27画面のコードは、その分岐だけを純粋なロジックに切り出したものです。
  43. 3:32タイトルズにキーがなければノットファウンド相当の印を返し、あればタイトルを返します。
  44. 3:38リアクトはタイトル、ミッシングはノットファウンド、空文字もノットファウンドです。
  45. 3:44ポイントは、存在確認を先に行い、見つからない場合を早い段階で切り離すことです。
  46. 3:49正常系の処理に、存在しないデータが紛れ込まない形になっています。
  47. 3:54実務で最も大切な使い分けです。
  48. 3:56シーエムエスなど外部からデータを取得する場合、記事がないことと、通信に失敗したことは、
  49. 4:01まったく別の出来事です。
  50. 4:05エーピーアイが五百番台のエラーを返したり、タイムアウトしたりしたときまで、
  51. 4:10すべて四百四番として扱ってはいけません。
  52. 4:15障害なのに記事が削除されたように見えてしまい、原因の調査も遅れます。
  53. 4:20本当に存在しないことが確認できた場合だけノットファウンドを使い、障害の場合は別のエラー表示や監視へつなげる設計にしてください。
  54. 4:31ステータス番号の意味を守ることが、利用者にも運用者にも親切です。
  55. 4:36つまずきやすい点です。
  56. 4:38ネクストジェイエスは、ノットファウンドに対応するノーインデックス情報を付与します。
  57. 4:43検索エンジンに、存在しないページを登録させないための配慮です。
  58. 4:47ただし注意点として、ストリーミングが始まった後のノットファウンド表示では、
  59. 4:52エイチティーティーピーのステータスが二百番になる場合があります。
  60. 4:57つまり、画面に案内が表示されていることと、四百四番の応答が返っていることは、
  61. 5:00必ずしも一致しません。
  62. 5:04画面の文言だけで四百四番を確認したことにせず、画面とステータスを別々に確かめてください。
  63. 5:10開発者ツールや応答ヘッダーで、実際の番号を見る習慣が大切です。
  64. 5:14静的出力との関係です。
  65. 5:16この動的なサンプルは、そのままでは静的出力に対応できません。
  66. 5:21アクセスのたびにスラッグを見て分岐する処理は、ビルド時にすべて決まる静的ファイルとは相性が異なるためです。
  67. 5:29静的にしたい場合は、ジェネレートスタティックパラムズで対象のユーアールエルを列挙する構成へ変更します。
  68. 5:37そして、生成されなかったユーアールエルについては、配信サーバー側で四百四番を返すようにします。
  69. 5:45アプリ側の分岐と配信側の応答を分けて考えることが、公開構成では重要です。
  70. 5:51どの範囲を事前に作り、どこで存在しない扱いにするか、設計段階で決めてください。
  71. 5:57公開方法によって使える形が変わる点も、この機能の特徴のひとつです。
  72. 6:02確認課題です。
  73. 6:03まず、ノットファウンド・ティーエスエックスへ一覧へのリンクを追加し、未知のスラッグを開いても読者が迷わず戻れるか確認してください。
  74. 6:13次に、シーエムエス障害のときには、別のエラー表示や監視へつながる設計になっているかも考えてみましょう。
  75. 6:20確認は開発サーバーだけでなく、本番用ビルドと公開先でも行います。
  76. 6:25ユーアールエルを直接開く場合と、画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、
  77. 6:31型だけでは防げない入力の問題が見つかります。
  78. 6:36表示とステータスの両方を見ることを忘れないでください。
  79. 6:40まとめです。
  80. 6:41ノットファウンドは、データが存在しないことが確認できたときに呼び出し、現在の画面の描画を専用画面へ切り替える合図です。
  81. 6:51戻り値を期待せず、存在確認のあとに正常系を並べる形が基本です。
  82. 6:56案内画面はノットファウンド・ティーエスエックスに用意し、一覧へ戻るリンクを添えます。
  83. 7:03通信障害を四百四番に混ぜないこと、画面とエイチティーティーピーステータスを別々に確認すること、
  84. 7:10静的出力では生成対象の列挙と配信側の四百四番が必要なことも押さえてください。
  85. 7:17これでノットファウンドは完了です。
  86. 7:20お疲れさまでした。
  87. 7:21次回はリダイレクトを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

notFoundで存在しない記事や商品を扱う方法を説明します。not-found.tsxとの組み合わせ、通信障害との区別、HTTP応答の確認まで学びます。

解説記事・サンプルコードを読む：notFoundの使い方：存在しないデータを専用画面へ切り替える →