Frontend Academy · レッスン

関数コンポーネントと Props

関数としてコンポーネントを作成し、Props を受け取って分割代入し、PropTypes または TypeScript の型で期待するデータ形状を明示します。

「関数コンポーネントと Props」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Reactコンポーネントとは

Reactコンポーネントは、JSXを返すJavaScript関数です。コンポーネントはReactアプリケーションの構成要素であり、再利用や組み合わせが可能なUIの部品です。

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

Props — データを下位へ渡す

Props（プロパティ）は、親から子へデータを渡すための仕組みです。コンポーネントは、最初の引数として通常のオブジェクトでpropsを受け取ります。

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

Props用のTypeScriptインターフェース

props用に名前付きインターフェースを定義すると、入力補完、型チェック、ドキュメント化の恩恵を受けられます。

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

childrenプロパティ

childrenプロパティには、コンポーネントの開始タグと終了タグの間にあるコンテンツが含まれます。レンダリング可能な任意のコンテンツを受け入れるには、React.ReactNodeとして型付けします。

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

分割代入によるデフォルトProps

分割代入のパターンに直接デフォルト値を設定します。これは現在の推奨方法です。非推奨のdefaultProps APIは、もはや推奨されていません。

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

コンポーネントの組み合わせ

コンポーネントは組み合わせて使います。PageはLayoutを使い、LayoutはNavとSidebarを使い、NavとSidebarはそれぞれButtonやIconのような小さなアトムを使います。このコンポーネントのツリーがReactコンポーネントツリーです。

命名規則

コンポーネント名は大文字で始める必要があります。小文字で始まる名前はHTML要素として扱われます。<div>はHTMLのdiv要素であり、<Div>はDivという名前のReactコンポーネントです。

純粋なコンポーネント

同じpropsが常に同じ出力を生成し、レンダリング中に副作用が発生しない場合、そのコンポーネントは純粋です。純粋なコンポーネントは挙動を把握しやすく、最適化も容易です。

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

Propsとして関数を渡す

関数（コールバック）をpropsとして渡すと、子から親へ情報を伝えられます。関数は親が定義し、子が呼び出します。

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

Propsのスプレッド

スプレッド演算子を使うと、オブジェクトのすべてのpropsをコンポーネントに渡せます。ラッパーコンポーネントやパススルーコンポーネントに便利ですが、意図しないpropsまで渡る可能性があるため注意して使ってください。

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

PropsのコンテキストにおけるFragmentとキー

コンポーネントのリストをchildrenとしてレンダリングする場合、それぞれに一意のkeyプロパティが必要です。keyによって、どの項目が変更、追加、削除されたかをReactが識別しやすくなります。

クイックチェック

現代的なReactの関数コンポーネントで、propsにデフォルト値を指定するにはどうすればよいですか。

復習：コンポーネントとProps

関数コンポーネントは、JSXを返すJavaScript関数です。Propsで親から子へデータを渡します。propsの型にはTypeScriptのインターフェースを使います。スロットのコンテンツにはchildren: React.ReactNodeを使います。デフォルト値は分割代入で指定します。子から親への通信にはコールバックをpropsとして渡します。名前は大文字で始めます。

よくある質問

「関数コンポーネントと Props」レッスンは無料ですか？

はい。「関数コンポーネントと Props」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「関数コンポーネントと Props」で何を学びますか？

関数としてコンポーネントを作成し、Props を受け取って分割代入し、PropTypes または TypeScript の型で期待するデータ形状を明示します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「関数コンポーネントと Props」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る