WEBVTT

1
00:00:00.000 --> 00:00:00.881
こんにちは。

2
00:00:00.881 --> 00:00:03.672
今回は、ノットファウンドの使い方です。

3
00:00:03.672 --> 00:00:08.226
存在しない記事や商品のユーアールエルを開いたときに、真っ白な画面やエラーではなく、

4
00:00:08.226 --> 00:00:12.780
専用の案内画面へ切り替える方法を学びます。

5
00:00:12.780 --> 00:00:20.419
ノットファウンドは、ネクスト・ナビゲーションから読み込む関数で、データが見つからないときに呼び出します。

6
00:00:20.419 --> 00:00:26.735
案内画面そのものは、ノットファウンド・ティーエスエックスという別ファイルで用意します。

7
00:00:26.735 --> 00:00:31.877
見つからない場合と、通信障害の場合をどう分けるかも大切なポイントです。

8
00:00:31.877 --> 00:00:33.493
順に整理していきます。

9
00:00:33.493 --> 00:00:37.532
ブログの記事ページや商品ページのように、ユーアールエルごとに内容が変わるサイトでは、

10
00:00:37.532 --> 00:00:41.572
特に欠かせない仕組みです。

11
00:00:41.572 --> 00:00:42.532
まず前提です。

12
00:00:42.532 --> 00:00:48.975
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。

13
00:00:48.975 --> 00:00:54.870
ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。

14
00:00:54.870 --> 00:01:01.450
タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。

15
00:01:01.450 --> 00:01:07.893
配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。

16
00:01:07.893 --> 00:01:15.296
ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。

17
00:01:15.296 --> 00:01:17.060
引数と戻り値を整理します。

18
00:01:17.060 --> 00:01:21.539
ノットファウンドは、引数を取らず、真偽値を返す関数ではありません。

19
00:01:21.539 --> 00:01:26.697
呼び出した時点で、現在のルートセグメントの描画を終了させる制御が発生します。

20
00:01:26.697 --> 00:01:31.854
そのため、ノットファウンドの後に処理が続く前提でコードを書いてはいけません。

21
00:01:31.854 --> 00:01:39.726
存在確認で見つからなければノットファウンドを呼び、そのあとには正常な場合の表示だけを読みやすく並べるのが基本形です。

22
00:01:39.726 --> 00:01:46.920
実際に表示される案内画面は、対応する場所に置いたノットファウンド・ティーエスエックスのコンポーネントです。

23
00:01:46.920 --> 00:01:50.856
関数は切り替えの合図、画面は別ファイル、と覚えてください。

24
00:01:50.856 --> 00:01:56.556
例外に近い仕組みで画面を切り替えるため、呼び出し位置がそのまま処理の境目になります。

25
00:01:56.556 --> 00:01:57.830
記事のコードです。

26
00:01:57.830 --> 00:02:04.769
ファイルは、アプリ、ルックアップ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。

27
00:02:04.769 --> 00:02:10.292
最初にネクスト・スラッシュ・ナビゲーションからノットファウンドを読み込みます。

28
00:02:10.292 --> 00:02:16.239
タイトルズという連想配列には、リアクトというキーで学習記録のタイトルが入っています。

29
00:02:16.239 --> 00:02:21.762
コンポーネントは非同期関数で、パラムズをアウェイトしてスラッグを取り出します。

30
00:02:21.762 --> 00:02:27.851
オブジェクト・ハズオウンでキーがあるか確認し、なければノットファウンドを呼び出します。

31
00:02:27.851 --> 00:02:30.966
ある場合だけ、タイトルを見出しに表示します。

32
00:02:30.966 --> 00:02:36.064
スライドでは表示崩れを避けるため、埋め込みを文字列の連結で示しています。

33
00:02:36.064 --> 00:02:37.525
次に専用画面です。

34
00:02:37.525 --> 00:02:44.098
アプリ、ルックアップ、角括弧スラッグのフォルダーに、ノットファウンド・ティーエスエックスを追加し、

35
00:02:44.098 --> 00:02:50.671
デフォルトエクスポートのリアクトコンポーネントとして定義します。

36
00:02:50.671 --> 00:02:58.948
画面には、見つかりませんでしたという見出しと、存在しないか削除された可能性があるという説明を置きます。

37
00:02:58.948 --> 00:03:06.089
さらに、リンクで一覧へ戻れる道を用意すると、迷った読者がその場で行き止まりになりません。

38
00:03:06.089 --> 00:03:13.068
ノットファウンドを呼ぶ側のページと、案内を表示する側のファイルは役割が分かれています。

39
00:03:13.068 --> 00:03:17.612
どちらのファイルが欠けても、意図した画面にはなりません。

40
00:03:17.612 --> 00:03:19.467
実行結果と処理の順序です。

41
00:03:19.467 --> 00:03:27.887
スラッグがリアクトなら記事が表示され、ミッシングのような未知の値なら、見つからない状態として専用画面に切り替わります。

42
00:03:27.887 --> 00:03:32.597
画面のコードは、その分岐だけを純粋なロジックに切り出したものです。

43
00:03:32.597 --> 00:03:38.591
タイトルズにキーがなければノットファウンド相当の印を返し、あればタイトルを返します。

44
00:03:38.591 --> 00:03:44.299
リアクトはタイトル、ミッシングはノットファウンド、空文字もノットファウンドです。

