このページについて
Web制作コーダーからフロントエンドエンジニアへ転向するために立てた学習ロードマップです。 工程が進むたびにこのページ自体を書き換えていく、いわば「生きているページ」として運用しています。
きっかけになった記事はこちらです。
[デイトラに「Web制作コーダー→フロントエンドエンジニア転向」コースがなかったので、自分でロードマップを作ることにした](https://blog.mt-tk.com/daitora-frontend-tenkou-roadmap/)
目指す方向性
独立2年目のフリーランスWebコーダーとして、WordPress・FLOCSS・SCSSを軸に案件をこなしてきました。 今はフロントエンドエンジニアへの転向を目指して、学習を進めています。
Web制作は、コーディング以上に営業やマーケティングのスキルが求められる仕事です。 ここが自分にはあまり向いていないと気づきました。 目の前のコードを妥協なく仕上げていく作業のほうが、性に合っています。
営業を伸ばすより、実務スキルを突き詰めるほうに時間を使う。 そう決めて、フロントエンドエンジニアとしてのキャリアを積み上げていくつもりです。
学習の優先順位
求人での出現頻度・現場での使用率をもとに、優先度をつけて学習しています。
| 優先度 | 技術 |
|---|---|
| 最優先 | TypeScript |
| 最優先 | React |
| 高 | Next.js（App Router） |
| 高 | Tailwind CSS |
| 中 | Supabase（Auth + DB） |
| 中 | Node.js / API連携 |
補助スキルとして、Git/GitHubの実務運用・REST APIの理解も並行して身につけていきます。
現在地
- [x] フェーズ1: React基礎
- Udemyコース「モダンJavaScriptの基礎から始める挫折しないためのReact入門」全65レクチャー修了
- React公式チュートリアル修了
- [ ] TypeScript基礎（次の着手項目）
- [ ] Next.js の学習、またはポートフォリオ本1への着手（どちらを先にするかはまだ決めきれていません）
今後のフェーズ
TypeScriptの基礎を終えたら、ポートフォリオ制作に入っていきます。 3本構成で計画していて、Notionの工程管理DBにはすでに合計27工程を登録しています。
- [ ] 本1: React + TypeScript + Tailwind CSSのアプリ
- [ ] 本2: Next.js + Supabase 認証・DB連携のアプリ
- [ ] 本3: AI機能（Vercel AI SDK）+ アクセシビリティ対応のアプリ
それぞれ完成するタイミングで、Zennに制作過程の記事を書いていきます。 応募開始は2027年1月〜4月を予定しています。
更新履歴
工程が進むたびに、ここへ追記していきます。
- 2026-07-16: ページを作成しました