第一回ではインターネットの通信の仕組みについて解説しましたが、その中でフロントエンドとバックエンドという単語ができました。主にカイエンで制作しているのは、フロントエンドにかかわる部分であるとして話を締めくくりましたが、それでは実際にフロントエンド・バックエンドとはどの様な物なのか見ていきましょう。
家電のUIと機能に置き換える
プログラムや所謂ファイルというのは、基本的にディスプレイなど何らかの出力を通さなければ人間には見ることができないので想像するのはとても難しいです。そこでフロントエンドとバックエンドを家電に例えてみましょう。
電子レンジ
それでは電子レンジに置き換えて考えてみましょう。
電子レンジの最低限の機能は以下の通りだと思います
【機能】
- 電磁波を出して、水分を振動させて温める
- 設定した時間の長さで動作する
【ユーザーインターフェイス（以下UI）】
- 温める強さを選ぶ
- 時間を設定する
上記の説明や、イラストを見てUIの部分（電子レンジではプッシュ式のボタンやダイヤルがほとんどですね）が電磁波を放出して温めているとは多くの人は思わないと思います。電磁波を作り出したり、満遍なく温まる様に庫内の食品を回転させたりしているのは別の部分ですね。
基本的にインターネットではフロントエンドと呼ばれる部分は家電でいう所の「UI」、バックエンドに当たる部分は「機能」だと思ってもらえれば想像しやすいでしょう。そしてバックエンドの処理は第1回ではるばる辿ってたどり着いた先のサーバー上で実行されます。
しかし例えばですが、ウェブサイトのお申し込みフォームのHTMLその物がメールを送受信する機能を持っていると思っている人は少なくありません。これはウェブサイトが一つの画面上で完結してしまうため、その向こうにサーバがあり、そこで処理されていると想像することが難しいためと考えられます。
以下の様にお申込みフォーム自体はただのUIであり、機能の多くはサーバー上で実行されています。実際にサーバーを肉眼で目にすることができ、その箱の側面に、電子レンジの様にお申込みフォームが張り付けて有れば多くの人は誤解することは少ないでしょう。
フロントエンドを担うファイルたち
基本的にそのUIであるフロントエンドを作り上げる言語は、バックエンドの様に言語の多様性はなく、世の中で目にウェブサイトが殆どが共通の言語で作られています。
HTML（HyperText Markup Language）
読んで字のごとく、HyperTextを構築するための言語。文字情報に画像などのメディアも埋め込めるハイパーなテキストです！
WEBサイトで使われた時の主な役割は、検索エンジンに文書の内容を的確に伝えることでもあります。中身が変化することはなく、書かれたファイルの内容は普遍的でIT業界では「静的なページ」と言われたりします。
HTMLを手作業で記述したり、MovableTypeの様にバックエンドのプログラムが自動で大量生産したり、さまざまな方法で生成されサーバー上に設置され、それがユーザーのPCにダウンロードされ、ブラウザに表示されます。
CSS（Cascading Style Sheets）
装飾のための情報を、HTMLとは分離して記述するための言語です。文字を何ピクセルにするか、色は？経線は？余白は？といった見た目の設定を書き込みます。
昔はHTML内に直接装飾に関する情報を記入していましたが、文書の内容とそれらは関係がないため HTMLと分離する流れになりました。
JS（JavaScript）
ブラウザ上でプログラミングするための言語。読んで字のごとくブラウザ上で実行されます。
よく勉強し初めに起きる間違いとして、jQueryはそのjavascriptをより便利に簡単に開発するためのライブラリであり、言語ではありません。
PHP（PHP: Hypertext Preprocessor）
HTMLの前に自分が実行（プリプロセス）されると明言している、サーバ上で実行されるプログラミング言語です。
HTMLと違い、サーバ上で実行させたプログラムの結果をHTMLとして出力しユーザーにダウンロードさせて表示させたりしています。IT業界では「動的なページ」と言われたりします。
身近なところではWordpressなどはその代表で、phpファイルがデーターベースから記事のデータを取得してきて都度HTMLとして書き出していて、個別の記事のHTMLファイルは実在しません。
以上がフロントエンドとバックエンドの関係、そしてそれらを主に構築しているファイルたちになります。次回はそのファイルたちについて一つ一つより詳しく解説していきます。
