WEBVTT

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

2
00:00:00.912 --> 00:00:05.166
今回は、ネクストジェイエスのエーピーアイルーツ入門です。

3
00:00:05.166 --> 00:00:12.612
ページズルーターで、ゲットとポストの処理、入力検証とエラー応答を、タイプスクリプトの例で学びます。

4
00:00:12.612 --> 00:00:18.310
エーピーアイルーツは、エスアールシー配下のページズフォルダーにある、エーピーアイフォルダーへファイルを置くことで作れる、

5
00:00:18.310 --> 00:00:24.009
サーバー側の受け付け窓口です。

6
00:00:24.009 --> 00:00:27.808
画面ではなく、ジェイソンのようなデータを返します。

7
00:00:27.808 --> 00:00:32.366
追加のフレームワークは不要ですが、動かすにはネクストジェイエスを実行できるサーバー環境が必要で、

8
00:00:32.366 --> 00:00:36.925
静的出力では使えません。

9
00:00:36.925 --> 00:00:39.508
この前提から順に確認していきます。

10
00:00:39.508 --> 00:00:41.424
まず置き場所と役割です。

11
00:00:41.424 --> 00:00:50.842
エスアールシー、ページズ、エーピーアイの中にファイルを作ると、そのファイル名がそのままユーアールエルの末尾になります。

12
00:00:50.842 --> 00:00:57.067
たとえばハロー・ティーエスなら、スラッシュエーピーアイ、スラッシュハローです。

13
00:00:57.067 --> 00:01:02.734
ページはエイチティーエムエルの画面を返しますが、エーピーアイルーツは、リクエストを受けて処理し、

14
00:01:02.734 --> 00:01:08.401
ジェイソンなどのレスポンスを返す点が違います。

15
00:01:08.401 --> 00:01:12.870
なお、アプリルーターのルートティーエスで定義するルートハンドラーズとは、

16
00:01:12.870 --> 00:01:17.340
配置場所も書き方も異なる別の仕組みです。

17
00:01:17.340 --> 00:01:22.448
混同しないように、今回はページズルーターの方式に絞って進めます。

18
00:01:22.448 --> 00:01:23.918
ゲット専用の例です。

19
00:01:23.918 --> 00:01:30.240
ファイルはハロー・ティーエスで、インポートしているのはリクエストとレスポンスの型です。

20
00:01:30.240 --> 00:01:37.151
レスポンスデーターは、成功時のメッセージか、エラー時のエラーの、どちらかの形に限定しています。

21
00:01:37.151 --> 00:01:42.591
ハンドラー関数は、リクエストをレック、レスポンスをレスとして受け取ります。

22
00:01:42.591 --> 00:01:48.324
メソッドがゲットでなければ四百五を返し、ゲットなら二百でメッセージを返します。

23
00:01:48.324 --> 00:01:52.221
ファイルを作っただけではゲット専用にはならず、メソッドの確認を自分で書く点が、

24
00:01:52.221 --> 00:01:56.117
この例の最初のポイントです。

25
00:01:56.117 --> 00:02:02.733
型は開発時に形を確認するためのもので、届いた入力を自動で検証してくれるわけではありません。

26
00:02:02.733 --> 00:02:05.186
メソッド確認の考え方を整理します。

27
00:02:05.186 --> 00:02:10.956
ファイルを置いただけでは、そのエーピーアイが受け付けるメソッドは制限されません。

28
00:02:10.956 --> 00:02:15.068
そこでハンドラーの先頭でレック・メソッドを確認し、対応しないメソッドには四百五、

29
00:02:15.068 --> 00:02:19.180
メソッドノットアロウドを返します。

30
00:02:19.180 --> 00:02:23.364
あわせてアロウヘッダーで、使えるメソッドを相手に伝えます。

31
00:02:23.364 --> 00:02:28.702
ステータスコードは、結果の種類を相手のプログラムが判別するための合図です。

