search

Tokyo-Metro-Gov / covid19

東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
https://stopcovid19.metro.tokyo.lg.jp/
MIT License
6.26k stars 1.97k forks source link

非機能要件（可読性・拡張性・設計） 問題点・改善点の整理 #2790

Open nard-tech opened 4 years ago

nard-tech commented 4 years ago

改善詳細 / Details of Improvement

という訳で，この issue に非機能要件の問題・改善すべき点を，必要性やデメリットも含め，まとめていきつつ議論を進めたいと思います．

nard-tech commented 4 years ago

component のディレクトリ構成（案）

nard-tech commented 4 years ago

component の使い方問題

例：components/cards/TestedCasesDetailsCard.vue 8行目〜

    <data-view
      :title="$t('検査実施状況')"
      :title-id="'details-of-tested-cases'"
      :date="Data.inspection_status_summary.date"
    >
      <template v-slot:button>
        <ul :class="$style.notes">
          <li>
            {{ $t('（注）医療機関が保険適用で行った検査は含まれていない') }}
          </li>
          <li>
            {{
              $t(
                '（注）検査実施人数には、チャーター機帰国者、クルーズ船乗客等は含まれていない'
              )
            }}
          </li>
          <li>
            {{
              $t(
                '（注）速報値として公開するものであり、後日確定データとして修正される場合あり'
              )
            }}
          </li>
        </ul>
      </template>

DataView.vue の実装を考えると，本来は <template v-slot:button> ではなく <template v-slot: description> を使うべき．

このような箇所が ConfirmedCasesDetailsCard.vue, TestedNumberBarChart.vue にも見られる．

追記 (2020-08-15): 解消または該当ファイル削除済み

nard-tech commented 4 years ago

component の中身が全体的に荒れている感あり

その他，page/index.vue 上の component, chart が全体的に荒れている印象があるので，dry で統一感のある構成にしたい．

nard-tech commented 4 years ago

JSONファイルとVueの間に中間層を設ける

data/data.json などからデータを取得する際に，中間層を設けることで型推論を可能とし、コードの保守性を上げる．

cf. JSONファイルとVueの間に中間層を設ける (#1100)

実装すると宣言した方がいらっしゃるが，音沙汰なしの状況．

nard-tech commented 4 years ago

tool/convert.php について

Nuxt.js のプロジェクトなので，JavaScript（または TypeScript）に書き換えたい．

型をしっかり付けるなら「JSONファイルとVueの間に中間層を設ける」とも関連してくるかも？

追記 (2020-08-15): tool/convert.php は削除されたため対応不要

nard-tech commented 4 years ago

data.json について

分割すべきでは？

property の日本語を英語にすべきでは？

nard-tech commented 4 years ago

template に data.json をそのまま放り込んでいる箇所がある

template に渡す値は <script></script> 内で絞り込みたい．

例: components/cards/ConfirmedCasesAttributesCard.vue

<template>
  <v-col cols="12" md="6" class="DataCard">
    <data-table
      :title="$t('陽性患者の属性')"
      :title-id="'attributes-of-confirmed-cases'"
      :chart-data="patientsTable"
      :chart-option="{}"
      :date="Data.patients.date"
      :info="sumInfoOfPatients"
      :url="'https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068'"
      :source="$t('オープンデータを入手')"
    />
  </v-col>
</template>

<script>
import Data from '@/data/data.json'
// （略）

export default {
  // （略）
  data() {
    // （略）

    const data = {
      Data,
      patientsTable,
      sumInfoOfPatients
    }
    return data
  }
}
</script>

追記 (2020-08-14): #5250 で対応

khsacc commented 4 years ago

非機能要件ということで、各vueファイルの Githubissues.

  • Githubissues is a development platform for aggregating issues.