Help us understand the problem. What is going on with this article?

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

はじめに

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

1つ1つの説明はしないので画像の図を読んでいただくか、2019版を詳しくまとめてくださっている記事を拝読するとよいかもです。

Introduction

2019

introdcution 2019

2020

introduction 2020

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

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

Frontend Roadmap

2019
Frontend 2019

2020
Frontend 2020

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つの比較はこちら

Back-end Roadmap

2019

Back-end 2019

2020

Back-end 2020

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

DevOps

2019

DevOps 2019

2020

DevOps 2020

大きな変化なし

さいごに

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

hirotakasasaki
マイブームはサーフィン、コーヒースタンド。ご一緒できる方ぜひに。
favy
デジタルマーケティングのスペシャリストと飲食業界出身の食のスペシャリストでチームは構成されていて、飲食市場に特化したマーケティング支援を軸に「飲食店がかんたんに潰れない世界を創る」を真剣に実現するためにチャレンジしています。
http://www.favy.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした