コードの種
プログラミング

Webサイト用語入門。サーバー・ドメイン・APIの違い

URLを開いてから画面が表示されるまでをたどり、HTML・CSS・JavaScript、サーバー、DNS、CDN、APIを整理します。静的と動的の違い、失敗の切り分けも解説します。

執筆・編集：しおおにぎり

Webページは開けるのに、「サーバー」「ドメイン」「DNS」と言われると急に難しく感じますよね。別々の単語に見えますが、ページを届ける流れの中で、それぞれが違う仕事をしています。

今回は「学習ノートの記事を1ページ開く」という場面を使います。自分のブラウザーから、サイトの置き場所まで順番にたどってみましょう。

まずは3つだけ覚えよう

  • ブラウザーはページを見る側、サーバーはデータを返す側
  • URLはページなどの行き先、ドメインはその一部分
  • HTML・CSS・JavaScriptは、内容・見た目・処理を分担する

ブラウザーにはChrome、Firefox、Edge、Safariなどがあります。検索エンジンとは別物です。ブラウザーでGoogleの検索ページを見ることはできますが、Google検索を通さず、URLを直接開くこともできます。

ドメイン、URL、DNS

1. URLを部分に分ける

説明用のURLを見てみます。example.com は例示用のドメインで、この記事の実際のページではありません。

https://example.com/articles/python/?level=beginner#practice
部分 呼び方 この例での役割
https スキーム どんな仕組みでアクセスするか
example.com ホスト名 接続先の名前
/articles/python/ パス その接続先での場所
?level=beginner クエリー ページなどへ渡す追加条件
#practice フラグメント ページ内の特定の位置など

ドメイン名は、ネットワーク上の名前の仕組みの一部です。この例ではホスト名に example.com を使っています。ドメインだけでは、どの記事かまでは分かりません。

#practice の部分は、通常のHTTPリクエストではサーバーへ送らず、ブラウザー側がページ内の移動などに使います。見かけた記号を全部同じ「住所の文字」と思うより、役割を分けると読みやすくなります。

2. 名前から接続先を調べる

コンピューター同士の接続では、IPアドレスという番号を使います。名前から接続先の情報を調べる仕組みが DNS です。

「友人の名前を選ぶと、登録された番号へ電話がつながる」ような関係を想像すると分かりやすいです。ただしDNSにはIPアドレス以外の情報もあり、必ず名前1つと機械1台が一対一で対応するわけではありません。

一度調べた結果は、しばらく保存して再利用することがあります。この保存された結果をキャッシュと呼びます。そのため、ページを開くたびに毎回同じ問い合わせを最初からするわけではありません。

サーバーとホスティング

サーバーは、要求に応じてファイルやデータを返すコンピューターやソフトウェアです。ホスティングは、サイトやアプリを動かすための公開環境を提供するサービスです。

例えば自分のPCにある index.html は、そのままではほかの人が同じURLで見られるとは限りません。公開環境へ置き、インターネットから受け取れる状態にする必要があります。

「サーバーを借りる」といっても、物理的な1台を丸ごと使うとは限りません。静的ファイルの置き場所や配信機能だけを使えるサービスもあります。Cloudflare Pagesは、そのような公開方法の一例です。

HTML・CSSの練習は、まず自分のPCで始められます。静的なページを公開する場合も、Cloudflare Pagesのように無料で使える選択肢があります。公式の料金・利用条件で、静的ファイルの配信と追加の処理を分けて確認しましょう。

手順を試したい場合は、WindowsからHTMLサイトを無料公開する方法で、GitHub Pagesへのファイル配置から公開URLの確認まで進められます。

一方、WordPressをレンタルサーバーに設置してブログを運営したいなら、WordPress向けサーバー4社の比較で、初回と更新後の料金、バックアップの条件を確認できます。作りたいサイトに合わせて公開先を選びましょう。

リクエストとレスポンス

ブラウザーからの「このページをください」という要求がリクエスト、サーバーから返す結果がレスポンスです。その通信のルールが HTTP です。

HTTPSは、HTTPの通信を暗号化などで保護して使う仕組みです。途中で内容を盗み見られたり改ざんされたりする危険を減らします。ただし、HTTPSのサイトなら書かれた情報や運営者が必ず信頼できる、という意味ではありません。

レスポンスには状態を示す番号があります。

番号の例 意味
200 要求に成功した
404 指定された対象が見つからない
500 サーバー側で問題が起きた

404は「インターネット全体が切れた」という意味ではなく、サーバーから「その場所は見つからない」という返答を受けている状態です。番号で段階が分かると、調べる場所を絞れます。

HTML、CSS、JavaScript

ブラウザーは受け取ったデータを使って画面を組み立てます。

HTMLは内容の役割を決める

<h1>学習ノート</h1>
<p>今日は変数を覚えました。</p>

HTMLは内容を構造化するマークアップ言語です。h1 は見出し、p は段落を表します。詳しくは最初のHTMLページへどうぞ。

