React の概要

React JS とは何ですか？

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 開発環境を Linux 用 Windows サブシステム

React の用途

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

• Basic Web アプリ: React を初めて使用し、主に React を使用した基本的な Web アプリの構築に関心がある場合は、Windows。 運用環境用にデプロイされる Web アプリを作成する場合は、Linux 用 Windows サブシステム (WSL) 上の vite フロントエンド ツールを使用して React アプリを作成し、パフォーマンスの向上、システム呼び出しの互換性、ローカル開発環境とデプロイ環境 (多くの場合 Linux サーバー) の間の調整を検討することをお勧めします。

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

• Native デスクトップ アプリ: React Native for Desktop + macOS を使用すると、さまざまな種類のデスクトップ 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 アプリを開発する手順については、 WindowsでのAndroid開発のためのReact Nativeを参照してください。

インストール オプション

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

• Windowsで直接Viteを使用してReactをインストールします
• Vite を使用して Linux 用 Windows サブシステム (WSL) 上で React をインストールします
• Next.js フレームワークを WSL にインストールする
• Gatsby フレームワークを WSL にインストールする
• デスクトップ デスクトップ開発用の React Native をインストールする
• Windows上でAndroid開発用React Nativeをインストールする
• さまざまなプラットフォームのモバイル開発用に React Native をインストールする
• ツールチェーンを使用せずブラウザーに React をインストールする: React は JavaScript ライブラリであり、最も基本的な形式は、テキスト ファイルの集まりなので、コンピューターにツールやライブラリをインストールすることなく React アプリを作成できます。 Webページにちょっとしたインタラクティブな要素を追加するだけなら、ビルドツールは必要ありません。 HTML ページにプレーンな タグを追加するだけで、React コンポーネントを追加できます。 React ドキュメントの[Add React in One Minute\(1 分間で React を追加する\)]の手順に従ってください。

React ツール

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

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

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

• Windows開発の場合は、WSL に Node.js をインストールするか、Windows に 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 パーサー、ミニファイアー、圧縮、および整形ツールキット。
• Babel: 主に、現在および以前のブラウザーまたは環境で、ECMAScript 2015+ コードを JavaScript の下位互換性のあるバージョンに変換するために使用される JavaScript コンパイラー。 また、babel-preset-env を使用すると、構文変換やブラウザー ポリフィルを細かく管理する必要がなくなり、サポートするインターネット ブラウザーの種類を定義できるので役に立ちます。
• ESLint: コードの一貫性を向上させて、バグを回避するのに役立つ、JavaScript コードで見つかったパターンを特定および報告するためのツール。
• Enzyme: React コンポーネントの出力のテストを容易にするための React 用 JavaScript テスト ユーティリティ。
• Jest: Babel と連携して React アプリでの慣用的な JavaScript テストの作成に役立つテスト フレームワークです。
• Mocha: Node.js およびブラウザーで実行されるテスト フレームワークで、非同期テスト、レポート作成、および適切なテスト ケースへのキャッチされていない例外のマッピングに役立ちます。

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

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

• React ラーニング パスには、基本的な作業を始めるのに役立つオンライン コース モジュールが含まれています。
• ブラウザーで実行されるシングルページ アプリ (SPA) を構築します (この Microsoft Graph API)
• Next.js を使用してサーバーでレンダリングされるアプリを構築するか、Gatsby を使用して静的なサイトで生成されるアプリを構築します
• Windows、Android、iOSデバイスで実行されるネイティブアプリのユーザーインターフェイス (UI) を作成します。これらのネイティブWindowsアプリのサンプルや、Microsoft Graph APIを使用してユーザーのカレンダー情報を取得するサンプルネイティブアプリを確認してください。
• デュアルスクリーン デバイス用のアプリSurface Duo開発する
• Fluent UI React コンポーネントを使用して Web アプリまたはネイティブ アプリを作成します
• TypeScript を使用して React アプリを構築します

その他のリソース

• React に関する最新情報は、React の公式ドキュメントで提供されています。
• Microsoft Edge React 開発者ツールのアドオン: React 開発に役立つ 2 つのタブ (コンポーネントとプロファイラー) をMicrosoft Edge開発ツールに追加します。