たった5分で分かる！ Reactのコンセプトや用語をやさしく解説

Post on:2024年9月25日

はじめに

Reactは、フロントエンドのコードを数分で開発できるJavaScriptライブラリです。特定のタスクを実行するためのメソッドと関数が用意されています。ライブラリとしてのReactには、reconciliation, state, props などの複雑な用語が含まれています。これらは実際に何を意味するのでしょうか？

この記事では、Reactのコンセプトについてより簡単に説明します。

Reactにおけるコンポーネントとは

Reactのコアコンセプトの一つは、コンポーネントベースのアーキテクチャです。ページ全体やアプリ全体を1つのファイルで構築するのではなく、UIを再利用可能な小さいコンポーネントに分割することを推奨しています。これにより、保守性とスケーラビリティが向上します。

コンポーネントはたとえば、ボタン、ナビゲーション、カードなど、Webページやアプリの1つの部分を構成するコードのグループです。JavaScriptの関数に似ていますが、Reactではレンダリングされた要素を返します。Propsと呼ばれるパラメータを受け取ります。また、コンポーネントの名前は、大文字で付けられます。

コンポーネントの例

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

function Heading(props) {

return <h1>Join us, {props.name}!</h1>;

}

メモ:

classベースの代わりに、機能コンポーネント（Functionl Components）が推奨されます。
Propsの値ではなくStateの値によってUIが動的にアップデートされる場合、機能コンポーネントはステートフルコンポーネント（Statefull Components）と呼ばれます。
State値ではなく、Propsの値によってUIが動的にアップデートされる場合、機能コンポーネントはステートレスコンポーネント（Stateless Components）と呼ばれます。

JSXとは

JSXとはJavaScript XMLのことで、ReactでHTMLを書くことを可能にします。Reactの要素を作成するためにXMLのようなタグと属性を導入しています。JavaScript内にHTMLのようなコードを直接記述できるため、UI要素を簡単に作成できます。

複雑なJavaScriptを使用する代わりに、JSXはコードを読みやすくクリーンにします。React DOMでは、htmlFor, onClickなどの属性の命名にキャメルケースが使用されます。

JSXの例

<h1 className="head">This is H1!</h1>

1	<h1 className="head">This is H1!</h1>

現在、TSXはJSX構文を含むTypaScriptファイルの拡張子です。TSXを使用すると、既存のJSX構文で型チェックされたコードを記述できます。TypeScriptは別の言語ではなく、オプションの静的型付けを追加したJavaScriptのスーパーセットのようなものです。

簡単に言うと、TXTファイルを使用すると、TypeScriptとJSXを一緒に使用してReactコンポーネントを記述できます。

TSXの例

interface AgeProps {
  age: number;
}

const GreetAge = (props: AgeProps) => {
  return (
    <div>
      Hello, you are {props.age} old.
    </div>
  );
};

interface AgeProps {

age: number;

}

const GreetAge = (props: AgeProps) => {

return (

<div>

Hello, you are {props.age} old.

</div>

);

};

メモ:

JSXファイルは、.jsxという拡張子を使用します。
TSXファイルは、.tsxという拡張子を使用します。
TypeScriptの型システム（Type System）は、開発の初期段階で潜在的なエラーを検出するのに役立ちます。

Reactのフラグメントとは

Reactのフラグメント（Fragments）を使用すると、コンポーネントから複数の要素を返すことができます。追加のDOMノードを作成せずに、要素のリストをグループ化します。DOMから余分なdivをすべて削除します。これにより、UIのレンダリングが素早くなります。

フラグメントの例

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

const App = () => {

return (

<button>Learn more</button>

<button>Repeat</button>

</>

);

}

メモ:

フラグメントは、コードがよりクリーンで読みやすくなります。
メモリ効率も優れています。
CSSのスタイルは使用できません。

ReactのPropsとは

Propsとは、プロパティを意味するReactの特別なキーワードです。親コンポーネントから子コンポーネントにデータを転送するために使用されます。データ転送は、親コンポーネントから子コンポーネントへの一方向です。

Propsの例

function Head(props) {
  return <p>{props.children}</p>;
}

function Head(props) {

return <p>{props.children}</p>;

}

メモ:

Propsは読み取り専用であるため、子コンポーネントが親コンポーネントから取得した値を操作することはできません。

ReactのStateとは

Stateは、コンポーネントが内部で所有および管理するデータに使用されます。コンポーネントは、ユーザーが操作したときに特定の値を追跡する必要があります。たとえば、ユーザーがボタンをクリックすると、ライトとダークにモードを切り替えるボタンの値が変わります。コンポーネントはテーマの現在の値を覚えておく必要があります。Reactでは、このようなコンポーネント固有のメモリはStateと呼ばれます。

Stateは、useState()またはuseReducer()で定義されます。

Stateの定義例

const [index, setIndex] = useState(0)

1	const [index, setIndex] = useState(0)

メモ:

