はじめに

皆さんこんにちは、Webエンジニアのtomoです。
2022年10月1日よりWeb系自社開発企業のエンジニアとして勤務し、ちょうど1年が経過しました。

この1年間は、とにかく土台作りに注力した1年間で、多くの技術書や教材にお世話になりました。

駆け出しの頃って、何を勉強すればいいんだろう？
駆け出しの頃って、どのぐらい勉強するものなんだろう？

こういった疑問を持つ方は多いかと思うので、個人の体験にはなりますが、1年間で学習してきた教材をカテゴリ別に振り返りたいと思います。

未経験〜内定までの記事はこちらから

チーム開発

以下の3つに分けて、取り組んだ順 に紹介していきます。

チーム開発（バックエンドとフロントエンドの両方に適用可能なスキルや知識）
バックエンド
フロントエンド

※厳密には「それ、バックエンド？」など、カテゴリ分けがあやふやな部分もありますが、細かくカテゴリ分けするとそれはそれでわかりづらくなってしまう恐れがあるので、大まかなカテゴリでの分類であることをご了承ください。

また、特におすすめな教材には★マークをつけていきます。

会社ではスクラムを採用しているので、スクラムの基本は重点的に学びました。
また、開発をより効率的に行うため、VS Codeの使い方やプログラミングの原則などについて学びました。

特にVS Codeの使い方、具体的には

ファイル横断検索コマンド(Cmd + Shift + F)
ファイル名検索(Cmd + P)
Quick Fix(Cmd + .)
関数ジャンプ(F12 または Cmd + Click)

などについては、知ってるのと知らないのとでは開発効率にかなり差が開いてしまうので、エディタの使い方は早めにある程度マスターしておくことをお勧めします。

また、僕含め未経験〜駆け出しエンジニアは、公式ドキュメントを読むことに抵抗がある人が多いかと思います。
ですが、公式ドキュメントは1次情報の宝庫 なので、最も重要な情報源であり最大限活用すべきです。
VS Codeの公式ドキュメントは、かなり読みやすく作られているため、公式ドキュメントを使った学習のはじめの一歩として非常に適していると思います。

バックエンド

業務でRubyを使っているので、その勉強を中心に行いました。
あとはDockerやSQL、ネットワークの仕組みなど、バックエンドエンジニアだったら知っておきたい内容を広く浅く学んだ感じですね。

バックエンドの学習範囲は膨大なので、正直全てを理解しているかと言われると怪しいです。
ただ、

「あ、Rubyのyieldってこう使うのね」
「Railsのupdate_columnsって、バリデーションスキップするから注意して使わないとね」
「SQLインジェクションを防ぐためにプレースホルダーを使うのはMUSTだね」

とか、その辺りのなんとなくの内容を頭の中に無理やり入れたって感じです。
頭の中にインデックスが作られていれば、壁にぶつかるたびに検索して理解を深めることができるので、とりあえず1年目はこれで十分だと思っています。

フロントエンド

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
スラスラわかるJavaScript 新版
★code-step/corporate2/ の HTML & CSS 模写
TypeScript公式ドキュメント
★サバイバル TypeScript
Udemy：モダンJavaScriptの基礎から始める挫折しないためのReact入門
Udemy：Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
React チュートリアル
React 公式ドキュメント
りあクト！ TypeScriptで始めるつらくないReact開発第4版【① 言語・環境編】
りあクト！ TypeScriptで始めるつらくないReact開発第4版【② React基礎編】
★りあクト！ TypeScriptで始めるつらくないReact開発第4版【③ React応用編】
Next.js チュートリアル
Next.js 公式ドキュメント
Udemy：Next.js 13 app directory による次世代Web開発
ノンデザイナーズ・デザインブック　［第4版］
★フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識

今年の2月から、フロントエンドの業務も任せていただけるようになったので、短い期間でギュッと基礎の部分をまとめて学習しました。
具体的には、HTML & CSS -> JavaScript -> TypeScript -> React -> Next.jsの順で勉強しました。

