JavaScript Tips | 文字列ユーティリティ：整形 － パスカルケース化

JavaScript JavaScript
スポンサーリンク

パスカルケースってそもそも何か

まず言葉の整理からいきます。
「パスカルケース（PascalCase）」は、単語の先頭をすべて大文字にして、間をつめてつなげる書き方です。

"user name" → "UserName"
"user_name" → "UserName"
"user-id" → "UserId"

JavaScript だと、クラス名やコンポーネント名でよく使います。

class UserService {}
function UserRepository() {}
const UserCard = () => {};
JavaScript

この「パスカルケース」に自動で整形してくれるのが、
今回の「パスカルケース化ユーティリティ」です。

どんな入力を「パスカルケース」にしたいのか

業務コードだと、こんな状況がよくあります。

API や設定ファイルでは user_name や user-name と書かれている。
それをクラス名やコンポーネント名として UserName にしたい。
画面の定義ファイルから "user card" という名前を読み込んで、UserCard というコンポーネント名にしたい。

つまり、「バラバラな形式の文字列 → PascalCase」に変換したい場面が多い、ということです。

パスカルケース化の基本的な考え方

やりたいことを分解すると、こうなります。

区切り文字（スペース、アンダースコア、ハイフンなど）で単語に分割する。
各単語の「先頭文字」を大文字にする。
先頭以外の文字は小文字にそろえる。
区切り文字は削除して、全部つなげる。

例えば "user_name_id" なら、

["user", "name", "id"] に分割
"user" → "User"
"name" → "Name"
"id" → "Id"
つなげて "UserNameId"

という流れです。

シンプルなパスカルケース化ユーティリティ

実装例

初心者でも追いやすい形で書いてみます。

function toPascalCase(value) {
  if (value == null) return "";

  const str = String(value).trim();

  if (str === "") return "";

  const words = str
    .split(/[\s_\-]+/) // 空白・アンダースコア・ハイフンで分割
    .filter(Boolean);

  if (words.length === 0) return "";

  const pascal = words
    .map((w) => {
      const lower = w.toLowerCase();
      return lower.charAt(0).toUpperCase() + lower.slice(1);
    })
    .join("");

  return pascal;
}
JavaScript

重要なポイントを噛み砕きます。

value == null（null / undefined）のときは空文字を返して安全にする。
String(value).trim() で文字列化し、前後の空白を削る。
split(/[\s_\-]+/) で「空白・アンダースコア・ハイフン」を区切りとして単語に分ける。
各単語をいったん小文字にしてから、先頭だけ大文字にする。
最後に全部つなげて一つの文字列にする。

これで、よくある入力形式はだいたいパスカルケースに整形できます。

具体例で動きを確認する

スネークケースからパスカルケースへ

toPascalCase("user_name");        // "UserName"
toPascalCase("user_name_id");     // "UserNameId"
toPascalCase("USER_NAME");        // "Username" ではなく "Username" にならないよう lower → capitalize している
JavaScript

全部大文字でも、いったん小文字にしてから整形するので、
きれいに "UserName" になります。

ケバブケース（ハイフン区切り）からパスカルケースへ

toPascalCase("user-name");        // "UserName"
toPascalCase("user-name-id");     // "UserNameId"
JavaScript

CSS や設定ファイルの名前を、そのままクラス名・コンポーネント名に変換できます。

スペース区切りからパスカルケースへ

toPascalCase("user name");        // "UserName"
toPascalCase("  user   name  ");  // "UserName"
JavaScript

前後や途中の余計なスペースも、split と filter(Boolean) で吸収しています。

業務での実用的な使いどころ

コンポーネント名やクラス名を動的に組み立てる

例えば、画面定義を JSON で持っていて、
そこに "user card" のような名前が書いてあるとします。
それを UserCard というコンポーネント名に変換したい。

const config = {
  component: "user card",
};

const componentName = toPascalCase(config.component); // "UserCard"
JavaScript

この componentName を使って、
動的インポートやコンポーネントマップのキーにする、というパターンがよくあります。

クラス名・型名の自動生成

コード生成ツールやスキーマ定義から、
クラス名・型名を作るときにもパスカルケース化が役立ちます。

const tableName = "user_profile";
const className = toPascalCase(tableName); // "UserProfile"
JavaScript

DB のテーブル名や API のエンドポイント名から、
そのままクラス名を作る、というような用途です。

設計として大事なポイント

「どこでパスカルケースにするか」を決める

パスカルケース化は、「名前の見た目」を整えるための処理です。
なので、基本的には

内部で扱う識別子（クラス名・コンポーネント名・型名など）を決めるときに使う。
外部仕様（API のキー名など）には、むやみにパスカルケースを押し付けない。

という線引きをしておくと、設計がブレにくくなります。

特に、「外部から来た名前を、そのままパスカルケースにして保存する」のは慎重に考えたほうがいいです。
外部仕様が変わったときに、内部の名前まで引きずられてしまうからです。

おすすめは、

内部の命名ルール（クラス名・型名）はパスカルケースで統一する。
外部から来た名前は、必要なときだけ「変換して使う」。

というスタンスです。

小さな練習で感覚をつかむ

コンソールで、いくつか試してみてください。

toPascalCase("user_name");
toPascalCase("user-name-id");
toPascalCase("  user  name  id  ");
toPascalCase("USER_NAME");
toPascalCase(null);
JavaScript

どう分割されて、どう大文字・小文字が整えられて、
最終的に "UserNameId" のような形になるかを目で確認すると、
「パスカルケース化」のルールが体に入ってきます。

そのうえで、自分のプロジェクトに

export function toPascalCase(value) { ... }
JavaScript

を一つ置いて、
「クラス名・コンポーネント名・型名を文字列から作るときは必ずここを通す」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「場当たり的に名前をいじる」段階から
「ルールに基づいて名前を整形する」段階に、一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました