ホーム

お役立ち記事一覧

お役立ち記事詳細

プログラミング学習公開 2026.10.02 更新 2026.10.03

Webの仕組みを初心者向けに解説｜URLを打ってから画面が出るまでを、実際の通信で確かめる。GETとPOSTはデータ量で選ばない

Q: フロントエンドとバックエンドの違いは？

この記事の4段階でいうと、4（表示する）がフロントエンド、2と3でサーバーの中で起きていることがバックエンドです。ボタンの見た目や動きはフロントエンド、検索条件に合う求人をデータベースから探すのはバックエンドの仕事です。

Q: URLとドメインの違いは？

ドメインはURLの一部で、どのサーバーかを表します。URLは、ドメインに加えて通信方法（https://）、ページの場所（/jobs）、条件（?q=...）まで含めた、ページの完全な住所です。

執筆・監修: 徐聖博／株式会社シンシア代表取締役社長

URLを打ってから画面が出るまでの「DNS・リクエスト・レスポンス・表示」を、ナミノリのサイトとChromeのNetworkタブで実際に確かめます。ステータスコード200・301・404の見方と、GETとPOSTの選び方（取ってくるか、変えるか）も解説。講座の確認テストにあった誤りの訂正つき。

Webの仕組みを初心者向けに解説｜URLを打ってから画面が出るまでを、実際の通信で確かめる

ブラウザにURLを入れてから画面が出るまでに起きていることは、大きく分けて4つです。場所を調べる（DNS）、頼む（リクエスト）、返事をもらう（レスポンス）、表示する。

この記事では、図で説明するだけでなく、ナミノリのサイトそのものを使って、それぞれを自分の画面で確かめます。後半では、初心者向けの説明で混同されやすい GETとPOSTの違い を扱います。

その前に、ナミノリの講座の記録から分かったことと、訂正を1つ書いておきます。

受講ログで分かったこと、講座側の訂正

ナミノリの「Web初級講座」（全8回）は、社外の受講者52人が登録し、12人が修了しています。各回の受講人数は次のとおりです。

回	内容	着手した人
1	Webが表示されるまで（URLとIP）	51人
2	サーバーに到達するまでと到達してから（DNS・3層構造）	43人
3	アプリケーション・サーバー内（MVC）	36人
4	Ajax通信とAPI	33人
5	URLの詳細	33人
6	httpとhttps・リクエストとレスポンス	32人
7	リクエストとレスポンスについて	4人
8	GETとPOSTの違い	31人

人数が大きく減るのは2回目と3回目、ブラウザの外（サーバーの中）の話が始まるところです。4回目から先はほとんど減りません（7回目だけ4人なのは、受講者の多くがこの回を飛ばして8回目に進んでいたためで、理由は確認中です）。この記事でも、サーバー側で何が起きているかを、目に見える形で確かめる手順を中心にしました。

ただし、2回目と3回目の確認テストには、説明の仕方によって正解が分かれる設問があり、現在点検しています。人数が減った理由が内容の難しさなのか設問なのかは、まだ分かりません。

訂正：GETとPOSTの設問

8回目「GETとPOSTの違い」の確認テストに、誤った考え方を正解にしていた設問が2つありました。

「大量のデータを送るときに適しているのは？」の正解が「データ量が少ない場合はGET、多い場合はPOST」だった
「セキュリティの観点から、パスワードの送信に適しているのは？」の正解がPOSTで、POSTなら安全であるかのような書き方だった

GETとPOSTは、データの量で選ぶものではありません。また、POSTにしても通信は暗号化されません（暗号化するのはHTTPSです）。2026年10月2日に設問を直しました。正しい考え方は、この記事の後半で説明します。

※ 受講人数は社内の確認用アカウントを除いて集計しました。集計は2026年10月2日。

全体像：4つの段階

段階	何をしているか	担当
1. 場所を調べる	`naminori.xincere.jp` という名前から、サーバーの住所（IPアドレス）を調べる	DNS
2. 頼む	「このページをください」と送る	ブラウザ → サーバー（リクエスト）
3. 返事をもらう	結果の番号（ステータスコード）と、ページの中身が返ってくる	サーバー → ブラウザ（レスポンス）
4. 表示する	受け取ったHTMLやCSS、画像を組み立てて画面にする	ブラウザ

