Web Developer Roadmap 2020版が出ていたので2019版と比較

## はじめに
<a href='https://roadmap.sh/'>WEBエンジニアのためのロードマップ(https://roadmap.sh)</a>が2020版に更新されていたので2019版と合わせてざっとですがまとめます。

1つ1つの説明はしないので画像の図を読んでいただくか、<a href='https://qiita.com/ushironoko/items/a2420cf4a28af56907e5' target='_blank'>2019版を詳しくまとめてくださっている記事</a>を拝読するとよいかもです。

## Introduction
2019

![introdcution 2019](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F158621%2F31f62dd0-cc5f-ed62-632b-0f4f42cff8f6.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=d3c99700a3db7e813ae92fd22c24c9e9)

2020

![introduction 2020](https://github.com/kamranahmedse/developer-roadmap/raw/master/img/intro.png)

Choose your path は昨年と変わらずですが、SOLID, KISS, YAGNIが消えています。
個人的には大事なことだよなーと思ったのですがなくなってしまったようです。
あとは色の説明がなくなっていますが色分けはされているので意味は去年のままという認識です。

- 黄色→ 作者のおすすめ
- オレンジ → その他の選択肢など
- グレー → 非推奨


## Frontend Roadmap
2019
![Frontend 2019](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F158621%2F1df396a0-2742-fd88-c1a6-8fceac12541b.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=d2f68c5bc4bd14394a45f8b9a2510755)

2020
![Frontend 2020](https://github.com/kamranahmedse/developer-roadmap/raw/master/img/frontend.png?year-2020-1)

### Internet
2020版から追加されました。たしかに今までなぜなかったんだという感じ。
インターネットの挙動、HTTPとは、ブラウザの挙動、DNSなど基本的なことを学びましょうということです。
ただ学ぶ順番は自由でいいよーとのことです。知っていると絶対にいいのですが、必要に迫られてやる機会はあまりない気もするので早めに時間取ってやるのがいいと思います。

### HTML
HTMLには「フォームとバリデーション」と「慣例とベストプラクティス」が加わりました。

## CSS
CSSでは「メディアクエリ」が「レスポンシブデザインとメディアクエリ」になりました。
また当たり前だろうということなのか、CSS3が消えました。

### Version Control System
JSの次にバージョン管理システムが追加されました。
GitとGithubの使い方をこの時点で学べよということみたいです。

### Web Security Knowledge
上のバージョン管理システム同様、新しく追加された項目です。
HTTPS、CSP、CORS、OWASPの上げているリスク項目が上げられています。

### CSS in JS
中の項目は変わらずですが、CSS in JS が黄色に。

### Web Components
新しく加わった項目です。
中には「HTMLテンプレート」、「カスタム要素」、「Shadow DOM」があります。
ただこちらは黄色ではないようです。

### CSS Framework
CSS FrameworkはJSベースのものも加わりました。
加わったフレームワークは下記でどれも黄色です

- Reactstrap
- Material UI
- Tailwind CSS
- Chakra

### Type Checkers
Type Checkers では「TypeScript」は変わらずですが「Flow」が非推奨になりました。
また細かいですが次のPWAと順番が入れ替わっています。

### PWA
ここ最近話題のPWAが黄色に変わりました。中の項目はそのままです。

## Server Side Rendering
こちらも黄色になりました。中身に大きな変化はありませんが、After.jsがグレーになりました。

### GraphQL
こちらも新規追加。
Apollo と Relay Modern が項目としてあります。
2つの比較は<a href='https://www.prisma.io/blog/relay-vs-apollo-comparing-graphql-clients-for-react-apps-b40af58c1534' target='_blank'>こちら</a>

## Back-end Roadmap
2019

![Back-end 2019](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F158621%2Fbff1ac3f-cace-745a-a2e4-5eff8af827ef.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=a5c1d98fc2783ed2586d1f0c8d9d0e54)

2020

![Back-end 2020](https://roadmap.sh/roadmaps/backend.png)

大きな変化なし
と思ったら1/17に更新されたようです。また追って書きます。
一旦画像だけ新しいものに貼り直します。

## DevOps
2019

![DevOps 2019](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F158621%2F2b26472d-ee02-771b-eaf1-477089167fe9.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=a95e1af18e9549c0d65a14603dce82ef)

2020

![DevOps 2020](https://github.com/kamranahmedse/developer-roadmap/raw/master/img/devops.png)

大きな変化なし

## さいごに
バックエンド、DevOpsには大きな変化なく、フロント側に変更がありました。
とはいえ大きな主流とそこまで変わらないイメージなので、すでにエンジニアで2019版を見ていた方はざっと見程度でいい気がします。
これからエンジニアになろうとしている人や初心者の方はこの全体像を参考にして勉強進めるのがよいかなと思います。