開発者のためのReactJSロードマップ

2020/10/15 07:27

ThemeSelection    
高品質でモダンなBootstrap HTMLテーマや管理者向けテンプレートを提供するUIキットベンダ
この記事は、著者の許可を得て配信しています。
https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824

ReactJSまたはReactは、ユーザーインターフェイスやUIコンポーネントを構築するためのオープンソースのフロントエンドのJavaScriptライブラリです。Facebookや個人の開発者や企業のコミュニティがメンテナンスをしています。近年、コンポーネントベースのGUI開発に最適なライブラリの一つとして成長しています。

AngularやVue.jsのようなフロントエンドフレームワークは他にもありますが、Reactが他と違うのは、コンポーネントベースのGUI開発だけに焦点を当てており、他の分野を侵していないことです。

React開発者になるためのロードマップ:

以下は、あなたがReact開発者になるために学ぶべき道筋とライブラリを示したチャートです。このチャートはAdam Gołąb氏が作成したものです。

注:このロードマップは、どこから始めればいいのか、次に何を学べばいいのか混乱している場合に、解決するヒントを与えてくれ、あなたを導いてくれるものです。最終的には、あるツールがなぜ他のツールよりもいくつかのケースに適しているのかについての理解を深めることがでるようになりますが、それはあなたの経験が関連してきます。便利でトレンディなものが常に完璧であるとは限りません。だからこそ、マップを利用して開発を開始してください。

ロードマップ



Adam Gołąb

ロードマップ

リソース

1. 基本: HTML, CSS & JS

i. HTML:ウェブページの構造のための言語で、ウェブ開発者にとって最初の柱であり、最も重要なスキル。

  • HTMLの基礎を学ぶ
  • 練習として数ページを作成する

HTMLのチュートリアルはこちらをチェックしてみてください。

ii. CSS: Web開発の第二の柱で、Webページのスタイルを整えるために使用される

  • CSS Styleページの基本を前回のステップから学ぶ
  • グリッドとフflexboxを使ったページの構築

CSSのチュートリアルはこちらをチェックしてみてください。

iii. JSの基本:ウェブ開発の第三の柱であり、ウェブページをインタラクティブにするために使用される

  • シンタクスに慣れる、 DOM の基本的な操作を学ぶ
  • JSに代表されるメカニズムを学ぶ(ホスティング, イベントのバブリング,プロトタイピング)
  • AJAX (XHR) コールを作成する、 新機能を学ぶ (ECMA Script 6+)
  • さらに、jQuery ライブラリに精通するようになる

JavaScriptのチュートリアルはこちらをチェックしてみてください。

2. 一般的な開発スキル

  • Gitを学び、GitHub でいくつかのリポジトリを作成し、他の人とコードを共有する
  • HTTP(S) プロトコル、リクエストメソッド (GET, POST, PUT, PATCH, DELETE, OPTIONS) を知る
  • Googleを使うことを恐れない、GoogleでPower Searchをする
  • ターミナルに慣れ、シェルをコンフィギュアする (bash, zsh, fish)
  • アルゴリズムやデータ構造に関する本を何冊か読む
  • デザインパターンに関する本を何冊か読む

3. ReactJSの公式サイトでReactを学ぶか、いくつかのコースを修了する

4. これから使うであろうツールに慣れる

React開発者になるためには、ビルドツール、ユニットテストツール、デバッグツールなど、ウェブ開発者として使うツールを学ぶべきです。
ビルドツールのいくつかを紹介します:

i. パッケージマネージャ
- npm
- yarn
- pnpm

ii. タスクランナー
- npm scripts
- gulp
- Webpack
- Rollup
- Parcel

5. スタイリング

i. CSSプリプロセッサ

CSSプリプロセッサとは、プリプロセッサ独自のユニークなシンタクスからCSSを生成するプログラムのことです。プリプロセッサはCSSコードを使いやすくしてくれます。

- Sass/CSS
- PostCSS
- Less
- Stylus

ii. CSSフレームワーク

CSS フレームワークとは、一般的なウェブデザインを抽象化し、開発者がウェブアプリに実装しやすいようにするコードライブラリのことです。簡単に言えば、CSSフレームワークとは、あらかじめ準備されていてすぐに使えるCSSスタイルシートの集合体です。

