全くの未経験からプログラミングを学び出して、言語の学習ばかりしていて、ふと感じた疑問。
webサービスはどんな流れでユーザーの画面に表示されてるのか？
プログラミングとは、その流れの中のどこに位置するのだろうか？
仕組みの全体像を把握して、プログラムの行き着く先が見えたらプログラミングへの理解がより深まるかと思い、web全体の基礎から学習し直すことにしました。

■何についての記事？

下記のような疑問に対する回答を、参考書を元にまとめた記事です。
・webサービスはどんな流れで提供されてるの？
・ブラウザとサーバーの役割とは？
・静的サイトと動的サイトってどう違うの？

■対象読者

・未経験からプログラミング学習をはじめた方
・webサービス提供の全体像を知りたい方

■この記事のゴール

webサービスがユーザーに提供されるまでの全体像を知る
①リクエストとレスポンスについて
②webサーバーへのアクセス方法(URL)
③webブラウザの役割
④HTTPとは何か
⑤静的ページと動的ページの表示の仕組み

下記より、それぞれ解説していきます。

webブラウザとwebサーバーの関係##

webサービスを利用する際に必要なのがブラウザとサーバーです。
ブラウザの代表例は Internet Explorer 、google chrome、Safari などがあります。
ブラウザ→サーバーに対して『このファイルを頂戴！』という要求をして、それを受けたサーバーがブラウザに対して要求されたファイルを送り返します。

この流れをリクエストとレスポンスと呼びます。これによって、私達はwebページを閲覧したり、webサービスを利用することができます。

ブラウザの機能##

ブラウザの主な機能が下記２点です。

①サーバーに対して指定ファイルのリクエスト
リクエストの方法は、一般的にも聞き馴染みのあるURLを用いています。

(例)http:/naoya-net:80/index.html

例えば上記の場合だと、『naoya-net』というサーバーの『ポート番号80番』に『index.html』というファイルを要求しています。
これを受けた『naoya-net』というサーバーは、その要求をしてきたブラウザに対して『index.html』のファイルを投げ返します。かなりザックリですが、このリクエストがブラウザが持つ機能の一つです。

ちなみに、ここでの『naoya-net』の部分をドメインと呼び、サーバーを指定する際はドメインもしくはIPアドレスを指定します。
（IPアドレスとは各コンピュータ固有の住所のようなものです）
上記ではドメインを使用していますが、実際のコンピュータ同士のやりとりにはIPアドレスが必要になります。そのために、ドメインをIPアドレスに変換してくれる仕組みをDNSと呼びます。DNSは電話帳のようなもので、IPアドレスとドメイン名を紐付けて管理しています。なので、ドメイン名からIPアドレスを呼び出して変換することが可能なのですね。

ドメインの後の『：80』の部分はポート番号と言い、ポート番号によってサービスの種類を指定できます。webサーバーのポート番号は80番なので、ここでは 80番を指定しています。
住所で考えると、IPアドレスでマンションを指定し、ポート番号で部屋番号を指定するようなイメージです。

②HTMLファイルの解釈

サーバーからwebページが送られてきたとして、HTMLのコードがそのままブラウザ上で表示されたら見辛いですよね。それを解消してくれるのもブラウザの役割です。コードに書かれたタグの意味をブラウザが解釈して、ユーザーが見やすいように整形してwebページを表示してくれます。
(例)h1タグであれば見出しとして大きく表示する等

HTTP （HyperText Transfer Protocol）とは？##

URLを見ると、httpで始まる場合が殆どだと思います。
このhttpとはザックリいうと、通信時のルールのことを指します。
ブラウザ⇄サーバー間でのコンテンツの送受信の流れにおける、共通のルールや手順のことをHTTPと言い、サーバーへのコンテンツ要求はこのHTTPに基づいて行われます。
ネット回線に繋がる機器同士の共通ルールをプロトコルと言い、HTTPの場合だと、Hypertextの送受信のプロトコルなので、正式名称をHyperText Transfer Protocolと呼びます。
そうしたプロトコルの集まりをTCP/IPと言います。以前はコンピュータに搭載されているOSや機種によって異なるプロトコルが用意されていたので異なる機種間の接続ができませんでした。が、TCP/IPの浸透によりプロトコルが統一された結果、異なるOSや機種間の通信が可能になりました。
(関連用語：ステータスコード、メッセージヘッダー)

静的サイトと動的サイト

webページは大きく分けて静的サイトと動的サイトの２つに区分されます。誰が・いつログインしても同じ表示のページを静的サイト(ホームページ等)、ログインする人や状況によって内容が変わるページを動的サイトと呼びます。(インスタ・Twitter等)
このwebページの種類によってリクエスト・レスポンスまでのサーバー側の処理内容に若干の違いがあります。

まず静的サイトについては、ブラウザからリクエストが来たら、毎回同じコンテンツをそのまま送信します。わかりやすいですね。
動的サイトの場合、リクエストが来たら、webサーバーがその時の状況に応じて毎回コンテンツを作成しています。具体的には、リクエストを受けたサーバーがサーバーサイドスクリプトと呼ばれるプログラムを実行、リクエストの内容(検索ワードなど)を加味して、データベース等と連動しながら作成されたHTMLをブラウザに返します。この仕組みをCGIと呼びます。これによって、アクセスするユーザーやその時のデータ状況によって異なるコンテンツを送信することができます。

PHPやRubyなどのいわゆるバックエンドの言語は、サーバー側で、動的サイトを作るという役割を担っている事になります。

まとめ

webサービスは、ブラウザとサーバ間の通信によって提供されている。
コンテンツへのアクセスはブラウザ経由でのURL入力によって可能。その際の通信手順をHTTPと呼び、HTTPのようなプロトコルの集合体をTCP/IPと呼ぶ。
TCP/IPにより、様々な通信の規程が標準化された結果、異なるOSや機種間の通信が可能になった。
webページは静的サイトと動的サイトに区分される。動的サイトの場合、CGIによって毎回異なるページを生成してユーザーに返す。この生成の処理をバックエンドの言語が担っている。

参考にした本

この一冊で全部わかる「Web技術の基本」　著：小林恭平、坂本陽

所感

プログラム言語の学習をやってきましたが、サービスが提供されるに到る全体像についてあまり把握してませんでした。。
今回、通信の仕組みやサーバー周りの事を学習した事で、プログラム言語の学習において、あまり腹落ちしてなかった部分がスッキリしました。
(Cookieやセッションの仕組みなど)
これからプログラミング学習を始める方は、まずwebサービスが提供されるまでの全体像を把握してから、言語学習を始める事をおすすめします！