未経験や実務経験が浅い状態からWeb系エンジニアを目指す場合、 やることが多くて迷いやすいです。

  • 何から勉強すればいいのか
  • どんなポートフォリオを作ればいいのか
  • いつ応募すればいいのか
  • 面接で何を話せばいいのか

この記事では、Web系転職を目指す人向けに、 学習から応募までの流れ を整理します。

STEP1：HTML / CSS / JavaScriptを学ぶ

まずはWebの基礎です。 特にJavaScriptは重要です。

最低限、以下は理解しておきましょう。

  • 変数
  • 関数
  • 条件分岐
  • 配列
  • オブジェクト
  • DOM操作
  • 非同期処理
  • fetch

ここが曖昧なままReactに進むと、あとで詰まりやすいです。

STEP2：ReactとTypeScriptを学ぶ

次にReactを学びます。

最低限、以下は押さえたいです。

  • コンポーネント
  • props
  • state
  • useEffect
  • イベント処理
  • フォーム
  • ルーティング
  • API通信

TypeScriptでは、以下を理解しましょう。

  • 型注釈
  • interface
  • type
  • 配列の型
  • オブジェクトの型
  • APIレスポンスの型

完璧でなくても大丈夫です。 ただし、自分で小さな画面を作れる状態にはしておきたいです。

STEP3：バックエンドとDBを学ぶ

Web系転職では、フロントだけでなくAPIやDBの理解もあると強いです。

おすすめは以下です。

  • Node.js
  • Express
  • Prisma
  • PostgreSQL または MySQL

最低限、以下を作れるようにしましょう。

  • 一覧取得API
  • 詳細取得API
  • 作成API
  • 更新API
  • 削除API
  • ログインAPI

このあたりができると、ポートフォリオの幅がかなり広がります。

STEP4：ポートフォリオを作る

学習だけで終わらず、必ず1つWebアプリを完成させましょう。

おすすめは、 ログイン機能付きの投稿系アプリ です。

  • ユーザー登録
  • ログイン
  • 投稿
  • 編集
  • 削除
  • 検索
  • カテゴリ
  • DB保存
  • デプロイ

作るときは、最初から完璧を目指さなくて大丈夫です。

まずは以下の状態を目指しましょう。

  • ログインできる
  • 投稿できる
  • 一覧表示できる
  • 編集・削除できる
  • 公開できる

STEP5：GitHubとREADMEを整える

ポートフォリオが完成したら、GitHubを整えます。

READMEには以下を書きましょう。

  • 概要
  • 作成背景
  • 使用技術
  • 機能一覧
  • URL
  • 画面イメージ
  • 工夫した点
  • 苦労した点
  • 今後の改善
  • 環境構築手順

ここをしっかり書くと、面接でかなり話しやすくなります。

STEP6：職務経歴書・自己PRを作る

未経験の場合は、ポートフォリオ中心に書きます。 実務浅めの場合は、現場経験も必ず書きましょう。

実務浅めの人がアピールしやすいのは以下です。

  • 既存コードを読んだ経験
  • バグ修正経験
  • レビュー対応経験
  • Gitを使った経験
  • チーム開発経験
  • 仕様を理解して実装した経験

たとえ経験が浅くても、実務経験は大きな材料になります。

STEP7：応募する

準備が完璧になるまで応募しない人がいますが、それはもったいないです。

最低限、以下が揃ったら応募を始めて良いです。

  • ポートフォリオURL
  • GitHub
  • README
  • 職務経歴書
  • 自己PR
  • 面接で話す内容

応募先は、自社開発だけに絞りすぎない方が良いです。

選択肢としては、以下があります。

  • 自社開発企業
  • 受託開発企業
  • Web系SES
  • スタートアップ
  • 事業会社のWeb開発

最初の目的は、理想の会社に一発で入ることではなく、 Web開発経験を積める環境に入ること です。

STEP8：面接対策をする

面接では、以下を聞かれやすいです。

  • なぜWeb系に転職したいのですか？
  • なぜこのポートフォリオを作ったのですか？
  • なぜその技術を選んだのですか？
  • 実装で苦労した点は？
  • エラーをどう解決しましたか？
  • セキュリティで意識したことは？
  • 今後改善したい点は？

特に大事なのは、 ポートフォリオを自分の言葉で説明できること です。

まとめ

未経験・実務浅めからWeb系に転職する流れは以下です。

  • 基礎学習
  • React / TypeScript
  • API / DB
  • ポートフォリオ作成
  • デプロイ
  • GitHub・README整理
  • 職務経歴書作成
  • 応募
  • 面接対策

大事なのは、勉強だけで止まらないことです。

Web系転職では、以下が重要です。

  • 作ったものを見せること
  • なぜ作ったか説明すること
  • 改善点まで話せること

完璧を目指しすぎず、まずは1つ完成させる。 そこから改善していくことが、Web系転職への一番現実的な近道です。