インターフェース設計のコツとツボ

PHPConference新潟 2025のセッション資料（公開版）です
https://fortee.jp/phpconniigata-2025/proposal/8bc032b4-728a-4cc9-bd84-bfc7647d58e7

#phpcon_niigata

Transcript

1. インターフェース設計の コツとツボ PHPConference新潟2025 1
2. 自己紹介 名前：おぎ 所属：カオナビ 職種：開発者（PHPer） 住んでるところ： 秘境グンマー 新潟の好きなもの： ぽっぽ焼き 2
3. 私と新潟県 • 学生時代から越後湯沢でスノーボードインストラクター • 観光業の事業会社で10年以上「雪国観光圏」に携わる • 高田城址の桜、長岡花火が好き 3
4. 過去の発表等 4
5. インターフェースとは 🔌 5
6. JavaやC#などのオブジェクト指向プログラミング言語においてサポートされる、実装を持 たない抽象型のことである。これらの言語において、クラスは実装の多重継承をサポー トしない代わりに、任意の数のインタフェースを実装 (implement) することができ、これ により型の多重継承をサポートする。 出典: フリー百科事典『ウィキペディア（ Wikipedia）』より抜粋 インタフェース (抽象型) 6
7. これを見れば「完全に理解」できるおすすめスライド 7
8. 詳しくはスライドや アーカイブを見てね！ 8
9. 今日の話 9
10. インタフェース 、インタフェイス 、インターフェイス とも書き、英語で界面や接触面、中間 面などといった意味を持ち、転じてコンピュータと周辺機器の接続部分を表すようになっ た。さらに、ユーザーインターフェースなどのように、人間と自動機械との間の複雑な操 作をする手順・規則との意味にも使われる。 出典: フリー百科事典『ウィキペディア（ Wikipedia）』より抜粋 インターフェース 10
11. と思っていたのですが... 11
13. 完全な上位互換😅 13
14. 詳しくはスライドや アーカイブを見てね！② 14
15. 完 15
16. だと時間が余るので 16
17. インターフェース設計の コツとツボ PHPConference新潟2025 新卒でもわかる！？ がわかった エピソード 17
18. ここまで5分弱（予定） 18
19. とある架空のプロジェクト 19
20. 新卒くん - 新卒のバックエンドエンジニア - 研修が終わってプロジェクトに配属されたばかり - 勉強熱心 オタク - バックエンドエンジニア - 知識は豊富だが基本的に説明が長い - 好きな話題になると早口になりがち ギャル男 - フロントエンドエンジニア - 3人の中では一番経験豊富なベテラン - 社内ではしごできで有名 今回の登場人物 20
21. ある日のこと 21
22. オタクさん、 このOpenAPIのyamlってなんのためにあるんですか？ 新卒くん （なんだか難しい話だなぁ ...） 新卒くん いい質問だね！この OpenAPIはバックエンドとフロントエンド で間の連携をスムーズにするために作るんだけど、これはイ ンターフェースの一種で、理解をするには 契約による設計 という考え方を理解すると良いかな。 契約による設計には 事前条件 と事後条件 があって...（早口 オタク 22
23. オタクくんさぁ...難しい言葉を難しい言葉で説明すんなよ ギャル男 OpenAPIに限らず、インターフェースっていうのはつまるところ 全て約束なんだよね ギャル男 （じゃあなんて説明すれば ...） オタク 23
24. 約束...ですか...？ 新卒くん そう、約束 システムに限らず、世の中の仕組みの大半は 「あなたがこれをしてくれれば私はこれをしますよ」 っていう約束をして、それが守られるから成り立つじゃん？ ギャル男 確かに、例えばECショップで決済したのに注文した商品が届かな かったら困りますもんね 新卒くん 24
25. そうそう、だから悩んだ時はそこには 「誰と誰の間にどんな約束がありそうか？」 ってところに注目してみると色々分かるんじゃないかな ギャル男 なるほど、OpenAPIなら 「定義された通りのリクエストには、定義された通りのレスポンスを 返しますよ」 っていうバックエンドとフロントエンドの約束 になるんですね！ めっちゃわかりやすいです！ 新卒くん 25
26. そういうこと、だから OpenAPIという約束を元に作った俺のフロン トエンドのコードは、その約束をちゃんとバックエンドが守ってくれ ないと動かなくなるわけ というわけでオタクくん、ここのキー名はスネークケースじゃなく て、定義通りキャメルケースで返してくれる？ ギャル男 ひぇっ！すみませんでしたぁ 🙇 オタク 26
27. ここまでのおさらい 📝 27
28. インターフェースとは約束である • 約束 → 契約 • 「あなたがこれをしてくれれば」→ 事前条件 • 「私はこれをします」→ 事後条件 28
29. なぜインターフェース（約束）が大事なのか？ • 契約が成り立つから価値が生まれる • 事前条件と事後条件が満たされないと破綻する （＝価値が生まれない） 事前条件と事後条件をちゃんと理解することが大事 →「誰と誰の間にどんな約束があるのか？」 29
30. なぁんだ、そんな簡単なことか😊 30
31. インターフェース、完全に理解した💡 31
32. では次の質問 32
33. 「良いインターフェース」とは？ 🤔 33
34. 良いインターフェースが備える特長 • 単純 • 予測可能 • 拡張・組み合わせが容易 誰にとって？ 34
35. Q. インターフェース設計の良し悪しは 誰が評価するのでしょうか？ 35
36. A. インターフェースの利用者 36
37. 良いインターフェースの特長 • 単純 • 予測可能 • 拡張・組み合わせが容易 全て利用者にとって つまり評価は相対的 （利用者に依存） 37
38. おすすめのインプット 38
39. 単純性：「SimpleとEasyは違う」 “SimpleとEasyは違う。 EasyであるものがSimpleだとは限らない。 SimpleとEasyをちゃんと区別しよう” 39
40. 予測可能性：「リーダブルコード」 “コードは 他の人が最短時間で理解できる ように書かなければいけない” 〜1章 p3〜 40
41. 拡張性：「UNIXという考え方」 UNIX哲学 • 小さいものは美しい • 1つのことをうまくやらせる • 効率より移植性 • ソフトウェアを梃子(てこ)として使う 他 41
42. 良い設計ができるようになるには？ 👀 42
43. 良いインターフェースが備える特長 • 単純 • 予測可能 • 拡張・組み合わせが容易 43
44. そうそう、だから悩んだ時はそこには 「誰と誰の間にどんな約束 がありそうか？」 ってところに注目してみると色々分かるんじゃないかな ギャル男 44
45. インターフェース設計の抑えるべき「ツボ」 1. 誰と誰の間の約束なのか？ 2. 両者の目的は何か？ 3. 備えるべき事前条件は？ 4. 満たすべき事後条件は？ 45
46. 良いインターフェースを設計する「コツ」 1. 相手の目的（達成したいこと）を考える 2. 相手の目的の背景 （立場や状況）を理解する 3. 契約は最低限かつシンプルにする 46
47. 解像度を上げるためのヒント • 相手はどんなことに困ってる？ • 相手はどんな技術・知識を持っている？ （あるいは持っていない？） • どうしたら相手の課題を解決できそう？ 課題の解像度を上げられるとよい設計がしやすい 47
48. インターフェースのコツとツボ 1. 抑えるべきは「誰と誰のどんな約束か」 2. 良い設計のために「相手の立場になって考える」 3. 解像度を上げることで価値を生み出せる 48
49. “自分の『想い』を高くすればできる。 心底その人の気持ちになればできるんだ。 作り手は、その人が欲しいのはこういうものだということが分から なければダメなんです。 想像する力ですね。像を想う。その人になり切る。 それができなければよいデザインは生まれない” 〜本田宗一郎のデザイン論より〜 49
50. インターフェースの向こう側にいる 「利用者」と向き合おう！ 50
51. 良い「ものづくり」をしていこう！ 51
52. ご清聴ありがとうございました🙇 52
53. Appendix スライド • インターフェースの目的別分類 by ふわせぐ • チーム開発でデプロイ頻度をあげるための設計とタスク分割 byことみん • ソフトウェア開発におけるインターフェイスという考え方 by k1LoW • SimpleとEasyは違う by Takeru Hirose 書籍 • リーダブルコード • Unixという考え方 • 1日1話、読めば心が熱くなる365人の仕事の教科書 53