1. ReactJS は何ですか？
ReactJS は、Facebook によって開発されたオープンソースのフレームワークであり、2013年にリリースされました。それ自体がウェブサイト上のコンポーネントとのインタラクションを構築するために使用される JavaScript ライブラリです。ReactJS の最も注目すべき特徴の一つは、データのレンダリングがサーバーだけでなくクライアント側でも行われることです。

なぜJavaScript開発者はReactJSを使用するのですか？

ReactJSは、JavaScriptのライブラリであり、開発者がユーザーインターフェース（UI）を構築するのをサポートするために特化しています。フロントエンドアプリケーションのプログラミングでは、開発者は通常、次の2つの要素に取り組むことになります：UIとユーザーの対話処理。UIは、アプリケーション上で見える要素の集合であり、メニューや検索バー、ボタン、カードなどが含まれます。たとえば、電子商取引のウェブサイトを開発しているとしましょう。ユーザーが気に入った商品を選択し、「カートに追加」ボタンを押すと、開発者は選択された商品をカートに追加し、ユーザーが表示するためにその商品を再度表示する必要があります。つまり、ユーザーの対話処理を処理する必要があります。

ReactJSが登場する前は、開発者は「バニラJavaScript」やjQueryを使用してUIを構築する際に多くの困難に直面しました。これは、アプリケーションの開発プロセスがより時間がかかり、バグやリスクが多く発生することを意味します。そのため、2011年にFacebookのエンジニアであるJordan Walkeは、UI開発プロセスを改善することを主な目的としてReactJSを作成しました。

さらに、開発プロセスのスピードを向上させ、コーディング中に発生する可能性のあるリスクを最小限に抑えるために、Reactは再利用可能なコードの機能を提供しています。これは、次の2つの重要な概念を導入することで実現されます：

JSX
仮想DOM（Virtual DOM）

ReactJSとその利点をより理解するために、これらの概念が実際にどのように機能するかを一緒に学んでみましょう。

2.1 JSX

どの基本的なウェブサイトでも、HTMLドキュメントが中心となります。ウェブブラウザはこれらのドキュメントを読み込んで、ウェブサイトのコンテンツをコンピューター、タブレット、および携帯電話に表示します。このプロセス中、ブラウザはDocument Object Model（DOM）と呼ばれるものを生成します。これはウェブサイトの構造を表すツリーです。開発者はJavaScriptを使用してDOMツリーを変更することで、自分のプロジェクトにいかなる動的なコンテンツも追加することができます。

JSX（JavaScript拡張）は、Reactの拡張機能であり、HTMLスタイルのシンプルなコードを使用してDOMツリーを簡単に変更できるようにします。また、ReactJSは現代のすべてのウェブブラウザをサポートしているため、お使いのブラウザで自信を持ってJSXを使用することができます。

2.1 JSX

あらゆる基本的なウェブサイトにおいて、HTMLドキュメントが中心となります。ウェブブラウザはこれらのドキュメントを読み込んで、コンピューター、タブレット、および携帯電話にウェブサイトのコンテンツを表示します。このプロセスの中で、ブラウザはDocument Object Model（DOM）と呼ばれるものを生成します。DOMはウェブサイトの構造を表すツリーです。開発者はJavaScriptを使用してDOMツリーを変更することで、自分のプロジェクトに動的なコンテンツを追加することができます。

JSX（JavaScript拡張）はReactの拡張機能であり、HTMLスタイルのシンプルなコードを使用してDOMツリーを簡単に変更することができます。また、ReactJSは現代のすべてのウェブブラウザをサポートしているため、お使いのブラウザで自信を持ってJSXを使用することができます。

3. ReactJSの利点

ReactJSの利点は、高速なインターフェースの構築、コーディングプロセスのエラーの制限、ウェブサイトのパフォーマンスの改善に加えて、以下の特徴があるため、ReactJSを選び、今から学び始める理由となるかもしれません：

さまざまな種類のウェブサイトに適しています：ReactJSは、純粋なJavaScriptやHTMLだけを使用してウェブページを作成する場合に比べて、ウェブサイトの作成が容易になります。ReactJSは、さまざまなケースに使用できるように、さまざまな種類の「おもちゃ」を提供しています。
コンポーネントの再利用：優れたコンポーネントを構築し、さまざまなプロジェクトの「要件」を満たす柔軟性を持たせると、初期の構築に時間をかけ、その後のプロジェクトでほぼすべてを再利用することができます。これはReactJSだけでなく、現在の他のフレームワークも同様です。例えば、Flutterなどです。
モバイルアプリケーションにも使用できます：ほとんどの人が知っているように、ReactJSはウェブプログラミングに使用されますが、それだけで作られたわけではありません。もしモバイルアプリケーションを開発する必要がある場合は、React Nativeという別のフレームワークを使用してください。これはFacebook自体が開発したもので、コンポーネントの共有やアプリケーション内のビジネスロジックの再利用が簡単に行えます。
SEOに対応しています：SEOは、ウェブサイトの情報をGoogleの検索結果のトップに表示するために欠かせない要素です。ReactJSはJavaScriptのライブラリであり、Googleの検索エンジンは現在、JavaScriptのコードをクロールおよびインデックスすることができますが、これをサポートするためにいくつかの追加のライブラリが必要です。
デバッグが容易です：Facebookは、アプリケーションの開発プロセスでデバッグに使用されるChrome拡張機能をリリースしました。これにより、製品のリリースプロセスやコーディングプロセスがスムーズ

