【React基礎学習1】Reactとは？

JavaScript
2021.06.22

こんにちは、かつコーチです。

JavaScriptには多くのライブラリやフレームワークがあります。

そんな中でも最も人気急上昇しているのがReact.jsです。

React.js（単に React とも呼ばれます）は、Facebook（現在のMeta）によって開発されたJavaScriptライブラリで、

**ユーザーインターフェース（UI）を構築するために使われます。

Reactは特にシングルページアプリケーション（SPA）**やモバイルアプリケーションの開発で広く使用されています。

Reactはコンポーネントベースであり、再利用可能なUI部品を作成することを目的としています。

以下、Reactの主な概念や特徴を説明していきます。

Reactの基本概念

1. コンポーネントベースの設計

  • ReactではUIをコンポーネントと呼ばれる独立した部品に分割します。コンポーネントは再利用可能で、UIの特定の部分を表します。
  • それぞれのコンポーネントは、入力（Props）を受け取り、何を表示するかを決定します。基本的に、コンポーネントは関数のようなもので、同じ入力が与えられると同じ結果（UI）を返します。
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • この例では、Welcomeというコンポーネントはprops.nameを使って”Hello, [name]”というメッセージを表示します。

2. 仮想DOM（Virtual DOM）

  • Reactのパフォーマンス向上のための革新的な概念が**仮想DOM（Virtual DOM）**です。
  • 通常のDOM操作は重いプロセスですが、ReactではDOMを直接操作する代わりに、仮想DOMという軽量なコピーを使います。変更があると、Reactは仮想DOMと実際のDOMを比較し、必要な部分だけを効率的に更新します。
  • これにより、パフォーマンスが大幅に向上し、スムーズなUI更新が可能になります。

3. JSX（JavaScript XML）

  • Reactのもう一つの大きな特徴は、JSXという構文拡張です。JSXはHTMLのような構文で、JavaScriptコード内でUIを記述することができます。
  • JSXを使うと、HTMLタグとJavaScriptコードを組み合わせたような書き方が可能です。
const element = <h1>Hello, world!</h1>;
  • JSXは最終的にJavaScriptのコードに変換されますが、HTMLに近い形でUIを定義できるため、視覚的に理解しやすいです。

4. 状態管理（State）

  • State はReactコンポーネントの内部で保持されるデータです。Stateが変わると、そのコンポーネントは再描画され、UIが最新の状態に更新されます。
  • Reactでは関数コンポーネントでuseStateというフックを使って状態を管理します。
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • この例では、countという状態変数を使って、ボタンがクリックされるたびにカウントが増加します。

5. Props（プロパティ）

  • Props は、親コンポーネントから子コンポーネントにデータを渡すための手段です。Stateとは異なり、Propsはコンポーネントの内部で変更できません（読み取り専用のデータです）。
  • Propsを使うことで、再利用可能なコンポーネントを作成し、異なるデータで異なる表示を行うことができます。
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}
  • この例では、Welcomeコンポーネントが異なるnameを受け取り、それぞれ”Alice”と”Bob”の名前を表示します。

6. フック（Hooks）

  • Hooksは、React 16.8から追加された機能で、関数コンポーネント内で状態や副作用を扱うことができるようにするためのものです。
  • 主なフックには次のようなものがあります。
    • useState：状態を管理するためのフック。
    • useEffect：副作用（APIリクエストやDOMの更新など）を管理するためのフック。
    • useContext：コンテキストを使用して状態をコンポーネント間で共有するためのフック。
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // コンポーネントがレンダーされるたびにこの副作用が実行される
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • useEffectを使うと、コンポーネントがレンダーされるたびにdocument.titleが更新されます。

Reactの利点

1. コンポーネントの再利用性

  • Reactコンポーネントは独立していて再利用可能なため、アプリケーションのさまざまな場所で同じコンポーネントを使い回すことができます。
  • これにより、コードの重複が減り、メンテナンスがしやすくなります。

2. 高速なレンダリング

  • Reactの仮想DOMのおかげで、UIの更新が非常に効率的に行われます。これにより、特に大規模なアプリケーションでのパフォーマンスが向上します。

3. シンプルなデータフロー

  • Reactは単方向データフローを採用しており、データは常に親から子へと流れます。これにより、アプリケーションの状態が分かりやすく、一貫性のあるデータ管理が可能になります。

4. 豊富なエコシステム

  • Reactには豊富なライブラリやツールが存在し、アプリケーションの状態管理（Redux や Context API）、ルーティング（React Router）など、さまざまな機能を簡単に追加できます。

Reactの欠点

1. 学習曲線

  • React自体は比較的シンプルですが、JSXやフックなどの新しい概念に慣れるまでには時間がかかることがあります。また、Reactを使うときには、**JavaScript ES6+**の機能（例：アロー関数、分割代入、スプレッド構文など）にも精通している必要があります。

2. 状態管理の複雑化

  • アプリケーションが大きくなると、状態管理が複雑になることがあります。特にグローバルな状態を扱う場合、ReduxやMobXなどの状態管理ライブラリが必要になることがあります。

Reactの応用

Reactはシンプルなコンポーネントから、複雑なアプリケーションまで対応できる柔軟性を持っています。

以下は、Reactを利用して構築できるアプリケーションの例です。

  • シングルページアプリケーション（SPA）
    • ユーザーがページ遷移を行ってもリロードせずに動作するアプリケーションです。例：Google Maps, Twitter
  • モバイルアプリケーション
    • React Nativeを使えば、Reactのスキルを使ってモバイルアプリも開発できます。例：Facebook, Instagram
  • ダッシュボードや管理システム
    • 大量のデータを扱うビジネスアプリケーションや管理システムでもReactは役立ちます。
タイトルとURLをコピーしました