プログラミングを独学で習得する手順【フロントエンド 転職編】

プログラミング
YUKO
スクールに行きたいけどお金がなくて独学しようと思ってるけど、どうやって勉強していけばいいかわからない…。
YUJI
今日はそんなYUKOさんのために、独学でもエンジニアに転職できるレベルに持っていく手順を話しますね!
本記事が想定するターゲット読者
スクールに行けなくて独学で勉強しようと思っている人
本記事を読んで分かること
フロントエンドについて、エンジニアに転職するために独学で勉強していく手順がわかります

プログラミングを独学で習得する手順【フロントエンド 転職編】

昨今のエンジニアへの転職ブームや副業ブームが合わさって、プログラミング初心者の数が今爆発的に増えています。

プログラミングは、動画編集やAdobeソフトを用いたデザインなどと比べると、学習コストが比較的高く、挫折してしまう人が多いのが現実です。

「挫折してしまうならプログラミングスクールに行けばいい」という人がいるかもしれませんが、スクールは安くても8万円、高い場合には数十万円もかかることがあります。

「自己投資として、それくらいの投資をためらうなよ」と思うのはよろしくないです。

世の中にはいろんな人がいます。

スーパーかかあ天下で、毎月のお小遣いが月に3万円というかわいそうな夫がいるかもしれません!

世の中には数十万円〜数百万円とする優良教材があるくらいですから、通常であれば、10万円程度ならすぐにでも投資して欲しいレベルですが、各々の家庭でどのような事情があるかはわかりません。

プログラミングを独学で学ぶことは、結論を言ってしまえば可能です。

ただ、当然スクールに通うよりも、強いメンタル正しい勉強方法の理解が求められます。

そのため、今回はそのようなスクールに何かの事情で通えない人のために、プログラミングをゼロから独学で学ぶ勉強方法についてまとめていきます。

この「プログラミングを独学で学ぶ手順」は、フロントエンド編サーバーサイド編の二つに分けてまとめていきます。

さらにフロントエンド編では、「副業で稼ぐための手順」と「エンジニアに転職する手順」の二つに分けており、今回はエンジニアに転職するための独学での学習手順について、まとめていきます。

プログラミングの学習を始める前に

プログラミングの学習をする前にやらなければいけないことは、具体的な手順の前に、しっかりと継続的に学習できるマインド作業環境を整え、正しい勉強方法を知ることです。

プログラミングは、転職するにしても、副業をするにしても、他の分野より比較的覚えることが多く、またエラーが多発することにより挫折しやすいことは事実です。

そのため、いきなり勉強に入るのではなく、必ず先ほど言った、学習する上でのマインドや作業環境、正しい勉強方法の理解は、必ず整えておいてください。

これらについては、以下の記事にまとめてありますので、熟読するようにしてください^^

プログラミングの勉強方法【駆け出しエンジニア必見】

2020年8月22日

STEP1:Progate

上記の記事を読んでくれたら、次からは早速具体的な学習に取りかかります。

一番初めに取り掛かるのは、よくネット上でも言われているようにProgateで問題ありません。

いきなり分厚い書籍などで学習を始めてしまうと、十中八九挫折してしまいます。

Progateの具体的な進め方やスケジュール感については以下のような感じです。

()内が目安となる所要時間ですが、割とゆったりめに設定してあるので、このラインは超えないように努力してください。

  1. HTML&CSSコース:2週以下(3週間)
  2. JavaScriptコース:1週(1週間)
  3. jQueryコース:2週以下(1週間)
  4. Saasコース:1週(2日)
  5. Gitコース:1週(2日)
  6. Command Lineコース(2日)

もちろん、全て「道場コースまで含んだスケジュールになっています。

2週以下と書いてある項目は、1週で十分だと思ったらすぐに次に進んでください、という意味です。

逆に2週以上はしないようにしてください。

Progateをぐるぐる周回するのではなく、次へ進んでわからなくなったら、都度戻るような学習にしましょう

他にはWebパス開発なるものがありますが、フロントエンドエンジニアとして転職するだけであれば、バックエンドの知識はそれほどいらないです。

「GET」「POST」「PUT」「DELETE」の4つのHTTPメソッドが理解できていれば、業務に支障をきたすことはありません。

もしかしたら、転職してからバックエンド側も一部担当することになるかもしれませんけど、必要になったときに知識をインプットすれば大丈夫です。

