キャメルケース・パスカルケースからスネークケースなど相互変換の処理方法

どうもフロントエンドエンジニアのまさぴょんです！

今回は、キャメルケースからスネークケースに変換する処理が実務の中で必要になって調べながら実装しましたので、共有します。

1 キャメルケースとスネークケースとは？
2 スネークケースからキャメルケース・パスカルケースへの変換
3 キャメルケース・パスカルケースからスネークケースの変換
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 参考・引用
7 最近の投稿

キャメルケースとスネークケースとは？

キャメルケース(camelCase)もスネークケース(snake_case)も命名規則の1つで、変数名や関数名、ファイル名など名前づけする必要がある際の表現方法です。

ポイントは、単語と単語を連結する際に、どうするかで4種類のCaseがあります。

キャメルケース(camelCase)：先頭以外の単語連結部分を大文字で表現する。
パスカルケース(PascalCase)：単語の先頭を大文字で表現する。
スネークケース(snake_case)：単語の連結部分をアンダースコア(_)で表現する。
ケバブケース(kebab-case)：単語の連結部分をハイフン(-)で表現する。

スネークケースからキャメルケース・パスカルケースへの変換

// スネークケースをキャメルケースにする
const SnakeToCamel = (snake) => { return snake.replace(/_./g, (searchStr)=>{
    return searchStr.charAt(1).toUpperCase();
})};

const snake_case = "snake_robo_tama"; // スネークケース-Sample

const camel = SnakeToCamel(snake_case);
console.log({camel}); // 出力結果： {camel: 'snakeRoboTama'}

// 続けてパスカルケースにする処理
const Initial = SnakeToCamel(snake_case).charAt(0).toUpperCase();
const pascal = camel.replace(camel.charAt(0), Initial)

console.log({pascal}); // 出力結果： {pascal: 'SnakeRoboTama'}

キャメルケース・パスカルケースからスネークケースの変換

// キャメルケースをスネークケースにする
const CamelToSnake = (camel) => { return camel.replace(/[A-Z]/g, (searchStr)=>{
    return "_" + searchStr.charAt(0).toLowerCase();
})};

const camelCase = "camelCaseRoboTama";

const snake_camel = CamelToSnake(camelCase);

console.log({snake_camel}); // 出力結果： {snake_camel: 'camel_case_robo_tama'}

// パスカルケースからスネークケースにする。
const PascalCase = "PascalCaseRoboTama";

const snake_pascal = CamelToSnake(PascalCase).slice(1);

console.log({snake_pascal}); // 出力結果： {snake_pascal: 'pascal_case_robo_tama'}