今回はフロントエンドの開発概要について解説して行きたいと思います。
今回はHTMLの役割、CSSの役割、JavaScriptの役割をざっくりと見ていくことでWEB開発のフロントエンドのイメージを掴んでいただけたらと思います。
1.前回のおさらい
まずは前回のおさらいです。
HTTPリクエストをクライアントのWEBブラウザからサーバーに投げかけることによってサーバーがプログラムを実行し、その結果をHTTPレスポンスとしてHTMLを返し、返ってきたHTMLをWEBブラウザを通して表示することでWEBページを見ることができます。
2.HTMLの役割
HTMLの役割はずばり、WEBサイトのパーツを作ったり、各パーツがどのような意味なのか目印をつけることになります。
世界中のwebサイトはヘッダー部分、メニュー部分、メイン部分、フッター部分のように様々なパーツから成り立っています。
それらのパーツを作るために、「ここからここまでがヘッダーだよ」「ここからここまではメインだよ」というように目印をつけることがHTMLの役割の一つ目になります。
また、各パーツの中で見出しや本文などの文書がありますが、それらを例えば見出しであれば<h1>タグで囲んだり、本文であれば<p>タグで囲んだりとそれぞれの文書がどのような役割なのか目印をつけることがHTMLの役割になります。
3.CSSの役割
続いてCSSの役割になります。
CSSの役割はHTMLのデザイン的な部分の調整をすることです。
HTMLでは、「こういう構成でここは見出しで、ここは本文で」と構成に関わることを調整していまたが、それだけでは、ただ、文字や画像が表示されているだけの味気のないwebサイトになってしまいます。
ここでCSSは配置位置を変えたり、パーツの縦幅、横幅を変えたり、色を変えたりして、HTMLのデザイン部分を調整します。
4.JavaScriptの役割
最後にJavaScriptの役割になります。
HTMLとCSSである程度見た目が綺麗になったところで「時間が経ったら、画像や文字を切り替えたい」とか「ボタンを押したら画面の色を変えたい」というような更なる要望が出るかと思います。
この役割を担うのがJavaScriptになります。
WEBブラウザで表示しているwebサイトに対して、イベントに応じたプログラムを用意しておくことで、見た目に変化をつけることができます。
このようにして、WEBサイトでユーザーが見る画面を構成してデザインして、動的に変化させるというのがフロントエンドの開発になります。
しかしながらこれだけでは、WEBサイトとしては成立していますが、WEBアプリケーションとしてはイマイチになります。
ユーザーのリクエストに応じてユーザーに表示する画面を変えたり、入力したデータを保存したりすることでWEBアプリケーションとなります。
ここで必要になるのがサーバーサイドの開発が必要になります。
次回はサーバーサイドの開発について見ていきましょう。
今回はここまでになります。
最後までご閲覧ありがとうございました。
