PositiveNumberByDevelopedDateCardとPositiveNumberByDiagnosedDateCardで重複した処理がある

[goki90210]

改善詳細 / Details of Improvement

https://github.com/tokyo-metropolitan-gov/covid19/blob/04f0edade82e185f44a5231538b9f7d87f0796a6/components/cards/PositiveNumberByDevelopedDateCard.vue#L51-L80
と
https://github.com/tokyo-metropolitan-gov/covid19/blob/04f0edade82e185f44a5231538b9f7d87f0796a6/components/cards/PositiveNumberByDiagnosedDateCard.vue#L35-L63
の処理が重複しています。（SonarQubeは「コピペ」にうるさいです。）

スクリーンショット / Screenshot

なし

期待する見せ方・挙動 / Expected behavior

• 重複処理をなくす。

動作環境・ブラウザ / Environment

• 動作環境に依存しない

[kaizumaki]

@goki90210 ああ、なるほどですね。これはコンポーネントを新たに作ってimportするのがいいのでしょうか。

[nard-tech]

@goki90210 @kaizumaki この重複は仕方ないと思います．コンポーネントを共通化しても，

• 「1つの Card あたり1つのコンポーネント」の原則が崩れる
• よって可読性が悪くなる
• 片方の Card の内容だけ変更した場合に対応が面倒になる

といったデメリットがあるので，重複をなくすだけの目的で共通化するのは好ましくないと思います．

SonarQube の指摘を愚直にすべて直すのではなく，参考程度にとどめておく方がよいのではないでしょうか．

[goki90210]

*「1つの Card あたり1つのコンポーネント」の原則が崩れる

「コンポーネント」を同じにしろと言ってはいないですよ。
同じ「処理」をやっているのであれば「処理」を共通化できませんか？と言っていたのですが、この程度の処理だと共通化も難しいでしょうか…。

もう少し暇が取れたら手が動かせるのですが、口出しばかりで申し訳ないです。

[nard-tech]

@goki90210

「処理」をやっているのであれば「処理」を共通化できませんか？

なるほど．失礼しました．

よくよく読むと，

TimeBarChart.extends({
  computed: {
    displayInfo() {
      const { lastDay, lastDayData } = calcDayBeforeRatio({
        displayData: this.displayData,
        dataIndex: 1,
      })
      const formattedLastDay = this.$d(lastDay, 'date')
      if (this.dataKind === 'transition') {
        return {
          lText: lastDayData,
          sText: `${formattedLastDay} ${this.$t('日別値')}（${this.$t(
            '現在判明している人数であり、後日修正される場合がある'
          )}）`,
          unit: this.unit,
        }
      }
      return {
        lText: lastDayData,
        sText: `${formattedLastDay} ${this.$t('累計値')}`,
        unit: this.unit,
      }
    },
  },
})

といった形で component を定義するときれいに共通化ができそうです．

しかし，別件で refactor が進行中 (#5404, #6102) ですので，これらが終わってから着手する方がよさそうです．