Schematics で使える6つのユーティリティ関数

## はじめに

みなさまの開発現場では、JavaScriptフレームワークは何を使っていますでしょうか？弊社製品[^1]では Angular を使ったプロジェクトが多数存在します。日々、たくさんの要求からビジネスロジックを実装していくためには、単純な処理のプログラムは自動生成できるようにしておいて、より製品の価値を高め競争優位となる機能の開発に集中したいものです。Angular では **Schematics** というコードジェネレータが存在します。高機能なツールである一方で公式リファレンスに具体的な内容が少なく、実装の難易度が高いです。これまでの開発経験でジェネレータ実装の際に、公式リファレスに記載が少なくWeb検索やGitHubリポジトリなどのコードを読むことで把握することができたTipsを、同じようなスタックで開発を行う際のストック用として記しておきます。

## ソーステンプレートで使えるユーティリティ関数
アプリケーションのコードを生成するテンプレートを作る際には、DBのテーブル名はスネークケース、クラス名はパスカルケースなど、オブジェクト毎に命名規則が異なる場合があります。Angular Schematics でコードを生成する際には、それぞれの命名規則に即した形式に変換する必要があります。
公式のドキュメントでは下記の添付記載の `<%= classify(name) %>` のように命名規則を変換してくれるユーティリティ関数があります。しかし、その一覧や仕様の説明がありません。Angular Schematics のテンプレートファイル内で使用することができる変数変換のための6つの特別なメソッドの仕様をまとめておきます。

![スクリーンショット 2023-12-18 19.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343337/bb0d8f93-d9a6-295c-8674-a7f6d53f75fc.png)

https://angular.jp/guide/schematics-for-libraries

### 1. decamelize
大文字をアンダースコアの区切りと小文字に変換します。その他の区切り文字など、大文字以外の部分は何も変換しません。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | inner_html |
| action_name | action_name |
| css-class-name | css-class-name |
| my favorite items | my favorite items |

### 2. dasherize
アンダースコア、スペース及びキャメルケース[^2]をダッシュに置き換え、文字列全体をケバブケース[^3]に変換します。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | inner-html |
| action_name | action-name |
| css-class-name | css-class-name |
| my favorite items | my-favorite-items |

### 3. camelize
キャメルケース[^2]に変換します。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | innerHTML |
| action_name | actionName |
| css-class-name | cssClassName |
| **my favorite items** | myFavoriteItems |
| **My Favorite Items** | myFavoriteItems |

### 4. classify
パスカルケース[^4]に変換します。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | InnerHTML |
| action_name | ActionName |
| css-class-name | CssClassName |
| my favorite items| MyFavoriteItems |
| app.component | AppComponent |

### 5. underscore
スネークケース[^5]に変換します。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | inner_html |
| action_name | action_name |
| css-class-name | css_class_name |
| my favorite items| my_favorite_items |

### 6. capitalize
先頭文字のみ大文字に変換します。

| 変換前の文字列の例 | 変換後の文字列の例 |
|:-:|:-:|
| innerHTML | InnerHTML |
| action_name | Action_name |
| css-class-name | Css-class-name |
| my favorite items| My favorite items |

## おわりに
公式リファレスの補助情報となれば幸いです。

## 参考

Angular Schematics を検証した過去記事

https://qiita.com/m-yamagishi/items/3a9ce2179b7009434a4c

angular devkit のリポジトリ

https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/core/src/utils/strings.ts


[^1]:mcframe
SCMと原価管理のパッケージを中心とした、製造業支援特化のデジタルプラットフォーム
https://www.mcframe.com/product

[^2]:キャメルケース
キャメルケース（Camel Case）は、プログラミングにおける変数、関数、メソッド、クラスなどの識別子（名前）を付ける際に使われる命名規則の一つです。この規則では、複数の単語を連結し、最初の単語以外の各単語の最初の文字を大文字で書きます。パスカルケースと区別して、ローワーキャメルケースとも呼びます。

[^3]:ケバブケース
ケバブケース（Kebab Case）は、単語をすべて小文字で書き、単語の間にハイフン（ダッシュ）を挿入します。この規則は、文字列の形状がケバブ（ケバブ、ケバップ、ケバッブ）と呼ばれる中東発祥の食べ物に似ていることからきています。

[^4]:パスカルケース
パスカルケース（Pascal Case）は、各単語の最初の文字が大文字で書かれ、単語と単語の間には通常空白や記号を使いません。キャメルケースと区別して、アッパーキャメルケースとも呼びます。この規則は、英単語の頭文字を大文字にする形式です。この規則は、数学者・計算機科学者であるブレーズ・パスカル（Blaise Pascal）に由来しています。ブレーズ・パスカルは17世紀のフランスで初めて機械式計算機の一形態である「パスカルの計算機」を発明しました。

[^5]:スネークケース
スネークケース（Snake Case）は、単語をすべて小文字で書き、単語の間にアンダースコア（_）を挿入します。この規則は、文字が蛇のようにアンダースコアで区切られることから「スネークケース」と呼ばれています。