やあ、こんにちは。Reactの世界へようこそ。
フロントエンドの最前線でコードを書いていると、つい「効率」や「パフォーマンス」といった硬い言葉ばかり使いがちだけど、今日は少し肩の力を抜こう。
Reactを学び始めた君が最初にぶつかる壁、それが「JSX（ジェーエスエックス）」だ。「HTMLっぽいのに、JavaScriptの中に書くの？ しかも波括弧（{}）って何？」と戸惑うのは、君が真剣に向き合っている証拠だよ。大丈夫、全然難しくないからね。
—
JSXは「JavaScriptというお弁当箱」に詰めた「HTMLというおにぎり」
JSXを理解する一番の近道は、「JavaScriptの中にHTMLの見た目をそのまま持ち込める魔法の仕組み」だと捉えることだ。
普通、Webサイトを作るには「HTML（骨組み）」と「JavaScript（動き）」を別々のファイルに書くのが一般的だよね。でも、Reactは「ボタンの見た目」と「ボタンが押された時の処理」はセットであるべきだと考える。
だから、お弁当箱（JavaScript）の中に、おにぎり（HTML）を直接詰め込めるようにしたんだ。これがJSXの正体さ。
波括弧 `{}` は、魔法の「小窓」
JSXの中で一番つまずきやすいのが、この波括弧 `{}` だ。これ、難しく考えなくていい。「HTMLの世界から、一瞬だけJavaScriptの世界に飛び出すための小窓」だと思ってほしい。
例えば、お買い物リストを想像してみて。
function ShoppingItem() {
const itemName = “美味しいリンゴ”; // JavaScriptの変数
return (
今日の特売品は、{itemName} です！
);
}
この `{itemName}` の部分。ここだけが「JavaScriptの変数の中身を覗き見ている」状態なんだ。波括弧を使えば、計算結果を表示したり、条件によって表示を変えたりと、やりたい放題できる。
—
JSXを書くときに「これだけは守ってね」という3つのルール
JSXは自由に見えて、実は少しだけお行儀に厳しい。でも、以下の3つさえ守れば、君のコードは驚くほど綺麗に書けるようになるよ。
1. タグは必ず「一つ」の親で包む
JSXは、複数のタグを並列に並べるのが苦手なんだ。
// ❌ ダメな例：h1とpがバラバラに置かれている
return (
タイトル
説明文
);
// ✅ 良い例：
return (
タイトル
説明文
);
これは「お弁当箱の中は、仕切りで一つにまとめてね」というルールだと思えばいい。もし余計な`
2. クラス名は `className` に変身させる
JavaScriptにはもともと `class` という別の役割を持つ言葉があるんだ。だから、HTMLの `class=”box”` をそのまま書くと、「どっちのクラスのこと？」とコンピューターが混乱してしまう。
だから、Reactではお約束として `className` と書く。これだけ覚えておこう。
3. 波括弧の中には「値になるもの」しか書けない
ここが一番重要かもしれない。波括弧 `{}` の中には、「最終的に何か一つの値（文字列や数値など）に化けるもの」しか書けない。
- OK: `{ 1 + 1 }` （結果は2になる）
- OK: `{ “こんにちは” }` （文字列そのもの）
- NG: `{ if (true) { … } }` （`if`文は「文」であって「値」ではないので、ここには書けない）
「もし条件によって表示を変えたいな」と思ったら、`if`文ではなく、三項演算子（`条件 ? 真 : 偽`）という便利な道具を使うんだ。
—
最後に：完璧を目指さなくていい
Reactの世界では、最初から綺麗なアーキテクチャを目指してガチガチに固める必要なんてないよ。まずは、波括弧の中に好きな数字や変数を入れてみて、ブラウザの画面がパッと変わる瞬間の「面白さ」を感じてみてほしい。
コードは書けば書くほど、自分の手足のように馴染んでくるものだ。
つまずいたときは、いつでもここに戻っておいで。君が書くコードが、誰かの生活を少しだけ便利にする未来を、僕は楽しみにしているよ。
それじゃあ、今日はこの辺で。ハッピー・コーディング！
コメント