【ChatGPT】1. コードリファクタリング > 可読性・保守性・再利用性について

・プロンプト

※※※コード全文を提示、内容は省略します※※※

このコードはUIを用いて計算を行う電算機のコードである。
次の点を考慮していくつかの案を提示しろ。
・可読性
・保守性
・再利用性

・回答内容

このVue.jsの電卓コンポーネントを改善するために、以下の点を考慮していくつかの案を提示します。これにより、可読性、保守性、再利用性が向上するでしょう。

1. 可読性の向上

1.1 変数とメソッドの命名

• selectNumber → handleNumberInput
• selectOparator → handleOperatorInput
• showResult → calculateResult
• clearCurrent → clearCurrentNumber
• clearAll → resetCalculator

1.2 コメントの追加

• コードの各セクションに説明的なコメントを追加します。

javascript

methods: {
  // 数字ボタンが押されたときの処理
  handleNumberInput(num) {
    // ...
  },

  // 演算子ボタンが押されたときの処理
  handleOperatorInput(operator) {
    // ...
  },

  // 計算結果を表示する
  calculateResult() {
    // ...
  },

  // 現在の入力をクリア
  clearCurrentNumber() {
    // ...
  },

  // 全てのデータをリセット
  resetCalculator() {
    // ...
  }
}

1.3 スタイルの整理

• スタイルのクラス名が分かりやすく、関連性があるようにします。例えば、number-buttons → number-button-container など。

css

.number-button-container button {
  /* ... */
}

.operator-button-container button {
  /* ... */
}

2. 保守性の向上

2.1 リファクタリングメソッド

• setTotalNumメソッドを別のファイルに分けて、計算ロジックを抽象化することで、保守性を向上させます。

javascript

// utils/calculator.js
import Decimal from 'decimal.js-light';

export function calculate(prev, next, operator) {
  switch (operator) {
    case '+':
      return new Decimal(prev).plus(next);
    case '-':
      return new Decimal(prev).minus(next);
    case '÷':
      return new Decimal(prev).div(next);
    case '×':
      return new Decimal(prev).times(next);
    default:
      return next;
  }
}

• コンポーネント内で使用する際には、次のようにインポートします。

javascript

import { calculate } from '@/utils/calculator';

methods: {
  total() {
    return this.numArray.reduce((prev, next, index) => {
      return calculate(prev, next, this.opeArray[index]);
    });
  }
}

2.2 状態管理の改善

• VuexやPiniaのような状態管理ライブラリを使用して、コンポーネントの状態を管理すると、コードの保守性が向上します。

3. 再利用性の向上

3.1 コンポーネントの分割

• 電卓の各部分をコンポーネントに分割することで再利用性が向上します。

html

<!-- CalculatorButton.vue -->
<template>
  <button @click="onClick" class="button" :class="buttonClass">{{ label }}</button>
</template>

<script>
export default {
  props: ['label', 'buttonClass'],
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
}
</script>

• CalculatorButton コンポーネントを使用することで、ボタンの種類に応じたクラスやラベルを動的に設定できます。

html

<!-- Calculator.vue -->
<template>
  <div>
    <CalculatorButton v-for="num in buttons.num" :key="num" :label="num" buttonClass="is-dark" @click="handleNumberInput(num)" />
    <CalculatorButton v-for="operator in buttons.operator" :key="operator" :label="operator" buttonClass="is-primary" @click="handleOperatorInput(operator)" />
    <CalculatorButton label="=" buttonClass="is-success" @click="calculateResult" />
    <CalculatorButton label="C" buttonClass="is-danger" @click="clearCurrentNumber" />
    <CalculatorButton label="AC" buttonClass="is-danger" @click="resetCalculator" />
  </div>
</template>

3.2 ユーティリティ関数の作成

• 数字のフォーマットやエラーチェックなどの共通処理をユーティリティ関数として分けると、再利用性が向上します。

javascript

// utils/format.js
export function formatNumber(number) {
  let text = String(number);
  return text.replace(/^0{1,}([^.])/, "$1");
}

• コンポーネント内で使用する際には、次のようにインポートします。

javascript

import { formatNumber } from '@/utils/format';

computed: {
  showNum() {
    return this.isInsertNumber ? formatNumber(this.currentNumber) : this.total();
  }
}

これらの提案を実施することで、コードの可読性、保守性、再利用性が向上し、電卓コンポーネントの管理がより効率的になります。