Reactの関数名エラー｜大文字小文字の重要性を理解する

あなたも、Reactで関数を作った時にこんな経験はありませんか？

「コンポーネントが表示されない...」「なんかエラーが出てる...」「書き方は合ってるはずなのに..."

実は、Reactでは関数名の大文字小文字がとても重要なんです。 小文字で始まる関数名を使うと、Reactはそれを通常のHTMLタグだと勘違いしてしまうんですよね。

でも大丈夫です！

この記事では、Reactの関数名における大文字小文字の重要性と、正しい命名規則について詳しく解説します。 エラーの原因と解決方法をしっかり理解して、適切なReactコンポーネントを作れるようになりましょう。

Reactの関数名には大切なルールがある！基本を理解しよう

まず、Reactの関数名における基本的なルールを理解しましょう。

「なんで大文字じゃないとダメなの？」という疑問も、これを見ればスッキリしますよ。

コンポーネント名は大文字で始めないとダメ！

Reactでは、コンポーネント名は必ず大文字で始める必要があります。

// ✅ 正しい書き方（大文字で始まる）
function MyComponent() {
  return <div>Hello World</div>;
}

// ❌ 間違った書き方（小文字で始まる）
function myComponent() {
  return <div>Hello World</div>;
}

最初のMyComponentは正しく動作しますが、二番目のmyComponentは期待通りに動きません。

この規則は、ReactがコンポーネントとHTMLタグを区別するために重要なんです。

なぜ大文字で始める必要があるの？

Reactが内部的に、こんな風に判別しているからなんです。

Reactの判別ルール

• 大文字で始まる: Reactコンポーネントとして認識
• 小文字で始まる: 通常のHTMLタグとして認識

// React内部での判別
<MyComponent />    // → React.createElement(MyComponent, ...)
<myComponent />    // → React.createElement('myComponent', ...)
<div />            // → React.createElement('div', ...)

小文字で始まる場合、ReactはmyComponentという名前のHTMLタグを探そうとします。

でも、そんなHTMLタグは存在しないので、うまく動かないんですね。

小文字で始めるとこんな問題が起きます

小文字で始まる関数名を使った場合の具体的な問題を見てみましょう。

「あれ？なんで動かないの？」となる前に、しっかり理解しておきましょう。

警告メッセージが表示される

まず、ブラウザのコンソールに警告が表示されます。

// ❌ 小文字で始まる関数名
function myButton() {
  return <button>Click me</button>;
}

function App() {
  return <myButton />; // 警告が表示される
}

こんな警告メッセージが出ます。

Warning: The tag <myButton> is unrecognized in this browser. 
If you meant to render a React component, start its name with 
an uppercase letter.

「このブラウザでは<myButton>タグは認識できません。Reactコンポーネントを表示したい場合は、名前を大文字で始めてください」という意味です。

Reactが親切に教えてくれているんですね。

コンポーネントが期待通りに動作しない

もっと深刻な問題もあります。 プロパティが正しく渡されないんです。

// ❌ 小文字で始まる関数名
function userProfile({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <userProfile name="田中太郎" email="tanaka@example.com" />
    </div>
  );
}

このコードでは、userProfile関数は実行されません。

nameとemailのプロパティも渡されないので、何も表示されないんです。 HTMLタグとして処理されるので、Reactコンポーネントとしての機能が全く動かないんですね。

正しい命名規則を覚えよう！

Reactコンポーネントの正しい命名規則を詳しく解説します。

一度覚えてしまえば、もうエラーで悩むことはなくなりますよ。

PascalCase（パスカルケース）を使いましょう

ReactコンポーネントはPascalCaseで命名します。

// ✅ 正しい命名例
function UserProfile() { }
function SearchBox() { }
function NavigationBar() { }
function ProductList() { }
function ShoppingCart() { }

間違った命名パターンも確認しておきましょう。

// ❌ 間違った命名例
function userProfile() { }      // camelCase
function searchbox() { }        // 小文字
function navigation_bar() { }   // snake_case
function product-list() { }     // kebab-case

各単語の最初の文字を大文字にすることで、読みやすく一貫性のある命名ができます。

「UserProfile」「SearchBox」のように、意味のまとまりごとに大文字にするのがコツですね。

ファイル名とコンポーネント名を一致させよう

ファイル名とコンポーネント名は対応させることが推奨されます。

// UserProfile.js
function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

export default UserProfile;

ファイル名もUserProfile.jsのように、コンポーネント名と同じPascalCaseで命名します。

こうすることで、「どのファイルにどのコンポーネントがあるか」がすぐにわかって便利ですよ。

よくあるエラーパターンと解決方法

よくあるエラーパターンと、その解決方法を見てみましょう。

「あ、これやっちゃってた！」というものがあるかもしれませんね。

パターン1: 基本的な大文字小文字の間違い

一番よくある間違いです。

// ❌ 問題のあるコード
function header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

function App() {
  return (
    <div>
      <header /> {/* 期待通りに動作しない */}
    </div>
  );
}

修正は簡単です。関数名を大文字で始めるだけ！

// ✅ 修正したコード
function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

function App() {
  return (
    <div>
      <Header /> {/* 正しく動作する */}
    </div>
  );
}

関数名をheaderからHeaderに変更することで、問題が解決されます。

JSXでの使用時も<Header />のように、大文字で始めることを忘れずに。

パターン2: 複数単語の組み合わせ

複数の単語を組み合わせる場合のパターンです。

// ❌ 問題のあるコード
function userProfileCard({ user }) {
  return (
    <div className="profile-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.title}</p>
    </div>
  );
}

正しくは、各単語の最初を大文字にします。

// ✅ 修正したコード
function UserProfileCard({ user }) {
  return (
    <div className="profile-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.title}</p>
    </div>
  );
}

user + profile + card = UserProfileCardのように、意味のまとまりごとに大文字にします。

読みやすく、意味も理解しやすくなりますね。

パターン3: プロパティが渡されない問題

これも初心者の方がよくハマるパターンです。

