この記事で伝えたいこと

未経験からフロントエンドエンジニアを目指したいけどどのように勉強すればいいの？どんなことに気をつければいいの？そもそも未経験からエンジニアになれるの？そんなお悩みをもった人が参考にできる体験談を書きたいと思いました！そして、読み終わったときに少しでも決断がしやすい状態になっていれば幸いです実際に使った教材もいくつかピックアップしてご紹介します

人によって合う、合わないがあるので飽くまで参考程度に読んでいただければ幸いです！

どのように就職活動を行ったかは触れませんので予めご容赦ください。

来歴

私は、4年生大学の経済学部を卒業した後に、2016年に新卒でITベンチャー企業に入社し、SaaSの法人営業に8年間従事していました。営業職だったためエンジニアに転身をするまではプログラミング経験はなく、ProgateでHTMLとCSSの基礎レッスンをかじったことがあるくらいのレベルでした。約8ヶ月間プログラミングを独学で勉強し、2024年にbravesoftにエンジニアとして入社をしました！最初の4ヶ月間は前職を続けながら業務後や週末に勉強をしていました。後半4ヶ月は完全フリーの状態で勉強と就職活動を進めました。

どのように勉強をしたのか

勉強をする上で、自分に課したルール、意識したこと、勉強の進め方などを説明します。
前提として私はプログラミングスクールには入らず、知り合いのエンジニアのサポートを受けながら基本的には独学で勉強をしました。その知り合いには週2の面談を設けてもらい壁打ちをしてもらっていました。
※学習期間は2023年12月から約8ヶ月間です。

勉強のルール

独学で勉強をする上で、自分ルールが必要だと感じ以下の3つのルールを作りました。

毎日勉強をする
毎日コードを書く
毎日タイピングの練習をする

独学をする上で一番大事なことは自分を律することです。本業を続けながらの学習だと尚更です。継続は力なりといいますが、本業を続けている時期は業務後に1時間でもいいので毎日続けることを心がけました。また、エンジニアはコードを書いてなんぼです。いくらインプットをしてもアウトプットができなければ意味がありません。1行でもいいので必ずコードを書くようにしました。そして、タイピングスピードをあげることは業務効率をあげる手っ取り早い手段です。私は毎日寿司打で特訓しました

意識したこと

全てを一気に理解をしようとしない: プログラミングは、Aを知るためにBの知識が必要で、Bを知るためにAの知識が必要です。少しずつ、そして反復をしながら学習を進めることがコツです。
WHYを大事にする: 脳死で教材や動画の内容を覚えるのではなく、それがなぜ必要な知識なのかを意識することで学習のモチベーションがあります。
非エンジニアの人に説明ができるか: 横文字を並べて、難しい言葉で説明ができるだけでは本当に理解ができているとは言えません。エンジニアでない友人にその内容が説明できれば、きっとそれは自分の血肉になっています。（実際に説明はしなくていいですｗ）
ChatGTPはコードを書くためではなく、コードを理解するために使う: ChatGTPは偉大なツールです。指示をすればコードも書いてくれます。ただ、学習のタイミングで乱用をすると、自分があたかもできるようになったという錯覚に陥ります。ChatGTPは分からない内容を理解するためのツールとして上手く付き合っていきましょう。

1ヶ月目（Webの基礎、HTML、CSS）

プログラミングの勉強に入る前にまずは土台作りをしました。
Webって何？プログラミングって何？エンジニアって何するの？サーバーって何？Webアプリってどのように成り立ってるの？などWebの世界の基礎を勉強しました。自分がどんな世界に飛び込むのかを知るところから始めました。そして、フロントエンドエンジニアのベースとなるHTML、CSSの基礎を身に着けました。このタイミングで本当にエンジニアになりたいのか、ある程度自分の本気度がわかりました。（ここで心が折れる人はちょっと厳しいかもしれないです）

ピックアップ教材：

2ヶ月〜4ヶ月目（Javascript、Git）

Javascriptの勉強は最も注力した領域です。モダンな開発では、ReactやVueといったフレームワーク（Reactは厳密にいうとライブラリ）を使えることがエンジニアとしての価値を高めますが、結局ベースになっているのはJavascriptです。ReactやVueを用いた開発でも、Javascriptを書く場面は多々ありますし、裏で動いているのもJavascriptです。Javascriptを深く理解することで、フレームワークの恩恵を感じることもできます。Javascriptの学習を始めると、開発ができることの幅が広がり、エンジニアの世界に足を踏み入れた実感が湧いてきます！苦しみながらも楽しく学習を進めることができました。
また、個人開発で必要性はあまり高くないですが、Gitの使い方も学びました。当時は、どのような恩恵があるのかがあまりわからなかったので一旦は基礎的なコマンドなどを学習しました。

