初めてのコンポーネント

コンポーネント：UI の構成部品

Web の世界では、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>) による目次（一部省略しています）を表現しています。我々がウェブで目にするサイドバー、アバター、モーダル、ドロップダウンといったあらゆる UI パーツの裏側では、このようなマークアップが、スタイルのための CSS やユーザ対話のための JavaScript と組み合わさりながら働いています。

React では、あなたのマークアップと CSS と JavaScript を、独自の “コンポーネント” と呼ばれる、アプリのための再利用可能な UI 要素にまとめることができます。上記にある目次のためのコードを、<TableOfContents /> と呼ばれるコンポーネントにすることができるのです。その裏では、やはり <articles> や <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 関数です。コンポーネントは以下のような見た目をしています（以下のコードは編集できます）。

コンポーネントは以下のようにして作成します。

Step 1: コンポーネントをエクスポートする

頭にある export default は標準的な JavaScript の構文です（React 特有のものではありません）。これでファイル内のメインの関数をマークし、後で他のファイルからそれをインポートできるようにします。（コンポーネントのインポートとエクスポートに詳細があります！）

Step 2: 関数を定義する

function Profile() { } のように書くことで、Profile という名前の JavaScript 関数を定義します。

Step 3: マークアップを加える

このコンポーネントは src と alt という属性を有する <img /> タグを返しています。<img /> はまるで HTML のように書かれていますが、裏では実際には JavaScript です！ この構文は JSX と呼ばれるもので、これによりマークアップを JavaScript 内に埋め込めるようになります。

return 文は、以下のように 1 行にまとめて書いても構いません。

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 の中には <img /> という HTML が更に含まれてます。最終的に、ブラウザに見えるのは以下のようなものです。

<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() {
  // ...
}