再利用可能なプレゼンテーションコンポーネント
再利用しやすい、小さくProps駆動のUI部品（ボタン、カード、バッジ）を設計します。className/styleの上書きを受け付け、隠れた副作用を避けます。
「再利用可能なプレゼンテーションコンポーネント」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
プレゼンテーションコンポーネントを使う理由
目標: 再利用やコンポジションがしやすい、props によって動作する UI 部品を構築します。
- 明確な props API
- state を持たない見た目
- スタイルの上書き
基本方針
原則:
- props を読み取り、変更してはいけません。
- 副作用を持たせず、レンダリングだけを行います。
- カスタマイズできるよう className／style を公開します。
小さな API を設計
props の名前はわかりやすくし、安全なデフォルト値を用意します。バリエーションには primary や disabled のような単純な真偽値を優先します。
デモ: プレゼンテーションコンポーネントのセット
例: props とクラスの上書きを受け取る、小さな Button、Badge、Card コンポーネントです。
<div id="root"></div>
コンポジションのヒント
ヒント:
- 柔軟なコンテンツを受け取れるよう children を受け入れます。
- 微調整できるよう className／style を公開します。
- バリエーションは最小限にします（例: primary）。
避けるべきアンチパターン
避けること:
- コンポーネント内で props を変更すること。
- 隠れたグローバル state の変更。
- 変更手段を用意せずにスタイルをハードコードすること。
プレゼンテーションのベストプラクティス
まとめ
まとめ: 安全なデフォルト値を持つ小さなprops 駆動コンポーネントを構築し、children と className を受け入れ、副作用を避けることで簡単に再利用できるようにします。
よくある質問
「再利用可能なプレゼンテーションコンポーネント」レッスンは無料ですか？
はい。「再利用可能なプレゼンテーションコンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「再利用可能なプレゼンテーションコンポーネント」で何を学びますか？
再利用しやすい、小さくProps駆動のUI部品（ボタン、カード、バッジ）を設計します。className/styleの上書きを受け付け、隠れた副作用を避けます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「再利用可能なプレゼンテーションコンポーネント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Propsの受け渡しとコンポジションパターン
- Propsとコンポジション
- 再利用可能なプレゼンテーションコンポーネント