// ❌ 問題のあるコード
function button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function App() {
  const handleClick = () => {
    alert('Clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

この場合、onClickプロパティが渡されず、期待通りに動作しません。

関数名を大文字にして、JSXでも正しく使いましょう。

// ✅ 修正したコード
function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function App() {
  const handleClick = () => {
    alert('Clicked!');
  };

  return (
    <Button onClick={handleClick}>
      Click me
    </Button>
  );
}

関数名をButtonに変更し、JSXでも<Button>として使用することで、プロパティが正しく渡されます。

クリックしたときに、ちゃんとアラートが表示されるようになりますよ。

通常の関数とコンポーネント関数の使い分け

Reactでは、コンポーネント以外の通常の関数も使用します。

それぞれの使い分けを理解しておきましょう。

コンポーネント関数はPascalCase

JSXを返す関数は、Reactコンポーネントとして大文字で始めます。

// ✅ コンポーネント関数（PascalCase）
function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

これは画面に表示される部品（コンポーネント）なので、大文字で始めます。

通常の関数はcamelCase

JSXを返さない通常の関数は、camelCaseで命名します。

// ✅ 通常の関数（camelCase）
function formatDate(date) {
  return date.toLocaleDateString('ja-JP');
}

function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

function validateEmail(email) {
  return email.includes('@');
}

これらは計算や処理を行う関数なので、小文字で始めるcamelCaseを使います。

実際の使い分けの例

両方を組み合わせて使う例を見てみましょう。

// 通常の関数
function formatUserName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

// コンポーネント関数
function UserProfile({ user }) {
  const fullName = formatUserName(user.firstName, user.lastName);
  
  return (
    <div>
      <h2>{fullName}</h2>
      <p>{user.email}</p>
    </div>
  );
}

formatUserNameは名前を整形する処理なので小文字で始まり、UserProfileは画面に表示するコンポーネントなので大文字で始まります。

役割に応じて適切な命名規則を使い分けることが大切ですね。

ESLintで自動チェックしよう

ESLintを使用することで、命名規則を自動的にチェックできます。

「うっかり間違えちゃった」を防ぐのに役立ちますよ。

設定例を見てみよう

// .eslintrc.json
{
  "rules": {
    "react/jsx-pascal-case": ["error", {
      "allowAllCaps": true,
      "ignore": []
    }]
  }
}

この設定により、大文字で始まらないコンポーネント名に対してエラーが表示されます。

コーディング中にリアルタイムで教えてくれるので、とても便利です。

実際のエラー表示

ESLintを設定すると、こんな感じでエラーが表示されます。

// ❌ ESLintエラーが発生
function myComponent() {
  return <div>Hello</div>;
}

// エラーメッセージ：
// Component name "myComponent" should be in PascalCase

「コンポーネント名 "myComponent" はPascalCaseにしてください」と教えてくれます。

VSCodeなどのエディタでは、赤い波線で表示されるので見逃すことがありません。

TypeScriptでの注意点

TypeScriptを使用している場合の型定義も確認しましょう。

基本的なルールは同じですが、型定義の書き方も覚えておくと便利です。

関数コンポーネントの型定義

import React from 'react';

// ✅ 正しい型定義
interface UserProfileProps {
  user: {
    name: string;
    email: string;
    avatar: string;
  };
}

function UserProfile({ user }: UserProfileProps): JSX.Element {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

TypeScriptでも、コンポーネント名は大文字で始める必要があります。

型定義も一緒に書くことで、プロパティの型チェックもできて安心ですね。

React.FC を使う場合

// React.FC を使用する場合
const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

アロー関数で書く場合も、変数名は大文字で始めます。

どちらの書き方でも、命名規則は同じですよ。

よくあるつまずきポイントを知っておこう

初心者の方がよくつまずくポイントと対策をご紹介します。

事前に知っておけば、同じ失敗を避けられますね。

HTMLタグとの混同

// ❌ HTMLタグとコンポーネントの混同
function App() {
  return (
    <div>
      <header>サイトヘッダー</header> {/* HTMLタグ */}
      <header />                     {/* コンポーネント？ */}
    </div>
  );
}

HTMLタグは小文字、Reactコンポーネントは大文字で始まることを理解しましょう。

<header>はHTMLのheaderタグ、<Header>はReactコンポーネントです。 全く別物なので、混同しないよう注意してくださいね。

ファイル名との不一致

// ❌ ファイル名とコンポーネント名が不一致
// userProfile.js
function UserProfile() {
  return <div>Profile</div>;
}

ファイル名とコンポーネント名がバラバラだと、管理が大変になります。

// ✅ ファイル名とコンポーネント名を一致
// UserProfile.js
function UserProfile() {
  return <div>Profile</div>;
}

ファイル名とコンポーネント名を一致させることで、「どこに何があるか」がすぐにわかります。

チーム開発では特に重要なポイントですよ。

importでの名前の変更

// ❌ importで小文字に変更
import userProfile from './UserProfile';

// ✅ 元の名前を保持
import UserProfile from './UserProfile';

// または、名前を変更する場合も大文字で始める
import UserCard from './UserProfile';

importする際も、大文字で始まる名前を使用しましょう。

小文字に変更してしまうと、使う時に混乱しちゃいますからね。

まとめ：正しい命名規則でReactを楽しく開発しよう！

お疲れ様でした！ Reactの関数名における大文字小文字の重要性について、詳しく学んできました。

重要なポイントをおさらい

• Reactコンポーネントは必ず大文字で始める（PascalCase）
• 小文字で始まるとHTMLタグとして認識される
• 通常の関数はcamelCaseで命名する
• ESLintで自動チェックを設定するとミスを防げる
• ファイル名とコンポーネント名を一致させると管理しやすい

こんなメリットがあります

• エラーが発生しなくなる
• プロパティが正しく渡される
• チーム開発で一貫性のあるコードが書ける
• コンポーネントとHTMLタグの区別が明確になる

この命名規則を守ることで、Reactコンポーネントが期待通りに動作し、快適な開発ができるようになります。

最初は「なんで大文字じゃないとダメなの？」と思うかもしれませんが、慣れてくるとこのルールのおかげでコードが読みやすくなることがわかりますよ。

ぜひ、今回紹介した内容を参考に、正しい命名規則でReactコンポーネントを作成してみてくださいね！