React の仕組み

React は 、UI（ユーザーインターフェース）、特に、全ページの再読み込みが必要なくユーザーが Web ページと対話できるシングルページのアプリケーションの構築に使われる、JavaScript のライブラリです。Facebook によって開発・保守されおり、UI コンポーネントを構築するための宣言的なアプローチと、仮想 DOM（Document Object Model）による効率的なレンダリングで広く使われるようになりました。

開発準備が整った React アプリのプロトタイプをクリック一つで構築しませんか。MUI、Ant design、React Bootstrap などの最高のオープンソースの React ライブラリに由来する UI コンポーネントをドラッグ＆ドロップしたり、独自の React コンポーネントを持ち込んだりできます。UXPin Merge をぜひお試しください。

React とは

ReactJS または React.js としても知られている React は、フロントエンド開発のための JavaScript ライブラリです。もともとは Facebook によって開発され、現在は Facebook と Instagram のデベロッパーたちによって維持されており、オープンソースコミュニティからの貢献もあります。

React は、インタラクティブでダイナミックな Web アプリケーションや Web サイトの作成に広く使われており、PayPal や Netflix など の 大手の Web サイトやアプリの開発に採り入れられています。

Reactは、宣言的でコンポーネントベースのアプローチの提供や、JavaScript のパワーの活用、仮想 DOM のような機能によるパフォーマンスの最適化を行うことによって、UI 構築のプロセスをシンプルにします。

React は JavaScript フレームワークの React Native と混同されがちですが、一般的には React ライブラリの React js と呼ばれます。React js と React Native の違いについてはこちらの記事をご覧ください。

React がよく比較されるもの

Reactは、Angular、Vue、Svelte といった他の JavaScript ライブラリやフレームワークとよく比較されます。

Angular は JavaScript のフレームワークです。どちらも動的な Web アプリケーションの構築に使われますが、React はビューレイヤーに焦点を当てたライブラリであり、他のツールとの統合に関してより柔軟性があります。一方、Angular は総合的なフレームワークであり、大規模なアプリケーション構築のための意見構造とツール一式を備えています。

Vue に関しては、コンポーネントベースという点で React と共通するプログレッシブ JavaScript フレームワークです。Vue.js はそのシンプルさゆえに初心者にとってより取り組みやすいと思われがちであり、React はその柔軟性とライブラリやツールのより大きなエコシステムで支持されています。

最後に、Svelte は作業の多くをブラウザからビルドステップにシフトする、Web 開発の新しいアプローチであり、仮想 DOM で動作する React とは違って、作業をコンパイル時にシフトするため、実行時のコードがより小さく、効率的になります。また、React の仮想DOMアプローチは、よく Svelte のコンパイル時アプローチと対比されます。

React の仕組み

React は、UI 構築における効率性と柔軟性に貢献する主要な原則と機能を組み合わせることで機能します。

React の仕組みの概要

その仕組みの概要を以下で見てみましょう：

• 宣言的なビュー ：React は宣言的なアプローチを採用しており、そこでデベロッパーはさまざまな状態やデータに基づいて UI がどのように見えるべきかを記述する。また、基礎となるデータが変更されると、React は影響を受けるコンポーネントのみを効率的に更新してレンダリングするため、開発プロセスがシンプルになり、UX（ユーザーエクスペリエンス）が上がる。
• JavaScript のコードとJSX：React は、最も広く使われているプログラミング言語の１つである JavaScript で書かれている。JavaScript の構文拡張である JSX により、デベロッパーは XML や HTML に似た形式で UI コンポーネントを記述でき、これによって、コードがより読みやすく表現豊かになり、より効率的な開発ワークフローへの貢献になる。
• コンポーネントベースのアーキテクチャ：React のアプリケーションは、コンポーネントベースのアーキテクチャを使って構造化される。コンポーネントは、UI のさまざまな部分を表す、モジュール化された自己完結型のコード単位であり、このモジュール性がコードの再利用性を促すことから、大規模なコードベースの管理と保守がしやすくなる。そして React には、関数コンポーネントとクラスコンポーネントがある。
• コンポーネントの階層的配置：このアーキテクチャの重要な利点の１つは、親と子のコンポーネントの関係にある。React では、コンポーネントを階層的に配置することができ、親となるコンポーネントと、子となるコンポーネントがある。親コンポーネントは、子コンポーネントに共通するロジックや機能をカプセル化することから、構造化され整理されたコードベースが促される。
• 仮想DOM：React は、仮想DOM（Document Object Modelの略）を使って、実際の DOM の操作を最適化する。データが変更されたときに DOM 全体を直接更新するのではなく、React はまず DOM の仮想表現をメモリ上に作成する。その後、実際の DOM を更新する最も効率的な方法を計算することから、ページ全体が再読み込みされる必要性は下がり、パフォーマンスは上がる。
• JavaScript ライブラリの統合：React には、そのオープンソースとしての性質と人気の高さにより、さまざまな JavaScript ライブラリと互換性がある。そのライブラリはコミュニティによって開発されており、さまざまな機能のためにあらかじめ書かれたコードを提供する。このようなライブラリを React のアプリケーションに統合することで、開発の時間と労力の節約になり、それでデベロッパーは既存のソリューションを活用できるようになる。（この記事に、そのライブラリの人気度に基づいた例が書かれている。）

