Web

【図解付き】実例から学ぶ!フロントエンド・バックエンドの違い【Web】

今回はフロントエンドバックエンドの違いについて解説します。

どこからどこまでがフロントエンドの範囲で、どこからがバックエンドの範囲なのか知りたい。

上記のような方は今回の記事を読むことで、読み終わった後に次のような状態になっていることでしょう。

この記事を読み終わった後のあなた
  • フロントエンドとバックエンドの違いがわかる
  • 実際のサービスを見てどの部分がフロントエンド、どの部分がバックエンドが理解することが出来る

今まで、プログラミング教育やWeb開発の相談を受けてきて、プログラミング初心者(未経験者)の方や、WebデザイナーやWebディレクターさんなどはこちらの内容を把握されていない方が多く見られました。

なので、同じような境遇の方にとっては今回の記事は参考になる内容になっているかと思います。

それでは、次の内容で話を進めていきます。

今回の記事内容
  • フロントエンドとは
  • バックエンドとは
  • Amazonの商品ページから学ぶフロントエンドとバックエンド

 

フロントエンドとは

フロントエンドは大きく分けると次の2種類に分けられます。

2種類のフロントエンド
  1. ページ表示周り
  2. ページ操作周り

ページ表示周り

ページ表示周りの構成ページ表示周りの構成

上の図は、以下の教材コンテンツ内で使用しているスライドの1枚です。

あわせて読みたい
フロントエンドとバックエンドの違いを理解するWeb開発の現場でフロントエンドとバックエンドの違い理解できていますか?今回はフロントエンドとバックエンドについて言葉の定義を説明してから、実際に図を交えて、どの部分がフロントエンドでバックエンドなのか解説します。...

Webブラウザ上にWebページを表示するにはHTMLCSSという言語を使います。

HTMLCSSの役割は次のとおりです。

HTMLとCSSの役割
  • HTML : Webページの構造の定義
  • CSS : Webページのレイアウト(デザイン)を整える

それでは、先程の図をあらためて確認してみましょう。

上記の図の内容を分けると大きく分けると3つに分類されます。

ページを構成する3分類
  1. ヘッダー
  2. メインコンテンツ
  3. サイドバー

ヘッダーは画面上部、メインコンテンツは左下、サイドバーは右下に配置されているのがわかるかと思います。

さきほど「HTML : Webページの構造の定義」ということを述べました。ここでいう構造の定義とは表示をグループごとにまとめることになります。

今回でいうとグループは「ヘッダー」「メインコンテンツ」「サイドバー」の3つなります。

しかしHTMLでは表示パーツをグループごとにまとめることのみが仕事のため、図のように「ヘッダーは画面上部」「メインコンテンツは左下」「サイドバーは右下」という配置までは対応できません。

このパーツの配置作業を担当するのがCSSとなります。

CSSを使うことで、「ヘッダーは画面上部」「メインコンテンツは左下」「サイドバーは右下」が実現することが出来るのです。

ページ操作周り

Amazonの商品アイテム切替部分(JavaScript)Amazonの商品アイテム切替部分(JavaScript)

上の図を使ってページ操作割を説明すると、赤枠で囲まれている部分のボタンをクリックした時に、赤枠のボタンの間にある5つの商品が切り替わります。

この表示の切り替わりはJavaScriptによって実現されます。

JavaScriptはHTMLとCSSによって表示されているページ内容に動きをつけたり、表示内容を変更することが出来ます。

今回の場合は、ボタンクリックによってWebページの一部が書き換わった(操作された)ということになります。

実際には、商品が切り替わっているということは、商品情報をサーバーにリクエストしていることになります。

このリクエストもJavaScriptによって行われていて、リクエストの結果値であるレスポンス内容を元に表示データを切り替えているのです。

リクエスト、レスポンスについてよくわからない方は以下の記事でリクエストとレスポンスについても図解付きで説明しているので参考にしてみてください。

あわせて読みたい
Webサービスの基本的な仕組み
【図解付き】実例から学ぶ!Webアプリ・サービスの基本的な仕組みWebサービスの裏側がどうなっているか気になりませんか?実を言うとどのWebサービスも基本的には同じ仕組みで動いています。なので、Webの基本的な仕組みを理解すれば、全てのWebサービスの裏側を理解することにもなります。一緒にWebの裏側を学びましょう!...

バックエンドとは

バックエンドは、「フロントエンド以外の全て」になります。

これだけ聞くと雑なように聞こえるかもしれませんが、事実そのとおりで、バックエンドの範囲はフロントエンドと比べると膨大になります。

バックエンドの例をいくつか挙げると、