Stateを他の子コンポーネントと簡単に共有し単一のソースを確保するために、トップレベルのコンポーネントでStateを定義することは良い習慣です。

ライフサイクルメソッドとは

ライフサイクルメソッド（Lifecycle Methods）とは、Reactクラス内で使用できる特別な関数で、コンポーネントが存在するさまざまな段階でアクションを実行します。段階は次の通りです。

マウント（Mounting）: コンポーネントが最初に作成され、DOMに挿入されるとき。
更新（Updating）、: コンポーネントのpropsまたはstateが更新され、コンポーネントが再レンダリングされるとき。
マウント解除（Unmounting）: コンポーネントがDOMから削除されるとき。

Reactコンポーネントの純粋性（Purity）

関数型プログラミングにおける純粋性（Purity）とは、与えられた同じ入力が同じ出力を返すことです。入力が出力を決定する唯一の要因である場合、関数は純粋であると言われます。

Reactでは、コンポーネントが同じ入力（つまり、props）に対して同じ出力を返すとき、純粋であると言われます。

ReactにおけるStrictモードとは

StrictモードはReactの開発機能で、コードの品質を向上させるための安全機能を可能にします。コード内の潜在的なエラーやバグに関する警告を表示します。この警告は、ブラウザのコンソールに記録されます。

Strictモードの例

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

import { StrictMode } from 'react';

function App() {

return (

</StrictMode>

</>

)

}

ReactのStrictモードでブラウザのコンソールを表示

Reactにおけるフックとは

Reactのフック（Hooks）を使用すると、クラスコンポーネントを記述せずにstateやその他のReactの機能を使用することができます。フックとは、Reactのstate管理、親子間の変数の受け渡しなどの機能へのアクセスを提供する関数です。

よく使用されるフックには、useState, useMemo, useRefなどがあります。

フックの例

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {

const [color, setColor] = useState("red"); // Initializing the state and setter function;

return (

<h1>My favorite color is {color}!</h1>

<button

type="button"

onClick={() => setColor("blue")} // Updating the state;

>Blue</button>

<button

type="button"

onClick={() => setColor("red")} // Updating the state;

>Red</button>

<button

type="button"

onClick={() => setColor("yellow")} // Updating the state;

>Yellow</button>

</>

);

}

メモ:

フックは、React関数コンポーネントの内部でのみ呼び出すことができます。
フックは、コンポーネントの最上位でのみ呼び出すことができます。
フックは、条件付きにすることはできません。

ReactのContext APIとは

Context APIは、各レベルで手動でpropsを渡すことなく、コンポーネントツリー全体でstateや関数のようなデータを共有するために使用されます。state管理を簡素化し、コンポーネント全体でデータを共有することで、propsのドリルダウンを回避します。Context APIを使用すると、データはそれを消費する子コンポーネントと直接共有されます。

コンテキストを作成するには、createContext()メソッドを使用します。この関数はProviderとConsumerの2つのコンポーネントを含むコンテキストオブジェクトを返します。

Providerは、コンテキストを利用したいコンポーネントツリーの一部をラップするために使用されます。Providerは他のコンポーネントと共有したいデータを保持する強制値propを受け取ります。

useContextフックは、データにアクセスするために使用されます。

Context APIの例

createContext()メソッドを使用してコンテキストを作成します。子コンポーネントをContext Providerでラップし、stateの値を与えます。

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {

const [count, setCount] = useState(10);

return (

<UserContext.Provider value={count}>

<h1>{`Current Count: ${count}!`}</h1>

</UserContext.Provider>

);

}

ageの値にアクセスするにはuseContextフックを使用します。

import { useContext } from "react";