React の作り方

React のデベロッパーは通常、React プロジェクトをセットアップして使いますが、そのプロセスは、React プロジェクトの基本的なセットアップを提供するステップで構成されています。まず、Node.js と npm をインストールして、その後、React アプリを作成します。そしてターミナルかコマンドのプロンプトを開き、create-react-app コマンドを使って新しい React アプリを作成します。そしてこのコマンドが、React アプリの基本構造を持つ my-react-app という新しいディレクトリを作成します。

React の習得には、実際に試してみるのが一番です。以下のコマンドで Node.js と npm をインストールしてみましょう：

npx create-react-app my-react-app

そして、以下のようにして、新しく作成されたプロジェクト ディレクトリに移動します：

cd my-react-app

次のように入力して開発サーバーを起動し、ローカルでアプリをプレビューします：

npm start

プロジェクトの構造をしっかり押さえましょう。主なディレクトリには、src（ソースコード）、 public（静的アセット）、package.json や src/index.js などの各種設定ファイルがあります。また、React アプリケーションはコンポーネントを使って構築されており、src/App.js ファイルを開くと、デフォルトのコンポーネントが表示されます。そしてコンポーネントの構造を定めるには、JavaScript の構文拡張である JSX を使います。

より多くのリソースが必要な場合は、以下の記事をご覧ください： 初めての React アプリ作成ガイド

コンポーネントの追加や編集をコードでする代わりに、UXPin Merge のような UI ビルダーを使って React アプリの UI を構築し、デザインから Stackblitz やその他の開発環境に直接コードをコピーしてデータ構造を設定して、React プロジェクトをデプロイすることができます。

UXPin には、MUI、Bootstrap、Ant design などの React コンポーネントライブラリが組み込まれており、コンポーネントをキャンバスにドロップしてアプリのレイアウトを整えることで機能します。従業員ポータルやポッドキャストアプリなど、自由に使える React 要素を使ってどんなレイアウトでも構築でき、独自の React コンポーネントのライブラリがあれば、それを取り込むこともできます。また、コンポーネントは完全にカスタマイズ可能で機能的なので、デプロイ前にアプリの動作を確認できます。UXPin Merge をぜひ無料でお試しください。

React を使う理由

React は強力な JavaScript ライブラリであり、以下のような説得力のある理由から開発コミュニティに広く採用されています。

