リーダブルコード

JavaScript与C++代码可读性优化方法

最新推荐文章于 2025-12-06 23:53:01 发布

原创最新推荐文章于 2025-12-06 23:53:01 发布 · 1.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

### **8.6章「巨大な文を分割する」逐語録（詳細版）**

---

#### **1. 導入部分**
「こちらはJavaScriptのコードで、ユーザーが『up』または『Down』ボタンで投票した際に、対応する👍（thumbs_up）または👎（thumbs_down）アイコンをハイライト表示する機能です。具体的には、投票値（vote_value）に応じて、以下の動作をします。」

- **動作の詳細**:
- `vote_value == "up"` の場合:
- 👍アイコンに `highlighted` クラスを追加（ハイライト表示）。
- 👎アイコンから `highlighted` クラスを削除（非ハイライト）。
- `vote_value == "Down"` の場合:
- 👎アイコンをハイライト、👍アイコンを非ハイライト。
- それ以外（デフォルト）:
- 両アイコンのハイライトを解除。

---

#### **2. 元のコードの問題点**
「元のコードには、次のような課題があります。」

1. **重複したDOM操作**:
- `$("#thumbs_up" + message_num)` や `$("#vote_value" + message_num)` が繰り返し登場。
- 同じ要素を何度も取得するため、パフォーマンスの低下やコードの冗長化を招く。

2. **マジックストリングの使用**:
- `"highlighted"` というクラス名が直接記述されており、スペルミスのリスクがある。
- （補足）実際の例では `"highlighted"` のスペルミス（`"highligted"`）が発生しやすい。

3. **可読性の低さ**:
- 条件分岐とDOM操作が複雑に絡み合い、一目でロジックを理解するのが難しい。

---

#### **3. 改善後のコードの解説**
「改善後のコードでは、次の変更を加えました。」

1. **要約変数の導入**:
```javascript
var thumbs_up = $("#thumbs_up" + message_num); // 👍アイコンの要素を変数化
var thumbs_down = $("#thumbs_down" + message_num); // 👎アイコンの要素を変数化
var vote_value = $("#vote_value" + message_num).html(); // 投票値を取得
var hi = "highlighted"; // クラス名を変数化
```
- **利点**:
- 重複するDOM操作を削減。
- 変数名（`thumbs_up`、`hi`）で意図を明確化。

2. **ロジックの単純化**:
```javascript
if (vote_value == "up") {
thumbs_up.addClass(hi); // 👍をハイライト
thumbs_down.removeClass(hi);
} else if (vote_value == "Down") {
thumbs_up.removeClass(hi);
thumbs_down.addClass(hi); // 👎をハイライト
} else {
thumbs_up.removeClass(hi); // デフォルト処理
thumbs_down.removeClass(hi);
}
```
- **利点**:
- 条件分岐と操作が1対1で対応し、読みやすい。
- `hi` 変数を使うことで、クラス名変更時の修正箇所が1箇所で済む。

---

#### **4. 改善の効果**
「この修正により、次のようなメリットが得られます。」

1. **保守性の向上**:
- `"highlighted"` のスペルミス防止。
- クラス名の変更が容易（例: `hi` を `"active"` に変更するだけ）。

2. **DRY原則の遵守**:
- 同じコードを繰り返さないことで、バグの発生確率を低減。

3. **可読性の向上**:
- 変数名が「何をしているか」を説明するため、コードの目的が明確。

---

### **8.7章「式を簡潔にするもう1つの創造的な方法」逐語録（詳細版）**

---

#### **1. 導入部分**
「この章では、C++で統計データ（メモリ使用量、プロセス数など）を加算する処理を、マクロを使って簡潔にする例を紹介します。元のコードは、各フィールドごとにほぼ同じ加算処理を繰り返していました。」

---

#### **2. 元のコードの問題点**
```cpp
void AddStats(const Stats& add_from, Stats* add_to) {
add_to->set_total_memory(add_from.total_memory() + add_to->total_memory());
add_to->set_free_memory(add_from.free_memory() + add_to->free_memory());
add_to->set_swap_memory(add_from.swap_memory() + add_to->swap_memory());
// ...（他のフィールドも同様）
}
```
- **課題**:
1. **冗長性**:
- `set_XXX` と `XXX()` のパターンが繰り返される。
2. **修正の手間**:
- フィールド追加時に同じコードを毎回書く必要がある。
3. **可読性**:
- 似た式が連続し、本質的な処理が埋もれる。

---

#### **3. 改善後のコードの解説**
「マクロ `ADD_FIELD` を定義し、フィールド名だけを指定して処理を共通化します。」
```cpp
void AddStats(const Stats& add_from, Stats* add_to) {
#define ADD_FIELD(field) \
add_to->set_##field(add_from.field() + add_to->field())

ADD_FIELD(total_memory); // マクロ展開で加算処理を生成
ADD_FIELD(free_memory);
ADD_FIELD(swap_memory);
// ...

#undef ADD_FIELD // マクロのスコープを終了
}
```
- **マクロの動作**:
- `ADD_FIELD(total_memory)` は次のように展開される:
```cpp
add_to->set_total_memory(add_from.total_memory() + add_to->total_memory());
```
- `##` はトークン連結演算子で、`set_` と `field` を結合する。

- **利点**:
1. **コードの簡潔化**:
- フィールド追加時に1行で記述可能。
2. **一貫性の確保**:
- すべての加算処理が同じ形式で行われる。
3. **保守性の向上**:
- ロジック変更時はマクロのみ修正すればよい。

---

#### **4. 注意点と適用範囲**
「マクロには賛否がありますが、次のような場面で有効です。」

- **適用が有効な場合**:
- 同じパターンの処理が繰り返される。
- フィールド名のみが異なる。
- **避けるべき場合**:
- 複雑なロジックを含む（デバッグが困難になるため）。
- 言語でより安全な代替手段（例: C++のテンプレート）が使える場合。

---

### **両章のまとめ**
「どちらの章も、『巨大なコードを分割して可読性を高める』というテーマで貫かれています。」

- **8.6章**:
- **手法**: 要約変数で重複を削除。
- **キーワード**: DRY原則、自己文書化。
- **8.7章**:
- **手法**: マクロでパターンを抽象化。
- **キーワード**: コード生成、一貫性。

「これらの技法は、言語やプロジェクトを問わず応用できます。コードを書くときは、『読み手が理解しやすいか？』を常に意識しましょう。」

---

### **質疑応答想定例**
- **Q**: マクロの代わりにC++のテンプレートを使えないですか？
**A**: はい、可能です。ただし、テンプレートはコンパイル時解決のため、今回のような実行時のフィールド操作にはマクロが適している場合もあります。

- **Q**: `hi` のような短い変数名はわかりにくくないですか？
**A**: スコープが短い（関数内のみ）場合は問題ありません。むしろ、`highlightedClassName` など長すぎる名前より簡潔さを優先します。

このレベルで網羅的に説明すれば、聴衆はコードの意図と改善点を完全に理解できるでしょう！