Webエンジニア1年目で取り組んだ教材53選を振り返る

## はじめに

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

この1年間は、とにかく土台作りに注力した1年間で、多くの技術書や教材にお世話になりました。
- 駆け出しの頃って、何を勉強すればいいんだろう？
- 駆け出しの頃って、どのぐらい勉強するものなんだろう？

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

未経験〜内定までの記事はこちらから
- [【転職】未経験がWeb系自社開発企業の内定を得るまでにやったことすべて](https://qiita.com/tomo-kn/items/f6a2475474d268167ddf)
- [【個人開発】楽しみながら滑舌を鍛えることができるWebアプリ『早口言葉選手権』をリリースしました⚾🏏](https://qiita.com/tomo-kn/items/293280565b7ab69506e5)

## チーム開発

以下の3つに分けて、**取り組んだ順** に紹介していきます。
- チーム開発（バックエンドとフロントエンドの両方に適用可能なスキルや知識）
- バックエンド
- フロントエンド

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

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

- [SRE サイトリライアビリティエンジニアリング](https://www.oreilly.co.jp/books/9784873117911/)
- ★[SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発](https://amzn.asia/d/da32y0d)
- ★[リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)
- [小さなチーム、大きな仕事　働き方の新しいスタンダード](https://amzn.asia/d/0WPl4mv)
- [イラスト図解式 この一冊で全部わかるWeb技術の基本](https://amzn.asia/d/eA4ofVL)
- ★[VS Code公式ドキュメント](https://code.visualstudio.com/docs)
- [群論入門](https://yobinori.jp/video/algebra.html)
- ★[スクラム公式ガイド](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)
- ★[Clean Architecture　達人に学ぶソフトウェアの構造と設計](https://amzn.asia/d/iyln1mg)
- [情熱プログラマー ソフトウェア開発者の幸せな生き方](https://amzn.asia/d/j6GF33R)
- [SOFT SKILLS　ソフトウェア開発者の人生マニュアル](https://amzn.asia/d/g8lSgh3)
- ★[ヤフーの１ｏｎ１―――部下を成長させるコミュニケーションの技法](https://amzn.asia/d/bUIGaEs)
- [FAQ アジャイルやスクラムに関するよくある質問 Ryuzee.com](https://www.ryuzee.com/faq/)
- [アジャイルサムライ――達人開発者への道](https://amzn.asia/d/7d1FsS9)
- [異文化理解力 ― 相手と自分の真意がわかる ビジネスパーソン必須の教養](https://amzn.asia/d/6OMTLK6)
- [Webを支える技術 ―― HTTP，URI，HTML，そしてREST WEB+DB PRESS plus](https://amzn.asia/d/fZxJR0Z)
- [Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス](https://www.oreilly.co.jp/books/9784873119656/)
- ★[プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則](https://amzn.asia/d/2zbea43)
- ★[ピープルウエア　第3版](https://amzn.asia/d/jfEY2rE)

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

特にVS Codeの使い方、具体的には
- ファイル横断検索コマンド(Cmd + Shift + F)
- ファイル名検索(Cmd + P)
- Quick Fix(Cmd + .)
- 関数ジャンプ(F12 または Cmd + Click)

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

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

## バックエンド

- ★[プロを目指す人のためのRuby入門［改訂2版］](https://amzn.asia/d/asRNEoj)
- [現場で使える Ruby on Rails 5速習実践ガイド](https://amzn.asia/d/dRlhuFQ)
- Udemy：[REST WebAPI サービス 設計](https://www.udemy.com/share/103eNc3/)
- Udemy：[AWS と Terraformで実現するInfrastructure as Code](https://www.udemy.com/share/104bRQ3/)
- ★[体系的に学ぶ 安全なWebアプリケーションの作り方 第2版［固定版］　脆弱性が生まれる原理と対策の実践](https://amzn.asia/d/9EkCgFM)
- [Ruby公式ドキュメント](https://www.ruby-lang.org/ja/documentation/)
- [SQL 第2版 ゼロからはじめるデータベース操作](https://amzn.asia/d/hmynRXA)
- [Ruby on Rails ガイド](https://railsguides.jp/)
- [Docker公式ドキュメント](https://docs.docker.jp/)
- ★[問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本](https://amzn.asia/d/dQd9Cw5)
- [ネットワークはなぜつながるのか　第２版](https://amzn.asia/d/12S5UxL)
- [はじめて学ぶソフトウェアのテスト技法](https://amzn.asia/d/e2W1E0g)
- [オブジェクト指向でなぜつくるのか 第３版　知っておきたいOOP、設計、アジャイル開発の基礎知識](https://amzn.asia/d/dssfxni)
- Udemy：[Kubernetes入門](https://www.udemy.com/share/104rtu/)
- [達人に学ぶSQL徹底指南書 第2版 初級者で終わりたくないあなたへ](https://amzn.asia/d/3RZLBly)
- [達人に学ぶDB設計 徹底指南書](https://amzn.asia/d/6B01TWH)
- [テスト駆動開発](https://amzn.asia/d/hgGgbp5)

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

バックエンドの学習範囲は膨大なので、正直全てを理解しているかと言われると怪しいです。
ただ、
- 「あ、Rubyのyieldってこう使うのね」
- 「Railsのupdate_columnsって、バリデーションスキップするから注意して使わないとね」
- 「SQLインジェクションを防ぐためにプレースホルダーを使うのはMUSTだね」

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

## フロントエンド

- [1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座](https://amzn.asia/d/6snNKYk)
- [スラスラわかるJavaScript 新版](https://amzn.asia/d/jl3dwhI)
- ★[code-step/corporate2/ の HTML & CSS 模写](https://code-step.com/demo/html/corporate2/)
- [TypeScript公式ドキュメント](https://typescript-jp.gitbook.io/deep-dive/)
- ★[サバイバル TypeScript](https://typescriptbook.jp/)
- Udemy：[モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/share/103Fxl/)
- Udemy：[Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版](https://www.udemy.com/share/104d6k/)
- [React チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)
- [React 公式ドキュメント](https://ja.reactjs.org/docs/getting-started.html)
- [りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】](https://oukayuka.booth.pm/items/2368045)
- [りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】](https://oukayuka.booth.pm/items/2368019)
- ★[りあクト！ TypeScriptで始めるつらくないReact開発 第4版【③ React応用編】](https://oukayuka.booth.pm/items/2367992)
- [Next.js チュートリアル](https://nextjs.org/learn/basics/create-nextjs-app)
- [Next.js 公式ドキュメント](https://nextjs.org/docs/getting-started)
- Udemy：[Next.js 13 app directory による次世代Web開発](https://www.udemy.com/course/nextjs-supabase-app-directory/)
- [ノンデザイナーズ・デザインブック　［第4版］](https://amzn.asia/d/cxnVs5x)
- ★[フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識](https://amzn.asia/d/3Ys33hT)

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

ちなみに、新しい言語やフレームワークを勉強する時は、KENTAさんの「プログラミングノートの作り方」を参考にしています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/bquXw52kvU0?si=ZFyEMPYAPrzJb3Ob" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

以上が、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年目のうちに読破したいと考えています。

- [マスタリングTCP/IP　入門編（第6版）](https://amzn.asia/d/iPqQi1w)
- [検索システム 実務者のための開発改善ガイドブック](https://amzn.asia/d/bLEbEck)
- [Web API: The Good Parts](https://www.oreilly.co.jp/books/9784873116860/)
- [データ指向アプリケーションデザイン](https://www.oreilly.co.jp/books/9784873118703/)
- [エリック・エヴァンスのドメイン駆動設計 Kindle版](https://amzn.asia/d/j50PmQy)
- [ソフトウェアアーキテクチャの基礎](https://www.oreilly.co.jp/books/9784873119823/)
- [入門 監視](https://www.oreilly.co.jp/books/9784873118642/)
- [システム運用アンチパターン](https://www.oreilly.co.jp/books/9784873119847/)
- [情報アーキテクチャ 第4版](https://www.oreilly.co.jp/books/9784873117720/)

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

## まとめ

以上が、1年目に学習してきた教材と、それを踏まえた2年目以降の学習計画でした。
学習時間としては、
- 未経験での勉強:約1,300時間
- 業務：約2,200時間
- プライベートでの勉強：約500時間

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

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

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

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