初めてのコンポーネント

コンポーネント：UI構築ブロック

ウェブ上では、HTMLを使用することで、<h1>や<li>のような組み込みのタグセットを使用して、構造化された豊富なドキュメントを作成できます。

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

このマークアップは、この記事<article>、その見出し<h1>、そして（省略された）目次を順序付きリスト<ol>として表しています。このようなマークアップは、スタイルのためのCSSやインタラクティビティのためのJavaScriptと組み合わされ、ウェブ上で見られるすべてのサイドバー、アバター、モーダル、ドロップダウン、つまりすべてのUI要素の背後にあるものです。

Reactでは、マークアップ、CSS、JavaScriptをカスタム「コンポーネント」つまり、アプリケーション用の再利用可能なUI要素にまとめることができます。上記で見た目次コードは、<TableOfContents />コンポーネントに変換でき、どのページにもレンダリングできます。内部的には、<article>、<h1>などの同じHTMLタグを使用しています。

HTMLタグと同様に、コンポーネントを構成、順序付け、ネストして、全体のページを設計できます。たとえば、あなたが読んでいるこのドキュメントページは、Reactコンポーネントで構成されています。

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

プロジェクトが成長するにつれて、多くのデザインが既に作成したコンポーネントの再利用によって構成できることに気づき、開発速度が向上します。上記の目次を、<TableOfContents />を使って任意の画面に追加できます！ Chakra UIやMaterial UIのような、Reactオープンソースコミュニティによって共有されている何千ものコンポーネントを使用して、プロジェクトをすぐに開始することもできます。

コンポーネントの定義

従来、ウェブページを作成する際、ウェブ開発者はコンテンツにマークアップを施し、JavaScriptを散りばめることでインタラクションを追加していました。これは、インタラクションがウェブ上では便利な機能だったときにはうまく機能しました。今では多くのサイト、そしてすべてのアプリで期待されています。Reactはインタラクションを優先的に扱いながら、同じ技術を使用しています。Reactコンポーネントは、マークアップを散りばめることができるJavaScript関数です。それがどのようなものかを示します（以下の例を編集できます）。

そして、コンポーネントの構築方法を示します。

ステップ1：コンポーネントのエクスポート

export defaultプレフィックスは標準的なJavaScript構文(React固有のものではありません)。これにより、ファイル内のメイン関数をマークし、後で他のファイルからインポートできます。(インポートの詳細については、コンポーネントのインポートとエクスポートを参照してください！)

ステップ2: 関数の定義

function Profile() { } は、Profileという名前のJavaScript関数を定義します。

ステップ3: マークアップの追加

このコンポーネントは、<img />タグをsrc属性とalt属性と共に返します。<img />はHTMLのように記述されていますが、実際には内部的にはJavaScriptです。この構文はJSXと呼ばれ、JavaScript内にマークアップを埋め込むことができます。

return文は、このコンポーネントのようにすべて一行に記述できます。

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

しかし、マークアップがreturnキーワードと同じ行にない場合は、括弧で囲む必要があります。

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

コンポーネントの使用

これでProfileコンポーネントを定義したので、他のコンポーネントの中にネストできます。例えば、複数のProfileコンポーネントを使用するGalleryコンポーネントをエクスポートできます。

ブラウザが表示するもの

大文字と小文字の違いに注目してください。

• <section>は小文字なので、ReactはHTMLタグを参照していると認識します。
• <Profile />は大文字のPで始まるため、ReactはProfileというコンポーネントを使用したいと認識します。

そしてProfileにはさらに多くのHTML（<img />）が含まれています。最終的に、ブラウザが表示するのはこれです。

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

コンポーネントのネストと整理

コンポーネントは通常のJavaScript関数なので、複数のコンポーネントを同じファイルに保持できます。これは、コンポーネントが比較的小さかったり、互いに密接に関連している場合に便利です。ファイルが混雑してきた場合は、いつでもProfileを別のファイルに移動できます。インポートに関するページで、その方法をすぐに学ぶことができます。インポートとエクスポートに関するページ

ProfileコンポーネントはGallery内でレンダリングされています（複数回も！）。そのため、Galleryは親コンポーネントであり、各Profileを「子」としてレンダリングしていると見なすことができます。これがReactの魔法の一部です。コンポーネントを一度定義すれば、好きな場所で何度でも使用できます。

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}