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

.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 static/
 assets/
+libraries/auto_generated

README.md

@@ -64,6 +64,13 @@ $ docker-compose up --build
 $ vagrant up
 ```
 
+### `data/` 内にあるJSONデータの構造が変わった時
+次のコマンドで自動生成しているコードを再生成してください。  
+その上で実装を修正してください。
+```bash
+$ yarn generate-data-type
+```
+
 ### `Cannot find module ****` と怒られた時
 
 **yarn を使う場合**

components/AgencyBarChart.vue

@@ -48,9 +48,10 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import { ChartOptions } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import agencyData from '@/data/agency.json'
 import DataView from '@/components/DataView.vue'
-import { getGraphSeriesStyle } from '@/utils/colors'
+import { getGraphSeriesStyle } from '@/libraries/utils/colors'
+import { Registry } from '@/libraries/Registry'
+const agencyData = Registry.AgencyRepository.data
 
 interface HTMLElementEvent<T extends HTMLElement> extends MouseEvent {
   currentTarget: T

components/DataView.vue

@@ -148,7 +148,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
+import { convertDatetimeToISO8601Format } from '@/libraries/utils/formatDate'
 
 export default Vue.extend({
   props: {

components/MetroBarChart.vue

@@ -55,7 +55,7 @@ import { TranslateResult } from 'vue-i18n'
 import { ChartOptions, ChartData } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import DataView from '@/components/DataView.vue'
-import { getGraphSeriesStyle } from '@/utils/colors'
+import { getGraphSeriesStyle } from '@/libraries/utils/colors'
 import ExternalLink from '@/components/ExternalLink.vue'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {

components/PageHeader.vue

@@ -15,7 +15,8 @@ import Vue from 'vue'
 export default Vue.extend({
   props: {
     icon: {
-      type: String
+      type: String,
+      default: ''
     }
   }
 })

components/TimeBarChart.vue

@@ -51,13 +51,13 @@
 import Vue from 'vue'
 import { TranslateResult } from 'vue-i18n'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import { GraphDataType } from '@/utils/formatGraph'
+import { GraphDataType } from '@/libraries/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 
-import { getGraphSeriesStyle } from '@/utils/colors'
+import { getGraphSeriesStyle } from '@/libraries/utils/colors'
 
 type Data = {
   dataKind: 'transition' | 'cumulative'

components/TimeStackedBarChart.vue

@@ -66,7 +66,7 @@ import { TranslateResult } from 'vue-i18n'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
-import { getGraphSeriesStyle } from '@/utils/colors'
+import { getGraphSeriesStyle } from '@/libraries/utils/colors'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {
   currentTarget: T

components/VisitorsBarChart.vue

@@ -67,7 +67,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear'
 import updateLocale from 'dayjs/plugin/updateLocale'
 import minMax from 'dayjs/plugin/minMax'
 import DataView from '@/components/DataView.vue'
-import { getGraphSeriesStyle } from '@/utils/colors'
+import { getGraphSeriesStyle } from '@/libraries/utils/colors'
 import SourceLink from '@/components/SourceLink.vue'
 
 dayjs.extend(updateLocale)

components/WhatsNew.vue

@@ -41,7 +41,7 @@ import Vue from 'vue'
 import {
   convertDateByCountryPreferTimeFormat,
   convertDateToISO8601Format
-} from '@/utils/formatDate'
+} from '@/libraries/utils/formatDate'
 
 export default Vue.extend({
   props: {

components/cards/AgencyCard.vue

@@ -16,16 +16,16 @@
 </template>
 
 <script>
-import agencyData from '@/data/agency.json'
 import AgencyBarChart from '@/components/AgencyBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     AgencyBarChart
   },
   data() {
     return {
-      agencyData
+      agencyData: Registry.AgencyRepository.data
     }
   }
 }

components/cards/ChiyodaVisitorsCard.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ChiyodaData from '@/data/13101_daily_visitors.json'
+import { Registry } from '../../libraries/Registry'
 import VisitorsBarChart from '@/components/VisitorsBarChart.vue'
 
 export default {
@@ -25,7 +25,7 @@ export default {
   },
   data() {
     return {
-      chartData: ChiyodaData
+      chartData: Registry.ChiyodaRepository.data
     }
   }
 }

components/cards/ConfirmedCasesAttributesCard.vue

@@ -14,16 +14,17 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import formatGraph from '@/utils/formatGraph'
-import formatTable from '@/utils/formatTable'
+import formatGraph from '@/libraries/utils/formatGraph'
+import formatTable from '@/libraries/utils/formatTable'
 import DataTable from '@/components/DataTable.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     DataTable
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 感染者数グラフ
     const patientsGraph = formatGraph(Data.patients_summary.data)
     // 感染者数

components/cards/ConfirmedCasesDetailsCard.vue

@@ -28,17 +28,18 @@
 </style>
 
 <script>
-import Data from '@/data/data.json'
-import formatConfirmedCases from '@/utils/formatConfirmedCases'
+import formatConfirmedCases from '@/libraries/utils/formatConfirmedCases'
 import DataView from '@/components/DataView.vue'
 import ConfirmedCasesDetailsTable from '@/components/ConfirmedCasesDetailsTable.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     DataView,
     ConfirmedCasesDetailsTable
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 検査陽性者の状況
     const confirmedCases = formatConfirmedCases(Data.main_summary)
 

components/cards/ConfirmedCasesNumberCard.vue

@@ -13,15 +13,16 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import formatGraph from '@/utils/formatGraph'
+import formatGraph from '@/libraries/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     TimeBarChart
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 感染者数グラフ
     const patientsGraph = formatGraph(Data.patients_summary.data)
 

components/cards/ConsultationDeskReportsNumberCard.vue

@@ -14,15 +14,16 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import formatGraph from '@/utils/formatGraph'
+import formatGraph from '@/libraries/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     TimeBarChart
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 帰国者・接触者 電話相談センター 相談件数
     const querentsGraph = formatGraph(Data.querents.data)
 

components/cards/InspectionPersonsNumberCard.vue

@@ -32,15 +32,16 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import formatGraph from '@/utils/formatGraph'
+import formatGraph from '@/libraries/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     TimeBarChart
   },
   data() {
+    const Data = Registry.DataRepository.data
     const formatData = Data.inspection_persons.labels.map((date, i) => {
       return {
         日付: date,

components/cards/MetroCard.vue

@@ -30,17 +30,16 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import MetroData from '@/data/metro.json'
 import MetroBarChart from '@/components/MetroBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     MetroBarChart
   },
   data() {
     // 都営地下鉄の利用者数の推移
-    const metroGraph = MetroData
+    const metroGraph = Registry.MetroRepository.data
     for (const dataset of metroGraph.datasets) {
       dataset.label = this.getWeekLabel(dataset.label)
     }
@@ -67,6 +66,7 @@ export default {
       })
     }
 
+    const Data = Registry.DataRepository.data
     const data = {
       Data,
       metroGraph,

components/cards/ShinjukuVisitorsCard.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ShinjukuData from '@/data/13104_daily_visitors.json'
+import { Registry } from '../../libraries/Registry'
 import VisitorsBarChart from '@/components/VisitorsBarChart.vue'
 
 export default {
@@ -25,7 +25,7 @@ export default {
   },
   data() {
     return {
-      chartData: ShinjukuData
+      chartData: Registry.ShinjukuRepository.data
     }
   }
 }

components/cards/TelephoneAdvisoryReportsNumberCard.vue

@@ -14,15 +14,16 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
-import formatGraph from '@/utils/formatGraph'
+import formatGraph from '@/libraries/utils/formatGraph'
 import TimeBarChart from '@/components/TimeBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     TimeBarChart
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 相談件数
     const contactsGraph = formatGraph(Data.contacts.data)
 

components/cards/TestedCasesDetailsCard.vue

@@ -49,17 +49,18 @@ ul.notes {
 </style>
 
 <script>
-import Data from '@/data/data.json'
-import formatTestedCases from '@/utils/formatTestedCases'
+import formatTestedCases from '@/libraries/utils/formatTestedCases'
 import DataView from '@/components/DataView.vue'
 import TestedCasesDetailsTable from '@/components/TestedCasesDetailsTable.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     DataView,
     TestedCasesDetailsTable
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 検査陽性者の状況
     const testedCases = formatTestedCases(Data.inspection_status_summary)
 

components/cards/TestedNumberCard.vue

@@ -22,14 +22,15 @@
 </template>
 
 <script>
-import Data from '@/data/data.json'
 import TimeStackedBarChart from '@/components/TimeStackedBarChart.vue'
+import { Registry } from '@/libraries/Registry'
 
 export default {
   components: {
     TimeStackedBarChart
   },
   data() {
+    const Data = Registry.DataRepository.data
     // 検査実施日別状況
     const inspectionsGraph = [
       Data.inspections_summary.data['都内'],

components/flow/FlowSpElder.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { onDoneScroll } from '@/utils/vueScrollTo'
+import { onDoneScroll } from '@/libraries/utils/vueScrollTo'
 import AccessibleIcon from '@/static/flow/responsive/accessible.svg'
 import ArrowForwardIcon from '@/static/flow/responsive/arrow_forward.svg'
 import DirectionsWalkIcon from '@/static/flow/responsive/directions_walk.svg'

components/flow/FlowSpGeneral.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { onDoneScroll } from '@/utils/vueScrollTo'
+import { onDoneScroll } from '@/libraries/utils/vueScrollTo'
 import HumanIcon from '@/static/flow/responsive/accessibility.svg'
 import ArrowForwardIcon from '@/static/flow/responsive/arrow_forward.svg'
 export default {

components/flow/FlowSpPast.vue

@@ -131,7 +131,7 @@
 </template>
 
 <script lang="ts">
-import { onDoneScroll } from '@/utils/vueScrollTo'
+import { onDoneScroll } from '@/libraries/utils/vueScrollTo'
 import ArrowForwardIcon from '@/static/flow/responsive/arrow_forward.svg'
 
 export default {

components/flow/FlowSpSuspect.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { onDoneScroll } from '@/utils/vueScrollTo'
+import { onDoneScroll } from '@/libraries/utils/vueScrollTo'
 import ArrowForwardIcon from '@/static/flow/responsive/arrow_forward.svg'
 import PhoneIcon from '@/static/flow/responsive/phone.svg'
 import SentimentIcon from '@/static/flow/responsive/sentiment_very_dissatisfied.svg'