ReactJSとは

Reactは、しばしばReact.jsまたはReactJSと呼ばれる、Facebookによって開発されたオープンソースのJavaScriptライブラリです。2013年に初めてリリースされ、以来、開発者や企業の間で非常に人気を集めています。Reactの主な目的は、特にSPA（シングルページアプリケーション）向けのユーザーインターフェースを構築することです。

Reactは、コンポーネントと呼ばれる分離されたコードの単位から複雑なユーザーインターフェースを作成することができます。これらのコンポーネントは再利用でき、アプリケーション全体での一貫性の維持や開発の効率化に役立ちます。

Reactの特徴の一つは、仮想DOM（Virtual DOM）です。従来のウェブアプリケーションでは、サーバー上でページをレンダリングし、全体のHTMLとCSSをクライアントに送信していました。特に大規模なアプリケーションでは、このアプローチは効率的ではありませんでした。Reactの仮想DOMは、コンポーネントをレンダリングし、変更があった部分のみページを更新することで、このプロセスを最適化します。これにより、より高速なレンダリングとスムーズなユーザーエクスペリエンスが実現されます。

Reactの利点のもう一つは、豊富なコミュニティとエコシステムです。React開発者向けには、多くのライブラリ、ツール、リソースが利用可能です。また、Facebookや他のコミュニティメンバーによってメンテナンスされているため、常に改善や更新が行われています。

Reactは、ウェブアプリケーションとモバイルアプリケーションの両方の開発に使用することができる柔軟性も備えています。ReactJSの姉妹版であるReact Nativeを使用すると、Reactのコンセプトを活用してモバイルアプリケーションを作成することができます。

コアコンセプト

コンポーネント

コンポーネントは、Reactアプリケーションの構築ブロックです。コンポーネントは、基本的にはユーザーインターフェース（UI）の一部を表す自己完結型のコードです。コンポーネントはLEGOブロックのように考えることができます。異なる方法で組み合わせることで複雑なUIを構築することができます。

Reactには、次の2つの主要なタイプのコンポーネントがあります。

• 関数コンポーネント
  これらはよりシンプルで、コンテンツをレンダリングするだけで状態を管理する必要のないコンポーネントに使用されます。関数コンポーネントは、JSXを返すだけのJavaScript関数です。

• クラスコンポーネント
  ReactがHooksを導入する前は、状態とライフサイクルメソッドを持つコンポーネントにはクラスコンポーネントが使用されていました。クラスコンポーネントは、関数コンポーネントに比べてボイラープレートコードが多く必要ですが、強力でより多くの機能を提供します。

JSX（JavaScript XML）

JSXはJavaScript XMLの略で、JavaScript内でHTMLのように見える記法を使用するための構文拡張です。Reactアプリケーションの構築には必須ではありませんが、コードをより読みやすく表現力豊かにします。ただし、ブラウザはJSXを理解しないため、Babelなどのツールを使用して通常のJavaScriptにコンパイルする必要があります。

const element = <h1>Hello, World!</h1>;

仮想DOM

Reactの画期的な機能の一つが仮想DOMの実装です。DOMはUIの表現ですが、DOMを直接操作することは遅く効率的ではありません。ReactはDOMの仮想的な表現を作成し、コンポーネントの状態が変更されるたびに仮想DOMを更新します。Reactは、実際のDOMと仮想DOMを「調和」というプロセスで比較し、変更があった部分のみ効率的にUIを更新します。このプロセスは「差分検出」として知られています。

プロップスとステート

プロップスとステートは、Reactアプリケーションでデータを管理する上で必要な2つの概念です。

• プロップス
  プロップス（またはプロパティ）は、親コンポーネントから子コンポーネントにデータを渡すための方法です。プロップスは不変であり、コンポーネント自体はプロップスを変更することはできません。プロップスはコンポーネント間の通信メカニズムとして機能します。

• ステート
  ステートは、時間の経過とともに変化し、その変化に応じてコンポーネントを再レンダリングするために使用されるデータです。ステートは可変です。ステートの変更はコンポーネントの再レンダリングをトリガーします。

開発環境の設定

インストールと設定

Reactでアプリケーションを構築する前に、開発環境を設定する必要があります。これには、Node.jsとnpmやYarnなどのパッケージマネージャーのインストールが含まれます。

新しいプロジェクトの作成

開発環境が設定されたら、新しいReactプロジェクトを作成します。Reactにはcreate-react-appというコマンドラインツールが用意されており、適切なデフォルトの構成で新しいプロジェクトをセットアップします。

1. 新しいReactアプリケーションの作成

ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。

$ npx create-react-app my-react-app

これにより、my-react-appという名前のディレクトリが作成され、Reactアプリケーションに必要な全てのファイルと設定が含まれます。

2. プロジェクトディレクトリに移動

次のコマンドを使用して、新しく作成されたディレクトリに移動します。

cd my-react-app

3. 開発サーバーの起動

次に、次のコマンドを実行して開発サーバーを起動します。

$ npm start

このコマンドはローカルの開発サーバーを起動し、デフォルトのWebブラウザが新しいReactアプリを表示します。Reactのロゴが表示されます。

参考

https://react.dev/