Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – コンポーネント

この課題のねらい

この演習のテーマは「コンポーネントに慣れること」です。
やることはシンプルで、

関数コンポーネントを自分で作る
それを画面に表示する
慣れてきたら、コンポーネントを別ファイルに分けて再利用する

という流れを通して、「React の基本単位はコンポーネントなんだ」という感覚を体に入れます。

必須課題① 関数コンポーネントを作成する

関数コンポーネントって何者か

React のコンポーネントは「見た目（JSX）を返す関数」です。
難しく言う必要はなくて、

「function 名前() { return (JSX); } という形の“見た目を返す関数”」

これが関数コンポーネントです。

まずは、app/page.tsx の中に小さなコンポーネントを1つ定義してみます。

例として「講座タイトルだけを表示するコンポーネント」を作ります。

// app/page.tsx

function LectureTitle() {
  return <h2>Next.js × React 入門講座</h2>;
}

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <LectureTitle />
    </main>
  );
}

// app/page.tsx

function LectureTitle() {
  return <h2>Next.js × React 入門講座</h2>;
}

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <LectureTitle />
    </main>
  );
}

ここでやっていることは 2 つだけです。

LectureTitle という関数コンポーネントを作っている
Page コンポーネントの中で <LectureTitle /> として使っている

この「関数を JSX タグのように呼び出す」のが、コンポーネントの一番の特徴です。

必須課題② コンポーネントを画面に表示する

自作コンポーネントを使う（タグとして書く）

さっきの例では、LectureTitle を <LectureTitle /> として使いました。
これが「コンポーネントを画面に表示する」ということです。

もう少しだけ情報を増やしてみましょう。
自己紹介をするコンポーネントを作る例です。

// app/page.tsx

function Profile() {
  return (
    <section>
      <h2>プロフィール</h2>
      <p>Next.js と React を勉強中です。</p>
    </section>
  );
}

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <Profile />
    </main>
  );
}

// app/page.tsx

function Profile() {
  return (
    <section>
      <h2>プロフィール</h2>
      <p>Next.js と React を勉強中です。</p>
    </section>
  );
}

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <Profile />
    </main>
  );
}

ここで大事なのは、「コンポーネント名は必ず大文字で始める」というルールです。
小文字で function profile() として <profile /> と書くと、React はそれを「ただの HTML タグ」と勘違いしてしまいます。

コンポーネントを画面に出すまでの流れを整理すると、

関数コンポーネントを定義する
そのコンポーネントを、別のコンポーネントの JSX の中で <コンポーネント名 /> と書く
最終的に export default されたコンポーネントが Next.js によってページとして表示される

という階層になっています。

挑戦課題：コンポーネントを別ファイルに分ける

なぜ別ファイルに分けるのか

コンポーネントが増えてくると、1 ファイルの中がどんどん長くなります。
見通しが悪くなるので、「意味のある単位」でファイルを分けていくのが普通です。

別ファイル化のメリットは、

役割ごとにコードを分けられる（読みやすい）
他のページでも簡単に再利用できる（コピペ不要）

というところにあります。

実際に分ける手順（例：Profileコンポーネント）

さっきの Profile コンポーネントを別ファイルに出してみます。
次のような構成をイメージしてください。

app
└─ components
　 └─ Profile.tsx
└─ page.tsx

まず app/components/Profile.tsx を作り、こう書きます。

// app/components/Profile.tsx

export default function Profile() {
  return (
    <section>
      <h2>プロフィール</h2>
      <p>Next.js と React を勉強中です。</p>
    </section>
  );
}

// app/components/Profile.tsx

export default function Profile() {
  return (
    <section>
      <h2>プロフィール</h2>
      <p>Next.js と React を勉強中です。</p>
    </section>
  );
}

ここでは、

Profile コンポーネントを定義して
export default で外から使えるようにしている

という状態です。

次に、app/page.tsx からこれを読み込みます。

// app/page.tsx
import Profile from "./components/Profile";

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <Profile />
    </main>
  );
}

// app/page.tsx
import Profile from "./components/Profile";

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <Profile />
    </main>
  );
}

ポイントは、

ファイル上部で import Profile from "./components/Profile"; と読み込む
JSX の中で <Profile /> として使う

という 2 ステップだけです。

これで、

Profile の中身を触りたくなったら Profile.tsx だけ見ればよい
Top ページのコードは「ページ全体の構造」に集中できる

という状態になります。

まとめと、この課題でつかんでほしい感覚

この演習で本当に身につけてほしいのは、次の感覚です。

コンポーネントは「見た目を返す関数」で、<コンポーネント名 /> として使う
1つのページの中で、小さなコンポーネントをいくつか組み合わせて画面を作る
コンポーネントが増えてきたら、「意味ごと」に別ファイルに分けて import して使う

ここまでできれば、もう「React の基本構造」はほぼ掴めています。

もし余力があれば、

自己紹介カードコンポーネント
講座カードコンポーネント
ヘッダーコンポーネント

などをそれぞれ別ファイルに分けてみてください。