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

日本国内における新型コロナウイルスの感染拡大にともない、東京都が新型コロナウイルス感染症対策サイトを公開しています。

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

GitHub

このウェブサイトのソースコードは、GitHub上で公開されています（！）

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

GitHub Actions

GitHub Actionsは、GitHubが提供しているCI/CDツールです。
このプロジェクトでは、ビルドやデプロイ、ソースコードの構文チェックなどがGitHub Actionsでおこなわれています。³

Renovate

ライブラリの更新は、Renovateによって自動化されています。⁴

Nuxt.js

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

Vuetify.js

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

vue-chartjs

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

nuxt-i18n

nuxt-i18nは、Nuxt.js用のi18nライブラリです。
このウェブサイトは多言語対応をしており、そのためにこのライブラリが使われています。⁵

Transifex

nuxt-i18nで使用する翻訳の定義は、Transifexというサービス上で管理されています。⁶

TypeScript

TypeScriptは、JavaScriptのメタ言語です。
Nuxt.jsでは、追加パッケージによって公式にTypeScriptをサポートしています。⁷

Sass

Sassは、CSSのメタ言語です。
オリジナルのSASS記法とCSSに近いSCSS記法がありますが、このプロジェクトでは主にSCSS記法が使用されています。

ESLint

ESLintは、JavaScriptのリンターです。
このプロジェクトでは、@nuxtjs/eslint-config-typescriptとeslint-config-prettierが使用されています。⁸

stylelint

stylelintは、CSSのリンターです。
このプロジェクトでは、stylelint-config-standardとstylelint-config-prettierが使用されています。⁹

Prettier

Prettierは、JavaScript、CSS、HTMLなどのフォーマッターです。
このプロジェクトでは、eslint-plugin-prettierを用いてESLint上でPrettierを動かしています。⁸

Firebase

このウェブサイトは、Firebaseでホスティングされています。¹⁰

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