まんじ

フリーランスなウェブエンジニアをしてますう。25歳からプログラミングを始めて27歳でフリーランスエンジニアになって生きてます

未経験からフロントエンドエンジニアになるためのロードマップ

  • 2024/05/18
  • 2024/06/22
  1. フロントエンド
未経験からフロントエンドエンジニアになるためのロードマップ

始めに

こんにちは、まんじです!

今回はプログラミング未経験からフロントエンドエンジニアになるためのロードマップってことで書いていきたいと思います。

ざっくりとロードマップを書いてしまうとこんな感じです。

  • 必要な期間: 4~6ヶ月
  • やること
    • ドットインストールとかでJavaScript, html, css, TypeScriptをざっと勉強(2週間~1ヶ月)
    • ウェブアプリを作りながら勉強(1~2ヶ月)
    • ポートフォリオっぽいものを作ってデプロイ(1~2ヶ月)
    • 仕事に応募(1~2ヶ月)

言語はJavaScriptから始めてTypeScriptに途中で変更して、フロントエンドフレームワークはReactかVueあたりを使うと良いと思います。

Angularでもいいけど、求人が圧倒的に多いのはReactで、React*TypeScriptが超定番なのでよほどな理由がない限りはReact*TypeScriptをやるのが良いです。

すみません、だいぶReacr寄りです。

フロントエンドエンジニアに未経験からなるための期間

4~6ヶ月ぐらいの勉強期間を目安に勉強すると良いと思います。

2ヶ月はほぼ無理で、3ヶ月は超頑張ればなんとかいけるかいけないか、4ヶ月ぐらいだとかなり早いほうカナーというのが期間的な目安です。

逆に6ヶ月以上とか勉強してると長すぎてダレてくるので、4~6ヶ月ぐらいの間までにポートフォリオっぽいものを作って仕事に応募しまくるのがおすすめです。

ちなみに技術力に関しては仕事始める前はどのみち足りないので、それならそれで3ヶ月ぐらいとかで技術力が完全に不足してることを認めて3ヶ月とかで割り切って仕事にとにかく入ってそこでハードワークするとかもありだと思います。

実際、新卒枠とか未経験から入ってきた人でネットで見るようなゴリゴリにポートフォリオを作ってきました、みたいな人のほうが割合としては少ないです。(てか、見たことないぉ)

あと技術の広さよりも深さと深い部分の関連部分が実際は大事なので、モダンな定番のところだけ浅く網羅しても正直あんまり意味はないというか、いわゆる実務で使えるレベルにはならないケースが多いです。

0からフロントエンドエンジニアになるまでにやること

↑大体ここらへんだと思います。

  • html, css, javascript, ターミナル, git, typescript, react, docker, sql, (あとはちょっとサーバー?)

1個目: JavaScript, html, CSSなどのフロントエンドに必要な言語

ドットインストールのJS講座: https://dotinstall.com/lessons/basic_javascript_grammar_v3

htmlとCSSとJavaScriptがフロントエンドだと必ず必要かつ基礎になるので、とりあえずそこからドットインストールあたりで文法学習を始めると良いと思います。

文法の勉強に関しては、無料のサイトでもKindleの本でもどれも同じなのでなんでも良いです。

文法は極める?というか深く理解しようとしすぎると永遠に終わらないので、2週間~3週間ぐらいを目安に最低限の理解でウェブアプリの作成にいくのが重要です。

コピペでなんとなく処理が追えれば最初は十分です。

意味分からない時はとりあえずAIにつっこんで解説してもらって不明点をググったり再度AIに聞いたりするとかも一手間かかるけど、勉強になるしどのみち必要になるのでやると良いと思われます。

JavaScriptのPromiseあたりは最初は意味不明だけど、理解してから使えるようになるというよりも、使ってるとこんな感じかってのを理解していけるようになるのでなんにせよ手を動かして使うことが重要です。

2個目: ウェブアプリ作成

※ こう言う感じのゆるい本でOK

ここでReactあたりのフロントエンドフレームワーク(ライブラリ)を入れるのとJavaScriptをTypeScriptに変更してウェブアプリを作っていきましょう。

最初は環境構築とかが難しかったりターミナルやらAPIやらデータベースとかのフロントエンド周辺知識も必要になってくるので、めちゃくちゃ大変ですけど、不明点や用語はその都度調べてやっていくのが普通に効率が良いです。

教材?本?に関しては、上の画像(*のとこ)のような「Reactで作るTODOアプリ~」みたいなものを1個チョイスしましょう。

それを真似してある程度コピペしながらとりあえず前に突き進んで、その原型をベースに自分のオリジナルに変更していくことでフロントエンド定番フレームワーク(厳密にはライブラリ…?)とその周辺技術を勉強できます。

あと「ウェブアプリを作る」って言ってもいろんな技術を使い始めるとキリがないし挫折しがちなので、ある程度は大雑把に前に進むことが重要です。

「TODOアプリを作る」だったら40%ぐらい意味わからんけど、なんかTODOアプリできて、結果としてReactのコンポーネントとかTypeScriptが少し理解できた気がするぐらいぜ!みたくなれればOK。