初学者はとにかく必要最小限の知識だけインプットして、ささっと転職活動に移りましょう。

転職に必要な知識だけをインプットして、JavaScriptのフレームワークとか、UIUXの知識などのような、プラスアルファの知識は転職後に現場で学習した方が、効率がいいです。

Progateのより詳細な勉強方法や、ぐるぐる周回してしまう原因などをまとめた記事を以下に添付しておくので、こちらも合わせてご覧ください。

まだProgate周回してるの?Progateからいち早く卒業する秘訣を教えます。

2020年1月23日

【プログラミング初学者必見】Progateを超効率的に学習するための魔法の4W3Hを教えます

2020年1月24日

STEP2:簡単なサイトを作ってみる(1ヶ月)

STEP1でProgateが終わって、基本的な知識をインプットすることができたら、STEP2からはアウトプットベースの学習に移っていきます。

このSTEP2については、「副業編」と内容は同じになっていますが、大事な部分なので、念のためにもう一度説明しておきます。

どのようにアウトプットするかというと、自分が作ってみたいサイトを作るのが一番手っ取り早いです。

例えば、自分の場合は「海外を旅するバックパッカー用に、各国のバックパッカーが知りたそうな情報をまとめた静的なサイト」を作りました。

自分が大学生の頃にバックパッカーをやっていたこともあって、普通の旅行者とバックパッカーとでは、求めている現地の情報が若干違うことがわかっていました。

そのため、バックパッカーに特化した情報をまとめようと思ったわけです。

こんな感じで、自分の趣味と関連付けながら考えると、案外自分が作りたいサイトはすぐに決まったりします。

サイトの中身を考えるときは、自分が趣味をやる中で、「こんなサイトがあったら便利だな」程度で大丈夫です。

実際にリリースするわけではないので、需要があるとかないとか、その辺は深く考えなくてもいいです。

自分の日常生活を思い浮かべてみて、何かの「不(不満、不便…)」を解消してあげるサイトでもいいかもしれません。

何か思い浮かんだら、すぐに制作にとりかかるのが重要です。

上記のように考えてみても、どうしても作りたいと思えるものが浮かばないという人は、「模写」でも構いません。

副業する際に営業活動に使うポートフォリオとしては、やはり模写ではなく、オリジナルサイトの方がいいので、できたら模写ではない方がいいのですが。

模写するときに、どのサイトを模写すべきか迷う人は、まずはProgateの道場コースで作り上げたサイトと同じものを、自分のエディタで模写してみましょう。

ここのSTEP2では、実際に自分でエディタを使ってコーディングしてみるというのがポイントとなります。

エディタとしては色々種類がありますが、迷ったときはとりあえず、「Visual Studio Code」を選んでおけば大丈夫です。

このオリジナルサイトや模写は、最低2つ作るようにしてください。

おそらくこのSTEP2が最もハードですが、このアウトプット量をこなせば、基本的な、HTMLとCSS、JavaScript(jQuery)は扱えるようになっているはずです。

ここで心が折れてやめてしまったら、そこで試合終了です。

アウトプットは大変ですが、それだけ早く力がついていきます

ポートフォリオサイトのオススメの制作方法を、以下の記事にまとめていますので、ぜひご覧ください。

【エンジニア転職】オリジナルサイトの効率的な制作方法を教えます

2020年1月1日

STEP3:転職活動をする

ひとまず、HTML、CSS、jQueryを使って、自分のオリジナルサイトが二つ完成したら、ここで転職活動に移りましょう

「このスキルセットで転職活動始められるの?」と思う人がいるかもしれませんが、答えは「可能」です。

何故ならば、確かにエンジニアに転職する際は、スキルが高いにこしたことはないですが、完全未経験の場合は、スキルよりもどちらかというとヒューマンスキルの方が重要だからです。

つまり、コミュニケーション能力や、レスポンスの速さメールの文章などですね。

実際に自分も転職活動をやっていたときに感じましたが、スキルよりも明らかにヒューマンスキルの方が重要視されていた印象です。

せっかくポートフォリオを持っていっても、ほとんど触れられずに終わることだってあったくらいです。

触れられたとしても、1〜2個の簡単な質問をされて終わりということが多かったです。

そのため、ポートフォリオサイトが2つできた時点で転職活動を始めるのは、戦略的にかなりありです。

変にVue.jsやReactなどのようなJavaScriptのフレームワークの勉強に時間をかけるよりも、面接対策に時間をかけた方が明らかにコスパがいいです。

