Help us understand the problem. What is going on with this article?

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

日本国内における新型コロナウイルス(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-typescripteslint-config-prettierが使用されています。7

stylelint

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

Prettier

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

Netlify

Netlifyは、静的ウェブサイトホスティングサービスです。
このプロジェクトでは、Nuxt.jsで静的に生成したアプリケーションをNetlifyにデプロイしています。
そのため、プルリクエストを作成すると自動的にNetlify上でビルドが走り、プレビューができるようになっています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした