一覧取得APIを画面に表示する - 大橋生活品質向上委員会

TypeScriptでデータを一覧取得するAPIを作成しました。それを画面表示していきます。

インターフェースとレスポンスのサンプル

GET /list
[
  {"id":1,"name":"item1"},
  {"id":2,"name":"テスト2"},
  {"id":"ab","name":"bb"},
  {"id":"112233","name":"bbccdd"}
]

画面を返す機能

これまではAPIとしてJSONや文字列しか返していなかったのでHTMLを返す機能を作ります。index.htmlをプロジェクト内で管理しているのでそのファイルを読み込みレスポンスで返す仕組みにします。

プログラム_GET /

import http, {IncomingMessage, ServerResponse} from 'http';
const fs = require('fs');

const server = http.createServer((req: IncomingMessage, res: ServerResponse) => {
  switch (req.url) {
    case '/':
      res.writeHead(200, {'Content-Type' : 'text/html'});
      fs.readFile('index.html', 'utf-8', (err:String, files:String) => {
        if (err) { throw err; }    
        res.write(files);
        res.end();
      });
      break;
  }
})
server.listen(4000)

画面を作成します。今回はHTMLでフレームワークを使わずただのJavaScriptで実装します。ブラウザで画面を表示後にデータを取得するAPIにリクエストを送りレスポンスで受け取ったデータを画面にDOMで描画します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
  var url = 'http://localhost:4000/list';
  var request = new XMLHttpRequest();
  request.open('GET', url);
  request.onloadend = function () {
    if (request.status == 200) {
      let obj = JSON.parse(request.responseText);
      let output = document.getElementById('contents');
      let frame = document.createElement('div');
      frame.appendChild(document.createTextNode(document.createElement('span').innerHTML = 'ID'));
      frame.appendChild(document.createTextNode(document.createElement('span').innerHTML = 'NAME'));
      output.appendChild(frame);
      obj.forEach(element => {
        let inner = document.createElement('div');
        inner.appendChild(document.createTextNode(document.createElement('span').innerHTML = element['id']));
        inner.appendChild(document.createTextNode(document.createElement('span').innerHTML = element['name']));
        output.appendChild(inner);
      });
    }
  };
  request.send(null);
</script>
<body>
    <div id="contents">
    </div>
</body>
</html>

実際にシステムとして提供するなら画面はVueなどで実装するかと思いますが一旦内部の動きを0から確認する意図でこのように作成しました。次は登録画面を作成したいと思います。サーバサイドもクライアントサイドもJavaScriptで完結
できるのは良いですね。新しい言語なので割とあたらしめの機能も付いていて、MS開発なのでVisualStudioCodeのサポートもあるのでやりやすい。何より利用している事業者が多く情報も多いのが心強いですね。