🖥️

Next.js入門２ コンポーネント

に公開
JavaScript
Next.js
React
TypeScript
component
tech

記事一覧

  1. Next.js × Docker 最速環境構築
  2. Next.js入門１ ページ追加
  3. Next.js入門２ コンポーネント
  4. Next.js入門３ 無記名関数 & イベントハンドラー
  5. Next.js入門４ Hooks
  6. Next.js入門５ Todoアプリ（タスク一覧）
  7. Next.js入門６ Todoアプリ（タスク追加）
  8. Next.js入門７ Todoアプリ（タスク詳細）
  9. Next.js入門８ Todoアプリ（タスク編集, 削除）

コンポーネント

コンポーネントとは

  • UIの一部を切り出したもの
    （複数箇所で使い回すことができる）

ファイル作成

  • 今回はボタン用のコンポーネントを作る
  1. components/tag.tsxを作成
.
├── next-app
│   ├── app
│   └── components
│       └── tag.tsx # ここに作成
├── docker-compose.yml
└── Dockerfile
  1. tag.tsxに記述
    （ほとんどpage.tsxと同じ）
  • tag.tsx
// export function コンポーネント名
export function Tag() {
  return (
    <div className="w-fit p-3 rounded-xl border font-bold">
      タグ
    </div>
  );
}
  1. app/top/page.tsxを編集
  • page.tsx
// @はプロジェクトのrootを表している
// import { コンポーネント名 } from "パス"
import { Tag } from "@/components/tag";

function Page() {
    return (
      <div>
        <p>タグコンポーネント</p>
        {/* タグのように呼び出す */}
        <Tag></Tag>
      </div>
    );
  }

export default Page;
  1. http://localhost:3000/topにアクセスして以下のような画面が出ればOK

属性

コンポーネントでは属性を使用することができます。

  1. components/tag.tsxを編集
  • tag.tsx
// TypeScriptで属性の型を定義
type Props = {
  color: string;
  backgroundColor: string;
};

// 引数として属性を受け取り、型を定義する
export function Tag({ color, backgroundColor }: Props) {
  return (
    <div
        className="w-fit p-3 rounded-xl border font-bold"
        // styleで文字色と背景色に反映させる
        style={{
            color: color,
            backgroundColor: backgroundColor
        }}
    >
        タグ
    </div>
  );
}
  1. app/top/page.tsxを編集
  • page.tsx
import { Tag } from "@/components/tag";

function Page() {
  return (
    <div>
      <p>タグコンポーネント</p>
      {/* 属性を渡す */}
      <Tag
        color="#0000ff"
        backgroundColor="#ddddff"
      ></Tag>
    </div>
  );
}

export default Page;
  1. http://localhost:3000/topにアクセスして以下のような画面が出ればOK

子要素

コンポーネントでは子要素を使用するとこができます。

  1. components/tag.tsxを編集
  • tag.tsx
type Props = {
  color: string;
  backgroundColor: string;
  // childrenという名前で子要素を受け取ることができる
  // 子要素はReactNode型
  children: React.ReactNode;
};

export function Tag({ color, backgroundColor, children }: Props) {
  return (
    <div
        className="w-fit p-3 rounded-xl border font-bold"
        style={{
            color: color,
            backgroundColor: backgroundColor
        }}
    >
        {/* 子要素を表示 */}
        {children}
    </div>
  );
}
  1. app/top/page.tsxを編集
  • page.tsx
import { Tag } from "@/components/tag";

function Page() {
  return (
    <div>
      <p>タグコンポーネント</p>
      <Tag color="#0000ff" backgroundColor="#ddddff">
        {/* svgアイコン子要素として渡す */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24px"
          viewBox="0 -960 960 960"
          width="24px"
          fill="currentColor"
        >
          <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z" />
        </svg>
      </Tag>
    </div>
  );
}

export default Page;
  1. http://localhost:3000/topにアクセスして以下のような画面が出ればOK

Discussion