【Web系エンジニア向け】ロードマップ 本学習編

## Web系エンジニアとは
WebサイトやWebサービスを制作するエンジニアのこと

## Web系エンジニアに必要な知識・技術
Web系エンジニアに必要となる知識・技術は、以下の通り。

- HTML・CSSの知識
- JavaScriptの知識
- JavaScriptライブラリの知識 (React,Vue)
- サーバーサイド向けの言語(PHPやRubyなど)の知識
- レンタルサーバーの知識
- クラウドサービス(AWS・Firebaseなど)の知識
- Gitの知識
- コミュニケーション能力
- 発想力・論理的思考能力

フロントエンドからバックエンドまで1人から少数でやることがあるため、
それらを網羅する知識が必要です。
また、クライアントとも直接やりとりする事も多いため、
コミュニケーション能力は必須です。
さらにクライアントのニーズに応える上でも、
柔軟な発想力は必要でしょう。

## 本での学習でWeb系エンジニアになるためのロードマップ
本での学習の良いところは、コピペをせずに実際にコードを書いて学べることなので、
その特徴を存分に使っていきましょう。
ただ読むだけの小説などと違い、実際にパソコンを使って操作しながら本を読んでいくことで
より理解が深まります。

- 総学習時間約430時間(推定)
- 総額約3万

### [Progate](https://prog-8.com/)でプログラミング知る (推定学習時間: 50時間)
ここは避けては通れないです(^^)
まずは、プログラミングでどういう事ができるのかと、プログラミングはどうやってやるのかというのをProgateを使って学びます。
この段階で面白くないという人は、正直エンジニアになる事をオススメしません。おそらくあなたには別の仕事が合っていると思います。

Progateの活用法としては、

- 無料で出来る所を全て1周してみる。
- 全て理解しようとせず、何となく理解していく
- 同じような書き方をするのも多い事も気がつくと思うので、それはよく使うと思っておく
- 書き方はいつでも調べれば良いので、書き方はメモ等しなくて良い
- 1周して全く分からない状態なら、もう1周だけしてみる(3周以上はしなくてOK)

