クライアント側からAPIを使用する

GitHub Copilot と ペアプログラミングを行い、 静的なファイル index.html を 配置しました。 ただし、このファイルには、 まだ、test という文字が 書かれているだけで、 HTML は書かれていません。 このファイルに HTML を記述して、 バックエンドから社員のデータを 取得していきましょう。 それでは、Copilot Chat を起動して 質問を行っていきます。 「index.html に Employee データを取得して リストに表示する HTML データを 記述したい。」 もう少し細かく指定してあげましょう。 Employee は id、 そして、name、年齢の age、 そして、勤続年数のデータを持っています。 ファイルを確認してみましょう。 Id と Name、 そして、Age、 そして、YearsOfService という値が 勤続年数でした。 Copilot に指示を追加します。 ただし、JSON 形式は 先頭は小文字で返ってくるので、 このように、 小文字の y に書き換えましょう。 「....というプロパティを持ちます。」 さあ、これで、Copilot に 質問を送ってみましょう。 Copilot から返答が返ってきました。 リストにテキスト形式で データを設定するような返答です。 このように、文字列を作って 表示しているように見えます。 そうではなく、 HTML なので テーブルを利用したいというような場合は どうすればいいのでしょう？ 先ほどの質問を少し書き変えましょう。 ここを「テーブルに表示する」に 変えてみましょう。 「テーブルに表示する HTML データを 記述したい。」 もう一度、送ってみましょう。 Copilot から回答が返ってきました。 見たところ、テーブルを利用するように 書き変わっているように見えます。 それでは、このコードを そのまま HTML に 貼り付けてみましょう。 index.html を開いて test を上書きします。 ただし、データを取得するための URL は異なっています。 ここは手動で直しましょう。 /employee です。 全体を確認して、 問題がなさそうなので、 これで実行してみましょう。 アプリケーションを実行して ページを表示してみます。…