本文へ移動

ホーム / Web / 第1部 Webエンジニアとは

第1部 Webエンジニアとは・第1章

Webエンジニアとは(仕事・領域・向いている人)

★★☆ 重要6トピック・面接 3問

Webエンジニアの仕事の範囲と、この職種で求められる技術の全体像を押さえる。

1.1Webエンジニアとは

用語★★☆ 重要
ひとことで

ブラウザやスマホから使われる Web サービスを、画面(フロント)とサーバー(バック)の両面から作り、改善し続ける職種。

Web エンジニアは、ブラウザやスマホのアプリから使われる Web サービスを作り、公開したあとも改善し続ける仕事です。担当の範囲によって、画面側のフロントエンド、サーバー側のバックエンド、両方を見るフルスタックに分かれます。会社の規模によって境目は変わり、小さなチームほど1人で広く見ます。

画面からデータまでの、どこを受け持つかデザイナーと相談App と API を共有SRE と運用ユーザーブラウザ・スマホフロントエンド画面・操作・表示の速さバックエンドAPI・業務ロジックDB・キャッシュキュー・外部サービスフロントエンドバックエンドフルスタック(1つの機能を画面から DB まで通して作る)
フロントエンド・バックエンド・フルスタックが受け持つ範囲
種類主な仕事よく使う技術
フロントエンド画面の実装、操作のしやすさ、表示の速さ、アクセシビリティHTML・CSS・TypeScript・React/Vue、ビルドツール
バックエンドAPI・業務ロジック・DB 設計、認証、外部サービスとの連携、性能Go・Java・Ruby・Python・Node.js、SQL、キュー、キャッシュ
フルスタック1つの機能を画面から DB まで通して作る上の両方。Next.js のように両方を1つで書ける仕組み

面接ではこう答える

Web エンジニアは、ブラウザやスマホから使われるサービスを作り、公開したあとも改善し続ける職種です。担当によって、画面を作るフロントエンド、API や DB を作るバックエンド、両方を通して作るフルスタックに分かれます。会社が小さいほど1人で広く見ます。どの担当でも、作って終わりではなく、エラーや数値を見て直し続けるところまでが仕事です。

機能が届くまでの1サイクル仕様の相談PM・デザイナー設計API・表・画面実装とテストPR を出すレビュー他の人が読むリリース少しずつ出す計測と改善エラー・数値
1つの機能を、相談から改善まで回す流れ

Web エンジニアの仕事は「コードを書く」だけではありません。仕様の相談・レビュー・リリース後の確認まで含めて1つの仕事です。

  • 1日:朝会で進み具合と困りごとを共有 → 機能の実装とテスト → 他の人のプルリクエストをレビュー → 午後に仕様の相談 → 夕方にリリースやエラー通知の確認。
  • 1週間:スプリントの計画(何を作るか決める)、設計レビュー、リリース、振り返り。問い合わせや障害の調査が割り込むこともあります。
場面よくある時間の使い方
実装1日の半分ほど。残りはレビュー・相談・調査
レビュー他の人のプルリクエストを読む。自分の PR は小さく出す
割り込み問い合わせ・エラー通知・障害の調査
Web エンジニアは、職種どうしをつなぐ位置にいるSRE・監視と SLO を決める・遅いクエリを直すApp エンジニア・同じ API を使う・互換性を相談するデザイナー・作れる範囲を相談・読み込み中・エラーPM・目的と優先順位・工数とリスクを伝える
職種ごとに、何を一緒に決めるか
  • SRE:インフラ・監視・SLO を一緒に決めます。遅いクエリや障害の原因がアプリにあるときは Web エンジニアが直します。
  • App(モバイル)エンジニア:同じ API を使うので、API の形や互換性を相談して決めます。
  • デザイナー:デザインを実装し、作れる範囲・状態(読み込み中・エラー・空のとき)を相談します。
  • PM:作る目的と優先順位を確かめ、工数や技術的なリスクを伝えます。

どの相手とも、「何を決めたいのか」「いつまでに」「判断の材料は何か」をはっきりさせてから話すと、やりとりが短くなります。

ひとことで

静的ページ → サーバーで HTML を作る時代 → SPA → SSR とエッジの組み合わせへ、と描画の場所が移ってきた。

