完全初心者
具体的にやることを教えて欲しい。
こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています。
この記事を書いた人
こんにちは、フロントエンドエンジニアのてりーです。
記事を書いている僕は、プログラミング歴5年ほどです。
ニートから未経験でプログラミングを勉強して、フリーランス独立を経験し、現在はメガベンチャーで働いています。
プロフィール はじめまして、Webエンジニアの「てりー」です。 プロフィールを読んでいただいて、ありがとうございます。 現在はメガベンチャー企業でエンジニアとしてフルリモートで働きながら、スキマ時間で副業をしています。 この[…]
・2ヶ月目：React + TypeScriptを勉強(勉強方法はこちら)
・3ヶ月目：チーム開発に飛び込む(手順はこちら)
・その後：転職活動をする(詳しくはこちら)
なぜフロントエンドなのか？
現在、完全な未経験からプログラミングで稼ぐなら、フロントエンドエンジニアを目指すべきだと僕は考えています。
理由は
・フロントエンドの方がバックエンドより経験年数が低くても活躍できる
です。
こんにちは、フロントエンドエンジニアのてりーです。 2024年に完全な未経験状態からプログラミングを独学し、稼ぎたいと思っているあなたへ。 読者 ・どの職種が独学に向いているの？ ・どの領域が良いの？ ・何を勉強すれば[…]
それでは、さっそく見ていきましょう。
目標：未経験から独学でフロントエンドエンジニアになる
目標は「フロントエンドエンジニアになること」です。
ここでポイントになってくるのが雇用形態です。
個人的には、正社員、派遣社員、フリーランスなど雇用形態は二の次だと思っています！
まずはフロントエンドエンジニアとして手に職を得る事が最重要だと思っています。
エンジニアは雇用形態を気軽に変えられる！
僕が今まで見てきた中でも、様々なケースで雇用形態を変えた人がいました。
・正社員→フリーランス独立、最初は元会社から仕事を貰い、徐々に他社の仕事も増やしていく(収入UP)
・フリーランス→仕事先が居心地が良いので、正社員として就職
といったように、エンジニアは技術職なので、実力さえあれば雇用形態や働き方を柔軟に変えられます！
エンジニア経験を積めば、どんどん条件は良くなる！
フロントエンドエンジニアとして働き始めれば、経験年数に応じて条件は右肩上がりになります。
実際にフリーランス時代の僕の時給の推移です。
1案件経験(プログラミング歴約3ヶ月)：時給2000円
2案件経験(プログラミング歴約1年)：時給3000円
3案件以降(プログラミング歴約2年)：時給4000円~
このように、経験値を積めば積むほど条件は良くなっていきますね！
ここで重要なのが、条件が良くなる要因は開発案件の経験を積んだ事であって、その時の雇用形態ではない点です！
面接では派遣社員か正社員かフリーランスかの雇用形態はほとんど見られないです！
その代わりに
- 何を作っていたのか？
- どの言語を使った事があるのか？
- どの役割だったのか？
が重点的に聞かれます！
独学・未経験からフロントエンドエンジニアを目指すなら、言語はReact + TypeScriptに絞る！
最短でフロントエンドエンジニアになる為に、学ぶ言語は「React + TypeScript」を強くオススメします！
HTML、CSSは学ばなくてOK
初心者向けに書かれた記事では「まずはHTML、CSSを学びましょう！」的な内容をよく目にします。
しかし、これらはWeb制作で主に使う言語なので、Web開発フロントエンドの学習にはいらないです！！
Web制作とWeb開発の違いや、なぜWeb開発のフロントエンドを選ぶべきなのかについては、この記事で解決しています。
こんにちは、フロントエンドエンジニアのてりーです。 2024年に完全な未経験状態からプログラミングを独学し、稼ぎたいと思っているあなたへ。 読者 ・どの職種が独学に向いているの？ ・どの領域が良いの？ ・何を勉強すれば[…]
簡単にまとめると
・Web開発の中で、フロントエンドの職種が未経験・独学でなりやすい
です。
と言うことで、Web開発のフロントエンドで使わないHTML、CSSは勉強しなくて良いです！
React + TypeScriptがフロントエンドのスタンダード言語
React
現在フロントエンドで最も使われているはJavaScriptのフレームワークはreactです。
JavaScriptのフレームワークってどういうこと？
ってなると思います。
が、JavaScriptのフレームワークについての詳しい解説は省略します！
実際に手を動かして学ぶことで、徐々に理解していく事が望ましいと考えているからです。
一応、簡単に一言で言うとReactってものを使って、JavaScriptって言語を書くぐらいに思っておいて下さい。
2016年からReactがずっとダントツ1位の利用率！
State of JSという世界最大規模のエンジニアのアンケートサイトがあります。
The 2022 edition of the annual survey about the latest trend…
そこでJavaScriptのフレームワークごとの利用率を見てみましょう。
1番上の青い線がReactです。
2016年からぶっちぎりで1位ですね！！
よく3大フレームワークとして「React、Vue.js、Angular」が比較されますが、利用率はReactの1強なんですね！！
利用率が多い = 案件、仕事が豊富
ちゃんとプロのエンジニアになって稼ぎたいと考えているなら、JavaScriptのフレームワークはReactを勉強しましょう！
TypeScript
今現在からフロントエンドエンジニアを目指すなら、JavaScriptではなく、TypeScriptを学んで下さい！！
TypeScriptはJavaScriptの上位互換
TypeScriptはJavaScriptに型付けの機能が付いたものです。
稼ぎたいならTypeScripまで勉強すべき！
2024年現在、TypeScriptは高単価の案件が多いです！
というのも、TypeScriptは2021年ごろから流行り出したので、現役のフロントエンドエンジニアでも、常に知識をアップデートしている人じゃないと書けないんです。
こちらは「paizar転職」に掲載してあった言語別の平均年収です。
TypeScriptは全体の言語の中で堂々の2位ですね！(フロントエンドの中では1位です！)
JavaScriptが9位ですね！
この調査結果からも分かる通り、JavaScriptだけでなく、TypeScriptまでマスターすれば一気に稼げるようなります！
TypeScriptは他の高単価の言語に比べると難易度が低め
他の高単価の言語は未経験から、いきなり学習するにはハードルが高いです！
1位の「Scala」と3位の「Go」。
この2つはどちらもバックエンドの言語です。
今まで「Java」を使って開発していた人達が主に使っている言語なので、ハードルが極めて高いと言えます。
4位の「Python3」は人気ではありますが、データサイエンス分野を得意とする言語です。
プログラミング以前に、データサイエンスに関する座学が必要になります。
その点、TypeScriptの学習難易度は高くないです！
従来のJavaScriptに加えて、「型付け」という概念をプラスで学習すれば良いだけなので、未経験から学習する際はそこまでの障壁にならないと言えます！
JavaScriptが出来る状態で、半日かけてTypeScriptの基礎をインプットすれば、あとは仕事をしながらでも、自分のモノに出来るぐらいのボリューム感と難易度です。
その上で今後の需要はさらに高まっていくので、TypeScriptをマスターすれば一気に稼げるエンジニアの仲間入りです！
・TypeScriptの学習難易度は他の高単価の言語と比べるととても低い
以上の事から、2024年にフロントエンドを未経験から独学で勉強するなら、「React + TypeScript」をやりましょう！！
【独学・未経験から最短でフロントエンドエンジニア】勉強準備
やるべきゴールが見えた所で、次にプログラミングを勉強するために必要な環境を整えています。
ここで先に伝えておくと、Macは必ず買って下さい！
もちろんプログラミングはMac以外でも出来ます。
しかし、パソコンが得意でもない、全くの未経験者はMacを買うべきです。
Macの方が未経験でも挫折しにくい
プログラミング初心者が最も躓くのは、初期設定や環境構築です！
「動かそうと思ったけど、俺のパソコンだと上手くいかない！！」
これに陥って、プログラミングを挫折する人がめちゃくちゃいます。
僕も環境構築でハマって、100時間ほど色々試すも何も進まずに心が折れかけた事があります。
その際にMacを使っていると、「環境構築のやり方を1から教えてくれる記事」、「僕はこうやったら直ったよーブログ」などネットに沢山の情報が落ちています。
これが本当に重要です！
初心者のうちに自力であれこれ弄って解決するのはハードルが高すぎるので、とにかく初心者向けのプログラミング情報が多いMacにしましょう！！
Macはエンジニアになってからも使う
実際にエンジニアになって見ると分かりますが、Mac使用率は極めて高いです！
現場によってはMac用の初期設定方法しか、書かれていない場合もあります。
要するに、Mac以外を想定していない風潮があるんですね。
「エンジニアとして働く=Macを使い続ける」なのです！！
コードを書かないで、ネットサーフィンをするだけならどんなPCでも良いですが、プログラミングをするなら絶対にMacを選びましょう！
おすすめMac
おすすめ！MacBookPro
絶対に間違いないのが、MacBookProです！！
僕はフリーランス時代はMacBookProで仕事をしていました。
正社員として貸与されるPCもMacBookProが基本です。
要するにMacBookPro = 仕事としてプログラミングを問題なくできるPCです。
節約したいなら！Mac Book Air
Mac Book Proだとちょっと高くて、今すぐには変えない！
けど、プログラミングの勉強を始めたい！
そんな時にはMac Book Airがおすすめです。
何を隠そう自分も最初はMac Book Airを使っていました。
印象としては、趣味なら充分、仕事で使うならギリギリといった感じです。
未経験で勉強で使っている時は問題なかったのですが、フリーランスとして仕事を受け出すと、ちょこちょこPCが落ちるようになりました。
流石に業務効率が悪いので、フリーランスの初任給でMac Book Proを買いました！
Macを買うなら、24回分割払いで！！
Macを買う際におすすめなのが24回分割払いです！
paidy経由で支払えば、月1万円台でMacを手に入れる事が出来ます。
また、金利も0なので、貯金があったとしても生活費に残しておいて、分割払いを利用する方がお得です！！！
その他、買っておくと良いもの
・マウス
・キーボード
【独学・未経験から最短でフロントエンドエンジニア】プログラミングを学習する
さて、ここからは具体的な勉強方法を解説していきます。
1ヶ月目：フロントエンドの基礎を学ぶ
「Progate」を使ってプログラミングに慣れましょう！！
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。…
スライドで基礎情報をインプットしたら、実践画面でコードを書いて学べます。
Progateはとても優れていて、ここ5年でエンジニアになった人でProgateを使ってない人はいないんじゃないか！ぐらい圧倒的に支持されているサービスです。
無料でも使えますが、コースが限られるので有料にして下さい！
月990円で、それを超える圧倒的な費用対効果なので、迷わず有料プランに切り替えましょう！
学習するコース
フロントエンドエンジニアを最短で目指すなら、以下のコースをやりましょう！
・(余裕があれば)JavaScript 、Ⅵ、Ⅶ
・React Ⅰ~ Ⅳ
・Git Ⅰ
合計で30~40時間ぐらいかかると思います！
さらには、途中で躓くこともあると思います！
でも、これを越えられれば、プログラミングで稼げる素質があると言えます。
2ヶ月目：React + TypeScriptを学ぶ
Progateさえ越えれば、脱初心者です！！
ここからは専門性を絞り、ReactとTypeScriptを学んでいきます。
具体的な手順としては
React、TypeScriptの基礎知識を学んだら、実践編として実際にアプリケーションを作ってみる！
その後に、実務レベルでは気にすべき応用的な知識をインプット
で、React + TypeScriptの学習としては完了です！
実際にやるべき教材や、学習時に気をつける事はこちらの記事をどうそ！
こんにちは、フロントエンドエンジニアのてりーです。 僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。 ノウハウがたまってきたので、React + TypeScriptの勉強[…]
3ヶ月目：チーム開発を学ぶ
React + TypeScriptで動くものを作れるようになったら、次はチーム開発の経験です！
いくら1人でプログラミングを勉強してきても、チーム開発の経験がないと趣味でやってたのと変わりません。
今まで勉強した知識を活かして、チーム開発に貢献出来るのかを試してみましょう！
「チーム開発を経験した方が良い理由とオススメサービス」については、こちらの記事で詳しく解説しています。
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
【独学・未経験から最短でフロントエンドエンジニア】ゴール = 就職！
就職とフリーランスの判断は貯金次第です！！
ざっくり1年分の生活費が貯金できていれば、いきなりフリーランスでも良いと思います。
フリーランス初期は仕事が貰えなかったり、短期で契約を切られる可能性もある為、安定した収入を得にくいです。
それがない場合は、正社員、派遣を問わず就職しちゃうのが、最短です！
仕事をやり始めちゃえば、お金を貰いながらエンジニアとして経験を積めるんです！
その結果、半年~1年後にはフリーランス独立や転職して年収アップなど、右肩上がりのキャリアアップが狙えます！
フロントエンド転職の解説記事
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・未経験からのエンジニア転職の心構え ・未経験のITエンジニア転職におすすめの転職エージェント・転職先 では、どうぞ！ すぐに登録したい方へ ・[…]
未経験から最短でフロントエンドエンジニアを目指すなら、以下の手順で学習しましょう！
2. React + TypeScriptに絞って極める
3. チーム開発を経験する
というわけで以上です。
ここまで理解したら、未経験からフロントエンドエンジニアになるまでのイメージが出来たんじゃないかなと思います。