チャプター5

コンポーネントによるUI構築

Reactのコアコンセプト

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

コンポーネント
Props
State

次の章では、これらのコンセプトについて詳しく説明し、さらに学習できるリソースを提供します。これらのコンセプトに慣れたら、Next.jsのインストール方法と、Server ComponentsやClient Componentsなどの新しいReact機能の使用方法を説明します。

Components

ユーザーインターフェイスは、**コンポーネント**と呼ばれる小さなビルディングブロックに分解できます。

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

Example of a Media Component made up of 3 smaller components: image, text, and button

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

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

コンポーネントの作成

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

<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を記述できます。

<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()メソッドの最初の引数として渡します。

<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と区別するために大文字で始める必要があります。

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

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

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

もう一度ブラウザでコードを実行しようとすると、変更が表示されるはずです。

コンポーネントのネスト

アプリケーションには通常、単一のコンポーネント以上のコンテンツが含まれます。通常のHTML要素のように、Reactコンポーネントを互いに**ネスト**できます。

例では、HomePageという新しいコンポーネントを作成してください。

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

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

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

コンポーネントツリー

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

Component tree showing how components can be nested inside each other

たとえば、トップレベルのHomePageコンポーネントには、Header、Article、Footerコンポーネントを含めることができます。そして、これらの各コンポーネントには、さらに子コンポーネントを含めることができます。たとえば、Headerコンポーネントには、Logo、Title、Navigationコンポーネントを含めることができます。

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

プロジェクトでは、<HomePage>がトップレベルコンポーネントになったので、これをroot.render()メソッドに渡すことができます。

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

追加リソース

最初のコンポーネント

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