前提
- 志望:フロントエンドエンジニア
- 就職先:Webエンジニア(フロントエンド&バックエンド)
- 学習期間:約9か月(最初5ヶ月はゆるゆる学習、後4ヶ月は本気で学習)
- 提出したポートフォリオ:まとめ記事
大まかな流れ
以下のような流れで学習しました。勉強プランを事前にしっかり固めてはいなかったので、都度必要だなと思うことを行っていました。
- Progate, paizaに取り組む
- 架空サイトやミニアプリ作成
- 共同開発に参加
- Udemyで基礎を再度固める
- ポートフォリオアプリ開発
- ポートフォリオサイト作成
各段階で行ったこと
Progate, paizaに取り組む

プログラミングの基礎を固めるために、Progateでは各技術の使い方や概念を学び、paizaではアルゴリズムを学びました!
Progate
言わずもがなのProgate(プロゲート)。以下のコースに取り組みました。振り返ると、Node.jsとSQLはやらなくても良かったかな…?とは思います。
- HTML/CSS
- Sass
- JavaScript
- React
- Node.js
- SQL
paiza
paiza(パイザ)というサイトで、アルゴリズムの勉強をしました。問題にレベルがあるのですが、C・Dレベルを中心に行っていました。
架空サイトやミニアプリ作成

Progateなどで学んだことを定着させるためにやりました!
一から作ることの難しさを痛感しました。泣
Progateで学んだ、HTML, CSS, JavaScript, Reactを使用して、架空サイトを作りました。環境構築からしないといけないので、当時の私にとってはとても大変でした…。そして、Reactの部分はほぼほぼProgateのコードをパクッて書いてました(理解が足りなかったため)。実際に自分でプロダクトを作る中で、理解が足りない点が露わになったので良かったです。
共同開発に参加

共同開発、経験したかったんです!!
私は運よく、フロントエンドエンジニアとバックエンドエンジニアのMixで構成される開発に参加しました。(通常はどちらか一方のエンジニアだけで組むことが多いようです)
転職クエストというオンラインコミュニティに入り、共同開発を経験しました。プログラミングスクールや他のコミュニティで共同開発ができるところもあるので、興味ある方は調べてみてください。共同開発はGit/GitHubの使い方や、チーム連携の重要性なども学べるのでおすすめです。
Udemyで基礎を再度固める

共同開発で実践的な知識が欠けていると感じたので、Udemyで勉強しました!
【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
↑こちらの講座を受講したのですが、フロントエンド志望の方には以下の点でとてもおすすめです!
- 実践的
- わかりやすい
- 講師の声が落ち着きがあって良い
ポートフォリオアプリ作成

元々はフロントエンド技術のみを使用したものを作ろうとしてましたが、共同開発でバックエンド側の知識の必要性を感じ、バックエンドまでカバーしたものを作ることにしました!
2か月程度かけてWebアプリを開発しました。解説記事も用意しているので、興味がある方は見てみてください。
ポートフォリオサイト作成

これが出来たらエントリーだ!!というテンションで作ってました。
まとめサイトとなるLPを作りました。制作物をまとめた記事もあるので、気になる方は是非。
学習を進めていくうえで大事だと思ったこと
万が一の駆け込み寺を用意する
つまり、自分で調べても分からないことがあった時に、聞ける人を作っておくことです。私の場合は、エンジニアの友人がいたのでその人に聞いていましたが、MENTAやプログラミングスクールでもいいので、聞くことができる人は用意しておいた方が挫折しにくいです。
アウトプットする
Progateをやったり、講座を受講して教材をやったりすると、勉強して分かった気持ちになります。でも、それは大抵偽物の感覚なので、実際に自分で一から作ることをおすすめします。つまり、設計から開発までです。
できなくても落ち込みすぎない
思い通りにできなかったとき、少々落ち込みます(笑) しかし、プログラミングはもともと難しいです。最初はできなくて当たり前なので、分からない・できないことがあっても、あまり引きずらないようにしてください。
先に作りたいものを決める
まずは作りたいものを決めて、それを実現するために行動を重ねていくと、自走力が身に付きます。もちろん、最初は作りたいものを作るにあたって何が必要かわからないので、詳しい人やメンターに相談するのもおすすめです。
学習サイトやサービスについて
いくつかおすすめの学習サービスをこちらの記事で紹介しています。学習サービスや教材は、自分に合ったものを選んでください。重要なことは、自分自身で一からプロダクトを作れるようになることで、学習サービスは手段でしかないことを覚えておいてください。