CSSは見た目と配置を決める

p {
  color: #333333;
  line-height: 1.8;
}

CSSは、文字の色・余白・並べ方などを指定します。同じHTMLでも、CSSを変えれば見やすさや雰囲気を調整できます。CSS入門ではカードを作りながら学べます。

JavaScriptは操作に応じた処理を行う

JavaScriptは、ボタンを押したら数字を増やす、入力を調べる、といった処理を書けるプログラミング言語です。

「HTMLは骨組み、CSSは服、JavaScriptは動き」というたとえは入り口として便利ですが、CSSにもアニメーションがあり、HTMLだけで動く入力部品もあります。3つの境界が、見た目の動きだけで完全に決まるわけではありません。

フロントエンドとバックエンド

フロントエンドは、読者が見る画面や操作部分を中心にした役割です。Webでは主にブラウザー側で動きます。

バックエンドは、サーバー側の処理を中心にした役割です。ログイン確認、注文の保存、データベースへの問い合わせなどがあります。データベースは、必要な情報を整理して保存・検索する仕組みです。

例えば会員ページなら、入力欄やボタンはフロントエンド。パスワードなどを確認して、見せてよい情報を判断する処理はバックエンドで行います。

ブラウザーの画面だけを隠しても、安全なアクセス制限にはなりません。利用者は自分のブラウザー側の処理を調べたり変えたりできるため、守るべき情報の権限確認はサーバー側でも必要です。

静的サイトと動的サイト

公開前にページを作っておく

静的サイトは、あらかじめ用意したHTMLなどを基本として返す方式です。このサイトの記事も、公開前にMarkdownからページを作る構成です。

変換して公開用ファイルを作る作業をビルドと呼びます。ビルドとデプロイの違いも参考にしてください。

要求に合わせて内容を作る

動的サイトでは、アクセス時の利用者や保存データに応じて、サーバー側などで内容を作ります。人によって表示が違う会員ページなどが例です。

比較 静的な配信を基本にする 動的な処理を使う
HTMLなどの準備 主に公開前 要求時に作ることがある
得意な例 説明文、記事、案内 ログイン、在庫、投稿内容
追加更新 再ビルドなど 保存データを参照して反映

静的＝画面が動かない、ではありません。 静的に配ったページでもJavaScriptで検索やメニューを動かせます。逆に動的なサイトも、作った結果をキャッシュして配る場合があります。実際のサービスでは両方を組み合わせます。

CDNとAPI

CDNは同じファイルを届けやすくする

CDNは、複数の配信拠点などを使い、コンテンツを効率よく届ける仕組みです。利用者に近い、または配信に適した拠点からコピーを返すことで、遅延や元のサーバーの負担を抑えられます。

コピーを再利用するため、「更新したのに一部で古い画像が見える」こともあります。キャッシュの更新方法はサービスや設定で違うので、何でもブラウザーの再読み込みだけで解決するとは限りません。

APIはデータや機能をやり取りする窓口

APIは、ソフトウェアの機能を決まった形で利用するための窓口です。Webの外部通信に限らず、ブラウザーやライブラリの機能にも使われる言葉です。

例えば天気サービスへ地域を指定して問い合わせると、気温などのデータが返ります。そのデータを自分のページの文章へ組み込めば、天気表示が作れます。

ページ → 地域を指定してAPIへ要求
API → 気温などのデータを返す
ページ → データを読者向けの表示へ変える

サービスによっては APIキーで利用を識別します。秘密として扱うキーは、公開HTMLやブラウザー向けJavaScriptへ埋め込まないでください。公開を前提とする識別子とは扱いが違うため、サービスの指定を確認します。

Webページが届くまで

基本の流れをもう一度つなぎます。

  1. URLのホスト名から、DNSなどで接続先を調べる
  2. ブラウザーがサーバーやCDNへ要求する
  3. HTMLや画像などが返る
  4. ブラウザーが構造と見た目を組み立てる
  5. 必要に応じてJavaScriptやAPI通信が動く

実際はキャッシュや複数の同時通信などもありますが、最初の切り分けにはこの流れが使えます。

確認問題：どこで問題が起きた？

問題1：文章は見えるのに、色や余白だけ付いていません。最初に確認したいものは何でしょうか。

問題2：静的サイトには、JavaScriptの検索機能を付けられないでしょうか。

模範解答と解説

  1. CSSが読み込まれているか、指定先やファイル名を確認します。HTMLは届いている可能性が高いので、いきなりDNS設定を変える必要はありません。
  2. 付けられます。静的は主にデータの準備・配信方法の話で、ブラウザー内の処理を禁止する分類ではありません。

まとめと参考資料

分からない言葉が出たら、「見る側」「届ける側」「行き先」「画面を作る材料」のどれかへ戻してみましょう。つながりが見えると、設定項目も単なる暗号ではなくなります。

← 記事一覧へ戻る