Webアプリの構成図を初めて描くには？ブラウザとサーバーのつながりを図解する手順

Webアプリを作ってみたものの、「ブラウザとサーバーはどうつながるの？」と聞かれると説明が難しい。そんなときは、複雑なクラウド構成から始める必要はありません。小さな買い物メモを題材に、実際に動かした通信だけを構成図へ書く練習をしましょう。

構成図は「どこで何が動くか」を示す地図

構成図は、ブラウザ、サーバー、データ保存先などが何を担当し、どのように情報をやり取りするかを示す図です。見栄えのよい箱を並べる前に、画面を動かして「実際に通信したもの」を確認することが大切です。

ブラウザ（クライアント）は画面を表示し、ユーザー操作を受け付けるソフトウェアです。サーバーはブラウザからの要求に応じ、HTMLなどのファイルやデータを返します。両者の間で使われる代表的な通信ルールがHTTPです。

Webの基本的な仕組みはMDNの学習資料で確認できます。ここではDNSやクラウドの詳細を追加せず、ローカルで再現可能な範囲に限定します。

（ブラウザ・サーバー・HTTPの基本については『MDN公式｜ウェブのしくみ』をご参照ください）

実践：ローカルの買い物メモを動かす

Python 3とエディター、ブラウザを用意します。空のフォルダーに`index.html`というファイルを作り、次のコードを保存してください。Pythonの標準機能でHTMLを配信するだけなので、外部アカウントは不要です。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>買い物メモ</title>
<h1>買い物メモ</h1>
<label>品名 <input id="item" type="text"></label>
<button id="add" type="button">追加</button>
<ul id="items"></ul>
<script>
  const input = document.querySelector('#item');
  const list = document.querySelector('#items');
  document.querySelector('#add').addEventListener('click', () => {
    const name = input.value.trim();
    if (!name) return;
    const row = document.createElement('li');
    row.textContent = name;
    list.appendChild(row);
    input.value = '';
  });
</script>
</html>

ターミナルでそのフォルダーへ移動し、次のコマンドを実行します。

python3 -m http.server 8000

ブラウザで`http://localhost:8000/`を開き、「牛乳」と入力して「追加」を押すと、一覧に「牛乳」が増える構成です。何も入力せず押した場合、追加されないようになっています。この例は学習用であり、ページを再読み込みすると追加した項目は消えます。

最初の図は「HTMLを表示する通信」だけを書く

開発者ツールのNetwork（ネットワーク）画面を開き、ページを再読み込みします。`index.html`またはDocumentに相当する項目を選び、要求URLとステータスを確認してください。正常に配信されていれば`200`が表示されるのが一般的です。

[ブラウザ]
   |  GET / （HTMLを要求）
   v
[ローカルの静的ファイルサーバー :8000]
   |  200 OK + index.html （HTMLを返す）
   v
[ブラウザで画面を表示]

この図で確認したいのは通信の向きです。要求（リクエスト）と返答（レスポンス）を別々に書き、矢印に動作の名前を付けると読み間違えにくくなります。

コード中のボタンを押したときの一覧追加は、読み込んだJavaScriptがブラウザ内で行います。追加操作のたびにサーバーへ保存する通信は、このコードにはありません。

図に描いてよいもの・描いてはいけないもの

要素	今回のサンプル	図への扱い
ブラウザ	HTML表示・ボタン操作・一覧更新	描く
静的ファイルサーバー	index.htmlを返す	描く
データベース	使用していない	描かない
ログインAPI	作っていない	描かない
外部クラウド	使用していない	描かない

「Webアプリならデータベースが必ずあるはず」と決めつけると、実際の作品と構成図が食い違います。リポジトリに存在するコードと、ブラウザで観測できる通信から判断してください。

もしサーバーへ保存するなら図はどう変わる？

これはまだ実装していない将来の拡張例です。買い物メモを再読み込み後も残すため、サーバー側に記録するAPIを追加した場合を考えます。

[ブラウザ]
   | POST /items （新しい品名を送る）
   v
[APIサーバー]
   | データを書き込む
   v
[データベース]
   | 書き込み結果
   v
[APIサーバー] -- 応答 --> [ブラウザ]

この図は実装済みの証拠ではありません。例えば`POST
/items`の通信処理、保存先、エラー時の応答などが実装・検証された場合に限り、完成した構成図へ取り入れます。HTTPのメソッドである`GET`は主にデータの取得、`POST`はサーバーへデータを送る操作などに使われます。

（HTTPメソッドの基本については『MDN公式｜HTTP request methods』をご参照ください）

AIに構成図を作ってもらうときの検証方法

図の清書はAIに任せることもできます。最初に「存在している機能」と「今は存在しない機能」を分けて伝え、生成結果を必ず実機と照合してください。次の依頼文は、この練習用コードのために作った例です。

学習用の買い物メモの構成を、初心者向けのテキスト図で表してください。
確認済み：Pythonのhttp.serverがindex.htmlを配信する。
ブラウザ内：JavaScriptが一覧項目を追加する。
未実装：サーバーAPI、データベース、ログイン、永続保存。
矢印ごとに要求・応答・ブラウザ内部処理を区別してください。
確認できない仕組みは推測して描かず、疑問点として挙げてください。

図に不明なサーバー、認証、DBが描かれたら、説明を確認する前に取り除かないでください。何を根拠に追加したのかを尋ね、実装がないなら「未実装」と明記して修正します。Googleの技術文書ガイドでも、図を簡潔にして視線を誘導することが推奨されています。

（図の情報量と説明ラベルの付け方については『Google Technical Writing｜Illustrating』をご参照ください）