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

はじめに

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

ソーステンプレートで使えるユーティリティ関数

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

1. decamelize

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

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

2. dasherize

アンダースコア、スペース及びキャメルケース²をダッシュに置き換え、文字列全体をケバブケース³に変換します。

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

3. camelize

キャメルケース²に変換します。

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

4. classify

パスカルケース⁴に変換します。

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

5. underscore

スネークケース⁵に変換します。

変換前の文字列の例	変換後の文字列の例
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 を検証した過去記事

angular devkit のリポジトリ

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

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

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

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

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