ピックアップ教材：

5ヶ月〜6ヶ月目（React、TypeScript）

Javascriptの自信がある程度付いてきたタイミングでReactの勉強を開始しました。ReactとVueで悩みましたが、世界的にみたときにReactの方が普及率、支持率が高かったのでReactを勉強することにしました。（どちらもメリデメがあるので調べてみるといいでしょう。）Javascriptでコードを書くことに漸く慣れてきたタイミングだったので、最初は「宣言的UI」という考え方に慣れるのに苦戦しました。ただ、状態管理、props、再レンダーなどのReact特有の考え方に慣れればむしろReactの方が実装が楽だと実感できるようになりましたし、フレームワークの恩恵も感じられるようになりました。公式ドキュメントのチュートリアルは非常にわかりやすく、ステップ・バイ・ステップで教えてくれますし、UdemyやYoutubeの動画等も充実していたので調べ物をするのに苦労はしませんでした。Javascriptを学習していた際にはあまり気にしていなかったコンポーネントの分け方など、新たに考えることが増え、設計の重要性を感じるようになりました。
TypeScriptは深いところまでは触れず、基礎的な部分だけをかじりました。

ピックアップ教材：

7ヶ月目（ポートフォリオ制作）

ポートフォリオは自分が好きなものに関連付けて作りました。やっぱりモノづくりをするからには自分が心動くものを作りたいですね！私は映画が好きなので、映画レビューサイトを作ることにしました。

実装した主要機能は：

アカウント作成
ログイン認証／パスワードリセット
映画一覧の表示
映画の検索
映画のレビュー（作成、編集、削除）
観たい映画のブックマーク
他ユーザーのレビュー一覧
マイページ

開発環境、フレームワーク、ライブラリ等：

React×TypeScript（フロント）
Firebase Authentication（ユーザー認証）
Firebase Firestore Database（データベース）
Firebase Store（画像のストレージ）
TMDb API（映画データベース）

苦労したこと：

データベースの構造決め
外部APIの利用
コンポーネントの分割

ポートフォリオ：

8ヶ月目（就職活動）

就職活動の内容に関しては冒頭でもお伝えした通り割愛させていただきます

振り返り

やってよかったこと

Javascriptの勉強を手厚くやったこと: フロントエンドエンジニアをやるならやっぱりベースとなるのはJavascript！フレームワークの登場によって、登場前と比べて生のJavascriptを書かずして実装できる幅は広がりました（私は登場前のことは知らないので飽くまで勉強期間に実感したことをベースに語ってます）。とはいえ、業務でJavascriptを書くことは多々ありまし、ちゃんと扱えないと困る場面がたくさんあります。フレームワークを学習する場合でもJavascriptの勉強を手厚く行うことはおすすめします！
WHYを大事にして勉強を進めたこと: なぜそのメソッドを使うのか、なぜその変数名にするのか、なぜその実装にするのか、なぜそのフレームワークが誕生したのか、なぜ自分はそれを学んでいるのか、なぜエンジニアを目指すのか。理解できないこと、分からないことの勉強を進めていると視野が狭くなり、「なぜ」を考えることがおざなりになることがあります。ただ、「なぜ」が分かっている状態で学習を進めるのとそうでないのとでは最終的に習得できるものの質が大きく変わると思います。是非色んなことに疑問をもって調べながら勉強をしてみてください！

改善点、やればよかったこと

サーバーサイドの勉強: エンジニアとして就職をして、一番困ったことがサーバーエンジニアと意思疎通をすることでした。独学の時とは異なり、実際の業務ではサーバーサイドのメンバーが作ったAPIを使いフロントに繋ぎ込む開発が多々あります。サーバー側で何が起こっているかわかっていないと会話が表面的になり、認識の齟齬が発生します。言語はなんでもいいと思うのである程度サーバーサイドの実装に触れておくと良いと思います！
もう少しGitの理解を深める: 二つ目に困ったことは、Gitの使い方です。先にも記載した通りGitの勉強はあまり時間をかけませんでした。実際にチーム開発をやってみないとわからないことももちろんありますが、それぞれのコマンドがどういう時に使うもので、使った後にブランチやコミット履歴がどのような状態になるのかをちゃんと理解していた方が入社をしてから無駄な労力を使わずに済むと思います！

最後に

最後まで読んでいただきありがとうございます！未経験からエンジニアになってみたいけど、一歩が出ない方の背中をポンと押せる内容になっていれば幸いです！0から目指すことは決して楽な道のりではないですが、継続をすれば道は切り開けます！私は、エンジニアになり漸くスタートラインに立つことができました！現在はNuxtやNextを使いながら自社サービスのフロントエンドの開発をやっています！これからも楽しみながらもっと頑張っていきたいと思います！一緒に頑張って行きましょう