はじめに
フロントエンドエンジニア転向に向けて学習を進める中で、未経験向けのFrontend Roadmapを解説している動画を見つけました。公開されたのは3年前とのこと。
自分がいま組んでいる学習計画と突き合わせてみたら、けっこう発見がありました。今回はその答え合わせの記録です。
骨格は変わっていなかった
まず安心したのが、大枠のロードマップ自体は3年前も今も変わっていないということでした。
HTML/CSSから始まり、JavaScriptを固めて、React・Next.jsに進み、TypeScriptを身につけ、ポートフォリオを作って転職活動に入る。この流れ自体は今の自分の計画とほぼ一致していました。
「フロントエンドの学び方の基本形」みたいなものは、案外3年程度では大きく崩れないのかもしれません。ここは自分の学習の方向性が間違っていなかったことの確認になりました。
選択する技術には世代交代があった
一方で、骨格の中身、つまり「具体的にどのツール・ライブラリを選ぶか」の部分は、けっこう入れ替わっている印象を受けました。あくまで自分が今回調べた時点での話ですが、いくつか気づいたことを書いておきます。
重要度が上がったように見えたもの
TypeScriptは、3年前は「あれば歓迎」くらいの位置づけだったところから、今は「ほぼ必須」という声を多く見かけました。Tailwind CSSも同様で、補助的な扱いからかなり中心的な選択肢に上がってきていて、しかもバージョン4で大きく作り直されているようです。
Next.jsについては、App Routerが主流になっていて、Pages Routerは新規に学ぶ優先度は低いという意見が多かったです。認証やDBまわりでは、Supabaseの名前を求人や解説記事で見かける頻度が上がっている印象を受けました。
新しく主流になっていたもの
UIライブラリはshadcn/uiという名前をよく見るようになっていて、以前よく名前が挙がっていたMaterial UIに代わる立ち位置になりつつあるようです。状態管理まわりでも、Reduxを最初から学ぶ必要はなく、TanStack Queryから入る流れの方が今は自然という声がありました。
テストはVitest、E2EはPlaywrightという組み合わせをよく見かけました。あとは、Next.jsでAIの機能を組み込む際にVercel AI SDKが標準的な選択肢として挙がっていたのと、React 19で入ったuseやActions、useOptimistic といった新しいAPIも目にする機会が増えました。
学ばなくてよさそうと感じたもの
jQuery、Angular、Vue、Redux、Jest、Webpack、AWS Amplify、PlanetScaleといった名前は、今回調べた範囲では未経験からの学習優先度としては下がっているようでした。
これはどれも「悪いツール」という話ではなく、単に今から学び始めるなら他の選択肢の方が学習コストに見合いやすい、というだけの話だと理解しています。技術の栄枯盛衰は今後もまた入れ替わっていくはずなので、今回の観察もあくまで現時点のスナップショットとして見ています。
自分の学習計画に反映したこと
この答え合わせを踏まえて、実際に自分の学習計画をいくつか調整しました。
まず、Tailwind CSSの優先度を「高」に格上げしました。もともと補助的な位置づけで考えていたのですが、調べた印象からするとここは早めに固めておいた方が良さそうです。Supabaseは新しく「中」の優先度で計画に追加しました。
ポートフォリオの構成も見直して、認証・DB連携を扱うもの、実務寄りの構成を意識したもの、AIの機能を組み込んだものという3本立てで考え直しました。特にAI差別化枠として、Vercel AI SDKを使ったポートフォリオを新しく設けたのは今回の一番大きな変化です。
まとめ
3年前の動画から得られたのは「今から何を学ぶべきか」の答えというより、「今の自分の選択が、今の流れとどれくらい合っているか」を確認する材料でした。
骨格は変わらなくても、中身の技術選択は数年単位で入れ替わっていく。学習計画は一度立てて終わりではなく、こうやって定期的に答え合わせをしながら更新していくものなんだろうと感じています。
同じように未経験からフロントエンドを目指している方の、計画の参考の一つになれば十分です。
