今更聞けないHTML&CSS講座番外編「どうやって動いてるの?」

一番重要なところを解説するのを忘れていたことに気がついた。

そもそも、Webページにアクセスして、なぜ画面が表示されるのだろうか

皆さんは、これが説明できるだろうか。

これを理解しておくと、この先PHPなどを勉強するときに非常に役立つ

是非、理解しておいていただきたい。

スポンサーリンク

全体像

さて、Webページを表示するときの大まかな流れをまとめておこう。

図だけ先に出してしまうと、以下のような感じだ。

最初に、前提としてWebページの運営者が、「サーバー」と呼ばれるパソコンに、提供するためのHTMLファイルなどを格納しておく必要がある。

そして、ユーザーが、自分のパソコン、スマホなどから「クライアント」と呼ばれるツールを使ってURLを叩く。

このクライアントは、一般的にはブラウザだと思ってくれていい。IEとかChromeとかFirefoxとか。

URLという文字列の中には、いくつもの種類の情報が入っている。サーバーの住所や、その中のファイルの場所などなど。

で、クライアントはURLが叩かれると、まずインターネットを介してサーバーにアクセスする。

そして、ファイル情報を渡し、サーバーはそのファイルをクライアントに返す

ファイルを返されたクライアントは、そのファイルの中身を読んで、画面に表示を行う

これで、一回のアクセスが完了だ。

HTML、CSS、JavaScriptなどの場合

さて、まずはHTMLやCSS、JavaScriptの場合を見ていこう。

これらの場合、サーバーはそのままそのファイルを返す

そして、受け取ったクライアントがその中身によって処理を行い、画面に結果を表示する

このように、これらはクライアント側で処理を行うのだ。

Java、PHPなどの場合

さて、まだ解説してないが、JavaやPHPなどの場合はどうなるのだろうか。

これは、ちょっとサーバー側の動作が異なる

まず、クライアントからURLによるアクセスが行われる。ここまでは同じだ。

そして、ファイルが欲しいという要求を受け取ったサーバーは、まずこれらのコードで書かれたプログラムを実行する

そして、その結果として得られた文字列を、ファイルとしてクライアントに返している。ここから先も上と同じで、クライアントが処理して結果を画面に表示する。

このように、サーバー側で処理が行われるかどうか。これが違いだ。

…何が嬉しいの?

これができると、サーバー側で情報を持っておいて、ユーザーの違いによって返す結果を変えることができる

例えば、代表的なものはAmazonだろう。

ログインして、例えば気になる商品があったらリストに加える。

このとき、サーバー側では、あるユーザーが、そのユーザーが持っているリストAに、商品aというものを加えたという情報をデータベースに入れている

これによって、次にユーザーがそのリストにアクセスしたとき、サーバーはユーザー情報をもとにリストを取得して、その中身を返すことができる。

というように、同じURLでも、状況によって返す中身を変えることができるのだ。

このようなものを、一般にWebアプリケーションと言ったりする。

それぞれの立ち位置

こうなると、WebアプリケーションではないHTMLなどは何をしているのか。

これは、どうやって表示するかを決定するもの、と捉えることができるだろう。

で、何を表示するか、をWebアプリケーションによって処理する

これが、一般にアクセスしているWebページの概要だ。

その証拠として…例えば、このページのソースを見てみよう。このWordPressも、Webアプリケーションの一つだ。

WordPressを構築したことがある人ならわかると思うが、これにはPHPが使用されている。

しかし、ソースを見ると、基本的にHTML、CSS、JavaScriptくらいしか表示されてないだろう。

これは、PHPがサーバー側の処理を記述するものであり、その結果としてHTMLなどを返していることが原因だ。

なので、PHPを書いたのに受け取ったページの中に書かれてない!というのは、問題でも何でもないので安心して欲しい。

逆に、PHPを書いたのに、書いた内容がそのまま表示されてしまって上手く動かないといった場合だが、これはそもそもPHPを動かすためのものが必要になってくる。

今、自分が何をしていてどういったことができるかを把握しておきたい。

まとめ

いかがだっただろうか。ちょっとまだ解説していないものもいろいろ書いてしまったが、とにかくHTML、CSS、JavaScriptは「見た目を決定するもの」という認識でいよう。

なので、何かWebサービスを作りたいとなったら、見た目を処理するHTMLなどに加えて、実際に処理を行うPHPなどの学習も必要になってくる。また、サーバーの用意もだ。

自分の目的に合わせて、何が必要なのかをしっかり把握しておこう。

コメント

タイトルとURLをコピーしました