Reactの基礎: コンポーネントによるUI構築

Reactのコアコンセプト

Reactアプリケーションを構築するために知っておくべきReactのコアコンセプトは3つあります:

コンポーネント (Components)
プロップス (Props)
ステート (State)

次の章ではこれらの概念について解説し、さらに学ぶためのリソースを提供します。これらの概念に慣れた後、Next.jsのインストール方法やサーバーコンポーネントとクライアントコンポーネントといった新しいReact機能の使い方を紹介します。

コンポーネント

ユーザーインターフェースは、コンポーネントと呼ばれる小さな構成要素に分解できます。

コンポーネントを使うと、自己完結型で再利用可能なコードスニペットを構築できます。コンポーネントをLEGOブロックのように考えると、個々のブロックを組み合わせてより大きな構造を作成できます。UIの一部を更新する必要がある場合、特定のコンポーネント（ブロック）だけを更新すればよいのです。

3つの小さなコンポーネント（画像、テキスト、ボタン）で構成されるメディアコンポーネントの例

このモジュール性により、アプリケーションの他の部分に触れることなくコンポーネントを追加、更新、削除できるため、コードの成長に伴う保守性が向上します。

Reactコンポーネントの良いところは、それらが単なるJavaScriptであることです。JavaScriptの観点からReactコンポーネントの書き方を見てみましょう:

コンポーネントの作成

Reactでは、コンポーネントは関数です。scriptタグ内にheaderという新しい関数を作成します:

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

コンポーネントはUI要素を返す関数です。関数のreturn文内にJSXを記述できます:

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

このコンポーネントをDOMにレンダリングするには、root.render()メソッドの最初の引数として渡します:

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

しかし、少し待ってください。上記のコードをブラウザで実行しようとするとエラーが発生します。これを機能させるには、2つのことを行う必要があります:

まず、ReactコンポーネントはプレーンなHTMLやJavaScriptと区別するために大文字で始める必要があります:

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Reactコンポーネントは大文字で始める
root.render(Header);

次に、Reactコンポーネントは通常のHTMLタグと同じように、山括弧<>を使って使用します:

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

再度ブラウザでコードを実行すると、変更が反映されているのがわかります。

コンポーネントのネスト

アプリケーションには通常、単一のコンポーネントよりも多くのコンテンツが含まれます。Reactコンポーネントは、通常のHTML要素と同じようにネストできます。

この例では、HomePageという新しいコンポーネントを作成します:

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

そして、<Header>コンポーネントを新しい<HomePage>コンポーネント内にネストします:

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Headerコンポーネントをネスト */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

コンポーネントツリー

この方法でReactコンポーネントをネストし続けると、コンポーネントツリーを形成できます。

例えば、最上位のHomePageコンポーネントはHeader、Article、Footerコンポーネントを保持できます。そして、それらの各コンポーネントは、さらに独自の子コンポーネントを持つことができます。例えば、HeaderコンポーネントはLogo、Title、Navigationコンポーネントを含むことができます。

このモジュール形式により、アプリ内のさまざまな場所でコンポーネントを再利用できます。

このプロジェクトでは、<HomePage>が最上位のコンポーネントになったので、root.render()メソッドに渡すことができます:

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

追加リソース:

最初のコンポーネント

コンポーネントのインポートとエクスポート

コンポーネントでUIを構築する

Reactのコアコンセプト

コンポーネント

コンポーネントの作成

コンポーネントのネスト

コンポーネントツリー

On this page