はじめに📕

この記事にたどり着いてくれて、ありがとうございます！

今回はライト目な記事で DRY原則 について学習しました！
軽く読み飛ばしてもらえたら嬉しいです！

事の発端💬

とある案件のコードレビューで、
「なんか重複しているコードあるなぁ」と思いAIにも同時レビューしてもらったところ、
「DRY原則を違反しています！」と返ってきており、
「これにも原則名が付けられているのか！！」となったので少し調査しました！

DRY原則とは🤔

Wikipediaにページがあるので読みました！

Don't repeat yourself（ドント・リピート・ユアセルフ、DRY）は、特にコンピューティングの領域で、重複を防ぐ考え方である。この哲学は、情報の重複は変更の困難さを増大し透明性を減少させ、不一致を生じる可能性につながるため、重複するべきでないことを強調する。

要するに、

重複したコードを減らそうね🫶
重複したコードがあると、変更が発生すると直す場所が増えて保守性悪いね👎
重複したコードがあると、透明性がなくなって不整合が発生しまうから可読性も悪いね👎

ということ！

DRYだから乾燥的な意味合いかなぁと思ったら、
Don't repeat yourself（DRY） の頭文字からなんですね！
DAI語の走りと言っても過言じゃないw

ちなみに、対義語は、Write Everything Twice（WET） らしい！
これだけ見るとデメリットだらけかなと思ったけど意外とそうでもない！

内容を要約すると、

同じコードは重複したまま書いてOKだよ🫶
重複したコードがあると、処理が独立してるから変更加えても他に影響ないよ👌

DRY と WET どっちがいいかはその機能次第なので、
状況に応じて使い分けてみて欲しい！

具体例のコード🧑‍💻

ex1. ToDoアプリのToDoのデータ型✍️

Before(WET)❌

// ToDo自体のデータ型
interface ToDo { 
  id: number;
  title: string; 
  completion: boolean;
} 

// ToDoの新規登録用の型
interface ToDoNewData { 
  title: string;
  completion: boolean;
}

After(DRY)⭕️

// ToDo自体のデータ型
interface ToDo { 
  id: number;
  title: string; 
  completion: boolean;
} 

// ToDoの新規登録用の型
type ToDoNewData = Omit<ToDo, "id">;

ToDo自体の型は、1個になって透明性が高くなった👌

ex2. ToDoアプリのToDoのGETとPOST✍️

Before(WET)❌

// TODOの取得
const getTodos = () => {
  return fetch("https://api.example.com/todos", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });
};

// TODOの作成
const postTodo = (title: string, completion: boolean) => {
  return fetch("https://api.example.com/todos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      completion,
    }),
  });
};

After(DRY)⭕️

// ToDo用fetch関数
const requestTodo = (
    method: "GET" | "POST", 
    body?: { title: string, completion: boolean }
) =>
  fetch('https://api.example.com/todos', {
    method,
    headers: {
      "Content-Type": "application/json",
    },
    body: body ? JSON.stringify(body) : undefined,
  });

// TODOの取得
const getTodos = () => requestTodo("GET");

// TODOの作成
const postTodo = (title: string, completion: boolean) =>
  requestTodo("POST", { title, completion });

APIのエンドポイントを統一化👌
fetchの利用箇所を統一化👌
- (APIレスポンスがanyになる件は一旦目をつぶってもらえると🥺

最後に📝

今回は DRY原則 について深掘りしました！
レビュアーとして、こういった原則を根拠として話せたら、
レビュイーも納得してくれるはずなので使っていきます！

「そのコード、湿ってますよ！」ってレビューコメントに書いてみたいものです😏

参考

Don't repeat yourself - Wikipedia