バックエンド例
  • Webサーバーの構築(Apache, Nginxなど)
  • サーバーサイドプログラムの実装(Ruby, PHP, JavaScript(NodeJS)など)
  • サーバーサイドフレームワークの選択(Ruby on Rails, Laravel, Expressなど)
  • データベースの構築(RDBMS, NoSQLなど)
  • キャッシュサーバーの構築(Redis, memcachedなど)
  • その他多数(インフラ構築以外にもドメインの設定、データベースの自動バックアップスクリプトの用意)

のように、フロントエンドと比べると担当範囲が圧倒的に大きいです。

このため、バックエンドを一言でまとめると「フロントエンド以外の全て」ということになるのです。

それでは実際に実サービス(Amazon)を例にフロントエンド、バックエンドのがどの部分を担当しているのか見ていきましょう。

Amazonの商品ページから学ぶフロントエンドとバックエンド

 

フロントエンド

ページ表示周り

まずは、表示周りから見ていきましょう。

Amazonの商品ページデザイン(HTML, CSS)Amazonの商品ページデザイン(HTML, CSS)

グループ分けをすると他にもたくさんありますが、今回は上の図から赤枠で囲った部分を選んでみました。

今回選んでグループ
  • メニュー
  • 商品に関する情報
  • 購入に関する情報

フロントエンドの章の中で「ページ表示周り」でもお話したように、グループ分けはHTMLで行われています。

そして、そのグループごとに配置を決めているのはCSSになります。

また、先程は説明していませんでしたが、CSSはパーツの配置だけではなく、文字サイズの大きさや色の変更を行うことも出来ます。

上の画像の赤枠の内「購入に関する情報」の中身を見るとわかるかと思いますが、値段やポイント、在庫数の部分が赤文字になっているのがわかるかと思います。

このようにCSSはレイアウトやデザインを綺麗にするのが仕事であるので、見た目に関することは全てCSSが担当します。

ページ操作周り

それではページ操作部分を見てみましょう。

Amazonの商品アイテム切替部分(JavaScript)Amazonの商品アイテム切替部分(JavaScript)

こちらはフロントエンドの章の中で「ページ操作周り」でも利用した画像になります。

ページ操作周り」の章でお話した内容と重複するので簡単にまとめると、赤枠ボタンを押すことによってJavaScriptによって以下の処理が実行されて以下のことが起こります。

ボタンクリック時の挙動
  1. JavaScriptを使ってサーバーに切り替えに使うデータの取得リクエストを送る(フロントエンド)
  2. サーバーはリクエストを受け取って、データをレスポンス値としてクライアントに返す(バックエンド)
  3. サーバーから受け取ったデータを元に表示を切り替える(フロントエンド)

上記の内、①と③がフロントエンドの作業、つまりJavaScriptによって行われる仕事となります。

バックエンド

最後にバックエンドです。

バックエンドの流れはフロントエンドからの流れがあったほうがわかりやすいので、次の図で画面左側がフロントエンド、右側がバックエンドと分けて説明します。

Amazonの商品アイテム切替時のデータの流れ(フロントエンド→バックエンド→フロントエンド)Amazonの商品アイテム切替時のデータの流れ(フロントエンド→バックエンド→フロントエンド)

上の図でいうと②③④の部分がバックエンドが行う作業になります。

フロントエンドのJavaScript経由でのデータリクエストとなり、その後のデータをクライアントに返すまでに行う作業は全てバックエンドで行われます。

具体的にはバックエンドで行う作業は、

バックエンド作業
  1. クライアントからのリクエストに応じた処理を行う
  2. データの取得や新規作成などデータベースが必要な操作があればWebサーバーからデータベースにリクエストを送る
  3. データベースから取得したデータを元にクライアントが扱いやすい形式にデータを整形して、クライアントにレスポンス値として結果を返す

③で「クライアントが扱いやすい形式にデータを整形」とは、JavaScriptで操作しやすいデータ形式という意味で、主にJSON形式が使われます。

JSONに関しては、今回の記事の範囲外となり、フロントエンド・バックエンドの範囲のみを知りたい方にとっては関係の無い内容となっているため、JSONが気になる方は以下の記事を参考にしていただけたらと思います。

まとめ

ここまで話してきた内容をまとめると以下のとおりです。

この記事のまとめ
  • フロントエンドはWebページの表示周りと操作周りを担当する
    • Webページの表示周りはHTML、CSSによって行われる
    • Webページの操作周りはJavaScriptをよって行われる
  • バックエンドはフロントエンドでは扱わない仕事すべてを担当する
  • Amazonの商品ページを使ってフロントエンドの担当範囲と、バックエンドの担当範囲を解説した

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
フロントエンドとバックエンドの違いを理解するWeb開発の現場でフロントエンドとバックエンドの違い理解できていますか?今回はフロントエンドとバックエンドについて言葉の定義を説明してから、実際に図を交えて、どの部分がフロントエンドでバックエンドなのか解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です