ちなみに、新しい言語やフレームワークを勉強する時は、KENTAさんの「プログラミングノートの作り方」を参考にしています。

以上が、Webエンジニア1年目で取り組んだ教材53つです。
大体 400~500時間 ぐらいかかったと思います。

2年目にやりたいこと

1年目は、頭の中にインデックスを作る勉強を中心に、とにかく幅広く知識をインプットする学習を心がけていました。
しかし、そろそろインデックスを作る作業は卒業してもいいかな〜、という実感があるので、
2年目はより実践的な学びを意識したいです。

ということで、2年目の学習計画についても、いくつかまとめておきたいと思います。

1. Goを使って何か開発する

会社のエンジニアに「次言語を勉強するとしたら、何がおすすめですかね？」と聞いたところ、Goをお勧めしていただきました。
Goは言語体系がかなり小さく、始めるまでの学習コストが最も小さいプログラミング言語の1つです。
Goを使って、バックエンドエンジニア力を上げていくのは、世界的なトレンドを見てもめちゃめちゃありだと思うので、業務ではRubyを使いますが、プライベートではGoで色々勉強したいな〜と思っています。

その一環として、何か個人開発でもできればいいな、と考えています。

2. TypeScriptのトレンドを追う

これも会社のエンジニアにお勧めされたのですが、最近Twitterで流行の技術を追うことを始めてみました。
具体的には、

Next.js
shadcn
Radix

この辺りのアカウントをフォローして、最新の情報を追っています。

最近は、TypeScriptのできることが増えてきたと感じていて、たとえばNestjsを使ってBFFを構築するような会社も出てきています。
専門をフロント・バックどちらにするかは決めかねているのですが、どちらにせよ「フロントエンドがわかるバックエンド」「バックエンドがわかるフロントエンド」は、今後需要が伸びてくると感じています。

よって、TypeScriptは業務でもプライベートでも、ゴリゴリにコードを書いて力を伸ばしていきたいです。

3. LT/ハッカソン/OSS活動

1年目は、ただ黙々と技術書を読む勉強しかほとんどしてきませんでした。
なので2~3年目は、もう少しエンジニアとしての幅を広げるために、会社外の方々とも積極的に関わったり、OSS活動に参加してみたりしたいです。

つまり、今後はアウトプットありきの勉強に主軸を置いていこうと考えています。

4. とはいえ読みたい技術書もある

とはいえ、インプット学習を全くやらないのかというとそれはNoです。
具体的にいえば、現時点で以下の書籍を、最低でもWebエンジニア2年目のうちに読破したいと考えています。

特にネットワークや検索アルゴリズムの話は、今後業務でも使う知識になると思うので、早めに学習しておきたいです。
それ以外のO'Reillyの本などについても、エンジニアとして読んでおいた方がいい本ばかりだと思うので、ゆっくり読んでいきたいですね。

まとめ

以上が、1年目に学習してきた教材と、それを踏まえた2年目以降の学習計画でした。
学習時間としては、

未経験での勉強:約1,300時間
業務：約2,200時間
プライベートでの勉強：約500時間

ぐらいで、ちょうど4,000時間ぐらいプログラミングに費やしてきたかな〜という感じです。

よく、一人前のエンジニアになるには10,000時間必要だ、と言われると思うのですが、それに当てはめるとやっと半人前ぐらいになれた感覚ですかね。

このぐらいの学習量でも、エンジニアとして日々楽しく業務ができているので、やはり「継続は力なり」だな、と感じます。
「何を勉強すべきか、どう勉強すべきか」は人それぞれフェーズによっても変化してくるので一概に結論を出すことはできませんが、この記事で紹介した教材で学習すればとりあえず大きなハズレはないはずです。

ぜひ何かの参考になれば幸いです。