画面、処理、データの出し入れを分けるのはなぜですか｜技術面接問題

こう聞かれます

「画面、処理、データの出し入れを分けるのはなぜですか」
「1 つの関数に、受け取り、計算、データベースへの保存、メールの送信が全部入っています。どう整理しますか」
「層を分けると、ファイルが増えて面倒ではないですか」(裏から聞く形)

面接官が見ている点

「きれいだから」ではなく、変更やテストで何がうれしいかを言えるか
どの層がどの層を呼ぶか、という向きを意識しているか
小さなアプリでは分けすぎない、という釣り合いを持っているか

短い答え

変わる理由が違うので、画面の見た目を変えても計算や保存に響かないよう、置き場を分けます。
計算の決まりを画面やデータベースから切り離すと、その部分だけを速く単体で試せます。
画面が処理を呼び、処理がデータの出し入れを呼ぶ、という一方の向きにそろえ、逆向きには呼ばせません。

少し詳しい答え

3 つの層に分けた小さな例

データの出し入れ、処理、画面を、それぞれ別の役目にしました。ここではデータの出し入れを決まった値を返す物で代わりにしています。

JavaScript

// データの出し入れ
const repo = {
  find(id) {
    return { id, price: 500 };
  },
};

// 処理
function withTax(yen) {
  return Math.floor(yen * 1.1);
}

// 画面
function render(item) {
  const { id, price } = item;
  const yen = withTax(price);
  return `商品 ${id} は ${yen} 円`;
}

const item = repo.find(7);
console.log(render(item));
console.log(withTax(100));

商品 7 は 550 円
110

最後の行は、画面もデータの出し入れも通さずに、税込みの計算だけを試しています。計算の決まりが画面の中に埋もれていたら、こうは試せません。

何がうれしいか

影響が小さい表示の文を変えても、計算と保存のコードは触りません。保存先を別のデータベースに替えても、画面は変わりません
試しやすい処理の層は、データベースや画面が無くても動くので、単体テストで端の値まで速く確かめられます
探しやすい不具合が出たとき、見た目の問題か、計算か、保存かで、見る場所が決まります

呼ぶ向き

画面は処理を知っていてよいですが、処理は画面を知りません。処理が画面を直接触ると、画面を作り替えるたびに処理まで直すことになります。向きを一方にそろえると、下の層を上の層から切り離して試せます。

小さなアプリで層を細かく分けすぎると、ファイルを行き来する手間のほうが大きくなります。まず処理を画面から切り出す所から始め、育つにつれて分けます。

作った物と結ぶなら、たとえば「ポートフォリオの予約アプリで、空き枠を数える処理を画面の部品から別のファイルに出し、その関数にだけテストを書きました」のように話します。

よくある間違い

「分けるときれいだから」とだけ答える変更の影響が狭まる、試しやすくなる、のように、何がうれしいかで答えます
下の層が上の層を呼ぶデータの出し入れから画面を直接書き換えると、向きが混ざって、どこを直せばよいか分からなくなります
小さなアプリでも最初から細かく分ける手間が増えるだけのこともあります。分ける理由が出てきた所から分けます

深掘りの問い

「処理の層をデータベース無しで試すには」データの出し入れを外から渡せる形にし、試すときは決まった値を返す偽物に差し替える、と答えます
「データベースの更新とメールの送信で、片方だけ失敗したら、どの層で決めますか」 処理の層で、どちらを先にし、失敗したらどう戻すかを決める、と答えます
「この分け方に名前はありますか」責務の分離と呼ばれ、層に分ける作りや、画面とデータを分ける作りとして広く使われている、と答えます