こんにちは！Reactの世界へようこそ。
新しい技術に触れるとき、「これ、どうやって書くんだっけ？」と小さな疑問が積み重なるのは、あなたが真剣に取り組んでいる証拠です。安心してください、最初はみんなそこで少しだけ立ち止まります。
今日は、ReactのJSXの中で「ちょっとメモを残したいな」という時に、多くの初心者が「あれっ、動かない？」と首をかしげる「コメントの書き方」について、一緒に紐解いていきましょう。
—
なぜ、いつもの「//」が効かないことがあるの？
普段、JavaScriptを書いている時は `//` や `/ /` を使えば、どこでも自由にメモが書けますよね。でも、ReactのJSXという「HTMLみたいな見た目の場所」に入った瞬間に、なぜかエラーが出たり、画面にコードがそのまま表示されてしまったりすることがあります。
これは、Reactが「ここはHTMLっぽく見せているけれど、中身はJavaScriptのプログラムだよ！」と必死に解釈しようとしているからです。
例えるなら、「手紙の中に、突然別の言語のメモを挟み込んだ」ような状態です。Reactという郵便局員さんが「これ、どうやって届けたらいいの？」と困ってしまうんですね。
—
JSX内でコメントを書くための「魔法のルール」
JSXの中でコメントを書くとき、一番のポイントは「波括弧 `{ }` で囲ってあげること」です。
JSXというHTMLの世界から、波括弧を使って「ちょっとだけJavaScriptの世界にワープするよ！」と宣言し、その中でコメントを書くのが基本ルールです。
1. 複数行のコメント（/ … /）を使う場合
これは、HTMLタグの内側でメモを残したいときに使います。
function WelcomeCard() {
return (
こんにちは！
{/
ここに複数行のメモが書けます。
例えば、「この下のボタンはまだ機能していません」とか
「後でスタイルを調整する予定」といった記録を残すのに便利ですね。
/}
);
}
2. なぜ「//」は1行だけで使えないの？
実は、`//` を使った1行コメントも書きたいですよね。でも、実は `//` を波括弧の中で使うときは、少しだけ注意が必要なんです。
// これならOK！
{/ メモ /}
// でも、これはダメ！
{ // メモ }
なぜなら、`//` は「その行の終わりまで全部コメントにする」という命令なので、波括弧を閉じようとした `}` までコメントとして飲み込んでしまうからです。Reactさんが「閉じカッコを見失ったよ！」とパニックになるんですね。
もし1行コメントを使いたいなら、必ずコメントの最後に波括弧を閉じるためのスペースを空けるか、基本的には `{/ … /}` を使う癖をつけてしまうのが、最もトラブルが少なくておすすめです。
—
現場のプロからの「ちょっとしたコツ」
現場でバリバリ開発しているエンジニアたちは、どうしているか？
正直に言うと、「コメントは必要最小限」にしています。
コードを書いているときは「ここ重要！」と思ってコメントをたくさん書きたくなりますが、実は「コードそのものが何をしようとしているか説明している状態」が理想的です。
- `/ このボタンはログイン用 /` と書くよりも、ボタンの名前を `LoginButton` と名付ける。
- `/ 1000ミリ秒待機する /` と書くよりも、関数名を `waitOneSecond()` にする。
そうやって名前を工夫すると、コメントなしでも読みやすい綺麗なコードになります。それでも「あ、ここは特殊な事情があるから残しておかないと！」という時のための安全策として、今日紹介した `{/ … /}` を使ってみてください。
—
最後に：つまずくことは、成長の証
「こんな簡単なことでエラーが出るなんて…」と落ち込む必要は全くありません。むしろ、エラーが出るということは、あなたがReactのコードをしっかり動かそうと試行錯誤している証拠です。
JSXのコメントは、最初は少し不思議に感じるかもしれませんが、一度覚えてしまえば「なんだ、波括弧の中に隠れていればいいだけなんだ！」と自然に書けるようになりますよ。
これからも、一つずつ楽しく学んでいきましょうね。あなたのReactライフを応援しています！
コメント