32
00:02:28.702 --> 00:02:33.535
成功は二百、メソッド違いは四百五というように、意味に合った番号を選ぶことで、

33
00:02:33.535 --> 00:02:38.368
呼び出し側は本文を読まなくても大まかな結果を判断できます。

34
00:02:38.368 --> 00:02:43.273
番号と本文の両方をそろえることが、扱いやすいエーピーアイの基本です。

35
00:02:43.273 --> 00:02:45.375
次はポストの入力検証です。

36
00:02:45.375 --> 00:02:50.550
グリーティング・ティーエスでは、名前を受け取って挨拶を返します。

37
00:02:50.550 --> 00:02:54.916
検証はリードネームという小さな関数に切り出しています。

38
00:02:54.916 --> 00:03:01.223
まず、値がオブジェクトで、ヌルではなく、ネームというキーを含むかを確認します。

39
00:03:01.223 --> 00:03:06.316
次に、ネームが文字列かどうかを見て、前後の空白を取り除き、長さが一文字から五十文字の範囲にある場合だけ、

40
00:03:06.316 --> 00:03:11.410
その文字列を返します。

41
00:03:11.410 --> 00:03:16.261
条件を満たさなければヌルを返し、呼び出し側でエラーにします。

42
00:03:16.261 --> 00:03:20.628
ポイントは、レック・ボディの型がエニーであることです。

43
00:03:20.628 --> 00:03:27.581
そのまま文字列だと思って使わず、いったんアンノウンとして、実行時に一つずつ確認します。

44
00:03:27.581 --> 00:03:29.411
ハンドラー本体の前半です。

45
00:03:29.411 --> 00:03:35.043
最初にメソッドを確認し、ポストでなければアロウヘッダーを付けて四百五を返します。

46
00:03:35.043 --> 00:03:38.141
次に、コンテンツタイプヘッダーを確認します。

47
00:03:38.141 --> 00:03:45.744
セミコロンで区切った先頭部分を取り出し、小文字にそろえて、アプリケーション・ジェイソンと一致するかを見ます。

48
00:03:45.744 --> 00:03:51.094
メディアタイプが違えば、四百十五、アンサポーテッドメディアタイプを返します。

49
00:03:51.094 --> 00:03:57.008
文字コードなどの付加情報が付いていても、先頭部分だけを見ることで正しく判定できます。

50
00:03:57.008 --> 00:04:04.329
形式の確認を本文の確認より先に行うことで、検証の順序が明確になり、エラーの原因も切り分けやすくなります。

51
00:04:04.329 --> 00:04:10.187
後半では、レック・ボディをアンノウンとして受け取り、リードネームで検証します。

52
00:04:10.187 --> 00:04:17.548
ヌルが返れば、名前は一文字から五十文字の文字列にしてください、というエラーとともに四百を返します。

53
00:04:17.548 --> 00:04:23.706
問題がなければ、キャッシュコントロールにノーストアを付け、二百で挨拶文を返します。

54
00:04:23.706 --> 00:04:29.715
また、このファイルではボディパーサーのサイズ上限を十キロバイトに設定しています。

55
00:04:29.715 --> 00:04:34.596
なお、ジェイソンの構文が壊れている場合や上限を超えた場合は、ハンドラーが呼ばれる前に、

56
00:04:34.596 --> 00:04:39.478
ボディパーサー側で拒否されることもあります。

57
00:04:39.478 --> 00:04:45.637
文字数はジャバスクリプトのレングスで数えるため、絵文字の数え方には注意が必要です。

58
00:04:45.637 --> 00:04:47.467
動作確認はカールで行います。

59
00:04:47.467 --> 00:04:51.387
開発サーバーを起動した状態で、別のターミナルから実行します。

60
00:04:51.387 --> 00:04:56.746
まずハローへゲットすると二百、同じ場所へポストすると四百五になることを確認します。

