JavaScript

【Vue.js Nuxt.js】東京都が作った新型コロナウィルス対策サイトのnuxt.config.jsを眺めてみよう【コードのお勉強】

みなさん、こんにちは。どんぶラッコです。

3月4日に東京都が公開した、新型コロナウィルス対策サイトが Vue.js(Nuxt.js) + Netlify の構成で作られていると話題です。

Wappalyzerで確認しても、上記の構成であることが確認できます。

そしてなんと、ソースコードがGithub のリポジトリに公開されています。

こんな絶好の勉強機会を逃してはならん!!

ということで、早速cloneしてローカル環境で確認できる状態にしました。

このブログでは私が着目した点をピックアップしてみます。

※3月5日 9:04 時点のリポジトリ内容を参考に記述します

nuxt.config.jsの確認

早速 nuxt.config.jsファイルを眺めていきます。

OGPタグをしっかり設定している

og:~ というのが当該のタグですね。

  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    },
    titleTemplate: '%s | 東京都 新型コロナウイルス対策サイト',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: '当サイトは新型コロナウイルス感染症(COVID-19)に関する最新情報を提供するために、東京都が開設したものです。'
      },
      {
        hid: 'og:site_name',
        property: 'og:site_name',
        content: '東京都 新型コロナウイルス対策サイト'
      },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      {
        hid: 'og:url',
        property: 'og:url',
        content: 'https://stopcovid19.metro.tokyo.lg.jp'
      },
      {
        hid: 'og:title',
        property: 'og:title',
        content: '東京都 新型コロナウイルス対策サイト'
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: '当サイトは新型コロナウイルス感染症(COVID-19)に関する最新情報を提供するために、東京都が開設したものです。'
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: 'https://stopcovid19.metro.tokyo.lg.jp/ogp.png'
      }
    ],
  },

TwitterなどのSNS媒体でシェアされた時に表示される方法を指定するやつです。

OGPの詳細についてはこちらのサイトに詳しく掲載されています。

plugins

2つのプラグインを作成しています。

  plugins: [
    {
      src: '@/plugins/vue-chart.js',
      ssr: true
    },
    '@/plugins/datetime-formatter.js'
  ],

vue-chart.jsのプラグイン内容はこんな感じ。

import Vue from 'vue'
import { Doughnut, Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

Vue.component('doughnut-chart', {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
})

Vue.component('bar', {
  extends: Bar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
})

公式サイトと比較しつつ読み進めていくと理解が進みます。

https://vue-chartjs.org/ja/guide/

また、datetime-formatter については、momentというJSライブラリを用いています。

import Vue from 'vue'
import moment from 'moment'

Vue.filter('datetimeFormatter', function(value) {
  const date = moment(value)
  return date.format('YYYY/MM/DD(ddd) HH:MM')
})

JSでは日付操作がしづらいので、多くのサイトが導入していますね!

https://momentjs.com/

build-modules / modules

この2つに関しては、vuetifyが使われてるのね〜、くらいで読み進めていました。

注目したいモジュールとしては、 nuxt-svg-loader 。 nuxtでsvgファイルを簡単に扱えるようにしてくれるものです。

これが実際どこで利用されているのかというと、相談窓口のフロー図。

PC版の場合は、 DesktopFlowSvgというコンポーネントが呼び出されるようになっています。

<template>
  <div class="Flow">
    <div class="Flow-Heading">
      <CovidIcon />
      <h2 class="Flow-Heading-Title">新型コロナウイルス感染症が心配なときに</h2>
    </div>
    <div class="Flow-Card">
      <h2>
        新型コロナウイルス感染症にかかる相談窓口について
      </h2>
      <div class="Flow-Card-Images only-pc">
        <DesktopFlowSvg />
      </div>
      <div class="only-sp">
        <div class="Flow-Card-Parts">
          <div class="mb-5">
            <img src="/flow/sp/sp_flow_01_01@2x.png" alt="発症前2週間以内の出来ごとと症状/「新型コロナウイルス感染者」と濃厚接触をした方/発熱または呼吸器症状" />
          </div>
          <div class="mx-2 mb-5">
            <img src="/flow/sp/sp_flow_01_02@2x.png" alt="流行地域への渡航・居住歴がある方 ご本人か濃厚接触をした方/呼吸器症状かつ発熱37.5℃以上" />
          </div>
...(後略)

スマホ版の場合はイメージが表示されますが、それもしっかりaltタグで設定されているのが印象的ですね。


他にもTypeScript設定がなされていたりと、いわゆるモダンな環境で開発されている本サイト。

コロナの動向をキャッチアップすることは勿論ですが、エンジニアとしても目が離せません。

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です