URLは、この流れの出発点です。

https://naminori.xincere.jp/jobs?q[title_or_background_or_description_or_working_hour_or_welfare_cont]=Ruby

部分	名前	意味
`https://`	スキーム	どの方法で通信するか。httpsは暗号化して通信する
`naminori.xincere.jp`	ドメイン	どのサーバーか。DNSでIPアドレスに変換される
`/jobs`	パス	サーバーの中のどのページか
`?q[...]=Ruby`	クエリ	ページに渡す条件。ここでは「Rubyを含む求人」

1. 場所を調べる：DNS

ドメインは人間が覚えるための名前で、通信には IPアドレス という数字の住所が必要です。名前を住所に変換するのがDNSです。

Mac・Linux・WindowsのWSLなら、ターミナルで確かめられます。

nslookup naminori.xincere.jp

結果の最後のほうに Address: 13.231.207.10 のような数字が出ます（2026年10月時点）。これがナミノリのサーバーの住所です。WindowsのPowerShellやコマンドプロンプトでも nslookup は使えます。

ブラウザはこの変換を毎回自動でしています。URLに数字を打たなくて済むのはこのためです。

2・3. 頼む、返事をもらう：リクエストとレスポンス

ここからはChromeの 検証画面の Network（ネットワーク）タブ で見ます。

Chromeでナミノリのトップページを開く
右クリック →「検証」→ 上のタブから「Network」を選ぶ
Networkを開いたまま、ページを再読み込みする（Ctrl + R、Macは Command + R）
一覧のいちばん上の行（naminori.xincere.jp）をクリックする

右側の「Headers」に、次のような行が出ます。

表示	意味
Request URL	頼んだページのURL
Request Method: `GET`	頼み方。ページを取ってくるときは GET
Status Code: `200 OK`	結果の番号。200は「成功」
Content-Type: `text/html`	返ってきた中身の種類。HTMLのページ

一覧には、1行目のほかにもCSSや画像、JavaScriptの行がたくさん並びます。1つのページを表示するために、ブラウザは何十回もリクエストを送っています。 2回目以降の行は、最初に受け取ったHTMLの中に「これも必要」と書いてあったものです。

Networkタブは、開いている間しか記録しません。何も出ないときは、開いてから再読み込みしてください。

ステータスコードを3つ見る

ステータスコードは、返事の最初に付く3桁の番号です。最初は次の3つで十分です。

番号	意味	ナミノリで確かめる方法
200	成功	トップページを開く
301	別の場所へ移った	`http://` で始まるURLで開く（https に移される）
404	ページが無い	存在しない記事番号（`/articles/99999`）を開く

2つ目は、アドレスバーに http://（sが無い）で入れてみてください。Networkタブの1行目が 301、次の行が https:// で 200 になります。暗号化しない http で来た人を、サーバーが https に案内しているのです。

番号の100の位で、おおよそ誰の問題かが分かります。4で始まれば頼んだ側（URLの間違いなど）、5で始まればサーバー側の問題です。

4. 表示する

レスポンスで受け取ったHTMLを、ブラウザが上から読んで画面を組み立てます。CSSで見た目を整え、JavaScriptで動きを付けます。

ここまでの4段階のうち、初心者が意識しにくいのは2と3、サーバーとのやり取りです。画面に出ないからです。受講ログで人数が減っていた「サーバーに到達してから」も、ここにあたります。Networkタブを開く習慣を付けると、見えないところで何が起きているかを確かめられるようになります。

GETとPOSTの違い

リクエストには「頼み方」があり、これを HTTPメソッド と言います。最初に覚えるのは GET と POST の2つです。

選び方は「取ってくるか、変えるか」

	GET	POST
