完全初心者
具体的にやることを教えて欲しい。
こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています。
この記事を書いた人
こんにちは、フロントエンドエンジニアのてりーです。
記事を書いている僕は、プログラミング歴5年ほどです。
ニートから未経験でプログラミングを勉強して、フリーランス独立を経験し、現在はメガベンチャーで働いています。
プロフィール はじめまして、Webエンジニアの「てりー」です。 プロフィールを読んでいただいて、ありがとうございます。 現在はメガベンチャー企業でエンジニアとしてフルリモートで働きながら、スキマ時間で副業をしています。 この[…]
・2ヶ月目：React + TypeScriptを勉強(勉強方法はこちら)
・3ヶ月目：チーム開発に飛び込む(手順はこちら)
・その後：転職活動をする(詳しくはこちら)
なぜフロントエンドなのか？
現在、完全な未経験からプログラミングで稼ぐなら、フロントエンドエンジニアを目指すべきだと僕は考えています。
理由は
・フロントエンドの方がバックエンドより経験年数が低くても活躍できる
です。
こんにちは、フロントエンドエンジニアのてりーです。 2024年に完全な未経験状態からプログラミングを独学し、稼ぎたいと思っているあなたへ。 読者 ・どの職種が独学に向いているの？ ・どの領域が良いの？ ・何を勉強すれば[…]
それでは、さっそく見ていきましょう。
目標：未経験から独学でフロントエンドエンジニアになる
目標は「フロントエンドエンジニアになること」です。
ここでポイントになってくるのが雇用形態です。
個人的には、正社員、派遣社員、フリーランスなど雇用形態は二の次だと思っています！
まずはフロントエンドエンジニアとして手に職を得る事が最重要だと思っています。
エンジニアは雇用形態を気軽に変えられる！
僕が今まで見てきた中でも、様々なケースで雇用形態を変えた人がいました。
・正社員→フリーランス独立、最初は元会社から仕事を貰い、徐々に他社の仕事も増やしていく(収入UP)
・フリーランス→仕事先が居心地が良いので、正社員として就職
といったように、エンジニアは技術職なので、実力さえあれば雇用形態や働き方を柔軟に変えられます！
エンジニア経験を積めば、どんどん条件は良くなる！
フロントエンドエンジニアとして働き始めれば、経験年数に応じて条件は右肩上がりになります。
実際にフリーランス時代の僕の時給の推移です。
1案件経験(プログラミング歴約3ヶ月)：時給2000円
2案件経験(プログラミング歴約1年)：時給3000円
3案件以降(プログラミング歴約2年)：時給4000円~
このように、経験値を積めば積むほど条件は良くなっていきますね！
ここで重要なのが、条件が良くなる要因は開発案件の経験を積んだ事であって、その時の雇用形態ではない点です！
面接では派遣社員か正社員かフリーランスかの雇用形態はほとんど見られないです！
その代わりに
- 何を作っていたのか？
- どの言語を使った事があるのか？
- どの役割だったのか？
が重点的に聞かれます！
独学・未経験からフロントエンドエンジニアを目指すなら、言語はReact + TypeScriptに絞る！
最短でフロントエンドエンジニアになる為に、学ぶ言語は「React + TypeScript」を強くオススメします！
React + TypeScriptがフロントエンドのスタンダード言語
未経験からのフロントエンド学習はReact + TypeScriptに絞るべきだと考えています！
簡単に説明すると
- HTML、CSSは最小にやらんでも良い！
- JavaScriptのフレームワークはReact1択！！
- 2024年はTypeScriptまで学習すべき！！！
僕がこのように考えている詳しい理由や背景はこちらの記事で解説しています！！
こんにちは、フロントエンドエンジニアのてりーです。 タイトルにもある通り、2024年に最速でフロントエンドエンジニアを目指すなら、言語はReact + TypeScriptに絞るべき！だと考えています。 この記事では、React、T[…]
【独学・未経験から最短でフロントエンドエンジニア】勉強準備
やるべきゴールが見えた所で、次にプログラミングを勉強するために必要な環境を整えています。
ここで先に伝えておくと、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を使い始めて5年ぐらい経過しました。 大学中退してニートの時期にプログラミングを始めて、ReactとTypeScriptの分野に集中する事で[…]
3ヶ月目：チーム開発を学ぶ
React + TypeScriptで動くものを作れるようになったら、次はチーム開発の経験です！
いくら1人でプログラミングを勉強してきても、チーム開発の経験がないと趣味でやってたのと変わりません。
今まで勉強した知識を活かして、チーム開発に貢献出来るのかを試してみましょう！
「チーム開発を経験した方が良い理由とオススメサービス」については、こちらの記事で詳しく解説しています。
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
【独学・未経験から最短でフロントエンドエンジニア】ゴール = 就職！
就職とフリーランスの判断は貯金次第です！！
ざっくり1年分の生活費が貯金できていれば、いきなりフリーランスでも良いと思います。
フリーランス初期は仕事が貰えなかったり、短期で契約を切られる可能性もある為、安定した収入を得にくいです。
それがない場合は、正社員、派遣を問わず就職しちゃうのが、最短です！
仕事をやり始めちゃえば、お金を貰いながらエンジニアとして経験を積めるんです！
その結果、半年~1年後にはフリーランス独立や転職して年収アップなど、右肩上がりのキャリアアップが狙えます！
フロントエンド転職の解説記事
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・未経験からのエンジニア転職の心構え ・未経験のITエンジニア転職におすすめの転職エージェント・転職先 では、どうぞ！ すぐに登録したい方へ ・[…]
未経験から最短でフロントエンドエンジニアを目指すなら、以下の手順で学習しましょう！
2. React + TypeScriptに絞って極める
3. チーム開発を経験する
というわけで以上です。
ここまで理解したら、未経験からフロントエンドエンジニアになるまでのイメージが出来たんじゃないかなと思います。