このページについて
最終更新: 2026-07-29
Web制作コーダーからフロントエンドエンジニアへ転向するために立てた学習ロードマップです。
工程が進むたびにこのページ自体を書き換えていく、いわば「生きているページ」として運用しています。
同じようにWeb制作から転向を考えている人が、進み方や判断の材料として読めるように書いています。
きっかけになった記事はこちらです。
デイトラに「Web制作コーダー→フロントエンドエンジニア転向」コースがなかったので、自分でロードマップを作ることにした
目指す方向性
独立2年目のフリーランスWebコーダーとして、WordPress・FLOCSS・SCSSを軸に案件をこなしてきました。
今はフロントエンドエンジニアへの転向を目指して、学習を進めています。
Web制作は、コーディング以上に営業やマーケティングのスキルが求められる仕事です。
ここが自分にはあまり向いていないと気づきました。
目の前のコードを妥協なく仕上げていく作業のほうが、性に合っています。
営業を伸ばすより、実務スキルを突き詰めるほうに時間を使う。
そう決めて、フロントエンドエンジニアとしてのキャリアを積み上げていくつもりです。
ロードマップ全体
| フェーズ | やること | 時期 | 状態 |
|---|---|---|---|
| 1 | React基礎 | 2026-04 〜 07 | ✅ 完了 |
| 2 | TypeScript基礎 | 2026-07 | ✅ 完了 |
| 3 | ポートフォリオ1本目（React + TypeScript + Tailwind CSS） | 2026-07 | ✅ 公開済み |
| 4 | ポートフォリオ2本目（Next.js + Supabase） | 〜 2026-11 | 🔜 これから |
| 5 | 応募開始 | 2027-01 〜 04 | 🔜 これから |
いまはフェーズ4の入口にいます。1本目を公開し終えて、2本目の設計に入るところです。
React基礎は、Udemyコース「モダンJavaScriptの基礎から始める挫折しないためのReact入門」全65レクチャーとReact公式チュートリアルを修了しました。
TypeScriptは「サバイバルTypeScript」の「作って学ぶTypeScript」章を2026-07-22に完走しています。
型システムを体系的に扱う章は最初から通しては読まず、必要になった箇所を都度読む形に切り替えました。
学習の優先順位
2026年4月に求人媒体を横断して調べたところ、React / TypeScript / Next.js / Tailwind CSS の4点セットが最も多く並んでいました。
この結果をもとに優先度をつけています。
| 優先度 | 技術 |
|---|---|
| 最優先 | TypeScript |
| 最優先 | React |
| 高 | Next.js（App Router） |
| 高 | Tailwind CSS |
| 中 | Supabase（Auth + DB） |
| 中 | Node.js / API連携 |
補助スキルとして、Git/GitHubの実務運用・REST APIの理解も並行して身につけていきます。
作ったもの
1本目: プレート計算アプリ（公開済み）
バーベルの片側に着けるプレートの組み合わせを計算するアプリです。
ジムの設備に合わせて、使えるプレートの種類を切り替えられるようにしています。
- 紹介ページ: Plate Calculator
- 動くもの: plate-calculator-zeta.vercel.app
- ソースコード: GitHub
使った技術は React 19 / TypeScript / Vite / Tailwind CSS v4 / Vitest / GitHub Actions / Vercel です。
| 項目 | 結果 |
|---|---|
| 制作期間 | 7日間（2026-07-22 〜 07-28） |
| テストケース | 32件 |
| Lighthouse | 4項目とも100点 |
| 初回読み込み | 68.5kB |
1本目は練習と位置づけて、認証もデータベースも使わないフロントエンド完結の構成にしました。
そのぶん、テスト・CI・アクセシビリティ・パフォーマンスのように「作ったあとに効いてくる部分」へ時間を使っています。
仕様を決めるときは、まとめ記事ではなくIPF（国際パワーリフティング連盟）の公式ルールブックを直接読みました。
そこで、参考にしていた情報の誤りが2件見つかりました。
2本目: 家庭菜園管理アプリ（制作予定）
Next.js と Supabase で、認証とデータベースを扱うアプリを作ります。
両親に実際に使ってもらう前提です。
使う人が高齢なので、アクセシビリティは後付けではなく最初から要件に入れました。
工程は16に分けて、合計71時間で見積もっています。
完成は2026年11月末を目標にしています。
変えた判断
計画どおりに進んだわけではなく、途中で何度か方針を変えています。
TypeScriptの教材を、買う予定だった有料コースから無料の教材に変えました。
Udemyのセールに合わせて購入するつもりでしたが、着手の直前に「サバイバルTypeScript」（無料・有志による教材）へ切り替えました。
動画は分からない箇所をコピーしてAIに聞き返せませんが、Webテキストならそれができます。
教材の質ではなく、自分の学習スタイルに合うほうを取りました。
ポートフォリオを3本から2本に減らしました。
3本目に予定していたAI機能のアプリを取り下げ、アクセシビリティ対応は2本目に統合しています。
本数を増やすより、1本を深く仕上げるほうが見せられるものになると判断しました。
応募開始を2026年11月から2027年1月〜4月へ後ろ倒ししました。
5月から6月にかけて学習が止まっていた時期があり、残りの期間でReact基礎とポートフォリオ制作を両方詰め込むのは過積載だと判断したためです。
方向は変えず、時期だけ現実に合わせました。
フェーズごとの記録
考えたことや迷ったことはこのブログに、手を動かして詰まった箇所はZennに書いています。
転向を決めるまで
- 未経験じゃない：コーダー歴から見るフロントエンド転向「現在地14%」
- コーダー経験は他の路線に転向しても5〜10%の損失で済む話
- Web制作者として深めるか、フロントエンドへ移るか — 迷いの途中で思っていること
- 自社開発・受託・SESの違いを30歳未経験フロントエンドエンジニア志望が整理した
フェーズ1: React基礎
- Web制作をやってきたけど、実はJavaScriptの基礎を曖昧なまま使っていた
- コーダーがReact公式チュートリアルを読んだ初日
- Web制作のコーダーがReactを学んで気づいた、思考回路の転換（Zenn）
- React入門、動画教材をローカルVite環境に置き換えて学び直した記録（Zenn）
- AIに書かせるか、自分で書くか。React学習で見えてきた使い分けの軸
フェーズ2: TypeScript基礎
フェーズ3: ポートフォリオ1本目
更新履歴
工程が進むたびに、何をなぜ変えたかをここへ追記していきます。
- 2026-07-16: ページを作成しました
- 2026-07-29: TypeScript基礎の完了と、ポートフォリオ1本目の公開を反映しました。あわせて全体の構成を組み替えています。進捗が「現在地」と「今後のフェーズ」の2箇所に割れていて全体像が見えなかったため、1つの表にまとめました。ポートフォリオを3本構成から2本構成に変更したこと、教材と応募時期を変えたことも「変えた判断」として残しています