東京都 新型コロナウイルス感染症対策サイトを自宅で動かす＆コードを見てみる

# 0. はじめに
東京都の新型コロナウイルス感染症対策サイト、盛り上がってますね。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日の <a href="https://twitter.com/hashtag/%E6%96%B0%E5%9E%8B%E3%82%B3%E3%83%AD%E3%83%8A%E3%82%A6%E3%82%A4%E3%83%AB%E3%82%B9%E6%84%9F%E6%9F%93%E7%97%87%E5%AF%BE%E7%AD%96%E6%9C%AC%E9%83%A8%E4%BC%9A%E8%AD%B0?src=hash&amp;ref_src=twsrc%5Etfw">#新型コロナウイルス感染症対策本部会議</a>　で報告いたしました　コロナ対策の選用サイトを開設しました。新型コロナウイルス感染症対策に関する最新情報をできるだけリアルタイムでお伝えします。どうぞご覧ください。コチラ→　　　<a href="https://t.co/istd6Vjx4T">https://t.co/istd6Vjx4T</a></p>&mdash; 小池百合子 (@ecoyuri) <a href="https://twitter.com/ecoyuri/status/1234985373899448322?ref_src=twsrc%5Etfw">March 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

特に騒がれているのが<b>東京都といういかにもおかたそうなところがモダンな技術を使って情報発信した</b>という点です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">東京都のコロナウイルス最新情報サイト、Vue+Nuxt.js+Netlify+GitHub で SSR かつ SPA なのすごい <a href="https://t.co/2bZOgSXQqd">pic.twitter.com/2bZOgSXQqd</a></p>&mdash; koni@SocialDog/ツイッター管理SaaS (@koni) <a href="https://twitter.com/koni/status/1235122918582935552?ref_src=twsrc%5Etfw">March 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

フロントエンドエンジニアやまともなベンダーの人からすればこの技術スタックを見るだけで<b>「まじかよ…パラダイスじゃん」</b>と思えるこのアプリ、簡単に自宅で動かすことができます。

# 1. 準備など

node.jsの<b>10系</b>及びyarnが必要です。node.js 13系を入れてる人は、[nコマンド等によりnodeのバージョンを切り替えて](https://qiita.com/bigplants/items/2d75bf552e0da4a7e822)おきましょう。あとyarnのインストールも忘れずに。

```
npm i yarn
```

# 2. 動かし方

GitHubのREADME.mdに書いてありますがcloneしてyarn devするだけです。ただ、VM上で開発していてVMの外からアクセスしたい等の場合は--hostnameオプションで指定する必要があります。

```
git clone https://github.com/tokyo-metropolitan-gov/covid19
yarn dev --hostname 0.0.0.0
```

http://&lt;yarn devを実行したホスト&gt;:3000 にブラウザでアクセスすると見えます。


# 3. ソースコードを見てみる

Visual Studio Code でClone先のディレクトリを開くといい感じで必要なプラグイン(Vueを書くためのVetur等)が推奨されるのでいれてしまいましょう。またコードをいじりたい場合はPretter及びESLintもいれておきましょう。

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545787/ba9294b0-15cb-02f1-ed4f-afaec10bff90.png)

メインページのコードを開くとこんな感じです。ちゃんと各要素がコンポーネント化されているため、なんとトップページである<b>index.vueは252行しかありません。</b> またコードを修正した場合でも、ESLintによるコーディング規約が整備されているのでPretter等いれておくとちゃんとオートフォーマットされます。コミッタになるには[このへん](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/.github/CONTRIBUTING.md)を読むと良さそうです。


# 4. 使ってるデータとか

https://github.com/tokyo-metropolitan-gov/covid19/tree/development/data

ここにstaticなJSONで格納されています。commit履歴を見るとかなりの頻度で更新されているようです。

https://github.com/tokyo-metropolitan-gov/covid19/commit/87ba5cae7780fdf654b59ff04b7de92bbc031afe#diff-868ae2d65fb52e0bf680b28558a92a88

本当はこういったデータも都がオープンデータとしてAPI提供するなりできればよいのですが、そこはまだこれからという感じなのでしょう。ソースを見てみると元のエクセルファイルから使いやすいJSONデータに変換するためのツール類が見つかりました。

```php5:convert.php
  return [
    'date' => xlsxToArray(__DIR__.'/downloads/東京都患者発生発表数-RAW.xlsx', 'RAW', 'M1')[0][0],
    'data' => [
      '感染者数' => makeDateArray('2020-01-24')->merge($base_data->groupBy('リリース日')->map(function ($rows) {
        return $rows->count();
      })),
      '退院者数' => makeDateArray('2020-01-24')->merge($base_data->filter(function ($row) {
        return $row['退院'] === '〇' && !preg_match('/死亡$/', trim($row['備考']));
      })->groupBy('リリース日')->map(function ($rows) {
        return $rows->count();
      })),
```
https://github.com/tokyo-metropolitan-gov/covid19/blob/development/tool/convert.php

ちゃんとレガシーな部分との折り合いもつけつつできるところは最新の技術スタックで、というバランス感覚があったからこそできたサイトなのかなと思います。