Webサイトを作る仕事や勉強で、「フロントエンド」という言葉を聞くことがあります。
名前だけでは分かりにくいですが、普段使っているサイトの画面を思い浮かべると、役割が見えてきます。この記事では、ネットショップで商品を探す場面から、フロントエンドが何を担当しているのかを見ていきましょう。
💡 このページでわかること
- フロントエンドが担当する画面や操作
- バックエンドとの違いと、連携する仕組み
- HTML・CSS・JavaScriptの基本的な役割
フロントエンドとは？画面と操作を担当する部分
フロントエンドとは、Webサイトで、利用者が直接見たり操作したりする部分のことです。
画面に並ぶ文章や画像、文字を入力する欄、押すためのボタンなどが関係します。見た目だけでなく、ボタンを押すと表示が切り替わる、といった操作への反応も役割に含まれます。
私たちは、ChromeやSafariなどのソフトを使ってWebサイトを開きます。このソフトが「ブラウザ」です。フロントエンドは、ブラウザを通じて情報を伝え、利用者の操作を受け付けます。
ブラウザでは、ページを読むだけでなく、メールを送ったり、予約を申し込んだりすることもできます。このようにブラウザで利用するアプリを「Webアプリ」と呼びます。メールの入力欄や予約ボタンなど、Webアプリで見たり操作したりする部分もフロントエンドです。
ネットショップで見るフロントエンドの具体例
ネットショップでマグカップを探す場面を思い浮かべてみてください。検索欄に「マグカップ」と入力して検索すると、商品の写真や名前、価格が画面に並びます。
その中から商品を選び、詳しい写真を見たり、スマートフォンで説明を読んだりするときにも、フロントエンドが関わっています。
| 画面で見たり操作したりすること | フロントエンドに関係する部分 |
|---|---|
| 検索欄に「マグカップ」と入力する | 入力欄や検索ボタンを用意し、操作を受け付ける |
| 商品の写真や名前、価格を見る | 商品情報を読みやすく並べて表示する |
| 商品の小さな写真を押す | 選んだ写真を大きく表示する |
| スマートフォンで商品を見る | 画面の幅に合わせて、文字や商品の並びを整える |
では、検索条件に合う商品を探しているのもフロントエンドなのでしょうか。
検索の操作を受け付けて結果を表示することと、条件に合う商品を探す処理は、分けて考える必要があります。 次は、商品を探す処理を画面の裏側で行うネットショップを例に、その違いを見てみましょう。
バックエンドとの違いは？
検索欄に入力された「マグカップ」という条件は、商品情報を扱うコンピューターへ送られます。この情報を受け取る側が「サーバー」です。
サーバー側で条件に合う商品を探し、結果を返す処理を担当するのが「バックエンド」です。フロントエンドが利用者の画面や操作を担当するのに対し、バックエンドは主にサーバー側で、データの取得・保存や注文の処理などを担当します。
検索ボタンを押してから結果が表示されるまでを追ってみましょう。これは作り方の一例です。
- 利用者が検索欄に「マグカップ」と入力し、検索ボタンを押す。
- ブラウザからサーバーへ、「マグカップ」という検索条件を送る。
- サーバー側のバックエンドが条件に合う商品を探し、結果をブラウザへ返す。
- ブラウザで結果を受け取り、フロントエンドの画面に商品一覧を表示する。
注文するときも、画面で入力を受け付ける役割と、裏側で注文を処理する役割が分かれます。
| 役割 | フロントエンド | バックエンド |
|---|---|---|
| 商品検索 | 検索の操作を受け付け、結果を表示する | 条件に合う商品を探し、結果を返す |
| 注文 | 配送先の入力欄や注文ボタンを用意し、結果を表示する | 在庫や注文内容を確認し、注文情報を保存する |
商品を探す裏側の処理が分かったところで、次は、検索結果や商品写真を表示する画面をどのように作るのか見ていきましょう。
HTML・CSS・JavaScriptの役割
検索結果からマグカップの商品紹介ページを開くと、商品名や写真が表示されます。その画面を作るには、載せる内容を用意し、読みやすく整え、必要に応じて操作への反応を加えます。
このとき基本となる技術が、HTML・CSS・JavaScriptです。同じ商品紹介ページを例に、それぞれの役割を整理してみましょう。
| 名前 | 主な役割 | 商品紹介ページの例 |
|---|---|---|
| HTML（エイチティーエムエル） | 見出し・文章・画像・ボタンなど、ページの内容と構造を記述する | 商品名を見出しにし、写真やボタンの要素を用意する |
| CSS（シーエスエス） | 色・文字の大きさ・余白・配置など、見た目を整える | 商品名を大きくし、写真と説明を見やすく並べる |
| JavaScript（ジャバスクリプト） | 操作に応じた処理や、表示の更新を行う | 押した小さな写真と同じ写真を、大きく表示する |
たとえば、小さな商品写真を押すと、大きな写真が切り替わる機能を考えてみます。HTMLで写真や選択用のボタンを用意し、CSSで大きさや配置を整えます。そこにJavaScriptで、押した写真へ表示を切り替える処理を加える、という作り方ができます。
なお、商品情報を入れたHTMLをサーバー側で組み立てて、ブラウザへ返す作り方もあります。画面に表示される内容を、すべてブラウザだけで作っているわけではありません。
ただし、すべての動きにJavaScriptが必要なわけではありません。 リンクで別のページへ移動したり、チェック欄にチェックを付けたりする機能は、JavaScriptを書かなくても利用できます。CSSだけで表現できるアニメーションもあります。
まずは「内容と構造」「見た目」「操作に応じた処理」という、基本の役割を押さえておきましょう。
フロントエンドを作る仕事では何をする？
ここまで見てきた画面や操作を、実際に使える形にするのがフロントエンド開発です。この仕事を主に担当する人を「フロントエンドエンジニア」と呼びます。
ネットショップの商品一覧なら、商品名や写真を配置するだけで完成ではありません。利用者が商品を探しやすく、迷わず操作できるように、次のような点も整えます。
- PC・タブレット・スマートフォンで、文字が読みやすく、ボタンが押しやすい表示にする。
- サーバーから受け取った商品情報を画面に表示する。
- 結果を待っている間は「読み込み中」、商品が見つからなければ「該当する商品がありません」などの案内を用意する。
- キーボードでも操作できるか、入力欄に何を入れればよいかが伝わるかを確認する。
検索ボタンを押した後に何も表示されなければ、利用者は待てばよいのか、押し直せばよいのか迷ってしまいます。「読み込み中」「該当する商品がありません」など、操作の結果を分かりやすく伝えることも、フロントエンドの役割です。
よくある疑問
フロントエンドの役割が分かったところで、混同しやすい3つの点を確認しましょう。
Q1. フロントエンドはWebデザインと同じですか？
同じ意味ではありません。たとえば商品ページで、写真をどこに置くか、ボタンを何色にするかなど、情報の見せ方を考えるのがWebデザインです。フロントエンド開発では、その設計をブラウザで表示・操作できる形にします。
ただし、仕事の分担はチームによって異なり、同じ人が両方を担当することもあります。
Q2. フロントエンドだけでWebサイトを作れますか？
会社紹介や作品紹介など、用意した文章や画像を表示するサイトなら、独自のバックエンド処理を作らずに制作できます。ただし、インターネットで公開するには、ページのファイルを利用者へ届けるためのサーバーなどが必要です。
一方、会員情報や注文内容をサービス側で保存・管理する場合には、バックエンドや外部サービスとの連携が必要になります。
Q3. 画面にエラーが出たら、フロントエンドの問題ですか？
表示された場所だけでは判断できません。画面側の処理だけでなく、サーバー側の処理や通信が原因の場合もあります。
たとえば「商品を取得できませんでした」と画面に出ても、サーバーから情報が返ってこなかったのかもしれません。
相談するときは、原因を決めつけず、「商品検索の画面で『マグカップ』を検索したら、『商品を取得できませんでした』と表示されました」のように伝えましょう。どの画面で何を操作し、どうなったかが分かると、調べる手がかりになります。
まとめ
フロントエンドは、WebサイトやWebアプリで、利用者が直接見たり操作したりする部分です。
- 文章や画像の表示だけでなく、操作に対する反応も担当する。
- バックエンドは、主にサーバー側でデータの取得・保存などを担当する。
- HTML・CSS・JavaScriptは、内容と構造、見た目、操作に応じた処理を作る基本の技術。
次にネットショップを使うときは、検索欄に入力してから商品一覧が出るまでの画面に注目してみてください。入力を受け付ける欄も、結果を見やすく並べる表示も、フロントエンドの役割です。
関連記事
- サーバーとは？身近な例えと仕組みをわかりやすく解説！【IT初心者向け】：画面の裏側で情報を提供するサーバーの役割を知りたい方へ。
- APIとは？意味を初心者向けにわかりやすく解説：ソフトウェア同士が情報を受け渡す窓口について知りたい方へ。
- WebサイトとWebアプリの違いとは？身近な例でIT初心者に分かりやすく解説：ブラウザで利用するサービスの特徴を整理したい方へ。