61
00:04:56.746 --> 00:05:03.542
次にグリーティングへ、正しいジェイソンで名前を送ると二百で挨拶が返り、名前が数値の場合は四百になります。

62
00:05:03.542 --> 00:05:09.684
正常なケースだけでなく、メソッド違い、型違い、空文字といった失敗のケースも試すことが大切です。

63
00:05:09.684 --> 00:05:15.435
期待するステータスと、実際に返ったステータスを並べて確認すると、検証の抜けに気付けます。

64
00:05:15.435 --> 00:05:20.009
確認は公開後ではなく、開発中の一通りの作業として済ませておきましょう。

65
00:05:20.009 --> 00:05:25.138
ブラウザーからは、グリーティングページのフォームから呼び出します。

66
00:05:25.138 --> 00:05:28.247
スライドは、その送信処理の中心部分です。

67
00:05:28.247 --> 00:05:33.842
フェッチでポストし、本文はジェイソン・ストリンギファイで文字列にします。

68
00:05:33.842 --> 00:05:38.816
レスポンス・オッケーが偽なら、ステータス付きのエラーを投げます。

69
00:05:38.816 --> 00:05:46.587
受け取ったデータも最初はアンノウンとして扱い、メッセージが文字列であることを確認してから表示します。

70
00:05:46.587 --> 00:05:54.203
送信中はペンディングという状態でボタンを無効化し、二重操作を抑え、最後はファイナリーで解除します。

71
00:05:54.203 --> 00:06:01.197
サーバー側だけでなく、呼び出し側でも成功と失敗の両方に備えることが、実践では欠かせません。

72
00:06:01.197 --> 00:06:02.942
公開時に考えることです。

73
00:06:02.942 --> 00:06:06.724
エーピーアイのユーアールエルは外部から呼び出せます。

74
00:06:06.724 --> 00:06:12.397
画面にボタンがないことや、タイプスクリプトの型は、アクセス制限にはなりません。

75
00:06:12.397 --> 00:06:16.397
保存や更新を行うなら、処理の内容に応じて、認証、権限確認、シーエスアールエフ対策、

76
00:06:16.397 --> 00:06:20.396
レート制限などを設計します。

77
00:06:20.396 --> 00:06:24.905
また、コードはサーバーで実行されますが、レスポンスに含めた情報は利用者に届くため、

78
00:06:24.905 --> 00:06:29.414
秘密のキーや内部のエラー詳細は返しません。

79
00:06:29.414 --> 00:06:35.814
さらに、メモリー上の配列への保存だけでは、再起動や複数サーバーへの分散に対応できません。

80
00:06:35.814 --> 00:06:38.723
永続化が必要ならデータベースを使います。

81
00:06:38.723 --> 00:06:42.505
配信形態も、静的出力では動かない点を含めて選びます。

82
00:06:42.505 --> 00:06:45.015
最後に、公開前の確認をまとめます。

83
00:06:45.015 --> 00:06:47.673
一つ目、型定義と入力検証は別物です。

84
00:06:47.673 --> 00:06:54.022
タイプスクリプトで型を用意しても、外部からその形のデータだけが届くわけではありません。

85
00:06:54.022 --> 00:07:00.518
二つ目、メソッド、本文の形式、必要な値を実行時に検証し、失敗時のステータスも確かめます。

86
00:07:00.518 --> 00:07:02.142
三つ目、配信環境です。

87
00:07:02.142 --> 00:07:06.793
ページズルーターのエーピーアイルーツには、リクエスト時に実行できる環境が必要で、

88
00:07:06.793 --> 00:07:11.444
静的な出力フォルダーを置くだけでは動きません。

89
00:07:11.444 --> 00:07:12.330
まとめです。

90
00:07:12.330 --> 00:07:19.565
置き場所でユーアールエルが決まる、メソッドと入力を実行時に検証する、結果に合ったステータスを返す。

91
00:07:19.565 --> 00:07:23.847
この三点を押さえれば、エーピーアイルーツの基本は完成です。