45
00:03:44.299 --> 00:03:49.865
ポイントは、存在確認を先に行い、見つからない場合を早い段階で切り離すことです。

46
00:03:49.865 --> 00:03:54.432
正常系の処理に、存在しないデータが紛れ込まない形になっています。

47
00:03:54.432 --> 00:03:56.896
実務で最も大切な使い分けです。

48
00:03:56.896 --> 00:04:01.413
シーエムエスなど外部からデータを取得する場合、記事がないことと、通信に失敗したことは、

49
00:04:01.413 --> 00:04:05.931
まったく別の出来事です。

50
00:04:05.931 --> 00:04:10.612
エーピーアイが五百番台のエラーを返したり、タイムアウトしたりしたときまで、

51
00:04:10.612 --> 00:04:15.294
すべて四百四番として扱ってはいけません。

52
00:04:15.294 --> 00:04:20.879
障害なのに記事が削除されたように見えてしまい、原因の調査も遅れます。

53
00:04:20.879 --> 00:04:31.228
本当に存在しないことが確認できた場合だけノットファウンドを使い、障害の場合は別のエラー表示や監視へつなげる設計にしてください。

54
00:04:31.228 --> 00:04:36.484
ステータス番号の意味を守ることが、利用者にも運用者にも親切です。

55
00:04:36.484 --> 00:04:38.004
つまずきやすい点です。

56
00:04:38.004 --> 00:04:43.670
ネクストジェイエスは、ノットファウンドに対応するノーインデックス情報を付与します。

57
00:04:43.670 --> 00:04:47.954
検索エンジンに、存在しないページを登録させないための配慮です。

58
00:04:47.954 --> 00:04:52.721
ただし注意点として、ストリーミングが始まった後のノットファウンド表示では、

59
00:04:52.721 --> 00:04:57.489
エイチティーティーピーのステータスが二百番になる場合があります。

60
00:04:57.489 --> 00:05:00.874
つまり、画面に案内が表示されていることと、四百四番の応答が返っていることは、

61
00:05:00.874 --> 00:05:04.260
必ずしも一致しません。

62
00:05:04.260 --> 00:05:10.340
画面の文言だけで四百四番を確認したことにせず、画面とステータスを別々に確かめてください。

63
00:05:10.340 --> 00:05:14.624
開発者ツールや応答ヘッダーで、実際の番号を見る習慣が大切です。

64
00:05:14.624 --> 00:05:16.389
静的出力との関係です。

65
00:05:16.389 --> 00:05:21.201
この動的なサンプルは、そのままでは静的出力に対応できません。

66
00:05:21.201 --> 00:05:29.703
アクセスのたびにスラッグを見て分岐する処理は、ビルド時にすべて決まる静的ファイルとは相性が異なるためです。

67
00:05:29.703 --> 00:05:37.884
静的にしたい場合は、ジェネレートスタティックパラムズで対象のユーアールエルを列挙する構成へ変更します。

68
00:05:37.884 --> 00:05:45.423
そして、生成されなかったユーアールエルについては、配信サーバー側で四百四番を返すようにします。

69
00:05:45.423 --> 00:05:51.198
アプリ側の分岐と配信側の応答を分けて考えることが、公開構成では重要です。

70
00:05:51.198 --> 00:05:57.454
どの範囲を事前に作り、どこで存在しない扱いにするか、設計段階で決めてください。

71
00:05:57.454 --> 00:06:02.748
公開方法によって使える形が変わる点も、この機能の特徴のひとつです。

72
00:06:02.748 --> 00:06:03.783
確認課題です。

73
00:06:03.783 --> 00:06:13.392
まず、ノットファウンド・ティーエスエックスへ一覧へのリンクを追加し、未知のスラッグを開いても読者が迷わず戻れるか確認してください。

74
00:06:13.392 --> 00:06:20.931
次に、シーエムエス障害のときには、別のエラー表示や監視へつながる設計になっているかも考えてみましょう。

75
00:06:20.931 --> 00:06:25.662
確認は開発サーバーだけでなく、本番用ビルドと公開先でも行います。

76
00:06:25.662 --> 00:06:31.279
ユーアールエルを直接開く場合と、画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、

77
00:06:31.279 --> 00:06:36.897
型だけでは防げない入力の問題が見つかります。

78
00:06:36.897 --> 00:06:40.888
表示とステータスの両方を見ることを忘れないでください。

79
00:06:40.888 --> 00:06:41.876
まとめです。

80
00:06:41.876 --> 00:06:51.590
ノットファウンドは、データが存在しないことが確認できたときに呼び出し、現在の画面の描画を専用画面へ切り替える合図です。

81
00:06:51.590 --> 00:06:56.695
戻り値を期待せず、存在確認のあとに正常系を並べる形が基本です。

82
00:06:56.695 --> 00:07:03.610
案内画面はノットファウンド・ティーエスエックスに用意し、一覧へ戻るリンクを添えます。

83
00:07:03.610 --> 00:07:10.608
通信障害を四百四番に混ぜないこと、画面とエイチティーティーピーステータスを別々に確認すること、

84
00:07:10.608 --> 00:07:17.605
静的出力では生成対象の列挙と配信側の四百四番が必要なことも押さえてください。

85
00:07:17.605 --> 00:07:20.404
これでノットファウンドは完了です。

86
00:07:20.404 --> 00:07:21.886
お疲れさまでした。

87
00:07:21.886 --> 00:07:24.356
次回はリダイレクトを学びます。