function GrandChildConsumer() {
  const count = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

import { useContext } from "react";

function GrandChildConsumer() {

const count = useContext(UserContext);

return (

<h1>This is GrandChildConsumer</h1>

<h2>{`Current Count: ${count}`}</h2>

</>

);

}

メモ:

読みやすさと簡潔さを向上させるために、Consumerの代わりにuseContextフックがよく使用されます。

ReactにおけるListとKeyの扱い

keyは、Reactのリストのアイテムのための特別な種類の属性です。各アイテムが更新、削除、追加されたたときに一意な識別子として機能します。

アイテムのインデックスをkeyとして割り当てることは推奨されません。アイテムが並べ替えられると、期待される動作に影響を与えるからです。

たとえば、ショッピングカートに10個のアイテムが追加され、各アイテムにkeyとしてユニークなインデックスがあるとします。そしてカートから1番目と5番目のアイテムを削除することに決めたとします。アイテムが削除されるとインデックスが変更され、2番目のアイテムは1番目に、6番目のアイテムは4番目のアイテムになります。

ListとKeyの例

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

const fruits = ["apple", "banana", "orange"];

function FruitList() {

return (

<ul>

{fruits.map((fruit, index) => (

<li key={index}> {fruit} </li>

))}

</ul>

);

}

メモ:

リスト内のアイテムを一意に識別するkeyとして文字列を使用することを推奨します。
UUIDのようなサードパーティのライブラリは、一意なkeyを作成する機能を提供しています。

Reactにおけるフォーム: 制御コンポーネントと非制御コンポーネント

Reactのフォームは、従来のHTMLのフォームよりも優れたユーザー入力の収集と管理を可能にします。フォームはコンポーネントを使用して構築され、ユーザー入力をstateに保存します。
コンポーネントは、2種類あります。

制御コンポーネント

制御コンポーネントでは、フォームの状態はコンポーネント自身によって管理されます。これはReactでフォームのデータを管理するために推奨されるアプローチです。ユーザーがフォームを操作（入力欄に入力するなど）すると、コンポーネントのstateが更新され、変更が反映されます。

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

function ControlledInput() {

const [name, setName] = useState('');

const handleChange = (e) => {

setName(e.target.value);

}

return (

<div>

</div>

);

}

非制御コンポーネント

非制御コンポーネントは、フォームのデータ管理をDOMに依存します。コンポーネントはフォームのstateを直接制御しませんが、refなどのDOMメソッドを使用して値にアクセスすることができます。

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

function UncontrolledInput() {

const nameRef = useRef(null);

const handleClick = () => {

console.log(nameRef.current.value);

}

return (

<div>

</div>

);

}

メモ:

制御コンポーネントでは、ユーザーの入力がstateの使用により即座に反映されるため、フォームのバリデーションが提供されます。
非制御コンポーネントでは、ユーザーの入力が送信された後にしかアクセスできないため、フォームのバリデーションは不可能です。

React Routerとは

ナビゲーション用React Routerの紹介
基本的な設定と使用方法
例: ルートの作成とページ間のナビゲーション

React Routerとは、Reactにおけるルーティングのための標準ライブラリです。Reactアプリ内のさまざまなコンポーネント間のナビゲーションを可能にします。ブラウザのURLを変更したり、UIをURLと同期させたりできます。React Routerは、ナビゲーション機能を備えたシングルページのアプリケーション（SPA）を作成するために重要です。

React Routerを使用するには、まずはターミナルからReact Routerをインストールします。

React Routerのインストール

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

# If you are using npm

npm install react-router-dom

# If you are using yarn

yarn add react-router-dom

React Routerの例

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";

import About from "./pages/About";

import Contact from "./pages/Contact";

import NoPage from "./pages/NoPage";

export default function App() {

return (

</Routes>

</BrowserRouter>

);

}

まず、コンテンツを<BrowserRouter>でラップします。次に、<Routes>を定義し、その中にナビゲーション用の<Route>を導入します。<Route>にはページのURLを指定するpathと定義されたパスにレンダリングされるコンポーネントを指定するelement属性があります。

メモ:

アプリには複数の<Routes>を含めることができます。
<Route>はネストできます。
react-router-domはナビゲーション用の<Link>と<Outlet>コンポーネントもあります。

終わりに

プログラミング言語を学ぶ最良の方法は、より多くのプロジェクトを練習することです。小さなプロジェクトを構築し、そのコンセプトを体感してください。

XやGitHubやLinkedInで私をフォローすることで、私とつながることができます。

たった5分で分かる！ Reactのコンセプトや用語をやさしく解説

はじめに

Reactにおけるコンポーネントとは

コンポーネントの例

JSXとは

JSXの例

TSXの例

Reactのフラグメントとは

フラグメントの例

ReactのPropsとは

Propsの例

ReactのStateとは

Stateの定義例

ライフサイクルメソッドとは

Reactコンポーネントの純粋性（Purity）

ReactにおけるStrictモードとは

Strictモードの例

Reactにおけるフックとは

フックの例

ReactのContext APIとは

Context APIの例

ReactにおけるListとKeyの扱い

ListとKeyの例

Reactにおけるフォーム: 制御コンポーネントと非制御コンポーネント

制御コンポーネント

非制御コンポーネント

React Routerとは

React Routerのインストール

React Routerの例

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

たった5分で分かる！ Reactのコンセプトや用語をやさしく解説

はじめに

Reactにおけるコンポーネントとは

コンポーネントの例

JSXとは

JSXの例

TSXの例

Reactのフラグメントとは

フラグメントの例

ReactのPropsとは

Propsの例

ReactのStateとは

Stateの定義例

ライフサイクル メソッドとは

Reactコンポーネントの純粋性（Purity）

ReactにおけるStrictモードとは

Strictモードの例

Reactにおけるフックとは

フックの例

ReactのContext APIとは

Context APIの例

ReactにおけるListとKeyの扱い

ListとKeyの例

Reactにおけるフォーム: 制御コンポーネントと非制御コンポーネント

制御コンポーネント

非制御コンポーネント

React Routerとは

React Routerのインストール

React Routerの例

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info

ライフサイクルメソッドとは