コンポーネントでUIを構築する
Reactのコアコンセプト
Reactアプリケーションを構築するために知っておくべきReactのコアコンセプトは3つあります:
- コンポーネント (Components)
- プロップス (Props)
- ステート (State)
次の章ではこれらの概念について解説し、さらに学ぶためのリソースを提供します。これらの概念に慣れた後、Next.jsのインストール方法やサーバーコンポーネントとクライアントコンポーネントといった新しいReact機能の使い方を紹介します。
コンポーネント
ユーザーインターフェースは、コンポーネントと呼ばれる小さな構成要素に分解できます。
コンポーネントを使うと、自己完結型で再利用可能なコードスニペットを構築できます。コンポーネントをLEGOブロックのように考えると、個々のブロックを組み合わせてより大きな構造を作成できます。UIの一部を更新する必要がある場合、特定のコンポーネント（ブロック）だけを更新すればよいのです。
このモジュール性により、アプリケーションの他の部分に触れることなくコンポーネントを追加、更新、削除できるため、コードの成長に伴う保守性が向上します。
Reactコンポーネントの良いところは、それらが単なるJavaScriptであることです。JavaScriptの観点からReactコンポーネントの書き方を見てみましょう:
コンポーネントの作成
Reactでは、コンポーネントは関数です。scriptタグ内にheaderという新しい関数を作成します:
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>コンポーネントはUI要素を返す関数です。関数のreturn文内にJSXを記述できます:
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>このコンポーネントをDOMにレンダリングするには、root.render()メソッドの最初の引数として渡します:
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>Develop. Preview. Ship.</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(header);
</script>しかし、少し待ってください。上記のコードをブラウザで実行しようとするとエラーが発生します。これを機能させるには、2つのことを行う必要があります:
まず、ReactコンポーネントはプレーンなHTMLやJavaScriptと区別するために大文字で始める必要があります:
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
// Reactコンポーネントは大文字で始める
root.render(Header);次に、Reactコンポーネントは通常のHTMLタグと同じように、山括弧<>を使って使用します:
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);再度ブラウザでコードを実行すると、変更が反映されているのがわかります。
コンポーネントのネスト
アプリケーションには通常、単一のコンポーネントよりも多くのコンテンツが含まれます。Reactコンポーネントは、通常のHTML要素と同じようにネストできます。
この例では、HomePageという新しいコンポーネントを作成します:
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);そして、<Header>コンポーネントを新しい<HomePage>コンポーネント内にネストします:
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
{/* Headerコンポーネントをネスト */}
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);コンポーネントツリー
この方法でReactコンポーネントをネストし続けると、コンポーネントツリーを形成できます。
例えば、最上位のHomePageコンポーネントはHeader、Article、Footerコンポーネントを保持できます。そして、それらの各コンポーネントは、さらに独自の子コンポーネントを持つことができます。例えば、HeaderコンポーネントはLogo、Title、Navigationコンポーネントを含むことができます。
このモジュール形式により、アプリ内のさまざまな場所でコンポーネントを再利用できます。
このプロジェクトでは、<HomePage>が最上位のコンポーネントになったので、root.render()メソッドに渡すことができます:
function Header() {
return <h1>Develop. Preview. Ship.</h1>;
}
function HomePage() {
return (
<div>
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);追加リソース: