たけるのプログラミング

作ったものとか、気ままにアップします。

コロナウイルスに関するオープンデータを使ってみた。

こんにちは、今回は題名の通り、内閣官房が公開しているコロナウイルスのオープンデータを利用してみたいと思います。

corona.go.jp

公開されているデータを見てみると、データの形式はjsonのようです。

1月14日に公開されているデータを見てみると、最新のもので1月12日のものになっていました。

開発環境

実行結果

f:id:takeru232423:20210114214310p:plain

XMLHttpRequestを利用して、web上にあるjsonデータを取得できるようにします。なのでこのページにアクセスする日時によって日付、感染者数が変化します。

ソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>コロナ感染者数</title>
  <link rel="stylesheet" href="style.css">
 
  </head>
  <body>
    <h1>コロナ感染者数</h1>
    <h2 id="test1"></h2>
    <p id="test2"></p>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

index.js

var request = new XMLHttpRequest();
 
request.open('GET', 'https://opendata.corona.go.jp/api/Covid19JapanAll?dataName=東京都', true);
request.responseType = 'json';

request.onload = function () {
  var data = this.response;
  console.log(data.itemList[0]);

  var elem = document.getElementById("test1");
  elem.innerHTML = data.itemList[0].date+"　までの"

  var elem = document.getElementById("test2");
  elem.innerHTML = data.itemList[0].name_jp+"のコロナウイルス感染者の合計は　"+data.itemList[0].npatients+"人です。";
};
request.send();

ソースコードの説明

"itemList":[{"date":"2021-01-12","name_jp":"東京都","npatients":"77133"},,,,,,,]

取得できるjsonデータの形式は上記のような感じです。

data.itemList[0]

最新のデータは配列のインデックス0番目なので、上記のように最新のデータを取得。

日にちは以下のように取得。

data.itemList[0].date

感染者数は以下のように取得。

data.itemList[0].npatients

あとは得たデータをDocument.getElementById()を使ってindex.htmlに表示させるだけです。

感想

めちゃくちゃ久しぶりにjavascript触ったので、たくさんググりました。
知りたい情報を見つけた時の嬉しさは半端ないです。

もっとjavascriptを勉強して、今回のプログラムを応用したものを今後作りたいと思います。

話が変わりますがポケモンapiがあることを、今回初めて知りました。他にもおもしろそうなapiがweb上にあると思うので

暇な時探してみたいと思います。