共有先が増えても触らないコードを決める

こんにちは、プロマリの紫です。連載「丸いボタンの裏側」の第2回です。前回は、共有・保存・計測という3つの仕事を、なぜ別々の責務に分けたのかをたどりました。今回は、そのうちの「共有」の箱を開けます。テーマは共有先が増えても触らないコードを、先に決めておくこと。前回の宿題「共有先を1つ足したら、どこに差分が出るか」の答え合わせも、実際のコードで行います。

点線の付いた用語は、その言葉を押すと詳しい説明が開きます。意味、身近なたとえ、この実装での使い方を順に読めます。キーボードではTabで用語へ移動し、EnterまたはSpaceで開き、Escapeで本文へ戻れます。各ページで最初に出る用語から参照できるようにしました。

この記事は連載「丸いボタンの裏側」の第2回（1.2）です。前回の1.1「共有・保存・計測は、なぜ同じ責務にしないのか」を先に読むと、今回開ける「共有の箱」の位置がつかみやすくなります。連載全体の地図は、本編5ページ目の連載の目次からどうぞ。

共有先は、これからも増えていく

まずは、記事の上に並んでいる共有欄を数えてみましょう。大きなボタンがFacebook・X・LINEの3つ。その後ろに、小さなアイコンがはてなブックマーク・LinkedIn・メール・URLのコピー・端末の共有の5つ。合わせて8つの共有先が並んでいます。

そして、8つで終わる保証はどこにもありません。新しいSNSが広まれば「あれにも共有したい」という声が届きますし、いま使っているサービスが名前や共有画面のURLを変えることもあります。つまり共有先の追加は、いつか来るかもしれない変更ではなく、必ず来る変更です。

必ず来る変更なら、来るたびに慌てずに済む形を先に作っておきたいですよね。その考え方を言葉にしたのが開放閉鎖の原則です。機能を足すことには開いていて、動いているコードを書き換えることには閉じている。原則の細かな話は連載の第2章に回して、今回は実際のコードで「何に開き、何に閉じたのか」を確かめていきます。

触るコードと、触らないコードを先に決める

今回の実装がしたことを一言でいうと、書き始める前に、コードを2つの棚に分けたことです。1つは増えるものの棚。共有先ごとの定義が、ここに1枚ずつ並びます。もう1つは増えても変わらないものの棚。URLを組み立てる仕組み、クリックでどう動くかを決める判断、ボタンを描く表示が入っています。

共有先を足すときに開けるのは、増えるものの棚だけです。新しい定義を1枚差し込めば、もう一方の棚には手を触れずに済む。この差し込み口を拡張点と呼びます。差し込み口は、変更が来てから慌てて作るものではありません。どこを差し込み口にするかを、変更が来る前に決めておく。これが今回の設計の中心です。