Chart.jsとAPIによるコロナウイルスのデータのグラフ化～Vueを添えて～

はい、皆さんこんにちは！
ある日ネットサーフィンをしていたら、数値を基にグラフを作成してくれる「Chart.js」と世界のコロナウイルスに関するデータを提供してくれるAPIを見つけたので、今日はこれらとVue.jsを組み合わせて世界のコロナウイルスのデータを表示するグラフを作っていきたいと思います。

#今回作るもの
APIから国別のコロナウイルスについてのデータを取得し、そのデータをChar.jsを使って棒グラフとしてブラウザ（今回はGoogle Chrome）へ映すプログラム。また、今回扱うAPIはコロナウイルスについて数種類のデータを提供しているため、グラフの利用者がほしいデータの種類を利用者自身がブラウザ上でを選べるようにする。

#本日の材料はこちら

• Chart.jsファイル（ダウンロードはこちら）
• API(ダウンロードはこちら)
• Vue.js(グラフの値の操作等で使うだけなので、面倒くさければjavascriptをそのまま使っても大丈夫。ちなみにダウンロードはこちら)

#では、実際に作っていく！
今回の工程

1. Chart.js使い、ブラウザ上にグラフを作成する。
2. APIからデータを取得する
3. ブラウザ上からグラフを操作できる仕組みを作る

##1. Chart.js使い、ブラウザ上にグラフを作成する。
Chart.jsの扱い方はとても簡単です。Chart.jsを使うためには、CDNを利用するかファイル自体をダウンロードし、ブラウザへ表示したいHTMLファイルにscriptタグで埋め込むだけ！
あとはChart.jsの公式ホームページかこの記事に書いてあるコードをコピペすればすぐに使えます。
あとはコピペしたコードのChartクラス内のdataプロパティなどをいじっていれば扱い方はすぐにわかると思います。

##2. APIからデータを取得する
APIからデータを取り出すために、今回はfetch()を使ってみました。コードはこんな感じ

js

 const infoArray = await fetch('https://api.covid19api.com/summary') //awaitはasyncがついている関数内でしか使えないので注意！
    .then(function(response) {
      return response.json();
    }).then(function (data) {
        return data.Countries;
    });

データは変数（今回はinfoArray）にあるので、これを少し加工してChartクラス内のdataプロパティにセットすれば、APIからの情報をグラフで表せます！

##3. ブラウザ上からグラフを操作できる仕組みを作る
ブラウザだけではデータベースもなく、jsだとcookieを使ったユーザーからのデータの保持が手軽にできる方法がない。（自分が探していないだけでもしかしたらあるかも）ではどうすれば良いか？そこで今回使用するのはsessionStorage。こちらは配列でブラウザでのユーザーの入力データを保持できます。

js

sessionStorage['kaneko'] = 'kinironoyatu'; 
sessionStorage['Orotimaru'] = 'Yu-sho-'; 

console.log(sessionStorage.getItem('Kaneko')); //consoleにkinironoyatuと表示される
console.log(sessionStorage.getItem('Orotimaru')); //consoleにYu-sho-と表示される

localStorage.tokenでデータを保持しようと初めは考えていましたが、複数のデータを保持させることができなかったので、sessionStorageを使用しました。もしsessionStorageについてもう少し知りたい場合は下の記事を見てみてください。
Qiita sessionStorageをつかってみる

このsessionStorageを使用して作成した見た目（HTML）とその機能（Vue.js）がこちら

body

<p>Select a category you want to know.</p>
    <div id="vue">
        <form style="display: flex;">
            <div v-for="category in categories">
                <input type="radio" name="category" :value=category v-model="select">{{category}} //見たいデータのカテゴリーの選択しの表示
            </div>
            <button @click="selectCategory" style="margin:0 20px;">check!</button> //カテゴリーの切り替え
            <button @click="back" style="margin:0 10px;">back</button> //次の27か国のデータを表示
            <button @click="next" style="margin:0 10px;">next</button> //前の27か国のデータを表示
        </form>
    </div>
    <canvas id="myChart"></canvas> //グラフの表示

Vue.js

const categories = ['NewConfirmed', 'TotalConfirmed', 'NewDeaths',　'TotalDeaths',　'NewRecovered',　'TotalRecovered',]
const getEntry = sessionStorage.getItem('entry') 

new Vue({
    el:'#vue',
    data: {
        categories: categories,
        select: '',
    },
    created: function () {
        if (!getEntry) {
            sessionStorage['entry'] = '0'   
        }
    },
    methods: {
        selectCategory: function () {
            sessionStorage['select'] = this.select
        },
        next: function () {
            switch (getEntry) {
                case '0':
                    sessionStorage['entry'] = '27'
                    break
                case '27':
                    sessionStorage['entry'] = '54'
                    break
                case '54':
                    sessionStorage['entry'] = '81'
                    break
                case '81':
                    sessionStorage['entry'] = '108'
                    break
                case '108':
                    sessionStorage['entry'] = '135'
                    break
                case '135':
                    sessionStorage['entry'] = '162'
                    break
                case '162':
                    sessionStorage['entry'] = '189'
                    break
                default:
                    sessionStorage['entry'] = '216'
                    break
            }
        },
        back: function () {
            switch (getEntry) {
                case `216`:
                    sessionStorage['entry'] = '189'
                    break
                case '189':
                    sessionStorage['entry'] = '162'
                    break
                case '162':
                    sessionStorage['entry'] = '135'
                    break
                case '135':
                    sessionStorage['entry'] = '108'
                    break
                case '108':
                    sessionStorage['entry'] = '81'
                    break
                case '81':
                    sessionStorage['entry'] = '54'
                    break
                case '54':
                    sessionStorage['entry'] = '27'
                    break
                default:
                    sessionStorage['entry'] = '0'
                    break
            }
        }
    }
})

簡単に機能を説明しますと、HTML部分の<button>を押すとVue.jsの部分でそれに応じてsessionStorageを書き換える感じになっています。
また、もともとのAPIの総データ数があまりにも多く、ブラウザで一度にすべての国の情報を載せられなかったため表示できる国の数を制限しました。next、backを押すことでブラウザに表示されていない国のデータを表示させることができま。）あと悔しいことにsessionStorageは文字列データしか扱えないため、こんなに不格好なプログラムになってしまいました。

#完成したものがこちら！

ネットを漁っていたら、グラフをお手軽に作成できる作成「Chart.js」なるものとコロナの情報がお手軽に手に入るAPI（https://t.co/VqyaFTWy0n）を見つけたので、さっそく世界中のコロナの情報がグラフで見れるプログラムを書いてみました。動画は実際にこれを動かしている時のものです。 pic.twitter.com/TlVOtK9aag

— サントゥー (@SAshunchan) April 29, 2020

#GitHubで公開してます
git cloneなどでコードを詳しく見たい方はこちら
すぐに動かせるので、ぜひ動かしてみてください！

※2020/02/25 追記
APIのデータの数が変わったことで、このプログラムのままでは表示できない国が出てしまいました。もしAPIのすべてのデータを表示させたいのであればChart.jsで一画面に表示させる国の数を調整する必要があります。

今回の記事はこれで以上です。ではまた！

2020/11/2 追記
今回行ったことをバージョンアップさせてWebアプリを作成してみました！こちらも是非！
アプリケーションはこちらから
その時の記事はこちらから
世界中のコロナのデータをグラフで見れるWebアプリを作成し、それによりAPIの見え方が変わったときの話