ある日、パソコン部のユイは、文化祭のサイトを作ることになった。
ユイ：「先生、見た目ってHTMLで書くんですよね？ でもボタンを押したときに画面が動いたり、画像が切り替わるのってどうやるんですか？」
先生：「いい質問だね、ユイさん。実は、HTMLだけじゃ見た目しか作れないんだ。CSSでデザイン、そしてJavaScriptで動きをつけるんだよ。」
ユイ：「なるほど！でも先生、ネットで“フロントエンド開発”って見たことあります。私たちが今やってるのもそれですか？」
先生：「そのとおり。フロントエンド開発っていうのは、ユーザーが直接見る“画面側”を作る仕事のこと。ボタン、メニュー、画像、アニメーションとか、見た目と操作の全部が対象だよ。」
ユイ：「えー！それって全部別の言語でやるんですか？」
先生：「そうだね。基本はHTML・CSS・JavaScriptだけど、最近はReactやVue.jsといった便利なツールを使って、効率よく作るのが主流なんだ。」
ユイ：「まるでお菓子作りみたい！HTMLが型、CSSがデコレーション、JavaScriptがサプライズみたいな動きって感じですね！」
先生：「すごくいい例えだね。ちなみに“バックエンド開発”っていうのは、お問い合わせフォームから送られた内容を保存したり、ログイン機能を作ったりする裏方の部分。両方そろって、はじめてWebアプリが動くんだよ。」
ユイ：「ふーん。求められる技術が違いそうだけど、ぶっちゃけどっちの技術のほうが年収は高い傾向にあるんですか？」
先生：「お、なかなか現実的な質問だね（笑）。実は一概には言えないけど、バックエンド開発はサーバー、データベース、セキュリティとか、難易度の高い知識が必要なことが多いから、年収の中央値は少し高い傾向にあるよ。」
ユイ：「なるほど…。でもフロントエンドも、ReactとかVueとか、覚えることたくさんありますよね？」
先生：「そうそう。最近はフロントエンドもどんどん進化してるから、高度なUI設計やアクセシビリティ対応、パフォーマンス最適化なんかができると、フロントエンドでもすごく重宝されるよ。」
ユイ：「じゃあ結局、どっちかが“上”ってわけじゃなくて、得意なほうを極めたらちゃんと評価されるってことなんですね！」
先生：「その通り！そしてフロントもバックも両方できるフルスタックエンジニアは、さらにニーズが高いんだ。」
ユイ：「ふーん。私にできるかなー。それぞれどんな人が向いていると言われているか教えてください！」
先生：「いい質問だね。ざっくり言うと、こんな特徴があるよ。」
| 種類 | 向いている人の特徴 |
|---|---|
| フロントエンド | デザインやユーザー体験に興味がある、見た目の工夫が好き |
| バックエンド | 論理的に考えるのが得意、データやセキュリティに興味がある |
| フルスタック | 全体像を把握したい、幅広い技術に挑戦したい好奇心旺盛な人 |
先生：「ユイは、どこを作りたいと思う？画面側？それとも裏側？」
ユイ：「うーん、私はやっぱり、使っていて気持ちいいボタンの動きとか、アニメーションとかにワクワクするので、フロントエンド向きかもですね！」
✅ 似た用語との違い
| 用語 | 主な役割 |
|---|---|
| フロントエンド | ユーザーが見る画面・操作の部分を作る |
| バックエンド | データ処理・保存・認証など見えない部分 |
| フルスタック | フロントもバックも両方できる人や開発手法 |
最近では多くの企業が自社サービスのユーザー体験を向上させるために、フロントエンド開発に注力しています。
たとえば、楽天ではReactやNext.jsを使って、商品の表示スピードを大幅に改善。また、地方自治体のWebサイトでもアクセシビリティ（誰でも使いやすい設計）を重視して、Vue.jsを活用したUI改善を行っています。
さらに、公共交通機関ではリアルタイム運行状況の表示に、フロントエンド側でAPI連携を使ったJavaScriptの処理を取り入れています。これにより、利用者にとってわかりやすく便利な画面を提供しています。
フロントエンド開発に含まれないのはどれ？
A. Webページの色やレイアウトを調整する
B. ログイン情報をデータベースに保存する
C. ボタンを押したら画像を切り替える動きをつける
フロントエンドでよく使われる言語はどれ？
A. Java
B. JavaScript
C. C++
フロントエンド開発に近いイメージはどれ？
A. 工場の機械を制御するソフト
B. お店のレジ裏で売上を集計するソフト
C. お店の看板・ディスプレイ・注文ボタン
クイズ1：B
→ データベースへの保存はバックエンドの仕事です。
クイズ2：B
→ JavaScriptは動きをつけるために多く使われます。
クイズ3：C
→ フロントエンドは“ユーザーが見る部分”なので、店頭に見える看板やボタンのイメージに近いです。