
Reactの勉強の指針として参考になる、Webエンジニアが次に何を学ぶべきかを示したロードマップです。

最初のWeb Developerの図に記載の通り、黄色は「作成者のおすすめ（Personal Recommendation）」、肌色は「選択肢としてあり（Available Options）」です。

## Web Developer in 2019

![Web Developer in 2019](./developer_roadmap_2019_01.png)  
Web Developer in 2019（[https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)）より

sitmkさんのブログで詳しく解説されています。  
[WebエンジニアになるためのDeveloper roadmap](https://qiita.com/sitmk/items/2e7e2644fcf1b4216e53)

## Frontend Developer

![Web Developer in 2019](./developer_roadmap_2019_02.png)  
Roadmaps for Developers（[https://roadmap.sh/frontend](https://roadmap.sh/frontend)）より

「CSS」のGridはIEへの対応を考えて使用を避けていましたが、基本的な機能はサポートされるようになりました。「CSS Pre-processors」はLessの使用もまだ少し見られるけど、これから始めるのであれば主流のSASSが良さそうです。

少し進んで「Pick a Framework」では、フレームワークを始める前に「SPA（Single Page Applications）」とは何か、そのメリット・デメリットについてを理解するべきと書かれています。

「Testing your Apps」はテストツールで、「[Jest](https://jestjs.io/)」はFacebook製のBabel、TypeScript、Node、React、Angular、Vueなどに対応したJavaScriptのテストフレームワーク。「[Enzyme](https://github.com/airbnb/enzyme)」はairbnb製のReact向けのテストユーティリティ。「[Cypress](https://www.cypress.io/)」はブラウザテストツール。これらの3つを使用することで、全てのニーズを満たすことができるとのことです。

また、上記のテストに関連して、「単体テスト（Unit）」「結合テスト（Integration）」「機能テスト（Functional）」について理解し、これらの書き方を学びましょうとあります。

フレームワークやサーバーサイド、モバイルアプリは全てReact.js（+ Next.js）ですね。Static Site Generatorsのおすすめ「GatsbyJS」もReactがベースになっています。

## React Developer in 2019

![React Developer in 2019](./developer_roadmap_2019_03.png)  
React Developer in 2019（[https://github.com/adam-golab/react-developer-roadmap](https://github.com/adam-golab/react-developer-roadmap)）より

Adam Golabさんが作成したReact版のロードマップです。

HTML、CSS、JS Basics、General Development SkillsはWeb開発/フロントエンドのロードマップと重なる部分が多いです。「CSS Preprocessors」はSASSに加えてPostCSSも必須になっています。

「状態管理（State Management）」は「[Redux](https://redux.js.org/)」が挙げられています。

APIクライアントは必須として「REST」、覚えておくと良いものとして「[GraphQL](https://graphql.org/)」が挙げられています。「GraphQL」はAPI用のクエリ言語で、先ほども名前が出た「GatsbyJS」でも採用されています。

ユーティリティライブラリーには主に配列を処理する「[Loadash](https://lodash.com/)」、日付や時刻を操作する「[Moment](https://momentjs.com/)」、条件付きでclassNamesを結合するライブラリ「[Classnames](https://github.com/JedWatson/classnames)」の3つが必須として挙げられています。

テストツールはフロントエンドにあった「Cypress」がなく「[Sinon](https://github.com/sinonjs/sinon)」が入っています。「Sinon」はテストダブルを行うツールです。ダブルは代役や影武者といった意味もあり、映画の撮影などで演奏シーンやプロの技術を要するシーンの撮影に使用されるボディダブルという役割があります。Web制作においては、テストダブルがある状況を作り出し、それをもとにプロジェクトやアプリの検証を行います。

同じくテストから線が伸びている「E2E Testing」。E2Eは「End to End」の略でアプリなどを実際にサーバーやブラウザを立ち上げて初めから終わりまで一通り操作を行うテストです。


web開発/フロントエンド/React開発を学ぶためのロードマップ

Tags