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

#### ・プロンプト
:::note warn
※※※コード全文を提示、内容は省略します※※※
:::

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

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

### 1. 可読性の向上

#### 1.1 変数とメソッドの命名

- `selectNumber` → `handleNumberInput`
- `selectOparator` → `handleOperatorInput`
- `showResult` → `calculateResult`
- `clearCurrent` → `clearCurrentNumber`
- `clearAll` → `resetCalculator`

#### 1.2 コメントの追加

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

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

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

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

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

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

#### 1.3 スタイルの整理

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

```css:css
.number-button-container button {
  /* ... */
}

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

### 2. 保守性の向上

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

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

```javascript: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: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: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: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:javascript
// utils/format.js
export function formatNumber(number) {
  let text = String(number);
  return text.replace(/^0{1,}([^.])/, "$1");
}
```

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

```javascript:javascript
import { formatNumber } from '@/utils/format';

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

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