【入門編】コンポーネントの命名規則 – React実践ガイド

Reactの世界へようこそ！ここへたどり着いたあなたは、今まさに「部品を組み合わせてWebサイトを作る」という、最高にワクワクするパズルの入り口に立っています。

今日は、Reactのコードを書くとき、誰もが最初にぶつかる「名前のルール」という小さな、けれどめちゃくちゃ大切な習慣についてお話しします。

Reactでコードを書いていると、最初は「なんでこんな面倒なルールがあるの？」と思うことがあるかもしれません。でも、想像してみてください。

あなたは巨大なレゴショップの店長です。棚には「四角い赤いブロック」と「特注の赤い屋根パーツ」が混ざって置かれています。もし、どちらもただの「block」という名前だったら、お客さんはどちらが自分で組み立てるべきパーツで、どちらが完成品なのか迷ってしまいますよね。

Reactも同じです。「これは普通のHTMLのタグ（divやpなど）なのか？それとも、俺たちが自分で作った特別な部品（コンポーネント）なのか？」を、Reactという名の店員さんに正しく教える必要があります。

そのために、Reactには「PascalCase（パスカルケース）」という名前の付け方が義務付けられています。

—

難しく聞こえますが、要は「すべての単語の頭文字を大文字にする」というルールです。

たったこれだけで、Reactは「あ、これは自分で作った部品だな！中身をチェックしに行こう！」と瞬時に判断してくれます。

—

例えば、お買い物サイトの「商品カード」を作る場面を想像してみましょう。

// これはReactの「コンポーネント」です
// 大文字で始まっているので、Reactは「あ、これは部品だ！」と認識します
function ProductCard() {
return (

おいしいリンゴ

{/
ここにある

);
}

// 使うときはこうやって書きます
// と小文字で書くと、ReactはHTMLタグだと勘違いしてエラーになります！
// 必ずと大文字で書きましょう

—

初学者の頃、`function productCard()` と小文字で名前をつけてしまい、「画面に何も表示されない！」と焦ることは、伝説のエンジニアである僕だって経験してきました。

Reactは優しいので、小文字でコンポーネントを定義しようとすると、「それはHTMLのタグとして探したけど見つからなかったよ！」というエラーを出して教えてくれます。

もし画面が真っ白になったら、まずは「コンポーネントの頭文字が大文字になっているか？」を確認する。これが、Reactトラブルシューティングの「最初の処方箋」です。

—

コンポーネントの名前は、「それが何をするものか」を動詞や名詞で表すと、後から見たときにすごく楽になります。

こんなふうに、「何をする部品か」を名前につけるだけで、コードがまるで「物語」のように読めるようになります。誰か他の人があなたのコードを見たとき、「ああ、これはユーザーのプロフィールを表示する部品なんだな」と一瞬で理解できる。これが、プロの現場で大切にされている「美しいコード」の第一歩です。

—

最初はルールを覚えるのが大変かもしれませんが、大丈夫。この「PascalCase」という小さな習慣は、あなたのコードを「ただの文字の羅列」から「整理整頓された美しい部品箱」へと変えてくれる魔法の杖です。

もし今日、名前の付け方で迷ったら、いつでもここに戻ってきてください。あなたはもう、Reactというパズルを解く楽しさを知っているのですから。

さあ、次はどんなワクワクする部品を作りましょうか？応援していますよ！