企業側もJavaScriptのフレームワークとか、UIUX周りの知識などは、入社してから身につければいいというスタンスを取っていることがほとんどです。

転職活動時によく聞かれる質問やそれに対する答え方だったり、求人サイト「Wantedly」の使い方については、以下の記事にまとめていますので、そちらもフルに参考にしてみてください。

【エンジニア転職】未経験の私が3週間でWeb系自社開発企業2社から内定を勝ち取った転職活動戦略

2019年12月22日

【エンジニア転職】実務未経験の私が面接でよく質問されたこと7選

2019年12月29日

【未経験からのエンジニア転職】会社からの返信率を格段に高めるWantedlyの活用方法

2020年1月3日

STEP4:JavaScriptのフレームワークを使ってサイトを作成する(4週間)

STEP3の段階でかなりの確率で転職活動は成功すると思いますが、何十社もうけたが、どこからも内定がもらえなかったとなった場合は、JavaScriptのフレームワークを勉強しましょう。

フロントエンドエンジニアとして入社したら、どうせVue.jsかReactかAngularなどのJavaScriptのフレームワークを使うことになるので、転職前に勉強しておいても1mmも損はないです。

オススメは、Angular以外です。

Angularよりも、Vue.jsかReactを使っている企業が多いし、何よりもAngularは学習コストが高いので、初学者には絶対に無理です。

ここでVue.jsかReactの二択になりますが、これに関してはどっちでもいいですね。

どっちのフレームワークも公式ドキュメントやチュートリアルは充実しているので、基礎を押さえるくらいならば、大して学習コストは変わらないです。

特にReactの方は、Progateでも扱っているので、Progateが大好きという方はReactでいいかもしれないです。

そして、フレームワークの基本を学習したら、自分のポートフォリオをフレームワークを使って作り直してみましょう

もちろん、jQueryバージョンは残しつつですよ。

そして4週間ほどかけて制作が完了したら、再びSTEP3の転職活動に戻りましょう。

そして面接などでは、しっかりとJavaScriptのフレームワークを使って、ポートフォリオを作成したことをアピールしましょう。

ここまでしておけば、スキルセット的にはもうすることはないので、もし内定がなかなかもらえないようであれば、ひたすらヒューマンスキルを磨きましょう

まとめ

プログラミングをゼロから学び始めて、STEP3の段階でうまくいけば、だいたい14週間ほどで転職活動が完了します。

つまり3ヶ月半くらいですね。

できれば、STEP4に行くことなく、STEP3で転職活動が終了するように、ヒューマンスキルを磨いて頑張りましょう

何故ならば、STEP4で学ぶJavaScriptのフレームワークは、独学するよりも、明らかに現場に入ってから学習した方が効率がいいからです。

そのため、STEP3の転職活動は1〜2ヶ月は粘るようにしてください。

どうしても、自分が行きたいレベルの企業が、JavaScriptのフレームワークだったり、その他のプラスアルファを求めてくるようであれば、STEP4に進んでください。

ここで余談なんですけど、余裕のある人は、転職活動をしながら、発信活動用に、面接官からよく受けた質問とか、裏話とか、自分が経験した印象的なことを逐一メモしておくいいです。

そうすれば、転職活動後にTwitterでもブログでもYouTubeでも、発信できるネタになって自分をブランディング化することに役立ちます。

転職活動、なかなか大変だと思いますけど、大変なことの後にはいつだっていいことが待ってますからね。

塞翁が馬です。

それでは転職活動、応援しています^^

【フロントエンド編】プログラミングの学習手順 転職編
  • STEP1:Progateで基礎知識をインプットする
  • STEP2:簡単なサイトを作ってみる
  • STEP3:転職活動を行う
  • STEP4:JavaScriptのフレームワークを勉強する
YUKO
エンジニアに転職するまでの流れがかなり見えました!まずはProgateから頑張ってみようと思います!
YUJI
3ヶ月もあれば、エンジニアには十分に転職することができます。諦めずに最後まで頑張ってください!
今回もブログをお読みいただきありがとうございます😎  以下のLINE公式では、LINE限定の動画コンテンツやコラム、みなさん一人ひとりにパーソナライズした情報などを配信していますので、ぜひ友だち追加お願いします^^(追加していただいた方だけに配布する限定動画もございます🎁
友だち追加