新卒 Web エンジニアとして入社前にやっておきたかったこと

この記事は [株式会社サイバー・バズ Advent calendar 2021](https://qiita.com/advent-calendar/2021/cyberbuzz) 1日目の記事です．
2日目の記事は [新卒研修でドメイン層のテストカバレッジ100%にした話](https://qiita.com/Hirochon/items/f886816e4a1d93132744) です。

# 概要

新卒の Web エンジニアとして4月から8ヶ月間働いてきた中で
**「これ入社前にやっておけばもっと活躍できたなあ……」**と思ったことをまとめました。

入社してから学んだことや、今現在勉強中のことを中心に記載しています。

## 読者として想定している人

学生、または独学で学習中の方を含む

- [x] これから Web 領域に携わるエンジニアとして働こうとしている方
- [x] 現在就職活動中で、もしかすると WEB 領域に携わるかもしれない方

が対象です。
ぜひ、本記事を反面教師にしていただければと思います。

# 入社前にやっておきたかったこと

* [フロントエンド](https://qiita.com/Rone_Loreto/items/fd299a54a63a70824a8c#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89)
* [サーバサイド](https://qiita.com/Rone_Loreto/items/fd299a54a63a70824a8c#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89)
* [インフラ](https://qiita.com/Rone_Loreto/items/fd299a54a63a70824a8c#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%B9)
* [その他全般](https://qiita.com/Rone_Loreto/items/fd299a54a63a70824a8c#%E3%81%9D%E3%81%AE%E4%BB%96%E5%85%A8%E8%88%AC)

の4種あります。

## フロントエンド

### TypeScript を学ぶ

React.js や Vue.js を使った開発の際に TS を用いることがほとんどなので、
*「 TS が出来たら React や Vue の学習にもっと時間を割けたなあ……」*と思いました。

初学の人には [TypeScript Deep Dive](https://typescript-jp.gitbook.io/deep-dive/) をオススメします。

2020年3月にオライリーから和訳された TypeScript 本も出たので、
書籍で読みたい人は [プログラミングTypeScript](https://www.oreilly.co.jp/books/9784873119045/)

TS を扱う上で JavaScript も学ぶに越したことはないですが、
一先ず TS を学び、必要に応じて [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript) を参照するのが良いと思います。


### コンポーネント設計を学ぶ

コンポーネント設計についての知識あるなしで
実際の現場のコードを見た時、
*「どの階層にどのコンポーネントのファイルがあるか見つけるスピードが違うなあ……」*と思いました。
また、コンポーネント設計が必要になった時にとても困ったのを覚えています。

ページの要素を小さい単位にしていく **Atomic Design** についてと、
見た目とロジック（実際の処理の記述）を分ける
**プレゼンテーショナルコンポーネント・コンテナーコンポーネント**の思想について理解出来れば良いと思います。

（最近は上記を用いない思想も増えていますが、根幹の知識として学んでおいて損はしません）

### CSS を学ぶ

現場の開発において、デザインから実装に落とし込む作業が生じた時に
*「 CSS の勉強ちゃんとしておけば良かった……」*と思いました。

* 基本構文
* block 要素と inline 要素の違い
* padding と margin
* Flexbox

CSS についても [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS) を参照するのが良いと思います。
学習用として [CSS の基本](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics) も用意されています。

CSS フレームワークについては、プロジェクトによって使われているものが異なるのと、
CSS が出来れば後からで何とかなると思うので優先度は落ちるかなと思います。
（CSS in JS, Sass が何か程度は知っていると良いです）

## サーバーサイド

### （Web） API 設計を学ぶ

実際の運用に耐えうる設計が必要になってくると、雰囲気 API 設計では辛くなってきます。
**エラー時のレスポンスも考慮した設計**にする必要があるので、
*「体系的な知識をおさえておきたかったな……」*と思います。

* REST の原則
* REST API の基本

辺りになるかなと思います。

### データベース設計の体系的知識を学ぶ

意外と漏れがちなデータベース設計ですが、API 設計にも関わってくる部分が大きいので

* RDB の基本的な論理設計
* SQL の基本構文
* 正規化
* アンチパターン

辺りについて、前もって抑えておきたかったなと感じています。

現在進行系で [達人に学ぶDB設計 徹底指南書](https://www.shoeisha.co.jp/book/detail/9784798124704)、[達人に学ぶSQL徹底指南書](https://www.shoeisha.co.jp/book/detail/9784798157825)、[SQL アンチパターン](https://www.oreilly.co.jp/books/9784873115894/) を読んでいますが、
*「在学中に読んでおきたかったなあ……」*と思います。


## インフラ(サーバーレス)

### デプロイをする

後述の [Web アプリを作ってリリースする]() に関連した内容になります。
AWS でも GCP でも Azure のうち何れでも良いので
*「実際に動くアプリをデプロイする経験をしておきたかったなあ……」*と思います。

デプロイして正常に動く状態まで持っていくまでの障壁はいくつかあり、
あるあるなものだと「ローカルだと表示されたページがデプロイすると正しく表示されない」（SSG関連）などがあります。

経験があることで「デプロイ後」まで意識した実装ができるようになるので、
自分以外のユーザーがいない場合でも、デプロイを経験しておくことがオススメです。

## その他全般

### 得意なプログラミング言語をつくる

色んな言語が中途半端な状態で入社したので、コーディングでかなり苦労しました。
*「なにか一つ武器といえる言語をつくりたかったなあ……」*と思います。

Python でも C でも Java でも何でも良いので、得意と言えるレベルまで極めた言語が一つあれば
**他の言語を勉強する際に飲み込みが速い**です。

### Web アプリを作ってリリースする

* コンポーネント設計
* データベース設計
* API設計
* デプロイ作業

を含む*「 Web アプリを作っておきたかったなあ……」*と思います。

特に設計系は**やってみて初めて分かること**だらけなので、
自分に何が不足しているかの洗い出しもできます。

この経験があるないで成長速度が段違いだったと思うので、もっと早くにやっておきたかったです。

# やっていて良かったなあと思うこと

ここからは、少しだけ「やっていて良かったなあ」と思うことについて触れます。

## 情報工学の基礎に関する勉強

大学、大学院時代の勉強がふとした時に生きているな〜と感じます。

**体系的な知識** があることによって

* 「この用語分からない」が少ない
* 「この人が何を言っているかよく分からない」というときに調べ方が分かる（アタリがつく）

というメリットを感じています。

## 内定者アルバイト

**社員の方からフィードバックをもらえる**ので、
「やっていることが正しいか」の確認をもらうことが出来たり、
自分が持っていない +α な知識を教えてもらえます。

また、**いち早く会社で使われている技術についてを学ぶ**こともできます。
GraphQL を実際に触る機会は、内定者アルバイトならではだったなあと思います。
（自分で Web アプリを作ろうとすると、
　最初の選択肢に REST API ではなく GraphQL があがることってほとんど無いと思うので……）

# まとめ

入社してからを振り返りつつリスト化してみましたが、項目がかなり多くなってしまいました。
すべての項目が出来るのが理想ですが、**どれかしらを先取りをする**だけでも変わってくるかなと思います。

個人的なオススメは、
**「WEB アプリを作ってリリースする」→「特に足りないと思ったところをおさえる」**
流れです。
この順序であれば自分に不足している箇所を洗い出しつつ、特におさえたいところから潰していけます。

というわけで、入社前にタイムスリップ出来ない私は**今から**頑張っていきたいと思います。