プログラミングを学ぼうとする際に、すぐに感じる疑問があります。
ほとんどのプログラミング初学者はこの疑問にあたります。
この記事では、フロントエンドとバックエンドの違いを見ていきます。
目次
フロントエンドとバックエンドの違い
静的サイトと動的サイト
Webページは表示までのプロセスの違いにより、静的サイトと動的サイトに分けられます。
静的サイト
静的サイトは、会社のホームページのように情報がほぼ固定された情報で更新の頻度が少ないページに多いです。
静的サイトでは、IEやChromeなどのブラウザからアクセスがあったとき、サーバーに置いてあるHTMLとCSS、JavaScriptのファイルをそのままクライアントに送り返すだけの処理を行います。
動的サイト
動的サイトは、SNSやネットショップなどのように、リアルタイムに情報を更新する必要があるWebサイトで使われます。
動的サイトでは、サーバーにアクセスがあると、クライアントから送られた情報をもとに、PHPなどのプログラムを実行します。
PHPのプログラムがサーバー上にあるファイルや、データベースなどにアクセスし、HTMLやCSS、JavaScriptを生成し、クライアントに送り返します。
フロントエンドとバックエンドの違い
Webサイトにおいて、フロントエンドは最終的に送り返されるHTML、CSS、JavaScriptのことを指します。バックエンドは、このHTMLを送り返すまでの仕組み全般を指します。
これは、静的サイトでも動的サイトでも同じです。
フロントエンドは上記で説明したように、HTMLとCSS、JavaScriptのことを指しますが、デザインやHTMLに埋め込む画像なども含めてフロントエンドと呼ぶことがあります。
バックエンドは、Webサーバーやファイルサーバー、プログラムからデータベースなどHTMLを生成し送り返すための多岐にわたる技術のことを指します。
バックエンドの中のPHPの役割
WebサイトでPHPが利用される場合には、基本的には動的サイトがメインです。
動的サイトが表示されるまでの流れは下記のように実行されます。
- クライアントがURLをもとにWebサイトへアクセスする
- サーバーがクライアントからの情報をもとにPHPを起動する
- PHPは記述されたプログラムのとおり、サーバー上の情報を集める
- 集めた情報をもとにHTML情報を組み立てる
- サーバーへHTML情報を返すように命令をする
- サーバーがHTMLをクライアントへ送り返します。
- クライアントがHTMLを受け取る
PHPはこのうちの3,4,5の処理を担っています。
静的サイトと異なり、プログラムが様々なことを実現できるため動的Webサイトはさまざまなことをブラウザ上で表現することができます。
MVCモデルによる開発手法
プログラムを作ることを開発といい、ほとんどのシステムは複数の人で一つのWebサイトを作ります。
その際に、MVCモデルという開発手法を用いることで、分業をしやすいように工夫することができます。そのため、WebサイトのプログラミングはほとんどのケースにおいてMVCモデルが用いられます。
Mはビジネスロジックとも呼ばれていて、サーバー上からアクセスできる情報を収集したり加工したりする部分を指します。
Vにあたるビューは、集めた情報をもとに、HTMLを出力する部分のことを指します。
Cはモデルとビューを制御する、名前の通りコントローラーの役割を持っています。
そして、フロントエンドはこのMVCでいうVのビュー部分を指し、それ以外のM（モデル）やC（コントローラー）、サーバーの設定やネットワークなどの設定などV（ビュー）以外の部分全てをバックエンドと呼びます。
PHPのフレームワーク
この、MVCによる開発は、ほとんどパターン化された処理がたくさんあります。
このパターン化された部分を、あらかじめ作り込まれたプログラムの塊をフレームワークと言います。
実際の開発現場では、このフレームワークをもとに開発を進めることが一般的であり、PHPの場合には下記のようなフレームワークがあります。
- Laravel
- CakePHP
- Zend Framework
- Symfony
現状、新しいプロジェクトはLaravelになることが一般的です。
フロントエンドで使われる言語や技術
フロントエンドで使われる言語は、基本的にChromeやIEなどのブラウザが処理できる言語です。
HTML
HTMLはほとんど説明するまでもありませんが、WebアプリケーションやWebサイトには欠かせない言語です。
現在主流のHTML5はほとんど全てのブラウザで仕様が整ってきているため、とても学びやすくなっています。以前はブラウザにより動くタグ、動かないタグや独自のタグを宣言できたりとても扱いにくい言語でした。
HTMLのタグは基本的に全てインターネット上に情報があるため、学びやすい言語でもあります。
【初心者向け】 HTML5の仕様は？特徴について説明します
CSS
CSSもとても古くからあるHTMLに欠かせない技術です。HTMLが文章の構造を定義する言語であり、CSSはWebブラウザで見た場合の文字色や文字サイズなど、見た目を定義する技術です。
HTMLに比べ、とても数多くのプロパティがあるため、入りやすさに反してとても奥が深い技術です。プロパティはCSSの設定値のことを指していて、一つのプロパティで色や文字サイズを変えることができます。
仕組みとしてはとてもシンプルなのですが、CSSのプロパティがブラウザにより仕様が少し違ったり対応状況が変わったりします。
また、CSSだけでブラウザ上に絵を描いたり、少しのアニメーションができたりします。入りやすさに対して、とても奥が深い技術です。CSSを使った描画やアニメーションを実装するには深い知識が必要な場合があります。
CSSコーディングとは？意味やコードの書き方について説明
JavaScript
JavaScriptもCSSと同様とても古くからある言語です。現在では、クライアント側で動作するプログラミング言語がJavaScriptのみであるため、フロントエンドではとても重要な言語です。
JavaScriptはクライアントやサーバーのリソース（ファイルなど）に直接アクセスできないだけで、ほとんどのプログラムと同じことができます。
最近では、サーバー側でもJavaScriptが動作するようにもなっていて、とてもモダンな技術となっています。
企業のホームページなどでは、スクロールに合わせた背景の動作や、ポップアップなどの処理を実装することが多いです。
JavaScriptも入りやすさに対して、奥が深い技術であり、Webアプリケーションのフロントエンド開発をする上でほとんど必須の技術です。
Sass
Sassは少し毛色が異なる技術で、CSSの管理を比較的簡単に行うためのツールです。
CSSは単純であるため、複数人が同時に同じWebページやサービスを作っていくと、とても管理が難しく煩雑になっていきます。純粋なCSSだけで開発をすると、分業で作業するのがとても難しい技術です。
例えば、Webサイトのメインカラーが後から変更になった場合に、従来のCSSの場合変更が必要になる範囲がわからず更新漏れなどがよく起こります。しかし、Sassを利用するとやりようによっては変更箇所が1箇所ですみます。
CSSを学ぶ際にはSassで書けるようにするととても良いです。
【入門者向け】Sassって何が便利なの？メリット・デメリットを紹介！
まとめ
いかがでしたでしょうか。
フロントエンドエンジニアは主にWebアプリケーションのHTML部分を担当するエンジニアです。
しかし、フロントエンドと呼ばれる部分だけを知っているだけではなく、MVCモデルとはどういうことかやバックエンドが大体どのようなことをやってるかを知っている方が正確で早くプログラミングをすることができます。
この記事をきっかけに、フロントエンドやバックエンドの知識を増やす手がかりとしていただけると幸いです。