[Progate](https://prog-8.com/)

### 1冊ですべて身につくHTML&CSS Webデザイン入門講座 (推定学習時間: 50時間)
この本で基本的なWebサイトの作り方を学んでいきます。
とりあえずこの本に書いてあることを一通りやって、
それからオリジナルでWebページを３つほど作ると力がつきます。

### 確かな力が身につくJavaScript超入門 (推定学習時間: 50時間)
この本でJavaScriptの基本を学んでいきます。
一通りやったら、あとはたまに逆引きの辞書のような使い方をしましょう。

### プロになるためのWeb技術入門 (推定学習時間: 10時間)
この本でWebに関する色々な知識を学んでいきます。
この本は、上級者でも知らなかったということが詰まっている本で、
同時に早く知りたかったということも多く学べるので、この本は必読書だと思い、
このロードマップに入れることにしました。
１通り読み、忘れた頃にもう一度読む感じで学習しましょう。

### リーダブルコード (推定学習時間: 10時間)
この本で読みやすいコードとは何かというのを学んでいきます。
プログラムというのは、基本的に1人だけで作るというものではないので、
誰もが見やすいコード、わかりやすいコードを書けるようになることは非常に大事です。
ここまでで、HTML・CSS・JavaScriptを学んできて、
コードをある程度書けるようになったこのタイミングでこの本をピックアップしました。
これも１通り読み、忘れた頃にもう一度読む感じで学習しましょう。

### Webデザイン良質見本集 (推定学習時間: 10時間)
この本でWebデザインを学んでいきます。
たくさんのWebデザインが載っているので、それをみながら、こういうデザインが
ウケるデザインなのだと頭に刷り込んでいきます。
この本は一通り読む感じで、暇な時にさっと目を通してみるという使い方をしていきます。

### PHPふりがなプログラミング (推定学習時間: 30時間)
この本でPHPを学んでいきます。
正直JavaScriptが理解できた状態であれば、別のPHP本でも良いですが、
この本がわかりやすいのでこれをピックアップしました。

これまで学んできたことと少し変わり、PHPはサーバー側で動く言語です。
他にもRubyやJavaScriptなどありますが、WordPressで使われているのがPHPなので、
PHPをピックアップしました。
PHPを使って一から何か作れとは言わないし、そんなことする開発者はいないので、
この本を一通りやっておくだけでOKです。

### WordPressデザインレシピ集 (推定学習時間: 50時間)
この本で学ぶというよりは、活用しながらWordPressを操作していきます。
WordPressとは、Webサイトを作ることが簡単にできるツールで、
Web制作をやる方には必須のスキルかなと思います。
WordPressのサイト構築を、この本で逆引きしながらやっていきます。

### JavaScript本格入門 (推定学習時間: 60時間)
この本で、JavaScriptを本格的に学びます。
前やった部分とかぶるところもあると思うので、そこはさらに理解度を上げてやっていってください。
この本を一通りやれたらもう十分なJavaScriptスキルが身に付くと思います。

### 基礎から学ぶVue.js (推定学習時間: 40時間)
この本でVue.jsを学んでいきます。
Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのことです。
結構採用している企業も多く、かなり流行っているし、使い勝手が良いので、
Web系エンジニアには必須のスキルだと思いピックアップしました。
Vue.jsを学ぶならFirebaseも学ぶとより幅が広がると思うので、そちらも是非。

### Webサイト高速化のための 静的サイトジェネレーター活用入門 (推定学習時間: 40時間)
この本でサイトの公開方法や静的サイトジェネレータを学んでいきます。
これからのWebサイトに求められるものが詰まった1冊だと思うので、これは一通りやっておくと良いと
思ったのでピックアップしました。

### Web制作者のためのSassの教科書 (推定学習時間: 30時間)
この本でSassを学んでいきます。
Sassは、CSSを効率的に記述できるようしたもので、
最近のWeb開発はこれを使うことが一般的になっているので
これをピックアップしました。
一通りやりましょう。

### [ランサーズ](https://www.lancers.jp/)で実績を積む
ランサーズは、クラウドソーシングと呼ばれるもので、仕事を頼みたい人と仕事を受けたい人をマッチングするサービスです。
こちらで自分のできそうな案件(HTML&CSSのコーディング、WordPressサイト構築など)を2,3件やれたら上出来です。実際は競合が多過ぎて、単価を安くしていくしかないので、実績を積む程度に活用します。
ただ、案件が取れなさそうであれば、スキップしてOKです。

[ランサーズ](https://www.lancers.jp/)

### 就職して、実務を積む
会社への就職を目指していきます。就活の方法は何でも良いです。Greenなどのエンジニア向け求人サイトでも良いですし、エージェントを使っても良いです。

ここで言っておきたいのが、最初は期待し過ぎない事です。
会社に就職したらエンジニアだし30万くらい貰えるんだろうなとか、メルカリみたいなサービス作れるんだろうなとか、リモートで働くの当たり前なんだろうなとか…

大抵の場合、給料20万くらいだし、最初はコード書かないでテストや仕様書を読み込むだけというのもあるだろうし、9時出社毎日3時間以上残業なんかもザラです。ですが、2年目からは全てが追い風なので、それを期待しながらそのままスキルアップしていきましょう。

エンジニアの良い点としては、技術さえあれば、好きな環境で働く事も選べます。しかしながら、まずは経験、それが何よりも指標となります。
実際の仕事を経験して、仕事で使うスキルと自分が学んできたスキルのギャップもあると思います。
その中で、自分のより良いと思う道に進んでいきましょう。

## まとめ
他にも学んでおくと良い本をピックアップしたので、気になる方はやってみてください！

- HTML&CSSデザインレシピ集
- JavaScriptコードレシピ集
- ブレイクスルーJavaScript
- Bootstrap 4 フロントエンド開発の教科書

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)