今回からWeb開発で必要な知識をシリーズ形式で解説していきたいと思います。
これからプログラミングを勉強してエンジニアになりたい方やエンジニアではなくてもWeb系の仕事をしていきたいという方にとっては必須の知識になるかと思います。
第一回の今日はクライアントとサーバーになります。
1.はじめに
皆さんがよく使うGoogle ChromeやMicrosoft Edge、SafariなどのWebブラウザの上部にある検索窓に「http://google.com」と入力し、パソコンであればenterボタン、iPhoneであれば開くボタンを押してみるとGoogleが開かれます。
今度は「http://youtube.com」と同様に入力して、パソコンであればenterボタン、iPhoneであれば開くボタンを押してみるとYouTubeが開かれます。
普段何気なく利用しているWebブラウジングですが、どのような仕組みでWebは動いているのでしょうか。
2.URL、HTTP通信、ドメイン
まず、先ほど検索窓に入力した「http://google.com」や「http://youtube.com」などの文字列をURLと言います。
インターネット上でどの情報にどのような方式で通信するかという情報が書いてあります。
「http://google.com」を例に取ってみましょう。
右側から「http」の部分が通信方式(プロトコル)を表しており、この場合ですとhttp方式で通信をするということを表しています。ここではhttpはWEBの仕組みでの通信方式と理解してもらえればOKです。
次に「google.com」の部分ですが、ドメイン部分になり、インターネットでの住所のようなものになります。
ですので、「http://google.com」ですと「google.com」にhttp通信をするということを指しています。
ドメインはインターネット上での住所のようなものと言いましたが、住所には何かしらの建物が建っているように、ドメインの先には何があるのでしょうか。
3.サーバーとクライアント、HTTPリクエストとHTTPレスポンス
それは、WEBサーバーになります。サーバーとは様々な種類、用途がありますが、いわゆるコンピューターです。サーバー専用のコンピュータを使用することが多々ありますが、みなさんが使用しているコンピュータも使用方法によってはサーバーになります。
また、WEBサーバーとは、HTTP通信によるアクセスを受け付け、応答をアクセスしてきたコンピュータへ返すサーバーです。
この際、応答として返すデータ形式がHTMLになります。HTMLはWEBブラウザを通して閲覧することによってあなたはWEBサイトを閲覧することができます。
この際、HTTP通信によるアクセスをHTTPリクエスト、サーバーに返される応答をHTTPレスポンスといい、HTTPリクエストを送るコンピュータやWebブラウザをクライアントと言います。
このようにして、WEBの仕組みは動作しています。
4.WEBのプログラミングとは
HTTPリクエストに対して、HTTPレスポンスをHTMLとして返すことでWEBページが表示されることを学びましたが、リクエストに対して決まったHTMLを表示するだけでは、システムとして機能しませんし、サービスなどを提供することはできません。
そこで、動的に表示する内容を変更するためにプログラミング言語を使用します。
クライアントであるWebブラウザ上で動作する言語をフロントエンド言語、サーバー側で動作するプログラミング言語をサーバーサイド言語、バックエンド言語と言います。
フロントエンド言語とサーバーサイド言語で何が異なるかといいますと、多くの点で異なりますが、
フロントエンド言語：
クリックやホバーなどイベントごとに動作したり、HTMLに動きを付けるようなプログラムを実装することができる
サーバーサイド言語：
URLにアクセスした際にクライアントなどリクエスト時にサーバーに送られた情報に応じて返すレスポンスの内容を変更したり、データの保存を行ったりするようなプログラムの実装を行うことができます。
もっと簡単にいうとユーザーから見える部分のプログラムをフロントエンド言語で実装し、ユーザーから見えないサーバー上で処理するプログラムをサーバーサイド言語で実装を行います。
5.まとめ
・クライアントからのHTTPリクエスト、サーバーからのHTTPレスポンスによってWEBの仕組みは成り立っている
・クライアント側の目に見える部分のプログラムをフロントエンド言語で実装し、サーバー側の処理をサーバーサイド言語で実装する。
本日はここまでになります。最後までご覧くださりありがとうございました。
