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開発の現場でフロントエンドとバックエンドの違い理解できていますか?今回はフロントエンドとバックエンドについて言葉の定義を説明してから、実際に図を交えて、どの部分がフロントエンドでバックエンドなのか解説します。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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