Web の作り方は「ユーザー体験をよくしたい」「検索で見つけてもらいたい(SEO)」「速く表示したい」という要求に合わせて変わってきました。

「サーバーで作る」と「ブラウザで作る」を行き来してきたサーバーで HTML を作るブラウザで作る両方を使い分ける静的HTML・CGI1990年代PHP・Rails2000年代Ajax2005年ごろ〜SPA(React など)2010年代Next.js など2016年ごろ〜エッジ・RSC2020年代
Web の作り方の移り変わり(時期は目安)
時期の目安技術何が変わったか
1990年代静的 HTML・CGIリクエストごとにプログラムを起動して HTML を作る
2000年代PHP・Ruby on Railsサーバーで HTML を組み立てる仕組みが整い、開発が速くなる
2005年ごろ〜Ajaxページを読み直さずにデータだけ取って画面を更新する
2010年代SPA(React・Vue など)画面をブラウザの JavaScript で作る。アプリのような操作感
2016年ごろ〜Next.js などのメタフレームワークSPA の弱点(初回表示・SEO)をサーバー描画や静的生成で補う
2020年代エッジ・Server Componentsユーザーの近くで処理し、送る JavaScript を減らす

流れとしては「サーバーで作る → ブラウザで作る → 両方を使い分ける」と行ったり来たりしています。新しい技術は、前の方式の弱点を補う形で出てくるので、「何を解決したのか」で覚えると選びやすくなります。

面接ではこう答える

Web の作り方は、サーバーで HTML を作る時代から、Ajax と SPA でブラウザが画面を作る時代へ移り、今は Next.js などで両方を使い分ける形になっています。SPA は操作感がよい代わりに初回表示と SEO が弱く、それをサーバー描画や静的生成で補ってきました。新しい技術は前の方式の弱点を補う形で出てくるので、何を解決したのかで覚えると選びやすくなります。

ひとことで

ユーザーの体験を想像でき、仕様の曖昧さを会話で埋めながら、作って直すのを繰り返せる人に向く。

向いているのは、作ったものを人に使ってもらうのが好きな人、画面の小さな使いにくさに気づける人、新しい技術を試すのが苦にならない人です。伸ばすには、小さくても自分でサービスを作って公開し、遅さや不具合を自分で直す経験を積むのが近道です。

段階期待されること
ジュニア決まった仕様を、レビューを受けながら正しく実装できる。わからないことを早めに聞ける
ミドル〜シニア仕様のあいまいさを自分で詰め、設計から本番の運用まで1人で任せられる。他の人のレビューができる
テックリードチームの技術の方向を決め、設計の判断と技術的負債の返し方に責任を持つ
EM(エンジニアリングマネージャー)人の成長・採用・チームの仕組みづくりに責任を持つ

シニア以上は「技術で何ができるか」より「何を作るべきか・作らないか」を判断できるかが見られます。

面接ではこう答える

Web エンジニアに向いているのは、作ったものを人に使ってもらうのが好きで、画面の小さな使いにくさに気づける人です。仕様は最初からはっきりしていないことが多いので、デザイナーや PM と会話してあいまいさを埋める力も大事です。段階が上がるほど、技術で何ができるかより、何を作るべきか、作らないかを判断できるかが見られます。

ひとことで

Web の基礎(HTTP・ブラウザ・セキュリティ)を土台に、フロント・バック・品質と運用を積み上げる。

下の土台ほど、どの会社でも長く使える設計・品質・運用テスト・CI/CD・監視・アーキテクチャバックエンドAPI・DB・認証・非同期処理フロントエンドHTML・CSS・JS・React・性能Web の基礎HTTP・ブラウザ・セキュリティ上ほど会社や道具で変わる
このサイトの章の並びと、技術の積み上がり

Web エンジニアに求められる技術は、下の層ほど変わりにくく、上の層ほど会社やフレームワークで変わります。まず HTTP・ブラウザ・セキュリティを固めると、新しいフレームワークも「何を解決しているか」で理解できます。

分野このサイトの章★の目安
Web の基礎HTTP とブラウザ・Web セキュリティ★3(必須)
フロントエンドHTML・CSS・JS・フレームワーク・性能★2〜3
バックエンドAPI・DB・認証・非同期処理★2〜3
品質と運用テスト・CI/CD・監視・設計★2
面接全体像・設計面接・経験面接準備に合わせて

