6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-06

0. はじめに

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

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

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

1. 準備など

node.jsの10系及びyarnが必要です。node.js 13系を入れてる人は、nコマンド等によりnodeのバージョンを切り替えておきましょう。あと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://<yarn devを実行したホスト>:3000 にブラウザでアクセスすると見えます。

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

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

vscode.png

メインページのコードを開くとこんな感じです。ちゃんと各要素がコンポーネント化されているため、なんとトップページであるindex.vueは252行しかありません。 またコードを修正した場合でも、ESLintによるコーディング規約が整備されているのでPretter等いれておくとちゃんとオートフォーマットされます。コミッタになるにはこのへんを読むと良さそうです。

4. 使ってるデータとか

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

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

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();
      })),

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

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?