React の概要

  • [アーティクル]

React とは

React は、フロント エンドのユーザー インターフェイスを構築するためのオープンソースの JavaScript ライブラリです。 完全なアプリケーション フレームワークを提供する他の JavaScript ライブラリとは異なり、React は、状態を維持し、UI 要素を生成するコンポーネントと呼ばれるカプセル化されたユニットを使用してアプリケーション ビューを作成することだけに重点を置いています。 個々のコンポーネントを Web ページに配置したり、コンポーネントの階層を入れ子にして複雑な UI を作成したりすることができます。

React コンポーネントは通常 JavaScript と JSX (JavaScript XML) で記述されます。JSX は、HTML とよく似た JavaScript 拡張機能ですが、UI 要素のイベント ハンドラーの登録などの一般的なタスクを簡単に実行できるようにするいくつかの構文機能があります。 React コンポーネントは、コンポーネントの UI を表す JSX を返す renderメソッドを実装します。 Web アプリでは、コンポーネントによって返された JSX コードがブラウザーに準拠している HTML に変換されます。

React は Windows で機能しますか

はい。 Windows では、React アプリを開発するための 2 つの異なる環境がサポートされています。

React の用途

Windows は、次のようなさまざまな React 開発者向けのシナリオをサポートしています。

  • 基本的な Web アプリ: React を初めて使用し、主に、React を使用した基本的な Web アプリの構築についての学習に興味を持っている場合は、create-react-app を Windows に直接インストールすることをお勧めします。 実稼働用に展開する Web アプリを作成する予定の場合は、Linux 用 Windows サブシステム (WSL) に create-react-app をインストールすることを検討してください。これにより、パフォーマンスの向上、システム コールの互換性、ローカル開発環境と展開環境 (多くの場合、Linux サーバー) の間の連携を実現できるためです。

  • シングルページ アプリ (SPA)： これらは、ブラウザーのデフォルトとして新しいページ全体をロードするのではなく、サーバーからの新しいデータで現在の Web ページを動的に書き換えることによってユーザーと対話する Web サイトです。 静的なコンテンツ指向の SPA Web サイトを構築する場合は、WSL に Gatsby をインストールすることをお勧めします。 Node.js バックエンドを使用してサーバーでレンダリングされる SPA Web サイトを構築する場合は、WSL に Next.js をインストールすることをお勧めします (ただし Next.js は現在静的ファイル サービスも提供しています)。

  • ネイティブ デスクトップ アプリ: Windows + macOS 用 React Native を使用すると、さまざまな種類のデスクトップ PC、ノート PC、タブレット、Xbox、Mixed Reality デバイスで実行される JavaScript でネイティブ デスクトップ アプリケーションを構築できます。 これは、Windows SDK と macOS SDK の両方をサポートしています。

  • ネイティブ モバイル アプリ: React Native は、ネイティブ プラットフォームの UI コードにレンダリングする JavaScript を使用して Android アプリや iOS アプリを作成するためのクロスプラットフォームの方式です。 React Native をインストールする主な方法として、Expo CLI と React Native CLI の 2 つがあります。 StackOverflow にこの 2 つの分かりやすい比較が記載されています。 Expo には、アプリを実行およびテストするための iOS および Android モバイル デバイス向けのクライアント アプリがあります。 Windows、React Native、および Expo CLI を使用して Android アプリを開発する手順については、「React Native for Android development on Windows (Windows での Android 開発用の ReactNative)」を参照してください。

インストール オプション

ユースケース シナリオに最適な統合ツールチェーンと共に React をインストールするにはいくつかの方法があります。 いくつかの最も一般的な方法を次に示します。

React ツール

最初の方法としては単純なテキスト エディターでシンプルな React コンポーネントを記述するのが効果的ですが、この方法で生成されたコードは、量が多く、保守と展開が困難であり、低速です。 運用アプリで実行する必要がある一般的なタスクがいくつかあります。 これらのタスクは、依存関係としてアプリによって取得される他の JavaScript フレームワークによって処理されます。 これらのタスクには以下の内容が含まれます。

  • コンパイル - JSX は React アプリで一般的に使用される言語ですが、ブラウザーはこの構文を直接処理することはできません。 代わりに、コードを標準的な JavaScript 構文にコンパイルし、さまざまなブラウザー用にカスタマイズする必要があります。 Babel は、JSX をサポートしているコンパイラの例です。
  • バンドル -最新の Web アプリではパフォーマンスが重要であるため、アプリの JavaScript には、アプリに必要なコードのみを含めて、可能な限り少ないファイルにまとめることが重要です。 このタスクは、webpack などの bundler によって実行されます。
  • パッケージ管理 - パッケージ マネージャーを使用すると、サードパーティのパッケージの機能をアプリに簡単に含めることができます。これには、機能の更新や依存関係の管理などが含まれます。 一般的に使用されるパッケージ マネージャーには、Yarn や npm などがあります。

