東京都 新型コロナウイルス感染症対策サイトで使われている技術

日本国内における新型コロナウイルスの感染拡大にともない、東京都が[新型コロナウイルス感染症対策サイト](https://stopcovid19.metro.tokyo.lg.jp/)を公開しています。

https://stopcovid19.metro.tokyo.lg.jp/

ここでは、このウェブサイトで使われている技術について見ていきます。

## GitHub

このウェブサイトのソースコードは、[GitHub](https://github.com/)上で公開されています（！）

https://github.com/tokyo-metropolitan-gov/covid19

GitHubは、言わずと知れたソースコードホスティングサービスです（設計図共有サイトではありません）。[^1]
イシューやプルリクエストも受け付けており、既に多くの人がコントリビューターとなっています。[^2]

## GitHub Actions

[GitHub Actions](https://help.github.com/ja/actions)は、GitHubが提供しているCI/CDツールです。
このプロジェクトでは、ビルドやデプロイ、ソースコードの構文チェックなどがGitHub Actionsでおこなわれています。[^3]

## Renovate

ライブラリの更新は、[Renovate](https://renovatebot.com/)によって自動化されています。[^4]

## Nuxt.js

[Nuxt.js](https://ja.nuxtjs.org/)は、ウェブサイトのインターフェースを構築するためのJavaScriptフレームワークである[Vue.js](https://jp.vuejs.org/)に、いくつかのライブラリを組み込んだフレームワークです。
もともとはSSR（サーバーサイドレンダリング）のためのフレームワークでしたが、用途に応じてSPA（シングルページアプリケーション）やSSG（静的サイト生成）など、様々なレンダリングモードを使用することができます。

## Vuetify.js

[Vuetify.js](https://vuetifyjs.com/ja/)は、マテリアルデザインに準拠したVue.js用のUIフレームワークです。
もっとも、このプロジェクトでは一部のコンポーネントの利用にとどまっており、マテリアルデザイン感はそんなにありませんが。

## vue-chartjs

[vue-chartjs](https://vue-chartjs.org/ja/)は、棒グラフや円グラフなどのチャートを描画するためのライブラリである[Chart.js](https://www.chartjs.org/)をVue.jsで使うためのライブラリです。
このプロジェクトでは、陽性患者数や検査実施数などのデータを視覚的にわかりやすくするために、vue-chartjsでグラフを描画しています。

## nuxt-i18n

[nuxt-i18n](https://nuxt-community.github.io/nuxt-i18n/)は、Nuxt.js用のi18nライブラリです。
このウェブサイトは多言語対応をしており、そのためにこのライブラリが使われています。[^5]

## Transifex

nuxt-i18nで使用する翻訳の定義は、[Transifex](https://www.transifex.com)というサービス上で管理されています。[^6]

## TypeScript

[TypeScript](https://www.typescriptlang.org/)は、JavaScriptのメタ言語です。
Nuxt.jsでは、追加パッケージによって公式にTypeScriptをサポートしています。[^7]

## Sass

[Sass](https://sass-lang.com/)は、CSSのメタ言語です。
オリジナルのSASS記法とCSSに近いSCSS記法がありますが、このプロジェクトでは主にSCSS記法が使用されています。

## ESLint

[ESLint](https://eslint.org/)は、JavaScriptのリンターです。
このプロジェクトでは、[@nuxtjs/eslint-config-typescript](https://www.npmjs.com/package/@nuxtjs/eslint-config-typescript)と[eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)が使用されています。[^8]

## stylelint

[stylelint](https://stylelint.io/)は、CSSのリンターです。
このプロジェクトでは、[stylelint-config-standard](https://www.npmjs.com/package/stylelint-config-standard)と[stylelint-config-prettier](https://www.npmjs.com/package/stylelint-config-prettier)が使用されています。[^9]

## Prettier

[Prettier](https://prettier.io/)は、JavaScript、CSS、HTMLなどのフォーマッターです。
このプロジェクトでは、[eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier)を用いてESLint上でPrettierを動かしています。[^8]

## Firebase

このウェブサイトは、[Firebase](https://firebase.google.com/?hl=ja)でホスティングされています。[^10]

[^1]: [GitHubは「設計図共有サイト」？　日経記事の見出しが話題に　その後修正 - ITmedia NEWS](https://www.itmedia.co.jp/news/articles/1806/05/news069.html)
[^2]: [Contributors to tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/graphs/contributors)
[^3]: [Actions · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/actions)
[^4]: [covid19/renovate.json at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/.github/renovate.json)
[^5]: [covid19/nuxt-i18n.config.ts at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/nuxt-i18n.config.ts)
[^6]: [covid19/TRANSLATION.md at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/.github/TRANSLATION.md)
[^7]: [Nuxt TypeScript](https://typescript.nuxtjs.org/ja/)
[^8]: [covid19/.eslintrc.js at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/.eslintrc.js)
[^9]: [covid19/stylelint.config.js at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/stylelint.config.js)
[^10]: [covid19/firebase.json at development · tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/firebase.json)