deve.K

エンジニアが未来を切り開く。

English

React.jsに必要なJSのスキルと知識 まとめ


スポンサーリンク

reactを始める前のJSの基礎

React開発者(プログラマー)として将来的に学びたいと思っている、またはこれから入るそんな初学者様はこのような疑問に辿り着くかと思います。

Reactを学ぶ前にどれくらいのJavaScriptを学ぶべきなのか??

どれ程JSを学んでおけばReactを始められるのか?

これはよく聞く非常に一般的な質問です。

バニラJavaScriptの基本と、ES6にある最新の構文と機能を学ぶ必要があります。

本日はReactを開始する前に知っておくべき非常に重要なJSのスキルおよびライブラリまたはツールなどを細かくリストとして紹介を致します。

Reactの名前は知ってるけど良く分からないという方はこちらへどうぞ。

dev-k.hatenablog.com

それではReactを学ぶ前に学ぶべきことをそれぞれ、『絶対条件の必須級』と『知っておけば尚良い(初学者のうちは無理して覚える必要はない)』で分割していきます。

ReactでのJS必須級のスキル

  • サーバー側とクライアント側の理解
  • 静的ページと動的ページで互いにWebサイトでどのように機能するのかおよび相互の違い
  • VSCodeのようなテキストエディタでの作業(操作と設定)
  • JSプログラミングの基本構文、主に変数/定数・文字列・配列・関数・ループ・条件などのプログラムの実行方法。
  • スコープの種類やそれらの挙動と理解、グローバルスコープ・ローカルスコープ・関数スコープ・ブロックスコープ・可変スコープ・変数の巻き上げ・入れ子の関数とクロージャなどの基礎
  • HTML/CSSおよびDOM APIを使用しJavaScriptに接続する方法についての理解。
  • JavaScriptを使用した基本的な操作、主にネットワーク要求・アラート・DOMの変更・イベントリスナー/非同期動作(コールバック/高階関数・promises・async/await・AJAXリクエストの処理方法)。
  • ES6クラス(クラスの構成・クラスの継承・インスタンス化・コンストラクター・メソッドとプロパティ)
  • モジュールシステムの仕組み主にインポート・エクスポート
  • 演算子、特にスプレッド演算子三項演算子又は論理演算子・比較演算子
  • JavaScriptのデータ構造とデータ型、識別子およびそれらの相互の違い、主に文字列・ブール値・undefined・null・オブジェクトなど。
  • JSプログラムと関数を作成する機能(例えば素数の計算、いくつかのHTTPリクエストの順次・配列関数など)
  • CLI(コマンドラインインターフェイス)、コマンドラインの操作方法、フォルダの作成、スクリプトの実行、ファイルの削除、ファイルシステム内の移動方法など ReactではすべてCLIを使用して実行する為なので事前に知識が必要となります。
  • JavaScriptの歴史および、長所と短所
  • 問題が発生した際の常にGoogleで検索するググり力

配列では連想配列・多次元配列を学んで下さい。

JavaScriptの配列mapとfilterメソッドは、Reactアプリケーションを構築するときにおそらく最も使用される機能となります。

条件では、Switch・if•else・三項演算子を使用した条件式となります。

JSオブジェクトでは作成する方法は3パターンありますがReactでは主にES6を使用したオブジェクトリテラルで作成するのが一般的な方法となっております。

学んでおくと尚良い

  • Git/GitHubコマンドラインからgitを使用し、GitHubなどのリモートWebサイトにプロジェクトをデプロイする方法。
  • Node.js/npm使用方法、npmまたはyarnがどのように機能するか、なぜそれらが必要なのか。
  • 静的サイトを簡単にデプロイするために使用できるホスティングプロバイダー(例えばnetlify、vercel、github)など
  • chromedevtoolsなどのエラーのデバッグやネットワークリクエストの検査のための学習。
  • JSON / API / HTTP/RESTの実践について深く理解する。
  • JSからTSに切り替え、React.js &TypeScript
  • 最新のWebpack、Babelのある程度の知識
  • JavaScriptユニットテストのためのフレームワークの基本的な使い方(Jestなど)
  • DOMの深い理解、Reactでは仮想DOMという概念がございます。それを理解するには通常のDOMが何であるかを明確に理解する必要があります。
  • SEOに関する知識、ReactではUX(ユーザーエクスペリエンス)を向上させるため、SEOに最も適しています、ですのでSEOの重要性を理解する事が肝心となります。
  • React.jsだけでなくAngularなど、その他のビューライブラリなどのフレームワークの内部を理解する

必ずしも学ぶ必要がないのは多々あります。

例えばですが他には、SassやBootstrapなどです、これらはReactでのプロジェクトで使用しなかった場合はそれはそれでまったく問題ありません。

スタイリングを行うために使用できる代替方法が沢山ある為です。

Photoshopなどのツールは?と思われたかと思いますが、Web開発者はWebデザイナーではありません。

そこを明確に理解しておかなければいけません。

開発者はコードを書き、デザイナーはPhotoshopなどを使用しデザイン設計します。

あなたがReact開発者プログラマーとして初学者のうちに集中し学ぶ必要があるのはJavaScriptのみがほとんど、という事を覚えておいて下さい。

Reactに適したライブラリやプラットフォームの種類は様々ありますので、React開発者として必要になった場合にその都度学習下さい。

当ブログでReactに必要なJavaScriptのいくつかの基礎を記事にしております こちらで学べます。

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

最後に

本日のReactを始める前のJavaScriptの基礎、全てを紹介したわけではありませんが、必ずReactで使用するであろうJSの基礎をまとめた内容となります。

『React学習しながら同時に学ぶ』戦略は、あまり生産的ではありません。

JavaScriptを飛ばしReactに直接開始する前に、一歩下がってバニラJavaScriptを学ぶことを強くお勧めします。

それはReactではVanillaJavaScriptに大きく依存している為となります。

ほとんどの場合JavaScript ES6以降(ES7、ES8、ES9)と呼ばれます。

そのため、Reactを学ぶために少なくともJavaScriptのES6に慣れることが最低限となります。

必ずJavaScript構文の基礎をマスターしてください。

JSをしっかりと把握していなければ、Reactを使い始めることすら非常に困難となります。

非推奨の機能、廃止された機能なども多いのでしっかりとMDNで確認するようにして下さい。

当ブログでJSをしっかりと学んでみたいという要望があった場合はReactに必要なJS完全入門をイチから記事として再作成を検討致します。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー