Reactとは?
React は、UI(ユーザーインターフェース)の構築に使われれる JavaScript のライブラリであり、特に、ユーザーがページ全体をリロードせずに Web ページと対話するシングル ページ アプリケーションに適しています。React は Facebook によって開発・保守されており、UI コンポーネントを構築するための宣言的なアプローチと、仮想DOM(Document Object Model)による効率的なレンダリングで人気を博しています。
ワンクリックで開発準備が整った React アプリのプロトタイプを構築しませんか。MUI、Ant design、React Bootstrap などの最高のオープンソース React ライブラリに由来する UI コンポーネントをドラッグ&ドロップしたり、独自の React コンポーネントを持ち込んだりできます。UXPin Merge をぜひお試しください。
Reactとは
Reactとは、ReactJS または React.js としても知られる、フロントエンド開発のための JavaScript ライブラリです。もともとは Facebook によって開発され、現在は Facebook と Instagram のデベロッパー、およびオープンソース コミュニティからの貢献によって管理されています。
React は、インタラクティブでダイナミックな Web アプリケーションや Web サイトを作成するのに広く使われており、PayPal や Netflix などの 主要な Web サイトや アプリの開発に採り入れられています。
React は、宣言的でコンポーネントベースのアプローチの提供や、JavaScript のパワーの活用、仮想 DOM のような機能によるパフォーマンスの最適化によって、UI 構築プロセスをシンプルにします。
JavaScript フレームワークの React Native と混同されがちですが、React は 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 がどのように機能するかを理解するために、キッチンの一日を体験してみましょう。
セットアップ:構成要素
まず、コンポーネント(= 作る料理の材料)から始めます。React では、コンポーネントは、料理(= UI)の特定の要素がどのように見えて機能するかを定めるレシピのようなものです。たとえば、ボタン、ヘッダー、フォーム フィールドのコンポーネントが挙げられます。それぞれがレシピカードのようなものであり、再利用可能で、独立しており、特定の目的を果たすようにデザインされています。
React のコンポーネントには以下の2つのタイプがあります:
- 関数コンポーネント:最小限の材料で、サッと簡単にできるレシピ。
- クラスコンポーネント:より複雑な結果を得るための追加手順がある、より手の込んだレシピ。
メインディッシュ:JSX ‐ 食材を組み合わせて料理を作る
料理を組み立てるには、材料を組み合わせる必要があります。React では、これを JSX(JavaScript XML)を使って行い、これで JavaScript の中で HTML のようなコードを書くことができます。JSX を、どの要素(コンポーネント)を組み合わせてどのように見せるかを指示する食材のリストと考えてください。例えば以下のようになります:
function App() {
return (
<div>
<Header />
<Button />
<Form />
</div>
);
}
ここでは App がメインディッシュであり、複雑なレシピの材料を集めるのと同じように、ヘッダー、ボタン、フォームのコンポーネントを取り込んで、それを活用します。
新鮮さを保つ:ステートとプロップ
忙しい厨房では、料理が客の好みに基づいてカスタマイズされることがよくあります。React では、そういったカスタマイズはステートとプロップによって管理されます:
- プロップ:塩コショウや辛さのレベルを追加するなど、各料理が機能するために必要な材料と考える。各コンポーネントには、ボタンコンポーネントのラベルとして「送信」を渡すなど、カスタマイズされたエクスペリエンスを作成するための特定のプロパティがある。
- ステート:これは生鮮食品と考える。一日中更新される新鮮な食材のように、ダイナミックに変化する。ステートは、例えば顧客が塩を使わない料理を希望した場合にリアルタイムでその好みを反映するようにステートを調整するなど、厨房で今何が起きているかを記録する。
React の秘密のソース:仮想DOM
料理を盛り付けたところ、客が気が変わってソースを追加したくなったと想像してください。大抵のキッチンでは、料理の作り直しになりますが、React は仮想 DOM を使います。これは、変更が必要な料理の部分だけを更新できる、魔法のような舞台裏のプロセスです。仮想 DOM は、料理の古いバージョンと新しいバージョンを比べて、特定の変更のみを適用します。これは、UI の効率的な更新における React のやり方である調整であり、それで変更が迅速かつリソースに優しいものになります。
最後の仕上げ:ライフサイクル手法
どんな料理にも、下ごしらえ、調理、皿洗い、盛り付けといった段階があります。React コンポーネントにもライフサイクルがあり、作成、更新、削除をコントロールするメソッドがあります。以下はその例です:
- componentDidMount :皿(コンポーネント)がメッキ(マウント)されると、このメソッドが実行される。
- componentDidUpdate:お皿の中の何かが変更された場合(プロップまたはステート)、このメソッドが再度実行される。
- componentWillUnmount :皿が完成して片付けられると、React が後片付けを処理する。
このライフサイクルメソッドにより、React は、注文(ユーザーのアクション)に基づいて料理(レンダリング コンポーネント)を効率的に提供し、キッチンのスムーズな運営を維持します。
料理を提供する:レンダラー
食事の準備ができたので、あとはその提供です。React はこれをReactDOM.render() で行います。これは、完成した料理をその客(ブラウザ)の前に置くようなもので、それで客はその入念に作られたコンポーネントの最終的なプレゼンテーションを体験することができます。
これが React です。うまく運営された厨房のように、React がすべてを整えて効率性を保ち、直前の変更にも対応できるようにすることから、エンドユーザーにシームレスで楽しい体験が保証されます。
React の仕組みの概要
以下でその仕組みの概要を見てみましょう:
- 宣言的なビュー:React は宣言的なアプローチを採用しており、そこでデベロッパーは、さまざまなステートやデータに基づいて UI がどのように見えるべきかを記述する。基礎となるデータが変更されると、React は影響を受けるコンポーネントのみを効率的に更新してレンダリングするため、開発プロセスがシンプルになり、UX(ユーザーエクスペリエンス)が上がる。
- JavaScript のコードと JSX:React は、最も広く使われているプログラミング言語の1つである JavaScript で書かれている。デベロッパーは、JavaScript の構文拡張である JSX によって、XML や HTML に似た形式で UI コンポーネントを記述できる。それによってコードがより読みやすく表現豊かになり、それがより効率的な開発ワークフローの貢献になる。
- コンポーネントベースのアーキテクチャ:React アプリケーションは、コンポーネントベースのアーキテクチャを使って構造化される。コンポーネントは 、UI のさまざまな部分を表す、モジュール化された自己完結型のコード単位であり、このモジュール性がコードの再利用性を促すことから、大規模なコードベースの管理と保守がしやすくなる。また、React には「関数コンポーネント」と「クラスコンポーネント」がある。
- コンポーネントの階層的配置:このアーキテクチャの主な利点の1つは、親コンポーネントと子コンポーネントの関係にある。React では、コンポーネントを階層的に配置することができ、一部のコンポーネントは親として機能し、他のコンポーネントは子として機能する。親コンポーネントは、子に共通するロジックまたは機能をカプセル化し、構造化され整理されたコードベースを促す。
- 仮想 DOM:React は、仮想 DOM(Document Object Modelの略)を使って、実際の DOM の操作を最適化する。データが変更された場合、React は DOM 全体を直接更新するのではなく、まず DOM の仮想表現をメモリ上に作成する。その後、実際の DOM を更新する最も効率的な方法を計算することから、ページ全体のリロードの必要性は減り、パフォーマンスは上がる。
- JavaScript ライブラリの統合:React のオープンソースとしての性質と人気の高さから、さまざまな JavaScript ライブラリと互換性がある。コミュニティによって開発されたライブラリには、さまざまな機能のためにあらかじめ書かれたコードがあり、そのようなライブラリを React アプリケーションに統合することで、開発の時間と労力の節約になり、デベロッパーは既存のソリューションを活用できるようになる。この記事では 、こういったライブラリの例がピックアップされている。
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 の「いいね」のアクションなど、よりスムーズで高速なユーザー体験が実現し、そこではページ全体を更新することなくシームレスに変更が行われる。
- コミュニティ:React コミュニティの規模と活動の多さで、その地位がさらに強固なものになっている。Stack Overflow の「React.js」スレッドには 460,000 件を超える質問があり、JavaScript のサポートも充実しているため、デベロッパーは豊富なリソースとソリューションを見つけることができ、それで React はアクセスしやすく、サポートが充実したテクノロジーとなっている。
React で構築できるもの
React は、幅広い React プロジェクトの構築に使える、多用途で広く使われている JavaScript ライブラリです。
React は、ユーザーがアプリを操作すると単一の HTML ページが動的に更新される「シングルページアプリケーション」の作成に適しており、例えば、SNSプラットフォーム、プロジェクト管理ツール、リアルタイム コラボレーション アプリなどが挙げられます。
また、React は、EC サイトの構築にも使えます。React は UI を効率的に更新できるため、この種のプロジェクトに最適であり、動的な製品リスト、ショッピング カート、シームレスなチェックアウト エクスペリエンスを作ることができます。
UXPin Merge に含まれている、事前構築済みの EC テンプレートをぜひご覧ください。そのテンプレートは、React プロジェクトとして作成できる完璧な例であり、React ショッピング カート、製品ページ、製品リストがあります。また、それをワークフローにサッとコピーすることができます。
また React は、リアルタイムの更新が必要なデータダッシュボードの構築に最適です。これは、内部操作の効率化が必要な分析ツール、監視システム、BI(ビジネスインテリジェンス)アプリケーションに特に便利です。
さらに、React はマッピングライブラリと統合して、インタラクティブで動的なマップを作成できます。これは、旅行アプリや位置情報サービスなど、地理位置情報を使うアプリケーションに有用であり、地図と位置情報を利用する天気予報アプリにも最適です。
そしてメッセージアプリ、共同ドキュメント編集ツール、学習管理システム(例)、ビデオ会議プラットフォームなど、リアルタイムの連携が必要なアプリケーションは、UI を効率的に更新できる React の機能の恩恵を受けることができます。
Reactコンポーネントを使ってアプリのレイアウトを構築しよう
本記事では、Reactとは 何かという基礎について見ていき、React コンポーネントで何を構築できるかについてお話しました。早速試してみたい方は、UXPin にアクセスして、簡単なアプリのインターフェースを作って React をテストしてみましょう。まず UXPin のトライアル アカウントを設定して、新しいプロジェクトを作成します。そしてデザインシステムライブラリから MUIv5 ライブラリを選択し(Option + 2 キーを使って開く)、コンポーネントをキャンバスに移動します。簡単ですね。
必要なものは何でも構築でき、ドキュメントへのアクセスが必要な場合は、コンポーネントをクリックして右側のリンクを確認してください。早速 React ベースの UI 第一号構築しましょう。UXPin Merge をぜひお試しください。