価値ある技術の提供

こんにちは！開発部所属の國分です。

「URLを打ち込むだけで、なんであんなカッコいいページが一瞬で表示されるの？」

これは、入社前の自分の疑問でした。
仕事でWebに関わるうちに仕組みをイメージできるようにはなりましたが、今回採用委員として1dayインターンの担当をすることになったので、「ちゃんと自分の言葉で説明できるようにしておかねば」と思い、この記事を書くことにしました。

今回の記事では、ITにあまり詳しくない学生の方にも、URLを入力してからページが表示されるまでに何が起きているのかをできるだけわかりやすく伝えることが目標です！
難しい言葉はなるべく使わず、やさしい表現で説明していきます！

URLを入力したら何が起きる？

まずは、登場人物の説明です！

ブラウザ（Google Chrome、Safari など）

Webページを表示するアプリ。文字ばかりの形で与えられるWebページのデータを、普段見ているような人間向けのレイアウト・デザインに変換して表示してくれる。

[使われる主なファイル]
• HTMLファイル：Webページの中身や構造を記述したファイル
• CSSファイル：Webページの見た目を整えるファイル

DNS（Domain Name System）サーバー

人間にとってわかりやすい「example.com」のような名前を、
コンピュータが理解できる「93.184.216.34」などのIPアドレス（数字の住所）に変換してくれる電話帳みたいなもの。
和英辞典が、リンゴ→appleに翻訳してくれるみたいなイメージ。

Webサーバー（例：Apache や Nginx）

クライアント（ブラウザ等）のリクエストに応じて、HTML、画像、スクリプトなどのウェブコンテンツを返却（提供）してくれる。

サーバーサイドスクリプト（例：PHP、Python、Ruby）

リクエストされた内容に応じて処理を行うプログラム。
たとえば、ログイン中のユーザー情報を確認したり、記事の一覧をデータベースから取得したりといった処理を担当。

データベース（例：MySQL、PostgreSQL）

データベースは、大量の情報を整理・保存しておくための仕組み。
ユーザー情報、記事の内容、コメント履歴など、Webページに必要なデータを蓄えている。
サーバーサイドスクリプトからの「このユーザーのプロフィール情報を取得したい」といった問い合わせに対して、該当するデータを返す役割を担っている。

クライアントサイドスクリプト（例：JavaScript）

Webページが表示された後に、ブラウザの中で動くプログラムのこと。
サーバーにもう一度アクセスしなくても、ボタンをクリックしたときにメニューを開いたり、表示を切り替えたりするなどの処理をしてくれる。

では、実際に動作を見ていきます！

① URLを入力する

まずはブラウザにURLを入力します。たとえば：

このとき、パソコン（ブラウザ）は「example.comの/news/2025というページに、httpという方法でアクセスしたい」と判断し、そこに向かって通信を始めます。
このURLは、主に次の3つの部分で構成されています：
• http:// ← プロトコル（通信の方法）
• example.com ← ドメイン名（どのWebサイトのことか）
• /news/2025 ← パス（そのWebサイト内のどのページか）
つまりこのURLは、
「example.com というウェブサイトの中の、/news/2025 ページを、httpという通信の方法で見に行ってね」という指示になります。

② DNSサーバーへの問い合わせ

さて、ブラウザは「example.comってどこにあるの？」と調べ始めます。Webサーバーからデータを取得したいわけです。
しかし、コンピュータは数字しか処理できず、IPアドレス（例：127.0.0.1）」という数字の住所で通信を行います。
そこで登場するのが「DNSサーバー」です。
DNSサーバーに問い合わせると、「example.comの住所はこれだよ！」という感じで、IPアドレスを返してくれます。
たとえば、こんな感じです：

これでブラウザは、「どのWebサーバーにアクセスすればいいか」がわかるようになります。

③ Webサーバーへ接続

IPアドレスがわかったら、その住所にあるWebサーバーに向かって接続します。
このとき、ブラウザは「HTTPリクエスト」という形で、見たいページの情報をリクエストします。

この中身を簡単に説明すると：
• GET は「データをください」という意味の命令（HTTPメソッド）
• /news/2025 は見たいページの場所（パス）
• HTTP/1.1 は使っている通信のルールとバージョン
• Host: example.com は「どのサイトのことを言っているのか」を示す情報（複数のサイトを1台のサーバーで管理している場合などに必要）
このリクエストがWebサーバーに届くと、Webサーバーはサーバー内に保存されているHTMLファイルや画像、CSSファイルを探して読み込みます。そして、そのファイルをブラウザに送り返します。するとブラウザは受け取ったHTMLを元に画面を表示します。

ここまでで終わるのが「静的コンテンツ」

たとえば「自己紹介ページ」「会社概要」など、中身が変わらないページなら、この「リクエスト → HTMLを返す」で完了です。
こういった変化しないコンテンツは「静的コンテンツ」と呼ばれます。

④ アプリケーションが処理する

一方、X(Twitter)のタイムラインやニュース一覧のように、日々内容が変わるページはそうはいきません。
こういったページは「動的コンテンツ」と呼ばれ、もう少し複雑な処理が行われます。
動的コンテンツの場合、Webサーバーは、プログラム（PHPやPython、Rubyなど）に処理を渡します。

⑤ データベースからデータ取得

プログラムは必要に応じて、データベースに情報を取りに行きます。
たとえば「今日のニュース一覧を出して」といった具合です。
データベースから必要なデータを受け取ったら、
プログラムはそれを使って、ページのHTMLをその場で作ります。
そして最後に、できあがったHTMLをWebサーバー経由でブラウザに返します。

⑥ クライアントサイドスクリプトが動く

こうしてブラウザにHTMLやCSSが届き、ページが表示されますが、それで終わりではありません。
実は、ページが表示されたあとにも、動き続けている仕組みがあります。
たとえば、
• ボタンを押すとメニューが開く
• 入力フォームに不備があると「エラーです」と表示される
• 一定時間ごとに最新の情報が読み込まれ、画面がリアルタイムで更新される
こうしたページ上での、ユーザーの操作に合わせて反応したり、自動的に情報が更新されたりする動きは、JavaScriptなどのクライアントサイドスクリプトによって実現されています。
この仕組みのおかげで、ページ全体を毎回読み込み直さなくても、必要な部分だけを動かしたり、更新したりできるのです。

まとめ：URLを入力してからページが出るまで

1. URLを入力 → どこにアクセスするかを決める
2. DNSサーバーがIPアドレスを教える
3. Webサーバーにアクセス → 静的 or 動的コンテンツを返す
4. 動的コンテンツの場合は、サーバーサイドスクリプトとデータベースが処理を担当する
5. HTML/CSSをブラウザが読み込んで表示
6. クライアントサイドスクリプトが動いて、ページがユーザーの操作に応じて反応したり、自動で更新されたりするようになる

以上です！！
少しでも、Webページが表示される仕組みについて「なるほど」と思ってもらえたら嬉しいです！！

おわりに

インターン参加者を引き続き募集しています！
「もっと会社のことを詳しく知りたい！」「実際の現場を体験してみたい！」そんな学生の皆さんにおすすめです！
少しでも興味があれば、ぜひ下記リンクをご覧ください！！
https://arwrk.net/recruit/fmks2kidlarwax0