導入
今日、フロントエンドフレームワークとライブラリは、現代のWeb開発スタックに不可欠な要素になりつつあります。React.jsは、JavaScriptコミュニティにおいて、現代のWeb開発における頼りになるフレームワークとして徐々に定着しつつあるフロントエンドライブラリです。.
React.js とは何ですか?
React.jsは、Facebookが丹念に作り上げたオープンソースのJavaScriptライブラリで、インタラクティブなユーザーインターフェース構築の複雑なプロセスを簡素化することを目的としています。Reactで構築されたユーザーインターフェースは、それぞれが小さな再利用可能なHTMLコードを出力するコンポーネントの集合体と考えてください。.
Reactでは、再利用可能なコンポーネントを作成することでアプリケーションを開発します。これは独立したレゴブロックのようなもので、最終的なインターフェースを構成する個々のパーツであり、これらを組み合わせることでアプリケーションのユーザーインターフェース全体が構成されます。.
アプリケーションにおけるReactの主な役割は、モデル・ビュー・コントローラ（MVC）パターンのVのように、最良かつ最も効率的なレンダリング実装を提供することで、アプリケーションのビュー層を管理することです。React.jsは、ユーザーインターフェース全体を単一のユニットとして扱うのではなく、開発者が複雑なユーザーインターフェースを、ユーザーインターフェース全体の構成要素となる個別の再利用可能なコンポーネントに分解することを推奨しています。これにより、ReactJSフレームワークは、JavaScriptのスピードと効率性、そしてDOMをより効率的に操作する方法を組み合わせることで、Webページのレンダリング速度を向上させ、高度に動的で応答性の高いWebアプリケーションを構築します。.
React.jsの簡単な歴史
2011年、Facebookは大規模なユーザーベースを抱え、困難な課題に直面していました。より高速で効率的、かつダイナミックでレスポンシブなインターフェースを構築することで、ユーザーに豊かなユーザーエクスペリエンスを提供したいと考えていました。.
Facebookのソフトウェアエンジニアであるジョーダン・ウォークは、まさにそれを実現するためにReactを開発しました。Reactは、再利用可能なコンポーネントを用いて、動的でインタラクティブなユーザーインターフェースをより体系的かつ体系的に作成する方法を提供することで、開発プロセスを簡素化しました。.
Facebookのニュースフィードが最初にReactを採用しました。DOM操作とユーザーインターフェースへの革新的なアプローチにより、ReactはFacebookのWeb開発へのアプローチを劇的に変え、オープンソースコミュニティへのリリース後、JavaScriptエコシステムで急速に人気を博しました。.
React.js は何をしますか?
通常、ウェブページをリクエストするには、ウェブブラウザにURLを入力します。すると、ブラウザはそのウェブページへのリクエストを送信し、ブラウザはそれに応じたページを表示します。そのウェブページ上のリンクをクリックしてウェブサイト上の別のページに移動すると、そのページを取得するための新たなリクエストがサーバーに送信されます。.
この往復の読み込みパターンは、ウェブサイト上で新しいページやリソースにアクセスしようとするたびに、ブラウザ（クライアント）とサーバーの間で繰り返されます。この一般的なウェブサイト読み込み方法は有効ですが、データ消費量が非常に多いウェブサイトの場合は注意が必要です。ウェブページ全体を何度も再読み込みするのは冗長であり、ユーザーエクスペリエンスを低下させる可能性があります。.
さらに、従来のJavaScriptアプリケーションでは、データが変更された場合、その変更を反映するためにDOMを手動で操作する必要があります。変更されたデータを特定し、その変更を反映するためにDOMを更新する必要があり、その結果、ページの再読み込みが発生します。.
Reactは、シングルページアプリケーション（SPA）と呼ばれるものを構築できるという異なるアプローチを採用しています。シングルページアプリケーションは、最初のリクエストで単一のHTMLドキュメントを読み込み、その後、JavaScriptを使用して、更新が必要なWebページの特定のセクション、コンテンツ、または本文を更新します。.
このパターンはクライアントサイドルーティングと呼ばれます。ユーザーが新しいページを取得するために新しいリクエストを送信するたびに、クライアントはウェブページ全体をリロードする必要がないためです。Reactはリクエストを分割し、変更が必要な部分のみを取得するため、ページ全体をリロードすることなく変更を適用できます。このアプローチにより、パフォーマンスが向上し、より動的なユーザーエクスペリエンスが実現します。.
Reactは、実際のDOMのコピーである仮想DOMに依存しています。Reactの仮想DOMは、データの状態が変更されるたびに、新しい変更を反映するために即座にリロードされます。そして、Reactは仮想DOMと実際のDOMを比較し、変更内容を正確に把握します。.
Reactは、実際のDOMをレンダリングすることなく、その更新を実際のDOMに適用する最もコストの低い方法を見つけます。その結果、何かが更新されるたびにページ全体をリロードする必要がなく、ReactコンポーネントとUIは変更を迅速に反映します。.
React.jsの使い方
Angularなどの他のフレームワークとは異なり、Reactはコード規約やファイル構成に厳格なルールを課していません。つまり、開発者やチームは、自分たちにとって最適な規約を自由に設定し、Reactを自由に実装できるということです。Reactはその柔軟性の高さから、必要に応じてReactを多く使うことも、少なく使うこともできます。.
Reactを使えば、ボタン、インターフェースの一部、あるいはアプリのUI全体を作成できます。既存のアプリケーションに段階的に導入・統合し、インタラクティブ性を持たせることも可能ですし、さらには、ニーズに合わせて、Reactを使ってパワフルなアプリをゼロから構築することも可能です。.
既存のウェブサイトにReactを統合する
ウェブサイトに動的なインタラクティブ機能を追加したいなら、Reactが最適です。Reactを組み込むことで、サイドバーやウィジェットなど、サイトのどこにでも配置できる再利用可能なインタラクティブコンポーネントを作成できます。ここでは、Reactを実現するための手順を簡単に説明します。.
ステップ1: HTMLにCDNスクリプトを追加する
- まず、CDN から React コア ライブラリ API を Web サイトの HTML インデックス ファイルに追加します。.
- 次に、CDNからReact DOMをインポートします。これは、コンポーネントをドキュメントオブジェクトモデル（DOM）にレンダリングするために必要です。.
- 次に、CDNからBabelを追加します。BabelはReactコードを翻訳し、ブラウザ間の互換性を確保します。また、Reactコンポーネントファイルもアップロードすることを忘れないでください。.
最初のステップは、ウェブサイトのHTMLインデックスファイルに2つの主要なCDNスクリプトを追加することです。これらのスクリプトは、CDNサービス経由でReactをアプリケーションに読み込むために必要になります。.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
ステップ2: ウェブサイト上でレンダリング場所をマークする
ReactコンポーネントがレンダリングされるHTML内の場所を決定します。これは、要素を追加することで行うことができます。 <div> これは、React コードで参照する一意の識別子を使用して実行されました。.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
ステップ3: Reactコンポーネントを構築する
- この場合は like_widget.js という React コンポーネントを作成します。.
- このコンポーネントには、「Hello World」というメッセージをレンダリングする JSX ステートメントを返す単純な関数が含まれます。.
- 次に、ReactDOM の助けを借りて、HTML で先ほど設定した一意の ID をターゲットにして、このコンポーネントを DOM にレンダリングします。.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
プログラムを実行すると、下の画像でマークした正確な場所にブラウザに「Hello World」が表示されます。.
ActualWidget関数が返すJavaScript XML（JSX）という奇妙な構文に気づいたかもしれません。ReactでJSXを使用すると、HTMLとJavaScriptを簡単に組み合わせることができます。Facebookは、HTMLをJavaScriptコードに直接埋め込むことで機能を拡張するためのJavaScript構文拡張としてJSXを開発しました。JSXを使用すると、Reactで宣言型のHTMLをJavaScriptコードに直接記述できるため、HTMLとJavaScriptコードを分離する必要はありません。.
本格的なReactアプリの作成
既存のウェブアプリにReactを組み込んでインターフェースの小さな部分を作成することは簡単ですが、完全なウェブアプリを構築するにはReactを使用する方が現実的です。しかし、Reactにはツールの設定要件が厳しく、新しいReactアプリを作成する際には設定が面倒で面倒な場合が多くあります。.
幸いなことに、これらのビルド設定を学んだり、ビルドツールを自分で設定したりする必要はありません。Facebookは、Reactアプリのビルドを支援するために、cre-react-appというNode.jsコマンドラインツールを開発しました。このパッケージを使えば、すぐにReactアプリを構築でき、Reactプロジェクト間を移動する際にも使い慣れたReactアプリの一貫した構造が得られます。.
新しい React プロジェクトを作成するのは、ターミナルで次のコマンドを実行するだけです。
npx create-react-app my-new-app
cd my-new-app
npm start
React.jsの例
フェイスブック
React.jsの起源であるFacebookは、このライブラリの優れた実力を示す好例です。Reactは、いいね、コメント、ステータス更新といったプラットフォームのリアルタイム機能を簡素化し、シームレスでダイナミックなユーザーエクスペリエンスを実現します。Reactのモジュール性は、Facebookの絶えず進化するインターフェースを支え、月間28億人を超えるアクティブユーザーのニーズに適応しています。.
インスタグラム
Instagram Webは、React.jsで構築されたインタラクティブな要素が散りばめられたキャンバスです。ストーリービューやダイレクトメッセージなど、あらゆる画像が、複雑なユーザーインタラクションを迅速に処理するReactの能力を際立たせています。このプラットフォームの美しくユーザーフレンドリーなインターフェースは、Reactが高パフォーマンスなインタラクションを実現する能力を証明しています。.
ネットフリックス
Airbnbは、React.jsが複雑なデータを直感的なユーザーエクスペリエンスへと変換する方法を実証しています。物件情報、インタラクティブマップ、リアルタイム予約機能は、それぞれが調和して機能するReactコンポーネントのシンフォニーであり、閲覧から予約までシームレスなユーザージャーニーを実現します。.
