[ウェブデザインの基礎] ウェブサイトが表示される仕組み・それぞれの言語の役割

一般的にウェブサイトは「html+ css + その他もろもろ」で構成されています。
では、それらをどうやってブラウザに表示しているんでしょうか??

Webサーバーにリクエストを送ってアップロード保存されたデータを表示している

図を見てみましょう。

みなさんが使っているPCやスマホで検索をすることによって、ウェブサイトのデータが保存されているWebサーバーに、「このページを表示してほしい」というリクエストが送られます。
リクエストを受け取ると、Webサーバーがそれに応答しウェブサイトが表示される、という仕組みです。

逆に言えば、リクエストをいくら送っても(URLを打ち込んでも、検索しても)、ウェブサイトはWebサーバーにデータが保存されていなければ、データがないので応答せず見ることができません。

なので、デザインやコーディングを行って制作したウェブサイトのデータを、Webサーバーにアップロード保存するまでがウェブサイト制作になります。
(※細かく言うとちょっとチガウけど・・・)

ウェブサイトをアップロード保存してからの検索エンジンの上位表示や閲覧数を増やすための対策など、ウェブサイトをたくさんの人に有効に使ってもらうため日常的に行う更新やメンテナンスがウェブサイト運営になります。

それぞれの言語の役割

ではウェブサイトがブラウザで表示された時、内部ではどの言語のファイルがどんな役割で機能しているのでしょうか??

ウェブサイト制作で頻繁に使われる言語は、

• html(最終的な表示用ファイル)
• css(文字情報だけのhtmlの見た目を調整するファイル)
• JavaScript(htmlに動的な要素を加えるファイル)
• PHP(お問い合わせフォームなど、データの受け渡しなどを行うファイル)

以上の4つになります。
カッコで代表的な役割を記載していますが、もう少し踏み込んでみましょう。

htmlの役割

htmlはみなさんがブラウザを通して最初に目にするファイルです。
「https://ryu-ya.jp」などURLを打ち込みWebサーバーがリクエストを受け取って、データが存在する場合、一般的にはコーディングを行った「htmlファイル」が表示されることになります。

html単体ではただの文字情報ですが(前回見せたようなもの)、後述するCSSで見た目を調整され、JavaScriptでアニメーションやタブの切り替えなどの動きを動的に加えられ、PHPでデータベースなどからデータを取り出したり条件分岐で表示を変えたりされ、好き勝手に改変されたりします。

上述した4つの言語の中で唯一「受け身」のファイルになります。
htmlの役割はcssやJavaScriptから受け取った情報を反映させて表示する受け皿です。

cssの役割

cssは文字情報しかないhtmlファイルの見た目を整える役割を持ちます。
文字情報しかない状態、つまりcssが効いていないとどういう見た目になるのかというと・・・。

こうなります・・・。
本当に文字情報が表示されているだけで楽しくもなんともないですね。

そしてひとたびcssを効かせてあげると・・・

きちんとデザインされたページが表示されました。
Photoshopなどで制作したデザインを反映させるにはcssが必要、ということがわかりましたか??

JavaScriptの役割

JavaScriptはhtmlとcssを使ってデザインが反映されたページが表示されたのち、
表示状態を変更したり、要素をアニメーションさせたりといった、
主にリアルタイムでの処理を行うのにとても有効です。

わかりやすいものでいうとタブの切り替えなどがありますね。
Yahoo! JAPANのトップページの中央のニュースのブロックで、各カテゴリのタブをクリックすると一覧の中身が切り替わりますよね。これもJavaScriptを使ってリアルタイムで表示状態の変更を行っています。

もう一つ、スクロールさせるたびに要素が移動したり動いたりもJavaScriptを使うことで可能になります。龍弥デザインのクライアント様、フリフリチキンのKahana’s様でも多くのJavaScriptアニメーションを使っていて、スクロールしていくと木が動いたりチキンが回っていたり、車が走ってきたりします。

フリフリチキンのKahana’s

アニメーションを使うことで見に来てくれた人を楽しませ、
とても有効に印象付けを行うことが可能です。

PHPの役割

おそらくこの講義でPHPを使うことはないとは思いますが、念のため解説します。

PHP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般的にはPHPと省略して用いられており、これは「個人的なホームページ」を意味する英語の “Personal Home Page” に由来する^[2]。

引用元:Wikipediahttps://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor

動的にhtmlデータを生成する・・・

例えばウェブサイトのトップページによくある「お知らせ一覧」がわかりやすいです。お知らせ一覧はほとんど場合、新しい記事から順番に表示されて古い記事は消えていきますよね。これを記事更新のたびに自動で行ってくれるのがPHPなどのプログラム言語です。

また多くの場合ページの一番下に著作権の表記として「© Copyright 20XX Allrights Reserved.」といった文字列がありますが、この「20XX」の年度は年度が替わるタイミングで手作業で変えている・・・わけがなく、PHPでその時の年度を取得して自動でhtmlの書き換えを行っています。

その他にもお問い合わせフォームや掲示板なんかもPHPで構築することが可能です。

クライアントサイドとサーバーサイド

これも覚えておくといいと思います。
代表的な例としてクライアントサイドで働く言語はJavaScript、
サーバーサイドで働く言語はPHPとして解説します。

クライアントサイドはPCのブラウザ

まずクライアントサイドとは、簡単に言えば皆さんが使っているPCのブラウザの事です。

クライアントサイドで働く言語は閲覧環境に非常に影響を受けます。
例えば、スクロールしたら画像が動くアニメーションをJavaScriptで作るとします。
当然JavaScriptを使っているので、JavaScriptが正常に動作する環境ならアニメーションが動きますが、JavaScriptが無効になっていたりして動かない環境だとアニメーションは動作しません。

サーバーサイドはウェブサイトのデータが置いてあるサーバー

次にサーバーサイドとは、構築したウェブサイトのデータをアップロードしたサーバーのことです。
サーバーサイドはサーバーに置いているプログラムを動かせるため、クライアントサイドほど閲覧環境に影響されません。

本日のまとめ

• ウェブサイトが表示される仕組みは、PCやスマートフォンを使って検索やクリックなどの方法でウェブサーバーにリクエストを送り、ウェブサーバーが応答して表示されるというもの。
• htmlファイルの役割は他の言語の受け皿で最終的な表示用ファイル。cssファイルの役割はhtmlへデザインを反映させること。JavaScriptファイルの役割は表示状態などの変更をリアルタイムで処理すること。