Reactコンポーネントの基礎
Reactは、UIをコンポーネントという部品に分けて作るライブラリです。
コンポーネントとは？
コンポーネントは、UIの一部を表す再利用可能な部品です。
例えば、こんなWebページがあるとします：
┌─────────────────────┐
│ Header（ヘッダー） │
├─────────────────────┤
│ Sidebar │ Main │
│ (サイド) │ (メイン) │
├─────────────────────┤
│ Footer（フッター） │
└─────────────────────┘これを、Header、Sidebar、Main、Footerという4つのコンポーネントに分けて作れます。
コンポーネントの基本形
Reactでは、コンポーネントは「関数」として書きます。
シンプルな例
function Hello() {
return <h1>Hello, React!</h1>;
}ポイント：
- 関数名は大文字で始まる（Helloの"H"は大文字）
- JSXをreturnする
- JSXは、HTMLのように見えるが実はJavaScript
コンポーネントを使う
function Hello() {
return <h1>Hello, React!</h1>;
}
export default function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}結果：
Hello, React!
Hello, React!
Hello, React!同じコンポーネントを何度でも使えます！
JSXとは？
JSXは、JavaScriptの中にHTMLのような記述ができる構文です。
基本ルール
1. 複数の要素を返す場合、1つの親要素で囲む
❌ ダメな例
function App() {
return (
<h1>タイトル</h1>
<p>説明文</p>
);
}✅ 正しい例
function App() {
return (
<div>
<h1>タイトル</h1>
<p>説明文</p>
</div>
);
}2. JavaScriptの式を埋め込むには { } を使う
function App() {
const name = "太郎";
const age = 25;
return (
<div>
<h1>私の名前は{name}です</h1>
<p>年齢は{age}歳です</p>
<p>来年は{age + 1}歳になります</p>
</div>
);
}3. classNameを使う（classではない）
❌ ダメな例
<div class="container">...</div>✅ 正しい例
<div className="container">...</div>Props（プロパティ）
Propsは、コンポーネントにデータを渡す仕組みです。関数の引数のようなものです。
基本的な使い方
// Propsを受け取るコンポーネント
function Greeting(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
// Propsを渡す
export default function App() {
return (
<div>
<Greeting name="太郎" />
<Greeting name="花子" />
<Greeting name="次郎" />
</div>
);
}結果：
こんにちは、太郎さん！
こんにちは、花子さん！
こんにちは、次郎さん！分割代入を使う（推奨）
分割代入とは？ オブジェクトから特定のプロパティを取り出す書き方です。
// 通常の書き方
function Greeting(props) {
return <h1>こんにちは、{props.name}さん！</h1>; // props.〇〇と書く
}
// 分割代入を使う（推奨）
function Greeting({ name }) { // { } で囲んで直接取り出す
return <h1>こんにちは、{name}さん！</h1>; // nameだけで使える
}メリット：
- コードが短くなる
- 何を受け取っているか一目でわかる
- Reactでは分割代入がよく使われる
TypeScriptで型をつける
// Propsの型を定義
function Greeting({ name }: { name: string }) {
return <h1>こんにちは、{name}さん！</h1>;
}
// または、インターフェースで定義
interface GreetingProps {
name: string;
}
function Greeting({ name }: GreetingProps) {
return <h1>こんにちは、{name}さん！</h1>;
}複数のPropsを渡す
interface UserCardProps {
name: string;
age: number;
email: string;
}
function UserCard({ name, age, email }: UserCardProps) {
return (
<div>
<h2>{name}</h2>
<p>年齢: {age}歳</p>
<p>メール: {email}</p>
</div>
);
}
export default function App() {
return (
<div>
<UserCard
name="太郎"
age={25}
email="[email protected]"
/>
</div>
);
}条件付きレンダリング
条件によって表示内容を変える方法です。
if文を使う方法
function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
if (isLoggedIn) {
return <h1>おかえりなさい！</h1>;
} else {
return <h1>ログインしてください</h1>;
}
}三項演算子を使う方法（推奨）
function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
return (
<h1>
{isLoggedIn ? "おかえりなさい！" : "ログインしてください"}
</h1>
);
}&& を使う方法
function Notification({ hasUnread }: { hasUnread: boolean }) {
return (
<div>
<h1>通知</h1>
{hasUnread && <p>未読の通知があります</p>}
</div>
);
}リストのレンダリング
配列をループして、複数の要素を表示する方法です。
function FruitList() {
const fruits = ["りんご", "バナナ", "オレンジ"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}重要： key プロパティは必須です。Reactが要素を識別するために使います。
オブジェクトの配列をレンダリング
interface User {
id: number;
name: string;
age: number;
}
function UserList() {
const users: User[] = [
{ id: 1, name: "太郎", age: 25 },
{ id: 2, name: "花子", age: 23 },
{ id: 3, name: "次郎", age: 30 }
];
return (
<div>
{users.map((user) => (
<div key={user.id}>
<h3>{user.name}</h3>
<p>年齢: {user.age}歳</p>
</div>
))}
</div>
);
}まとめ
コンポーネント
- UIを部品に分けて作る
- 関数として定義する
- 関数名は大文字で始まる
- JSXを返す
JSX
- JavaScriptの中にHTMLのような記述ができる
- { } でJavaScriptの式を埋め込む
- classではなくclassNameを使う
Props
- コンポーネントにデータを渡す仕組み
- 関数の引数のようなもの
- TypeScriptで型をつけると安全
レンダリング
- 条件付き:
? :や&&を使う - リスト:
map()を使う、keyは必須
次は、状態（State）を扱うHooksを学びましょう！