また、アプリの作成、ビルド、展開に役立つフレームワークのスイートをツールチェーンと呼びます。 このツールチェーンを使用する、設定の簡単な React 用の開発環境である Vite は、ユーザーに代わってシンプルな 1 ページのアプリを生成します。 Vite を使用するために必要なセットアップは Node.js のみです。

React Native コンポーネント ディレクトリ

React Native アプリで使用できるコンポーネントには、次のものがあります。

  • コア コンポーネント - React Native フレームワークの一部として開発およびサポートされるコンポーネント。
  • コミュニティ コンポーネント - コミュニティによって開発および管理されるコンポーネント。
  • ネイティブ コンポーネント - プラットフォーム ネイティブ コードを使用してユーザーが自分で作成し、React Native からアクセスできるように登録するコンポーネント。

React Native ディレクトリには、ターゲット プラットフォームによってフィルター処理できるコンポーネント ライブラリの一覧が用意されています。

フルスタック React ツールチェーンのオプション

React はフレームワークではなくライブラリです。そのため、より複雑なアプリを作成するために、追加のツールが必要になる場合があります。 React だけを使用するのではなく、次のものを使用することも検討できます。

  • パッケージ マネージャー: React には、npm (NodeJS に含まれています) と yarnという 2 つの一般的なパッケージ マネージャーがあります。 どちらも、インストール可能な、適切に管理されたパッケージの広範なライブラリをサポートしています。
  • React Router: Web アプリのブックマーク可能な URL や、React Native で構成可能なナビゲーション方法を支援するナビゲーション コンポーネントのコレクションです。 React は、実際には状態管理にのみ関係し、その状態を DOM にレンダリングするため、React アプリケーションを作成するには、通常、React Router のようなルーティング ライブラリを使用する必要があります。
  • Redux: データフロー アーキテクチャを支援する予測可能な状態コンテナー。 より高度な React 開発に進むまでは、必要なではないと考えられます。 Redux の作成者の 1 人である Dan Abramov の言葉を引用すると、「Don't use Redux until you have problems with vanilla React.(平凡な React で問題が発生するまで Redux を使用しないでください)」ということです。
  • Webpack: JavaScript モジュールをコンパイルできるビルド ツールで、bundler とも呼ばれます。 Webpack は、アプリケーションを処理するときに、プロジェクトに必要なすべてのモジュールをマップした依存関係グラフを内部的に構築し、1 つまたは複数のバンドルを生成します。
  • Uglify: JavaScript パーサー、Minifier、コンプレッサー、および 整美ツールキット。
  • Babel: 主に、現在および以前のブラウザーまたは環境で、ECMAScript 2015+ コードを JavaScript の下位互換性のあるバージョンに変換するために使用される JavaScript コンパイラー。 また、babel-preset-env を使用すると、構文変換やブラウザー ポリフィルを細かく管理する必要がなくなり、サポートするインターネット ブラウザーの種類を定義できるので役に立ちます。
  • ESLint: コードの一貫性を向上させて、バグを回避するのに役立つ、JavaScript コードで見つかったパターンを特定および報告するためのツール。
  • Enzyme: React コンポーネントの出力のテストを容易にするための React 用 JavaScript テスト ユーティリティ。
  • Jest: 慣用的な JavaScript テストの記述を支援するために、create-react-app パッケージに組み込まれたテスト フレームワーク。
  • Mocha: Node.js およびブラウザーで実行されるテスト フレームワークで、非同期テスト、レポート作成、および適切なテスト ケースへのキャッチされていない例外のマッピングに役立ちます。

React のコースとチュートリアル

React について学習し、サンプル アプリを構築するための推奨される場所をいくつか紹介します。

その他のリソース