• オープンソース：React はオープンソースのライブラリであり、Facebook とInstagram のデベロッパー、そして大規模で活発なコミュニティによって維持されている。このコミュニティでは、React の継続的な改善への貢献や、追加ライブラリ（ステートの管理のための Redux など）の開発、フォーラムやドキュメントを通じてのサポートが施されている。
• 個々のコンポーネントの編集：React は下向きのデータフローに従う、つまり、コンポーネントの変更は、より高い階層のコンポーネントに影響を与えない。これにより、デベロッパーはアプリケーション全体に影響を与えることなく、個々のコンポーネントを編集して更新することができ、それで開発はより効率的になり、メンテナンスはより簡単になる。
• 速くて一貫性のある UI デザイン：React は、単なる美観を超えたリッチな UI 構築に秀でており、そのコンポーネントはビルディングブロックとして機能することから、直感的で視覚的に魅力的な UI を作ることができる。また、各インタラクション、ボタン、ビジュアル要素が綿密に作り込まれてカスタマイズされることで、魅力的な UX が実現する。React は多くのデザインシステムの基盤となっているのである。
• 再利用可能なコンポーネント：一度コンポーネントが作成されれば、同じコードを書き直すことなく、アプリケーションの複数の部分で再利用することができる。これにより、冗長性が減り、コードベースはより簡潔で維持されやすくなる。
• 柔軟性：React は、静的な Web サイトやデスクトップアプリケーションから iOS や Android のモバイルアプリケーションまで、あらゆるものを作成でき、多様なプロジェクトの要件に適応する。そしてこの適応性は、時間をかけて無数のツール、ライブラリ、拡張機能を開発してきた広範なコミュニティによって強化されている。
• 素晴らしいユーザーエクスペリエンス：ページ全体を再読み込みせずに即時更新ができるようになる React の素晴らしい機能で大きな変革がもたらされている。この機能により、例えば Facebook の投稿への「いいね」のアクションでページ全体を更新することなくシームレスに変更が行われるなど、よりスムーズで高速な UX（ユーザー エクスペリエンス）が実現する。
• コミュニティ：React のコミュニティの規模と活動は、その地位がさらに強固なものになっている。例えば Stack Overflow の「React.js」のスレッドでの４６万を超える質問や、JavaScript の広範なサポートにより、デベロッパーは豊富なリソースとソリューションを見つけることができ、それで React はアクセスしやすく、十分にサポートされた技術となっている。

React で構築できるもの

React は、さまざまな React プロジェクトの構築に使える、多用途で広く使われている JavaScript ライブラリです。

React は、ユーザーがアプリを操作すると単一の HTML ページが動的に更新されるシングルページ アプリケーションの作成に適しており、例えば SNS のプラットフォームやプロジェクト管理ツール、リアルタイムコラボレーションアプリなどが挙げられます。

また、React は EC サイトの構築にも使えます。UI を効率的に更新できる React の機能は、この種のプロジェクトに最適であり、例えば 動的な商品リスト、ショッピングカート、シームレスなチェックアウト体験の作成ができます。

UXPin Merge に含まれている事前構築済みの EC テンプレートを見てみると、このテンプレートは、React プロジェクトとして作成できるものの完璧な例となっており、React ショッピングカート、商品ページ、商品リストがあるので、自身のワークフローにサッとコピーできます。

React は、リアルタイム更新が必要なデータダッシュボードの構築に最適です。これは特に、分析ツール、監視システム、社内業務の効率化が必要な BI（ビジネスインテリジェンス）アプリケーションに便利です。

さらに、React はマッピングライブラリと統合して、インタラクティブでダイナミックなマップを作成できます。これは、旅行アプリや位置情報サービスなど、地理的な位置情報を伴うアプリケーションに便利であり、地図や位置情報を利用する天気予報アプリにもピッタリです。

そして UI を効率的に更新できる React の機能は、メッセージアプリ、共同文書編集ツール、学習管理システム（例）、ビデオ会議プラットフォームなど、リアルタイムのコラボレーションが必要なアプリケーションにも有効です。

React コンポーネントを使ってアプリのレイアウトを構築しよう

本記事では、React の仕組みと基本的な機能について見ていき、React コンポーネントを使って何を構築できるかについてお話しました。早速実験したい場合は、UXPin にアクセスして、簡単なアプリのインターフェースを作って React をテストしてみてください。

UXPin の無料トライアルアカウントを設定し、新しいプロジェクトを作成したら、デザイン システムライブラリから MUIv5 ライブラリを選択して（Option + 2 キーを使って開けます）、コンポーネントをキャンバスに移動するだけなのでとても簡単です。

必要なものは何でも構築できます。ドキュメントへのアクセスが必要な場合は、コンポーネントをクリックして右側のリンクをご覧ください。早速 React ベースの UI 第一号を構築しましょう。UXPin Merge をぜひお試しください。