とあるシステム開発会社
ワイ「カタカタカタカタ・・・ッターーン！」
ワイ「よっしゃ、株式会社HogeFugaさんのWebサイト改修、完了や！」
ワイ「ふー、ほなタスクなくなってもうたわ」
ワイ「ワイ、仕事が早いからなぁ〜」
ワイ「すぐにタスクがなくなってしまうわ」
ワイ「なにか次のお仕事がないか、後輩プログラマー君に聞いてみよか」
ワイ「おーい、後輩くん！」
後輩「なんですか、やめ太郎さん？」
ワイ「お仕事なくなってもうたわ」
後輩「分かりました！」
後輩「すみません、ちょっとだけ待っててください！」
後輩「やめ太郎さんでもできそうなタスク、すぐに探しますね！」
ワイ「おう、ありがとうな！」
ワイ「（・・・ん？）」
ワイ「（やめ太郎さんでもできそうなタスク・・・？）」
ワイ「（なんか、ナチュラルに見下しが発生しとるような・・・？）」
ワイ「（いや、気のせいやな！）」
新タスク発生
後輩「やめ太郎さん、お待たせしました！」
後輩「新しいタスクが見つかりました！」
後輩「株式会社HogeFugaさんのWebサイトに、このUIを追加してください！」
デザインデータ
ワイ「おー」
ワイ「また株式会社HogeFugaさんやね」
ワイ「お申し込みページへリンクさせればええってことやね」
後輩「はい！その通りです！」
後輩「それで、今後いろんなページにこのUIを設置していく予定なので」
後輩「Reactのコンポーネントとして作っていただけますか？」
ワイ「おお、了解やで！」
ワイ「これは重要任務やな！」
後輩「はい！最重要任務です！」
さっそく取り掛かる
ワイ「さあ、お申し込みボタンを実装していくで」
ワイ「うーん、でもなんか」
ワイ「ボタンの文言がイマイチやないか？」
ワイ「お申し込みください！って言われて」
ワイ「素直に申し込んでくれる人ばっかりじゃないと思うねんな」
ワイ「せや、勝手にデザインデータいじったれ！」
ワイ、デザインデータを修正する
ワイ「カタカタカタカタ・・・ッターーン！」
ワイ「よーし、これでどうや・・・！？」
デザインデータ（改）
ワイ「ブフォオw w w w w」
ワイ「これならサイトを訪れたユーザーさんも」
ワイ「ついつい気になって押してまうやろw」
実装していく
ワイ「ワイの創造性を最大限に発揮して、いい感じのデザインができたから」
ワイ「次は実装していくで！」
ワイ「Reactでコンポーネントを作るんや！」
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」
後輩「とっても分かりやすいのは良いんですけど」
後輩「例えば、今後デザインが変わって・・・」
「やっぱり↑こっちの文言に戻そう！」
後輩「ってなった場合に、コードをこう直すじゃないですか？」
const DontPushButton: React.FC = () => {
return (
<a href="/entry">
- 押すなよ！？押すなよ！？
+ こちらからお申し込みください
</a>
);
};
export default DontPushButton;
後輩「そうすると」
後輩「こちらからお申し込みください、っていう文言なのに」
後輩「命名はDontPushButtonで、ちょっと意味不明じゃないですか」
ワイ「うーん」
ワイ「もしそうなったら、そのときは命名もPleaseEntryButtonとかに修正したらいいやん」
後輩「まぁ、それでもいいんですけど」
後輩「でも、表示上の文言を変えたいだけなのに」
後輩「変数名も変えなきゃいけなくなって」
後輩「このコンポーネントを使っているファイル全てを修正しなくちゃならないじゃないですか」
後輩「修正箇所が増えれば増えるほど、予期せぬバグも発生しやすくなるじゃないですか」
ワイ「ぐぬぬ・・・せやな」
ワイ「コードを変えれば変えるほど、比例してミスも起こりやすくなるもんな」
後輩「はい」
後輩「まぁ実際には、後から変数名を変えるくらいは大丈夫だと思いますが」
後輩「要は、無駄な修正部分を生みたくないってことです」
ワイ「せやな、コードレビューの手間も増えるしな」
ワイ「理解しましたやで」
後輩「ありがとうございます」
もう少し、抽象的な命名に
後輩「それでですね、現状の命名は」
後輩「押すなよ！？っていう」
後輩「具体的な文言に依存していることが微妙なんですよ」
後輩「もう少し抽象的な名前にしたらいいと思います」
ワイ「なるほどな？」
後輩「このUI、具体的には」
後輩「押すなよ！？って書いてあるボタン、なんですけど」
後輩「もう少し抽象的な視点で見ると」
後輩「要するに、何をするためのUIですか？」
ワイ「要は、申込ページに遷移するためのUIや」
後輩「ですよね」
後輩「ってことは・・・」
ワイ「・・・なるほどな！」
ワイ「ほな、EntryLinkButtonって名前はどうや！？」
ワイ「申込リンクボタンって意味や！」
ワイ「これなら、多少の文言変更があっても」
ワイ「変数名を変えんくて済むやろ！」
後輩「方向性はいいですね」
後輩「でも、まだ具体に依存してますね」
ワイ「ファッ！？」
ワイ「どこがや・・・」
後輩「Buttonってとこです」
後輩「今はボタンみたいなデザインですけど、これってそもそもリンクなので」
後輩「将来的に、↓こんなデザインに変わる可能性もあるじゃないですか」
例1: 普通のテキストリンク
例2: 矢印風リンク
ワイ「なるほど・・・！」
ワイ「そうなると、Buttonっていう命名とズレてきて」
ワイ「ちょっと嫌な感じやな」
ワイ「別の名前に変えなアカンくなりそうやな」
後輩「そうなんですよ」
後輩「ボタン風の見た目やで〜、っていう」
後輩「具体的な実装についての情報が、命名に漏れ出してしまっているので」
後輩「変更に弱いんですよ」
ワイ「なるほどなぁ」
ワイ「実装と密結合になってる名前は」
ワイ「実装を修正したい時に、邪魔になりやすいんやな」
ワイ「ほな、Buttonは削って」
ワイ「EntryLinkや！」
後輩「いいですね！」
後輩「このコンポーネントの目的を適度に抽象的に示していて、良いと思います」
後輩「Buttonをつけなくても、何のためのコンポーネントなのか十分わかりますし」
後輩「それで行きましょう！」
まとめ
- 具体的な実装に依存した名前をつけると、将来的に実装を修正した時の影響範囲が無駄にデカくなる可能性がある
- 適度に抽象的な概念に依存するように心がけよう
- そうすることで、柔軟性と拡張性が向上する
その後
ワイ「なぁ、後輩くん？」
後輩「なんですか、やめ太郎さん」
ワイ「ワイ、勝手にボタンのテキストを変えてもうたけど、あれは問題ないんかい？」
後輩「ああ、押すなよ！？ってやつですね」
後輩「面白いからOKですよ！」
ワイ「そ、そう？」
ワイ「ほな、よかったわ」
ワイ「・・・いや、ほんまに大丈夫か？」
後輩「はい！大丈夫ですよ！」
後輩「（だって本当は、株式会社HogeFugaさんなんて・・・）」
後輩「（実在しないんですから・・・）」
ワイ「株式会社HogeFugaさん、気分を害さへんか心配やわぁ・・・」
後輩「（大丈夫・・・存在しないから・・・）」
後輩「（っていうか、心配するなら最初から勝手な修正するなよ・・・）」
後輩「（そんなんだから、架空のタスクしか渡せないんだよ・・・）」
〜おしまい〜
noteにもオモシロ記事を投稿しましたやで😃
ぜひ読んでみてくださいやで😃