Reactの共通レイアウト完全ガイド！初心者でもわかるレイアウトコンポーネント再利用術
生徒
「Reactでページを増やしたら、毎回同じヘッダーを書くのが大変です…」
先生
「それは共通レイアウトコンポーネントを使うと解決できます。」
生徒
「共通レイアウトって、どんなものなんですか？」
先生
「同じ見た目や構造を、何度も使い回せるようにした部品のことです。」
1. Reactにおける共通レイアウトとは
共通レイアウトとは、どのページでも同じ形で表示される部分をまとめたものです。 たとえば、画面の上にあるヘッダーや、下にあるフッターが代表例です。
パソコンを触ったことがない人でも、学校のプリントを想像するとわかりやすいです。 表紙や名前を書く場所は同じで、中身だけが変わります。 Reactでも同じ考え方で、外枠を共通化します。
2. なぜレイアウトをコンポーネント化するのか
同じレイアウトを毎回書くと、修正がとても大変になります。 たとえば、ヘッダーの文字を変えたい場合、すべてのページを直す必要があります。
共通レイアウトをコンポーネントにしておくと、一か所直すだけで全ページに反映されます。 これは、Reactの再利用という強みを最大限に活かす方法です。
3. 一番シンプルなレイアウトコンポーネント
まずは、ヘッダーと本文を持つシンプルなレイアウトを作ってみます。 レイアウトは、子要素を受け取る仕組みを使うのが基本です。
function Layout(props) {
return (
<div>
<header>
<h1>共通ヘッダー</h1>
</header>
<main>
{props.children}
</main>
</div>
);
}
export default Layout;
4. childrenとは何か
childrenとは、コンポーネントの中に書かれた内容を受け取るための仕組みです。 難しく聞こえますが、「中身を差し替えられる箱」と考えると理解しやすいです。
段ボール箱に入れる物を変えるように、レイアウトの中身だけを自由に変えられます。
import Layout from "./Layout";
function PageA() {
return (
<Layout>
<p>ページAの内容です</p>
</Layout>
);
}
export default PageA;
5. 複数ページでレイアウトを再利用する
同じLayoutコンポーネントは、別のページでも使えます。 中身だけを書き換えることで、見た目の統一感を保てます。
import Layout from "./Layout";
function PageB() {
return (
<Layout>
<p>こちらはページBです</p>
</Layout>
);
}
export default PageB;
6. フッターを追加した共通レイアウト
レイアウトには、ヘッダーだけでなくフッターも含めることが多いです。 よくある画面構成を一つにまとめておくと便利です。
function Layout(props) {
return (
<div>
<header>
<h1>共通ヘッダー</h1>
</header>
<main>
{props.children}
</main>
<footer>
<small>共通フッター</small>
</footer>
</div>
);
}
export default Layout;
7. レイアウトを分けて考えるメリット
レイアウトと中身を分けることで、役割がはっきりします。 レイアウトは見た目の枠組み、ページは内容だけに集中できます。
これは、ノートのテンプレートと文章を分けて考えるのと同じです。 初心者でも、コードを読むときに迷いにくくなります。
8. Appコンポーネントでの使い方
最後に、Appコンポーネントでページを表示してみます。 共通レイアウトを使っていることが一目でわかります。
import PageA from "./PageA";
function App() {
return <PageA />;
}
export default App;
