システムの構成要素 — 内製する範囲と外部サービスに委ねる範囲

この記事は、プログラミングやバイブコーディングをする上で最低限身につけたほうがよい IT の実践的な知識を 1 から身につける「IT 基礎知識講座の一部」です。
Web アプリはフロントエンド・バックエンド・データベース・外部サービスの 4 つに分かれます。どこまでを自分で作り、どこから先を借りるのかを図解で確かめます。

この記事は、 Web アプリを構成する4 つの要素を扱います。

そのうち 3 つは内製(自分の側で開発して用意すること)し、残る 1 つは外部サービスとして利用します。

my-app の構成要素 — 内製する 3 つと、外部サービス
my-app(会員制の予約アプリ)
内製する構成要素
フロントエンド
  • 予約の日付と氏名を入力する画面
  • 利用者の端末で動作する
バックエンド
  • 受け取った予約内容を処理する
  • 本人確認の判定もここで行う
データベース
  • 予約と会員のデータを保存する
  • 後から検索・更新できる
外部サービスとして利用する構成要素
  • 確認メールの送信・決済・地図の表示
  • 他社が運用している機能を呼び出す
外枠が 1 つのアプリ。上の枠の 3 つは内製する構成要素、下の枠は他社が運用している機能を利用する構成要素。

内製と利用の境界は、この枠の境目にあります。

Web アプリは 4 つの構成要素に分かれる

構成要素は、フロントエンド(frontend)・バックエンド(backend)・データベース(database)・外部サービス(external service)の 4 つです。

4 つの構成要素は、何を担当し、どこで動くか
フロントエンドfrontendバックエンドbackendデータベースdatabase外部サービスexternal service画面を描き、入力を受け取る送られたデータを処理して返すデータを検索・更新できる形で保存他社が運用済みの機能を利用する利用者の端末サーバーサーバー他社のサーバー
各行が 1 つの構成要素です。左が名前、真ん中が担当すること、右がそれが動く場所。動く場所が自分の側でないのは、いちばん下だけです。
4 つの構成要素は、どことどこがつながるか
利用者の端末フロントエンド画面と入力バックエンド判断と処理データベース予約と会員の記録外部サービスメール・決済予約の内容読み書きAPI で依頼
左から右へ。バックエンドだけが両側につながり、フロントエンドはデータベースにも外部サービスにも直接つながりません。

データベースと外部サービスにつながるのはバックエンドで、画面から直接はつながりません。

この 2 つが動くサーバー(server。電源が入ったままで、他のコンピュータからの要求をいつでも受け付けられるコンピュータ)は、利用者の端末とは別のコンピュータです。

4 つ目の外部サービスだけは内製せず、他社が運用しているものを利用します。

不具合が起きたとき、直せるのはどちらか
不具合が起きたフロントエンドバックエンド・DB外部サービス自分で直せる他社の復旧を待つ原因を探してコードを直す状況を確かめて利用者に知らせる
左の 1 つの出来事から上下に分かれます。上は自分の側に実装があるので直せ、下は他社が運用しているので待つことになります。右がそのとき自分がすることです。

上の枝の 3 つは実装が自分の側にあるので、直すのも自分です。

データベースだけは製品を選んで運用する形になりますが、動かなくなったときに手を入れるのは自分の側です。

外部サービスだけは、障害が起きても自分では直せず、他社の復旧を待つことになります。

何を委ねるかを決めることは、自分では直せない範囲を決めることでもあります。

構成要素は 4 つ、境界は 1 つ

Web アプリは、フロントエンド・バックエンド・データベース・外部サービスの 4 つに分かれます。

前の 3 つは内製し、外部サービスだけは他社が運用している機能を利用するので、実装を用意する側と障害に対応する側はこの境界で切り替わります。

外部サービスは内製せず、API 経由で利用する

確認メールの送信や決済のように、自前で用意すると負担の大きい機能は外部サービスに委ねます。

外部サービスを呼び出すときに従う決まりがAPI(Application Programming Interface。プログラム同士がデータをやり取りするための約束事)です。

外部サービスに委ねても、両端は自分に残る
宛先と本文を組み立てるAPI で送信を依頼する外部サービスがメールを送る結果を受け取り記録する自分の担当自分の担当外部サービスの担当自分の担当何を送るかを決める決められた形で書く配信の仕組みと到達率の管理送れたかどうかを確かめる
上の段が確認メールを送るまでの流れです。真ん中の 2 つだけが外部サービスの担当で、いちばん左といちばん右は自分の側に残ります。

外部サービスに移るのは真ん中だけで、依頼と確認は自分の側に残ります。

自分の側に残るのは、依頼を送るところと、返ってきた結果を確認するところだけです。

内製すると、機能そのものに加えて、その維持まで自分の担当になります。

委ねた場合でも、依頼を送ることと結果を確認することは自分に残ります。

外部サービスに移るのは実装だけです。

外部サービスと外部 API

呼び出す相手を外部サービス、呼び出し口を外部 APIと書き分けることがあります。

指しているものは同じで、サービスとして見るか、呼び出し口として見るかの違いです。

構成要素ごとに、処理の成否は独立して決まる

1 つの操作が、複数の構成要素にまたがることがあります。

予約の確定はデータベースへの書き込みで決まり、確認メールの送信は外部サービスへの依頼で決まります。

予約が確定するのは、データベースに書き込めた時点です。

確認メールの送信は、そのあとに外部サービスへ依頼する別の処理です。

メールが届かなくても、確定した予約は残ります。

この切り分けは、不具合の調査でそのまま使えます。

「予約が入っていない」と「確認メールが届かない」では、確かめる構成要素が違います。

前者はバックエンドとデータベース、後者は外部サービスへの依頼を確かめます。

同じ 1 回の予約でも、症状によって確かめる構成要素が変わる
1 回の予約操作「予約が入っていない」「確認メールが届かない」バックエンドが受け取ったか外部サービスに依頼できたかデータベースに書き込めたか外部サービスが送信できたか
真ん中が 1 回の予約操作です。上の枝と下の枝は別々に成否が決まるので、症状が違えば確かめる場所も変わります。

上の枝が確定、下の枝が通知で、片方が失敗しても、もう片方はそのまま残ります。

成否は構成要素ごとに決まる

1 つの操作が複数の構成要素にまたがるとき、処理の成否はまとめて決まりません。

予約はデータベースへの書き込みで確定し、確認メールは外部サービスへの依頼で決まるので、不具合の報告を受けたら、どちらの処理が失敗したのかを先に切り分けます。

QUIZ

理解度チェック

まずは1問ずつ答えてみましょう。

Q1Web アプリの 4 つの構成要素のうち、内製せずに利用するのはどれですか。

Q2予約がデータベースに書き込まれたあと、確認メールが届かなかった場合はどうなりますか。

Q3確認メールの送信を外部サービスに委ねたとき、自分の側に残るのはどれですか。