Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
67
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@munieru_jp

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

日本国内における新型コロナウイルスの感染拡大にともない、東京都が新型コロナウイルス感染症対策サイトを公開しています。
ここでは、このウェブサイトで使われている技術について見ていきましょう。

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
67
Help us understand the problem. What are the problem?