何をするか	情報を取ってくる	データを送って、何かを変える（登録・変更・ログインなど）
送るデータの場所	URLの後ろ（クエリ）	リクエストの本文（ボディ）
URLに残るか	残る。履歴やブックマークにも残る	残らない
同じリクエストを繰り返すと	同じ結果が返るだけ	登録が2回されるなど、結果が変わることがある
ナミノリでの例	求人の検索	ログイン

選ぶ基準は1行目、「取ってくるか、変えるか」です。 データの量やセキュリティで選ぶのではありません。

ナミノリで見比べる

GET：求人一覧でキーワードに「Ruby」と入れて検索してください。アドレスバーのURLの後ろに ?q[...]=Ruby が付きます（[ と ] は %5B と %5D に置き換えて表示されます）。検索条件がURLに入っているので、このURLをブックマークすれば、同じ検索結果をいつでも開けます。Networkタブで見ると、Request Methodは GET です。

POST：ログイン画面のフォームは POST で送られます（ページのHTMLに method="post" と書かれています）。送ったメールアドレスやパスワードはURLに出ず、リクエストの本文に入ります。ログインしてみる場合は、自分のアカウントで行ってください。

よくある誤解

「データが多いときは POST」

半分だけ正しいです。URLには実用上の長さの上限があるので、大きなデータはそもそもGETでは送れません。ただ、それは結果としてそうなるだけで、選ぶ基準ではありません。少ないデータでも、登録や変更をするならPOSTです。ナミノリの講座の確認テストも、この点を誤って正解にしていました（上の訂正を参照）。

「POST なら安全」

POSTにしても、送る中身は暗号化されません。暗号化するのは HTTPS です。POSTでパスワードを送る理由は、URLや閲覧履歴、サーバーのアクセスログに残さないためです。httpsのページでPOSTを使って、はじめて「経路で盗み見られない」「URLに残らない」の両方がそろいます。

よくある質問

フロントエンドとバックエンドの違いは？

この記事の4段階でいうと、4（表示する）がフロントエンド、2と3でサーバーの中で起きていることがバックエンドです。ボタンの見た目や動きはフロントエンド、検索条件に合う求人をデータベースから探すのはバックエンドの仕事です。

URLとドメインの違いは？

ドメインはURLの一部で、どのサーバーかを表します。URLは、ドメインに加えて通信方法（https://）、ページの場所（/jobs）、条件（?q=...）まで含めた、ページの完全な住所です。

GETとPOST以外のメソッドはありますか？

あります。データを置き換える PUT、一部を変える PATCH、削除する DELETE などです。Webサービス同士がやり取りする API でよく使われます。

APIが実際にどう呼ばれているかは、APIとは？の記事で、ナミノリの求人検索の通信を見ながら確かめられます。まずは GET と POST の「取ってくる／変える」の区別が付けば十分です。

500エラーが出たら、自分が何か間違えたのですか？

500番台はサーバー側の問題です。URLを打ち間違えたときは404など400番台になります。500番台が続くときは、そのサイトの運営者に、開いたURLと時刻を伝えると調査の助けになります。

まとめ

URLを打ってから画面が出るまでは、DNS → リクエスト → レスポンス → 表示 の4段階
Chromeの検証画面の Networkタブ で、リクエストのメソッドとステータスコードが見える
ステータスコードは 200 成功、301 移動、404 無い。4で始まれば頼んだ側、5で始まればサーバー側の問題
GETとPOSTは 「取ってくるか、変えるか」 で選ぶ。データの量やセキュリティで選ぶのではない
暗号化するのはPOSTではなく HTTPS
ナミノリのWeb初級講座では、人数が減るのはサーバーの中の話が始まる2〜3回目だった。また、GETとPOSTの設問で誤った考え方を正解にしていたため、2026年10月2日に修正した

Webの仕組みを順に学ぶなら、Web初級講座（全8回・無料）から始めてください。8回目が、この記事で扱ったGETとPOSTの回です。ステータスコードやHTTPSをもう一段詳しく知りたい人はネットワーク・HTTP入門講座、Networkタブの使い方を画面つきで確かめたい人はChrome DevTools入門講座の6回目「Networkパネル」へ進んでください。