プログラマーへの道 #84 の補足説明
こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。
動画内で実装したソースコードも載せています。
- 今回の動画で実装したソースコード
- JavaScriptで HTTP Method POST のリクエストを送信する
- Day.jsでRFC 3339準拠の日時フォーマットを扱う
- バックエンドサーバのMemoIDをstringからintに変更した
今回の動画で実装したソースコード
前回との差分は以下です。
https://github.com/tio-iis/memo-server/pull/11/files
動画時点の全体ソースコードは以下です。
https://github.com/tio-iis/memo-server/tree/0eb1901b75e3fa54337dc2d60df758f3b67ad1f3
JavaScriptで HTTP Method POST のリクエストを送信する
カウントアプリと同じようにJavaScriptのXMLHttpRequestという仕組みを利用します。
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
以下の実装が参考になると思います。
https://qiita.com/keniooi/items/458732fc8f29cc8e445a
ポイントは以下です。
- open() でGET ではなく、POST を指定する。
- JSONのデータを送信する場合は、オブジェクトにデータをセットして、JSON.stringify() を利用して文字列に変換する。
- HTTP Header で Content-Type をセットする。
Day.jsでRFC 3339準拠の日時フォーマットを扱う
RFC 3339 という仕様は ISO 8601 という別の仕様と似ています。 それぞれの違いは以下ですが、おおよそ RFC 3339 は ISO 8601 と同じという認識でいいと思います。
Day.js はISO 8601を採用しているようなので、それを利用しています。
https://day.js.org/docs/en/display/as-iso-string
バックエンドサーバのMemoIDをstringからintに変更した
バックエンドサーバを開発している最中はMemo構造体のIDはstring型で定義していました。 しかし、JavaScriptから送られてくるメモのIDはintだったので、それに合わせてバックエンドサーバのMemo構造体のIDの型もintに変更しました。
Memo構造体のIDはmemosというmapのキーに利用されているので、memosのキーも最初はstring型でした。 これもintに変更する必要があります。
