Angularの開発を便利にするSchematicsを複数紹介

株式会社CauchyE CEO, CTOの 木村優 です。
本記事はAngular Advent Calendarの記事を、弊社のテックブログ記事として書かせていただくものです。

Schematicsとは？

@angular-eslint/schematics

ESLintをAngularに導入・利用するためのSchematicsです。

https://github.com/angular-eslint/angular-eslint

以下のコマンドでSchematicsのインストールをします。

ng add @angular-eslint/schematics

ひとたびこのSchematicsをインストールしてしまえば、

ng g @angular-eslint/schematics:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_HERE}}

このコマンドで既存のAngularプロジェクトに対してESLint設定を追加することができます。また、

# To generate a new Angular app in the workspace using ESLint
ng g @angular-eslint/schematics:app
# To generate a new Angular library in the workspace using ESLint
ng g @angular-eslint/schematics:lib

このコマンドで、ESLint設定をすでに完了してあるAngularプロジェクトを、ワークスペースに追加することができます。

@angular-jest/schematics

単体テストフレームワークJestをAngularに導入・利用するためのSchematicsです。

https://github.com/CauchyE/angular-jest

これは筆者が作成したものになります。以下に紹介記事を書きましたのでぜひ読んでみてください。

https://zenn.dev/cauchye/articles/20210915_kimurayu45z

以下のコマンドでSchematicsのインストールをします。

ng add @angular-jest/schematics

ひとたびこのSchematicsをインストールしてしまえば、

ng g @angular-jest/schematics:add-jest {{YOUR_PROJECT_NAME_GOES_HERE}}

このコマンドで既存のAngularプロジェクトに対してJest設定を追加することができます。また、

ng g @angular-jest/schematics:remove-karma {{YOUR_PROJECT_NAME_GOES_HERE}}

このコマンドでKarma・Jasmine関連ファイルを削除することができます。詳しくは紹介記事をご覧ください。

@cypress/schematic

結合テストフレームワークCypressをAngularに導入・利用するためのSchematicsです。

https://github.com/cypress-io/cypress/tree/master/npm/cypress-schematic#readme

以下の機能があります。

• Cypressのインストール
• npm scriptの追加
• Cypressに必要な設定ファイル等のスキャフォールディング
• テストファイルのボイラープレートのスキャフォールディング
• ng e2eコマンドでCypressが走るように設定(オプショナル)

以下のコマンドでSchematicsのインストールをします。

ng add @cypress/schematic

本記事で紹介している他のSchematicsは、だいたい

• ng addでSchematicsのインストールをする
• インストールしたSchematicsの別のコマンドで、Angularプロジェクトに対してなんらかの機能を導入する

という流れになっていますが、CypressのSchematicsはng addの中にCypressの機能のインストールが盛り込まれていることは要注意です。

@ngrx/schematics

NgRxのボイラープレートを生成してくれるSchematicsです。

https://ngrx.io/guide/schematics

以下のコマンドでSchematicsのインストールをします。

ng add @ngrx/schematics@latest

このSchematicsの使い方を説明するにはNgRxの説明をせねばならず長くなるので省略します。詳しくは上記リンクの公式ドキュメントをご覧ください。

@angular/cdk

Angular CDK(Component Development Kit)はSchematics機能を備えていて、Angular CDKを利用したコンポーネントのボイラープレートを自動生成することができます。

ng generate @angular/cdk:drag-drop <component-name>

@angular/material

Angular CDKを使って開発されているAngular Materialにも実はSchematicsがあり、Angular Materialを利用したコンポーネントのボイラープレートを自動生成することができます。

ng generate @angular/material:address-form <component-name>
ng generate @angular/material:navigation <component-name>
ng generate @angular/material:table <component-name>
ng generate @angular/material:dashboard <component-name>
ng generate @angular/material:tree <component-name>

Default Collectionについて

@angular-eslint/schematicsのREADMEにもあるとおり、たとえば

ng config cli.defaultCollection @angular-eslint/schematics

という設定を行うと、今まで

ng g @angular-eslint/schematics:app
ng g @angular-eslint/schematics:lib

と記述していたコマンドを、

ng g app
ng g lib

という記述で実行させることができるようになります。つまり、Angular CLIに元々備わっている機能(ここではng g appとng g lib)ではなく、代わりにng g @angular-eslint/schematics:appとng g @angular-eslint/schematics:libを、元々備わっている機能の名前(appとlib)で実行できるようになるということです。

これは一見便利ではありますが、Default Collectionに設定できるSchematicsは1つのAngularのワークスペースにつき1つのみであることに注意してください。つまり併用ができません。

従って、複数のSchematicsを同時に使いたい場合、appを上書きするようなSchematicsはどれか一つしか選べないため、結局は@angular-eslintでいうところのng g @angular-eslint/schematics:add-eslint-to-projectのように、既存プロジェクトに対して機能を追加する、というSchematicsを行うことになります。

@angular-eslintや@ngrx/schematicsなど、Schematicsをng addでインストールした際にDefault Collectionとして登録するか聞いてくるSchematicsがありますが、上記の点を把握したうえで決めるようにしましょう。

CauchyE は一緒に働いてくれる人を待ってます！

ブロックチェーンやデータサイエンスに興味のあるエンジニアを積極的に採用中です！
以下のページから応募お待ちしております。
https://cauchye.com/company/recruit