- Bootstrap
- Materialize, Material UI, Material Design Lite
- Bulma
- Semantic UI

より詳細な情報を知りたい方は、2020年ベストCSSフレームワークに関するこの総合ガイドをチェックするといいでしょう。

iii. CSSアーキテクチャ

- BEM
- CSS Modules
- Atomic
- OOCSS
- SMACSS
- SUITCSS

iv. JSのCSS

- Styled Components
- Radium
- Emotion
- JSS
- Aphrodite

6. 状態管理

i. コンポーネントステート / コンテキストAPI

ii. Redux

a. 非同期アクション(副作用)
- Redux Thunk
- Redux Better Promise
- Redux Saga
- Redux Observable

b. ヘルパー
- Rematch
- Reselect

c. データの永続性
- Redux Persist
- Redux Phoenix

d. Redux Form

iii. MobX

iv .Recoil

7. タイプチェッカー

8. フォームヘルパー

9.ルーティング

コンポーネントはReactのパワフルでレスポンシブなプログラミングモデルの主要な部分であり、ルーティングコンポーネントはどんなアプリケーションにも欠かせないものです。

10.APIクライアント

RESTやGraphQLなどのAPIを使って、他のアプリケーションと通信するものを作ることができます。

i. REST
- Fetch
- SuperAgent
- axios

ii. GraphQL
- Apollo
- Relay
- urql

11. ユーティリティライブラリ

仕事がよりやりやすくなります。

12. テスト

Reactデベロッパーには必須のスキルです。

i. ユニットテスト
- Jest
- React testing library
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape

 ii. End To End (E2E)テスト 
- Selenium
- Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js

iii. MIntegration テスト

- Karma

13. インターナショナリゼーション

これらのライブラリは両方とも、Reactコンポーネント、日付をフォーマットするAPI、文字列、複数化と翻訳を担っています。

14. サーバサイドレンダリング (SSR)

Reactコンポーネントはサーバー上でレンダリングされ、出力されたHTMLコンテンツはクライアントやブラウザに配信されます。Reactコンポーネントはサーバー上でレンダリングされ、出力されたHTMLコンテンツはクライアントやブラウザに配信されます。

15. 静的サイトジェネレーター(SSG)

Gatsbyを使って、パーソナライズされたログイン体験型のウェブサイト(調べましたが、例がなく。。これで大丈夫でしょうか)を作成することができます。あなたのデータとJavaScriptを組み合わせて、整ったHTMLコンテンツを作成します。

16. バックエンドフレームワークの統合

(サーバーレンダリングの)FacebookのReactフロントエンドフレームワークとRailsを統合します。サーバーレンダリングが可能になり、それは、SEOクローラーのインデックスやUXパフォーマンスの向上のためによく使われていますが、rails/webpackerでは利用できません。

17. モバイル

JavaScriptでネイティブのルック&フィールが伴ったモバイルアプリケーションを開発する標準的な方法です。

18. デスクトップ

Reactを使ってネイティブのUWPやWPFアプリを構築できるようになります。

19. バーチャルリアリティ

React 360: Reactを使用して、エキサイティングな360やVR体験ができるようになります。

Reactを使って作られたVuexy React Admin Templateをチェックしてみてください。

まとめ

このロードマップに改善点があると思う方は教えてください。アップデートを伴うPRがあれば開いて、元のgit repoであるAdam GolabのReact-developer-roadmapに問題があるのであれば、ぜひ投稿してください。

以上、デベロッパーのためのReactJSロードマップについてでした。確かに非常に包括的な内容ですが、すでに多くの人が、ほとんどの内容を把握しているかもしれません。ただ、たとえ今回の内容を初めて知ったという方でも、このロードマップに惑わされたり、圧倒されたりしなくてもいいのです。

React開発者になるための方法はたくさんあるし、もしあなたがすでにReactを知っているのであれば、2020年にはもっと多くのツールやテクノロジーを見つけ、それを活用することで、さらに優れたReact開発者になることができるでしょう。

appstore
googleplay
会員登録
URLからPICKする

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をPickして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。