フロントエンド寄り・バックエンド寄りで深さは変わりますが、反対側も「★2:仕組みを理解」までは押さえておくと、API の相談や障害の切り分けで困りません。

面接ではこう答える

Web エンジニアの技術は、変わりにくい土台と、変わりやすい道具に分けて考えています。土台は HTTP・ブラウザの仕組み・セキュリティで、どの会社でも同じように効きます。その上にフロントエンドとバックエンドの技術があり、最後にテスト・CI/CD・監視といった品質と運用の技術が乗ります。新しいフレームワークを覚えるときも、土台のどの問題を解決しているかで理解するようにしています。

この章のまとめ

🖨 まとめシート(印刷・PDF)
  • フロントエンド・バックエンド・フルスタックの違いと、それぞれの責任範囲
  • ユーザーに価値を届けるまで(設計・実装・テスト・リリース・改善)が仕事
  • Webエンジニアとは:ブラウザやスマホから使われる Web サービスを、画面(フロント)とサーバー(バック)の両面から作り、改善し続ける職種。
  • Web の技術の移り変わり:静的ページ → サーバーで HTML を作る時代 → SPA → SSR とエッジの組み合わせへ、と描画の場所が移ってきた。
  • 向いている人とキャリア:ユーザーの体験を想像でき、仕様の曖昧さを会話で埋めながら、作って直すのを繰り返せる人に向く。
  • 求められる技術の全体像:Web の基礎(HTTP・ブラウザ・セキュリティ)を土台に、フロント・バック・品質と運用を積み上げる。

この章のクイズ

面接ではこう聞かれる

まず答えを見ずに声に出して答え、そのあと開いて比べる。

Q1Web エンジニアとして大事にしていることは?

模範回答

「ユーザーに価値が届くこと」を一番に置き、品質と速度はその手段として釣り合いを取るようにしています。たとえば新しい検索機能では、まず条件を絞った最小の版を Feature Flag で一部のユーザーに出し、使われ方を見てから広げました。全部を作り込んでから出すより早く学べ、外れたときの損も小さくなります。

一方で、決済やログインなど壊れると信頼を失う部分は、テストとレビューを厚くし、急ぎでも削りません。速く出してよい所と慎重にすべき所を分けて考えることが大事だと思っています。

深掘りされたら

  • 品質と速度がぶつかったとき、どう決めましたか?
  • 技術的負債はどう返していますか?

見られているポイントユーザー価値・品質・速度のバランスを具体例で話せるか

Q2フロントエンドとバックエンド、どちらを中心にしたいですか? その理由は?

模範回答

例えば「今はバックエンドを中心にしたい」と答える場合、理由を具体的な経験と結びつけます。API と DB の設計で、遅いクエリをインデックスと N+1 の解消で 10 分の1にしたときに、仕組みを理解して直すことに面白さを感じた、といった話です。

そのうえで、反対側も知っていることを示します。画面でどう使われるかを知らないと使いやすい API は作れないので、フロントの実装やパフォーマンスの計測も自分でできるようにしている、と添えます。片方だけでなく、境目の仕事を引き受けられることが伝わるとよいです。

深掘りされたら

  • 反対側の技術はどうやって学んでいますか?

見られているポイント志向の理由を経験で話せるか、反対側への理解もあるか

Q3デザイナーや PM と意見がぶつかったとき、どう進めますか?

模範回答

まず目的をそろえます。例えば、デザイナーが凝ったアニメーションを望み、実装に1週間かかるとき、「何のための動きか」を確かめ、ユーザーに伝えたいことが同じなら、工数の少ない案を2〜3個出して比べてもらいます。

技術的な制約は「できません」ではなく、「この案なら2日、元の案なら1週間で、表示が遅くなるリスクがある」のように、費用と影響を数字で伝えます。決めるのは優先順位を持つ PM で、自分は判断に必要な材料を出す役だと考えています。決まったことはチケットや設計書に残します。

深掘りされたら

  • 工数の見積もりが外れたときはどうしましたか?

見られているポイント目的をそろえる・選択肢と費用を示す・決め方