後輩「具体じゃなくて抽象に依存してもらえませんか？」〜命名編〜

## とあるシステム開発会社

ワイ「カタカタカタカタ・・・ッターーン！」
ワイ「よっしゃ、株式会社HogeFugaさんのWebサイト改修、完了や！」
ワイ「ふー、ほなタスクなくなってもうたわ」
ワイ「ワイ、仕事が早いからなぁ〜」
ワイ「すぐにタスクがなくなってしまうわ」
ワイ「なにか次のお仕事がないか、後輩プログラマー君に聞いてみよか」
ワイ「おーい、後輩くん！」

後輩「なんですか、やめ太郎さん？」

ワイ「お仕事なくなってもうたわ」

後輩「分かりました！」
後輩「すみません、ちょっとだけ待っててください！」
後輩「やめ太郎さんでもできそうなタスク、すぐに探しますね！」

ワイ「おう、ありがとうな！」
ワイ「（・・・ん？）」
ワイ「（**やめ太郎さんでもできそうなタスク・・・？**）」
ワイ「（なんか、**ナチュラルに見下しが発生**しとるような・・・？）」
ワイ「（いや、気のせいやな！）」

## 新タスク発生

後輩「やめ太郎さん、お待たせしました！」
後輩「新しいタスクが見つかりました！」
後輩「株式会社HogeFugaさんのWebサイトに、このUIを追加してください！」

#### デザインデータ
<img alt="「こちらからお申し込みください」ボタン" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/1cc64d67-0668-3c4d-6fdf-70abdfa972b9.png" />

ワイ「おー」
ワイ「また株式会社HogeFugaさんやね」
ワイ「お申し込みページへリンクさせればええってことやね」

後輩「はい！その通りです！」
後輩「それで、今後いろんなページにこのUIを設置していく予定なので」
後輩「Reactのコンポーネントとして作っていただけますか？」

ワイ「おお、了解やで！」
ワイ「これは重要任務やな！」

後輩「はい！最重要任務です！」

## さっそく取り掛かる

ワイ「さあ、お申し込みボタンを実装していくで」
ワイ「うーん、でもなんか」
ワイ「ボタンの文言がイマイチやないか？」

<img alt="「こちらからお申し込みください」ボタン" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/1cc64d67-0668-3c4d-6fdf-70abdfa972b9.png" />

ワイ「お申し込みください！って言われて」
ワイ「素直に申し込んでくれる人ばっかりじゃないと思うねんな」
ワイ「せや、勝手にデザインデータいじったれ！」

## ワイ、デザインデータを修正する

ワイ「カタカタカタカタ・・・ッターーン！」
ワイ「よーし、これでどうや・・・！？」

#### デザインデータ（改）
<img alt="「押すなよ！？押すなよ！？」ボタン" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/e5698007-1d7e-e4ae-e45a-a3ff1d808b52.png" />

ワイ「ブフォオw w w w w」
ワイ「これならサイトを訪れたユーザーさんも」
ワイ「ついつい気になって押してまうやろw」

## 実装していく

ワイ「ワイの創造性を最大限に発揮して、いい感じのデザインができたから」
ワイ「次は実装していくで！」
ワイ「Reactでコンポーネントを作るんや！」

```diff_tsx:DontPushButton.tsx
    const DontPushButton: React.FC = () => {
      return (
        <a href="/entry">
          押すなよ！？押すなよ！？
        </a>
      );
    };
    
    export default DontPushButton;
```

ワイ「↑こうやな！」[^1]
ワイ「押すなよ！？って書いてあるボタンやから」
ワイ「変数名は`DontPushButton`や！」
ワイ「メチャクチャ分かりやすい命名やな！」

後輩「ブフォオw w w w w w」
後輩「`DontPushButton`てw w w 」

ワイ「ん？」
ワイ「どしたん、後輩くん？」

後輩「いえ、すみません！」
後輩「ただ、もっと・・・**抽象に依存**してもらえませんか？」

ワイ「**中傷に、依存・・・？**」
ワイ「**中傷に依存**なら、既にしとるで？」
ワイ「ワイは劣等感が強いからな、その裏返しで」
ワイ「SNSで誰かにマウントを取ろうとして」
ワイ「いつも誰かを**中傷**してしまうんや」
ワイ「これが気持ちよくて、なかなかやめられへん・・・」
ワイ「もう、立派な**中傷依存症**やで？」[^2]

後輩「そ、そうですか」
後輩「いや、そうじゃなくて僕が言いたいのは」
後輩「**具体じゃなくて抽象に依存してもらえませんか？** ってことです」

ワイ「あー、なるほど、そっちか」
ワイ「なるほど、なるほど・・・」
ワイ「ごめん、全然わからんわ」

## 具体に依存し過ぎている

後輩「やめ太郎さんの命名は、具体に依存し過ぎているんですよ」
後輩「押すなよ！？って書いてあるボタンだから`DontPushButton`」
後輩「とっても分かりやすいのは良いんですけど」
後輩「例えば、今後デザインが変わって・・・」

<img alt="「こちらからお申し込みください」ボタン" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/1cc64d67-0668-3c4d-6fdf-70abdfa972b9.png" />

> 「やっぱり↑こっちの文言に戻そう！」

後輩「ってなった場合に、コードをこう直すじゃないですか？」

```diff_tsx:DontPushButton.tsx
    const DontPushButton: React.FC = () => {
      return (
        <a href="/entry">
-         押すなよ！？押すなよ！？
+         こちらからお申し込みください
        </a>
      );
    };
    
    export default DontPushButton;
```

