日本国内における新型コロナウイルス(COVID-19)の感染拡大にともない、東京都が新型コロナウイルス感染症対策サイトを公開しています。
ここでは、このウェブサイトで使われている技術について見ていきましょう。
GitHub
このウェブサイトのソースコードは、GitHub上で公開されています(!)
GitHubは、言わずと知れたソースコードホスティングサービスです(設計図共有サイトではありません)。1
イシューやプルリクエストも受け付けており、既に多くの人がコントリビューターとなっています。2
GitHub Actions
GitHub Actionsは、GitHubが提供しているCI/CDツールです。
このプロジェクトでは、ビルドやデプロイ、ソースコードの構文チェックなどをGitHub Actionsで行なっています。3
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ライブラリです。
このウェブサイトは多言語対応をしており、そのためにこのライブラリが使われています。4
Transifex
nuxt-i18nで使用する翻訳の定義は、Transifexというサービス上で管理されています。5
TypeScript
TypeScriptは、JavaScriptのメタ言語です。
Nuxt.jsでは、追加パッケージによって公式にTypeScriptをサポートしています。6
Sass
Sassは、CSSのメタ言語です。
オリジナルのSASS記法とCSSに近いSCSS記法がありますが、このプロジェクトでは主にSCSS記法が使用されています。
ESLint
ESLintは、JavaScriptのリンターです。
このプロジェクトでは、@nuxtjs/eslint-config-typescriptとeslint-config-prettierが使用されています。7
stylelint
stylelintは、CSSのリンターです。
このプロジェクトでは、stylelint-config-standardとstylelint-config-prettierが使用されています。8
Prettier
Prettierは、JavaScript、CSS、HTMLなどのフォーマッターです。
このプロジェクトでは、eslint-plugin-prettierを用いてESLint上でPrettierを動かしています。7
Netlify
Netlifyは、静的ウェブサイトホスティングサービスです。
このプロジェクトでは、Nuxt.jsで静的に生成したアプリケーションをNetlifyにデプロイしています。
そのため、プルリクエストを作成すると自動的にNetlify上でビルドが走り、プレビューができるようになっています。