に進みます。
最も人気のあるウェブ開発ツール：ベトナムのGoogleトレンドの統計を見ると、ベトナムのトップデブやItviecなどの主要な求人サイトを見ても、React Developerの求人数が非常に多く、魅力的な給与水準とともにReactJSの現在の市場での普及度がわかります。

4. ReactJS Developer Roadmap

以下はadam-golabによって設計されたReact Developer RoadMapのイメージです。これには、React開発者になるために学ぶ必要のある基本的な事柄、必須の事柄、および追加のコンテンツの概要が含まれています。

基礎知識

Web開発のフレームワークやライブラリを学ぶ場合でも、基礎知識は必要です。それらの基礎知識とは、HTML、CSS、およびJavaScriptのことです。これら3つは、Web開発の基盤となる要素です。

HTML

これは最初の基盤の一つであり、Web開発者にとって最も重要なスキルです。HTMLはウェブページの構造を作成します。

CSS

これはWeb開発の2番目の基盤であり、ウェブページをより美しく見せるために使用されます。

JavaScript

これはWeb開発の3番目の基盤であり、ウェブページを対話的にするために使用されます。これはまた、Reactライブラリの目的でもあります。したがって、React JSを学ぶ前にJavaScriptを理解しておく必要があります。

一般的な開発スキル

フロントエンド開発者であろうとバックエンド開発者であろうと、あるいはフルスタックのソフトウェアエンジニアであろうと、生き残るためには共通の開発スキルを持つ必要があります。以下はその一部です。

GITを使用する

GitHubでいくつかのリポジトリを作成し、コードを他の人と共有し、お気に入りのIDEからGitHubからコードをダウンロードする方法を学んでみましょう。

HTTP(S)プロトコルの理解

Web開発者になりたい場合、HTTPについて理解し、詳細に知っている必要があります。すべての技術仕様を読む必要はありませんが、少なくともGET、POST、PUT、PATCH、DELETE、OPTIONSなどの標準的なHTTPリクエストメソッドとHTTP / HTTPSの動作には慣れている必要があります。

ターミナルの理解

フロントエンド開発者はLinuxやターミナルを学ぶ必要はありませんが、ターミナルに慣れておくことは無駄ではありません。

アルゴリズムとデータ構造の理解

これはReact開発者になるために必要ではありませんが、プログラミングの基礎知識として持っている必要があります。

デザインパターンとソフトウェアアーキテクチャの理解

アルゴリズムとデータ構造と同様に、React開発者になるためにデザインパターンを学ぶ必要はありませんが、学んだ方が作業がはるかにスムーズになります。デザインパターンはソフトウェア開発プロセスで日常的に発生する問題に対する試行錯誤済みの解決策です。

ビルドツールの理解

プロのReact開発者になりたい場合、ビルドツール、ユニットテストツール、デバッグツールなど、使用するツールに慣れるために時間を割くべきです。

以下は、このロードマップで言及されているいくつかのビルドツールです：

パッケージマネージャー

npm
yarn
pnpm
タスクランナー
npmスクリプト
gulp
Webpack
Rollup
Parcel

これらすべてのツールを学ぶ必要はありません。初心者の場合は、npmとWebpackだけを学ぶだけで十分です。Web開発とReactエコシステムについてより深く理解した後で、他のツールを探索することができます。

スタイリング

フロントエンド開発者になりたい場合は、スタイリングについて少し知っておくことは役に立ちます。RoadMapでは、CSSプリプロセッサ、CSSフレームワーク、CSSアーキテクチャ、およびJS内のCSSなどについて多くの内容が言及されていますが、最初にBootstrapを学ぶ必要があります。Bootstrapは、いつでもどこでも使用することができる最も重要なCSSフレームワークです。

ステート管理

これはReact開発者が注力すべきもう一つの重要な領域です。ロードマップでは、理解する必要がある概念やフレームワークが言及されています：

コンポーネントのステート/コンテキストAPI
Redux
非同期アクション（副作用）
Redux Thunk
Redux Better Promise
Redux Saga
Redux Observable
ヘルパー
Rematch
Reselect
データ永続性
Redux Persist
Redux Phoenix
Redux Form
MobX
React Hooks

上記のリストが圧倒的な場合は、最初にReduxに集中することをお勧めします。

タイプチェッカー

JavaScriptは強力な型付けの言語ではないため、型に関連するバグをキャッチするコンパイラを持つことができません。