できればAWSでもVPSでもVercelでもなんでもいいので、デプロイしたいです。(その過程でGitとかSSHとかインターネットの仕組みとかサーバーとかの理解も得られるので○)

3個目: ポートフォリオ作る

仕事に応募する時に「こういうのを作ってこう言う技術を勉強しました〜」っていう証拠みたいなものとしてポートフォリオがあると便利なので、ポートフォリオ作りをしましょう。

ウェブエンジニアの場合のポートフォリオは自己紹介とかどうでもいいことじゃなくて、ウェブアプリ、大体こんなんを気合いで勉強して作りましたよって言う証拠です。

「Reactを4ヶ月勉強しました!TypeScriptも使えます!」とか言われても採用側としてもレベル感が全然分からない感じになりがちなので、ポートフォリオは結構大事というか、それを作ってる過程でも勉強になるので大事です。

ポートフォリオを全然見ない会社とかもまあまあありますけど、結局コーディング試験とReactの質問(Reactを使うなら)みたいなものとかがされたりするので、どっちみちポートフォリオ作る過程で身につけた技術力は無駄にはなりません。

あとコーディング試験もReactの質問も勉強してるからできるようになるってわけじゃなくて、手を動かして作ってググってみたいなことを繰り返してるからできるようになる側面が強いです。(コーディング試験は多少それ専用の勉強が必要だけど…)

ポートフォリオの内容や使う技術は適当にググって、勉強内容が広くなりすぎない程度にするのが良いと思います。

個人的にはNext.jsあたりでフロントエンドからAPIサイドまでまるっとやって、Vercelにデプロイで十分だと思いますけど、最近はローカルでDocker入れてバックエンドもフロントエンドも用意してCI/CD準備してEC2とかにデプロイするとか言う人もネットではいるみたいです。

そういうのを見るといろんなモダンな技術を使わないといけないんじゃないか感とかが出てきますけど、案外そうでもないです。

広く色々できるのは大体浅く広くなんとなく触れてるだけだったりするのでフタを開けてみるとどうなってるかは分かりません。

仕事ではどうせある程度の範囲しか時間的な制約でできないので、そんなに網羅的にカバーする必要もなかったりします。

頑張って網羅的にするというよりも、気付いたら徐々に網羅的になっている、みたいな感じです。

ある程度妥協して作っていくのが大事カナーと思います。

4個目: 仕事に応募

ある程度ポートフォリオができてデプロイできたら、そこからは仕事に応募する作業です。

仕事の応募に関しては長期インターンとか新卒就活とか転職とか受ける会社次第で難易度は変わりますけど、とりあえず応募しながら試行錯誤(PDCAを回す)するのが良いと思います。

結構ありがちな失敗というか罠として、「まだ応募する技術力じゃない!!!!」とか言って自分の世界に入り込んで無限にmarginだのpaddingをなおしてるみたいなことはあるあるなので、妥協してさっさと応募するのが大事です。

仕事に受かってさえしまえばあとはそこから給料をもらいながら勉強していけるし、先輩からコードレビュー受けたりできる人はどんな感じにやってるかとかも見ながらやっていけるので成長速度が圧倒的に早くなります。

この「仕事に応募」に関しては恥ずかしがらずにというか勇気を持ってサクサク応募しまくって受けまくるのが重要です。

もし仮にずっと落ちてるなら何かに問題があることが面接とか書類落ちで分かってきますし、受かってしまうならそこで未経験ゾーンは終わりになります。

仕事に落ちるよりも全くフィードバックを得ないで1人の世界に入り込みすぎて出口に向かっていけないほうが1番リスクが高いです。(仕事とかいくら落ちても無料なので)

あと個人的な話ではあるんですけど、新卒のエンジニア就活以外の時のインターンとフリーランスの時は書類で落ちまくりましたけど、結局何個か通って受かればいいだけの話なので落ちても気にしないナンパマインドっぽい部分が重要です。

まとめ

ある程度大雑把でいいのでとにかくサクサクと進むというマインドちっくな部分が重要です。

技術に関しては定番のところさえ最低限使えれば、細かい枝葉はどうとでもなります。

ドドドドド、ドッカーを入れて、エイエイエイエイエイエAWSを使って
シシシシシシ、CI/CDをギギギギギGitHuc Actionsで動かしててテテて
Reactにはグローバルステートを使ってここは!SSRで!!!!
バックエンドはサービスレイヤーとリポジトリーレイヤーとか分けて
一部の処理はAWS lambdaに切り出して、、、

みたいなのはあんまり重要じゃないというか、できればやりたいけど、できればとか言ってたらキリがないので最低限でOKです。

とにかく仕事に入ってお金もらいながらレビュー受けたりしながらやるほうが捗るので、せっせと仕事に入ることにフォーカスして勉強すると良さげですね!

まんじ

フリーランスなウェブエンジニアをしてますう。25歳からプログラミングを始めて27歳でフリーランスエンジニアになって生きてます