はじめに

Reactの開発者として学びたい初学者の方々にとって、以下の疑問が生じるかもしれません。

Reactを学ぶ前にどれくらいのJavaScriptを学ぶべきか？」「どの程度のJavaScriptの知識があれば、Reactを始められるのか？」。

このような疑問は非常に一般的であり、バニラJavaScriptの基礎を学ぶ必要があります。

また、最新の構文や機能を持つES6も理解する必要があります。

Reactの名前は聞いたことがあるけれど、詳しく知らないという方には、以下にReactについての説明を用意しています。

dev-k.hatenablog.com

さらに、Reactを始める前に知っておくべきJavaScriptのスキル、ライブラリ、ツールなどもリストアップしています。これらをマスターすることで、より効果的なReact開発が可能になるでしょう。

それでは、現役のReactプログラマーがReactを学ぶ前に学ぶべきことをそれぞれ、「絶対条件の必須級」と「学習しておけば尚良い(初心者のうちは無理して覚える必要はない)」に分割していきます。

初心者が効率良く学習を進められるように、React.jsに必要のないスキルは、リストから完全に除外しております。

ReactでのJS必須級のスキル

JavaScriptプログラミングの基本構文の理解: 変数、定数、文字列、配列、関数、ループ、条件などの基本的なプログラムの実行方法について理解していること。
HTML/CSSとの連携: HTML/CSSとJavaScriptを連携させる方法について理解していること。
ネットワーク要求、アラート、DOMの変更、イベントリスナー、非同期動作に関する基本的な操作: コールバック、高階関数、Promises、async/await、AJAXリクエストの処理方法などについて理解していること。
ES6クラスの基本的な理解: クラスの構成、継承、インスタンス化、コンストラクター、メソッドとプロパティについて理解していること。
モジュールシステムの理解: インポートとエクスポートに関する基本的な理解を持っていること。
演算子の理解: スプレッド演算子、三項演算子、論理演算子、比較演算子などについて理解していること。
JavaScriptのデータ構造とデータ型の理解: 文字列、ブール値、undefined、null、オブジェクトなどのデータ型について理解していること。
JavaScriptの関数とプログラム作成の能力: 素数の計算や順次処理など、JavaScriptを使用した基本的な操作や関数の作成ができること。
コマンドラインインターフェース(CLI)の基本的な操作: フォルダの作成、スクリプトの実行、ファイルの削除、ファイルシステム内の移動方法などについて理解していること。
Reactに関する基本的な知識: Reactの基本的な概念やコンポーネントの作成方法について理解していること。
問題解決能力: 問題が発生した際に自力で解決するための調査能力やググり力を持っていること。

React.jsプログラマーを目指す際には、連想配列や多次元配列の概念と操作方法を学ぶことが重要です。これにより、データの構造化と管理が容易になります。

また、Reactアプリケーションでは、よく使用される配列メソッドであるmapとfilterの使い方を理解することが必要です。これらのメソッドを適切に活用することで、柔軟なデータ操作が可能となります。

さらに、Reactでは条件に応じて異なる動作をするコードを書く必要があります。そのためには、Switch文、if・else文、三項演算子などの条件式を適切に利用することが重要です。

最後に、JavaScriptオブジェクトの作成方法も重要です。Reactでは、オブジェクトを使用してコンポーネントの状態やプロパティを管理します。特に、ES6のオブジェクトリテラルを使用した作成方法を重点的に学ぶことをおすすめします。

以上が、React.jsプログラマーを目指す際に重要な要点です。

これらのスキルを習得することで、より効果的なReactアプリケーションの開発が可能となります。

学んでおくと尚良い

Git/GitHubの使用方法: プロジェクトのバージョン管理やリモートリポジトリへのデプロイ方法を学ぶことが役立ちます。
Node.jsとnpmの使用方法: パッケージ管理ツールであるnpmやyarnの基本的な使い方を理解しましょう。
静的サイトのホスティングプロバイダー: netlifyやvercel、GitHub Pagesなど、簡単に静的サイトをデプロイできるホスティングプロバイダーについて学ぶと便利です。
デバッグとネットワークリクエストの検査: エラーデバッグやネットワークリクエストの検査に役立つツールや手法について学習しましょう。
JSON / API / HTTP/RESTの実践的な理解: データの取得や送信に関わるJSON、API、HTTP、RESTの基礎知識を深めましょう。
JavaScriptからTypeScriptへの移行: React.jsとTypeScriptの組み合わせについて学ぶことで、型安全性や開発効率を向上させることができます。
最新のWebpackとBabelについての基礎知識: React.jsプロジェクトで使用されるモジュールバンドラーとトランスパイラの基本的な知識を身につけましょう。
JavaScript ユニットテストのフレームワーク: Jestなどのユニットテストフレームワークの基本的な使い方について学ぶと品質管理に役立ちます。
DOMの深い理解: 通常のDOMと仮想DOMの概念を理解し、React.jsの動作原理を把握しましょう。
SEOの知識: UX向上のためにSEOの重要性を理解し、React.jsアプリケーションのSEO対策について学ぶことが望ましいです。
他のフレームワークの内部理解: React.jsだけでなく、Angularなど他のビューライブラリやフレームワークの内部動作について理解することで、広い視野を持つことができます。