次の方法で共有

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 に変換されます。

重要

2025 年 2 月、React チームは、新しいアプリの React アプリの作成 (CRA) が非推奨になったと 発表 しました。 チームは、既存のアプリを Next.js や React Router などのフレームワークに移行するか、Vite、Parcel、RSBuild などのビルド ツールに移行することをお勧めします。

React はWindowsで動作しますか?

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

  • React 開発環境を Windows
  • React 開発環境を Windows Subsystem for Linux

React の用途

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

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

  • Single-Page アプリ (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 をインストールするにはいくつかの方法があります。 いくつかの最も一般的な方法を次に示します。

React ツール

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

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

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

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

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

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

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

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

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

  • パッケージ マネージャー: React の 2 つの一般的なパッケージ マネージャーは npm (NodeJS に含まれています) と yarn です。 どちらも、インストール可能な、適切に管理されたパッケージの広範なライブラリをサポートしています。
  • 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 モジュール (モジュール バンドルとも呼ばれます) をコンパイルできるビルド ツール。 Webpack は、アプリケーションを処理するときに、プロジェクトに必要なすべてのモジュールをマップした依存関係グラフを内部的に構築し、1 つまたは複数のバンドルを生成します。
  • Uglify: JavaScript パーサー、ミニファイア、コンプレッサー、およびビューティファイア ツールキット。
  • Babel: 現在および古いブラウザーまたは環境で、主に ECMAScript 2015 以降のコードを下位互換性のあるバージョンの JavaScript に変換するために使用される JavaScript コンパイラ。 また、 babel-preset-env を使用すると、構文変換やブラウザー のポリフィルをマイクロ管理する必要がなく、サポートするインターネット ブラウザーを定義できます。
  • ESLint: コードの一貫性を高め、バグを回避するのに役立つ JavaScript コード内のパターンを識別してレポートするためのツール。
  • 酵素: 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 アプリをビルドする

その他のリソース

  • Last updated on