こんにちは。フロントエンドの迷宮へようこそ。
Reactの世界に足を踏み入れたばかりの頃って、HTMLと似ているようで微妙に違う「JSX」というやつに、いきなり肩透かしを食らったりしませんか？「あれ、`class`って書いたのに反映されないぞ？」とか、「この波括弧 `{ }` は一体なんなんだ？」とか。
大丈夫、安心してください。それはあなたが間違っているのではなく、Reactという「魔法の道具」のルールを一つずつ学んでいる証拠です。今日は、そんなJSXの「属性とPropsの受け渡し」という最初の難関を、肩の力を抜いて一緒に紐解いていきましょう。
—
1. 「HTML」と「JSX」の微妙な距離感
HTMLを書くとき、私たちはタグに属性をつけますよね。例えば `
なぜ `class` ではなく `className` なのか？
一番最初にぶつかる壁がこれです。なぜ `class` と書かせてくれないのか。
理由はシンプルで、`class` はJavaScriptそのものが持っている「予約語」だからです。プログラミング言語の文法としてすでに「ここにはクラス定義を書くよ！」と決まっている場所に、HTMLの属性を混ぜると、コンピュータが混乱してしまいます。
だから、Reactは「じゃあ、HTMLのクラス属性は `className` って呼ぶことにしよう！」と決めたんです。同じように、フォームのラベルで使う `for` 属性も、JavaScriptのループ処理と被ってしまうので `htmlFor` になっています。
「あ、これはJSの世界にHTMLをお邪魔させているんだな」 と思えば、この命名規則も少し愛おしく感じられませんか？
—
2. JavaScriptの世界へようこそ：波括弧 `{ }` の魔法
JSXの最大の特徴は、「HTMLの中にJavaScriptの変数をそのまま埋め込める」という点です。ここで登場するのが波括弧 `{ }` です。
これを「お買い物」に例えてみましょう。
- 普通の文字列を渡すときは、`” “`（クォーテーション）で囲みます。これは「ただの商品ラベル」です。
- JavaScriptの変数や計算式を渡すときは、`{ }` で囲みます。これは「中身が何に変わるかわからない、魔法の小箱」です。
function UserProfile() {
const userName = “田中さん”; // ユーザーの名前という変数
const isOnline = true; // オンライン状態かどうかというフラグ
return (
プロフィール画面
{/ 波括弧を使うと、変数の中身が展開されます /}
こんにちは、{userName}！
{/
さらに、波括弧の中では計算や条件分岐もできます。
「オンラインなら”オンライン中”、そうでなければ”オフライン”」と表示
/}
ステータス: {isOnline ? “オンライン中” : “オフライン”}
);
}
—
3. Props（プロップス）は「コンポーネントへのプレゼント」
Reactの強みは、パーツを組み合わせて画面を作ることです。このパーツ（コンポーネント）に、「この名前を表示してね」「この色にしてね」と情報を渡す仕組みが Props です。
想像してみてください。あなたは今、手作りの「名札カード」を作る工場を運営しています。
名札（コンポーネント）には、必ず「名前」と「色」が必要ですよね。それを外から渡してあげるのがPropsの役割です。
// 名札コンポーネント（受け取る側）
function NameBadge({ name, color }) {
// propsとして受け取った値を、styleや表示内容に反映
return (
);
}
// 使う側（渡す側）
function App() {
return (
ここで “name” や “color” という名前でデータを渡しています。
これがPropsの正体です。
/}
);
}
—
最後にお伝えしたいこと
最初は `className` や `{ }` の使い分けに戸惑うかもしれません。でも、これらはすべて「JavaScriptという強力な言語の力を、Webサイトのパーツ作りに最大限活かすため」の工夫なんです。
エラーが出ても大丈夫。それはReactが「そっちじゃないよ、こっちのルールで書いてね」と優しく教えてくれているだけです。一つひとつ、書いては消して、動かして、を繰り返してみてください。
あなたの書くコンポーネントが、少しずつ画面上で命を持って動き出す瞬間。その感動は、何にも代えがたいものですよ。
焦らず、楽しく、Reactという旅を楽しんでくださいね！また何か詰まったら、いつでも聞きに来てください。応援しています。
コメント