後輩「そうすると」
後輩「こちらからお申し込みください、っていう文言なのに」
後輩「命名は`DontPushButton`で、ちょっと意味不明じゃないですか」

ワイ「うーん」
ワイ「もしそうなったら、そのときは命名も`PleaseEntryButton`とかに修正したらいいやん」

後輩「まぁ、それでもいいんですけど」
後輩「でも、表示上の文言を変えたいだけなのに」
後輩「変数名も変えなきゃいけなくなって」
後輩「このコンポーネントを使っているファイル全てを修正しなくちゃならないじゃないですか」
後輩「修正箇所が増えれば増えるほど、予期せぬバグも発生しやすくなるじゃないですか」

ワイ「ぐぬぬ・・・せやな」
ワイ「コードを変えれば変えるほど、比例してミスも起こりやすくなるもんな」

後輩「はい」
後輩「まぁ実際には、後から変数名を変えるくらいは大丈夫だと思いますが」
後輩「要は、**無駄な修正部分を生みたくない**ってことです」

ワイ「せやな、コードレビューの手間も増えるしな」
ワイ「理解しましたやで」

後輩「ありがとうございます」

## もう少し、抽象的な命名に

後輩「それでですね、現状の命名は」
後輩「押すなよ！？っていう」
後輩「具体的な文言に依存していることが微妙なんですよ」
後輩「もう少し抽象的な名前にしたらいいと思います」

ワイ「なるほどな？」

後輩「このUI、具体的には」
後輩「押すなよ！？って書いてあるボタン、なんですけど」
後輩「もう少し抽象的な視点で見ると」
後輩「要するに、何をするためのUIですか？」

ワイ「要は、申込ページに遷移するためのUIや」

後輩「ですよね」
後輩「ってことは・・・」

ワイ「・・・なるほどな！」
ワイ「ほな、`EntryLinkButton`って名前はどうや！？」
ワイ「**申込リンクボタン**って意味や！」
ワイ「これなら、多少の文言変更があっても」
ワイ「変数名を変えんくて済むやろ！」

後輩「方向性はいいですね」
後輩「でも、まだ具体に依存してますね」

ワイ「ファッ！？」
ワイ「どこがや・・・」

後輩「`Button`ってとこです」
後輩「今はボタンみたいなデザインですけど、これってそもそも**リンク**なので」
後輩「将来的に、↓こんなデザインに変わる可能性もあるじゃないですか」

#### 例1: 普通のテキストリンク
<img alt="「押すなよ！？押すなよ！？」リンク" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/a84849ee-ac3d-528b-281a-76d9197938ac.png" />

#### 例2: 矢印風リンク
<img alt="「押すなよ！？押すなよ！？」リンク（矢印風）" width="360" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/829070e9-0d8f-3580-e3b6-22b5c483a4e7.png" />


ワイ「なるほど・・・！」
ワイ「そうなると、`Button`っていう命名とズレてきて」
ワイ「ちょっと嫌な感じやな」
ワイ「別の名前に変えなアカンくなりそうやな」

後輩「そうなんですよ」
後輩「ボタン風の見た目やで〜、っていう」
後輩「具体的な実装についての情報が、命名に**漏れ出して**しまっているので」
後輩「変更に弱いんですよ」

ワイ「なるほどなぁ」
ワイ「実装と**密結合**になってる名前は」
ワイ「実装を修正したい時に、邪魔になりやすいんやな」
ワイ「ほな、`Button`は削って」
ワイ「`EntryLink`や！」

後輩「いいですね！」
後輩「このコンポーネントの目的を適度に抽象的に示していて、良いと思います」
後輩「`Button`をつけなくても、何のためのコンポーネントなのか十分わかりますし」
後輩「それで行きましょう！」

## まとめ

- 具体的な実装に依存した名前をつけると、将来的に実装を修正した時の影響範囲が無駄にデカくなる可能性がある
- 適度に抽象的な概念に依存するように心がけよう
- そうすることで、柔軟性と拡張性が向上する

## その後

ワイ「なぁ、後輩くん？」

後輩「なんですか、やめ太郎さん」

ワイ「ワイ、勝手にボタンのテキストを変えてもうたけど、あれは問題ないんかい？」

後輩「ああ、押すなよ！？ってやつですね」
後輩「面白いからOKですよ！」

ワイ「そ、そう？」
ワイ「ほな、よかったわ」
ワイ「・・・いや、ほんまに大丈夫か？」

後輩「はい！大丈夫ですよ！」
後輩「（だって本当は、株式会社HogeFugaさんなんて・・・）」
後輩「（実在しないんですから・・・）」

ワイ「株式会社HogeFugaさん、気分を害さへんか心配やわぁ・・・」

後輩「（大丈夫・・・存在しないから・・・）」
後輩「（っていうか、心配するなら最初から勝手な修正するなよ・・・）」
後輩「（そんなんだから、架空のタスクしか渡せないんだよ・・・）」

**〜おしまい〜**

[^1]: 実際には`a`要素じゃなくてルーターの`Link`コンポーネントとか使います
[^2]: 絶対にやめましょう

## noteにもオモシロ記事を投稿しましたやで😃

ぜひ読んでみてくださいやで😃

- **[ワイの心「...ｼﾃ...ｺﾛｼﾃ...」](https://note.com/yametaro/n/na396ffd72690
)**