アプリケーションを開発する際、型チェックに関連する多くのエラーに遭遇することがあります。FlowやTypeScriptなどのJavaScriptの拡張ツールを使用して、アプリケーション全体をチェックすることができます。

200labでは、ReactJSの高度なコースがあり、その中にはTypeScriptのトピックも含まれていますので、ぜひ参考にしてください！

フォームヘルパー

タイプチェッカーの他にも、Redux Formなどのフォームヘルパーを学ぶこともおすすめです。これらはRedux内でフォームの状態を管理するための最良の方法を提供しています。Redux Form以外にも、Formik、Formsy、Final Formなどを参考にすることもできます。

 

 

ルーティング

コンポーネントはReactの中心的な要素であり、ルーティングコンポーネントはどのアプリケーションにも欠かせない要素です。

React-Routerの他にも、Router 5、Redux-First Router、React Routerなどを参考にすることもできます。

APIクライアント

現代の世界では、独自のGUIを構築することはほとんどありません。代わりに、RESTやGraphQLなどのAPIを使用して他のアプリケーションとやり取りする何かを作成することになります。幸いなことに、React開発者向けには多くのAPIクライアントアプリケーションが利用可能です。

REST

Fetch
SuperAgent
Axios

GraphQL

Apollo
Relay
urql

特にApollo Clientは優れたアプリケーションです。GraphQLを使用してクライアントアプリケーションを構築するための簡単な方法を提供しています。

200LabのReactJSコースでは、GraphQLとApolloについて詳しく解説していますので、ぜひ参考にしてください。

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

これらは、作業を容易にするためのライブラリです。React開発者向けには、以下のリストに示すような便利なライブラリが多数利用できます。

Lodash
Moment
classnames
Numeral
RxJS
Ramda
テスト

これは、React開発者にとって重要なスキルの1つであり、しばしば見落とされがちです。ですので、価値を高めたいのであれば、テストプロセスで役立つライブラリの学習に集中することをお勧めします。

以下は、ロードマップで言及されたライブラリのリストです。

ユニットテスト

Jest
Enzyme
Sinon
Mocha
Chai
AVA
Tape

統合テスト

Selenium, Webdriver
Cypress
Puppeteer
Cucumber.js
Nightwatch.js

インテグレーションテスト

Karma

テストは、200LabのReactJS上級コースでも非常に興味深いトピックです。

国際化

これは、世界中で使用されるユーザーインターフェースの開発においても重要なトピックです。日本、中国、スペイン、および他のヨーロッパ諸国のローカライズされたGUIのサポートが必要な場合があります。

次の技術を学習することを示唆するロードマップ：

React Intl
React i18next

これらの両ライブラリは、Reactコンポーネントと日付、数値、および文字列のフォーマットを提供し、多言語化と処理を含んでいます。

サーバーサイドレンダリング

ロードマップでは、次のようにサーバーサイドレンダリングを提案しています：

Next.js
After.js
Rogue

これら3つのうち、Next.jsだけを学習するだけで十分です。

静的サイトジェネレータ

Gatsby.jsは、モダンな静的サイトジェネレータです。Gatsbyを使用して、パーソナライズされたウェブサイトやログイン機能を持つウェブサイトを作成することができます。これらは、データをJavaScriptと組み合わせて標準的なHTMLコンテンツを生成します。

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

React on Railsは、FacebookのフロントエンドフレームワークであるReactをRailsと統合します。これにより、サーバーレンダリングが提供され、通常はSEOのためのインデックス作成およ

びUXパフォーマンス情報の収集に使用されますが、rails / webpackerでは提供されません。

モバイル

React学習は、モバイルアプリケーションの開発において本当に役立つ別の領域です。React Nativeは、ネイティブのユーザーインターフェースを使用してJavaScriptでモバイルアプリケーションを開発するための標準的な手段となりつつあります。

以下のライブラリを学習することを示唆するロードマップ：

React Native
Cordova / PhoneGap

ただし、React Nativeの学習だけで十分です。

デスクトップ

Reactに基づいたデスクトップGUIを構築するためのいくつかのフレームワークも存在します。たとえば、React Native Windowsは、Reactを使用してネイティブのUWPおよびWPFアプリケーションを作成することができます。

以下は、フレームワークが示唆するライブラリです：

Proton Native
Electron
React Native Windows

ただし、これらはすべて高度な学習のためのものです。Reactを十分にマスターした後に参照することができます。

仮想現実

仮想現実に基づいたアプリケーションの構築に興味がある場合、React 360などのフレームワークもあります。これにより、Reactを使用して面白い360度体験や仮想現実体験を作成することができます。

これがReactのロードマップに関するすべてです。

総合的な絵が見えたでしょう。学ぶ必要がある知識に対して興奮したり、少し圧倒されたりするかもしれませんが、一歩ずつ始めてください。堅固な基盤ができると、後続の知識はより速く学ぶことができるようになります。

この記事を通じて、ReactJSについてのより包括的な概観と、私たちにもたらす実際の利益について理解していただけたことを願っています。