カテゴリー: Angular

RxJSとは Part 1

RxJSはかなりボリュームがあるので何回かに分けて取り扱います。まずは、RxJSの概要、ObservableとObserverについて説明します。

RxJSとは?

RxJSは、ReactiveXプロジェクトの一部として開発されたJavaScript用のリアクティブプログラミングライブラリです。このライブラリを用いることで、非同期データストリームをシンプルかつ効果的に扱うことができます。Webアプリケーションでのユーザーインタラクションのハンドリングや外部データソースからのデータ更新の監視はもちろん、Node.jsベースのバックエンドでの開発においても有効です。

特に、Node.jsにおける利用ケースとしては、WebSocketメッセージのストリーム処理、外部システムやデータベースからのイベントドリブンアーキテクチャ、ストリームベースのファイル処理、外部APIのポーリングやマイクロサービス間の非同期通信など、非同期やデータストリーム処理が中心となるシナリオでの使用が挙げられます。

リアクティブプログラミングの概要

リアクティブプログラミングは、データストリームとそのデータストリームに対する変化の伝播に基づくプログラミングパラダイムの1つです。これは、変数の変更やイベント、ユーザーの操作など、さまざまな情報源からのデータを非同期的に扱うのに適しています。

例えば、ユーザーインターフェイスのイベント、APIからのレスポンス、または定期的に発生するイベントなど、様々なものがデータストリームとして表現されます。そして、これらのデータストリームに変更や操作を行うための処理を結合・合成することで、高度な動作やデータの流れを簡単に表現することができます。

ObservableとObserver

RxJSの中心となる概念は、ObservableとObserverです。

Observable

データストリームの源となるオブジェクトです。非同期的にゼロ以上の値を生成し、それらの値をObserverに通知します。例として、ユーザーのクリックイベントやHTTPリクエストのレスポンスなどが考えられます。

Observer

Observableからのデータの通知を受け取るオブジェクトです。3つの主要なメソッドがあります。

  • next: 新しいデータがObservableから送られてきたときに呼び出される。
  • error: エラーが発生したときに呼び出される。
  • complete: データの送信が完了したときに呼び出される。

Observableを購読することで、データストリームを監視し、新しいデータやエラー、完了の通知を受け取ることができます。この購読の過程でObserverの各メソッドが関連付けられ、データの流れに応じて適切な処理が行われます。

RxJSの主要な概念

Observableの作成

Observableは、非同期なデータや複数のデータの流れを表現するオブジェクトです。RxJSでは、様々な方法でObservableを生成することができます。

of

静的な値からObservableを作成します。

import { of } from 'rxjs';
const observable = of(1, 2, 3);

from

配列やPromise、繰り返し可能なオブジェクトからObservableを作成します。

import { from } from 'rxjs';
const observable = from([1, 2, 3]);

create

カスタムのObservableを作成します。特定のロジックや外部のデータソースと結合したい場合に使用します。

import { Observable } from 'rxjs';
const observable = new Observable(observer => {
  observer.next('Hello');
  observer.next('World');
  observer.complete();
});

pipe関数

pipe関数 は、与えられたオペレータを左から右の順番で適用して、新しい Observable を返すObservableの関数です。このメカニズムにより、非同期データの変換、フィルタリング、エラーハンドリングなどの一連の操作を組み合わせることができます。

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const data$ = of(1, 2, 3, 4, 5);

const processedData$ = data$.pipe(
  filter(num => num % 2 === 0),  // 偶数だけをフィルタリング
  map(num => num * 10)           // 値を10倍に変換
);

processedData$.subscribe(console.log);  // 20, 40 が出力される

Operatorsの概要

Operatorsは、Observableのデータストリームに対して操作を行い、新しいObservableを生成する関数です。これにより、非同期データのフィルタリング、変換、結合などの様々な操作を行うことができます。

mapオペレーター

map オペレーターは、Observable が発行する各アイテムに関数を適用します。入力として関数を受け取り、この関数をストリームの各アイテムに適用します。入力としての関数は、アイテムを別の形に変換するために使用されます。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
const nums = of(1, 2, 3);
const squareValues = nums.pipe(map(val => val * val));

filterオペレーター

filter オペレーターは、指定された条件に基づいて Observable のアイテムをフィルタリングします。入力として関数を受け取り、この関数は各アイテムに対して真偽値を返します。返された真偽値が true の場合、そのアイテムは出力されるストリームに含まれます。false の場合、アイテムは出力されるストリームから除外されます。

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
const nums = from([1, 2, 3, 4, 5]);
const evenNums = nums.pipe(filter(val => val % 2 === 0));

tapオペレーター

tap オペレータは、Observable の各要素に対して副作用を持たせるためのものです。つまり、データストリーム自体には影響を及ぼさず、Observable の要素に何らかの操作を適用するために使用します。これはデバッグやログ出力などの目的でよく使用されます。

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

of(1, 2, 3).pipe(
  tap(val => console.log(`Before map: ${val}`)),
  tap(val => val * 2),
  tap(val => console.log(`After map: ${val}`)) // 値は変わらない
).subscribe();

これ以外にも、数多くのOperatorsが提供されており、様々なデータ操作を容易に行えます。

まとめ

ObservableとObserverはリアクティブプログラミングの考え方に即した比較的わかりやすいクラスです。また、今回扱ったオペレータはごく一部ですが、とてもよく使用するものを挙げました。

次回はSubjectを扱います。

リアクティブプログラミング

Angularのサービスの説明をする前にリアクティブプログラミングについて説明します。

リアクティブプログラミングとは

リアクティブプログラミングは、データの流れ（ストリーム）に着目し、データを受け取るたびに処理を処理するプログラミングパラダイムです。

リアクティブプログラミングは、用語が独特で概念の通常のプログラミングとは少し異なっているため、理解しづらい場合があります。また、実装系によっても違いがあります。今回は一般的なリアクティブプログラミングについて説明し、次回RxJSについて説明します。

リアクティブプログラミングの用語

リアクティブプログラミングには多くの用語があり、異なるライブラリやフレームワークによって少し異なる言い回しがされることもあります。しかし、以下はリアクティブプログラミングのコンセプトを理解する上で基本となる用語のリストです。これらの用語は、多くのリアクティブプログラミングの文脈で一般的に使用されています。

発行者（Publisher）

生産者（Producer）やオブザーバブル（Observable）とも呼ばれます。データやイベントを生み出し、それをストリームとして発行するエンティティです。発行者は、一つまたは複数の購読者にデータを非同期的に供給する役割を果たします。

購読者（Subscriber）

消費者（Consumer）やオブザーバー（Observer）とも呼ばれます。発行者からのデータやイベントを受け取り、それを処理するエンティティです。購読者は、発行者からデータを受け取ることを購読する（subscribe）と言われ、この購読関係を通じてデータが非同期的に供給されます。

操作（Operators）

購読者が購読しているデータストリームからデータを受け取る際に適用する操作です。フィルタ（filter）やマップ（map）など様々な操作があります。

バックプレッシャー（Back pressure）

データの発行速度と購読速度の不均衡を管理する概念。発行側が高速で、購読側がそれに追いつけない場合に対処するための機構を提供します。

ColdとHot

  • Cold：購読が開始されるまでデータを発行しない
  • Hot：購読の有無に関係なくデータを発行する

リアクティブプログラミングの概念

リアクティブプログラミングの概念について説明します。

発行者はデータを発行し、データストリームを形成します。データの発行は一般に非同期で行われますが、同期で行われることもあります。

購読者は発行者を購読し、データを待ち受けます。データを受け取るたびに処理を実行します。ただし、すべてのデータを処理するわけではなく、Operatorsによって受け取るかどうかをフィルタすることもできます。

購読者が処理できる量には限界があります。発行者がデータを発行するペースよりも購読者が処理できるペースの方が遅い場合、発行済み未処理のデータをどうするかという問題がでてきます。購読者の処理能力を発行者の発行能力が上回る状態に対する対処を行う機構をバックプレッシャーと言います。具体的な対処方法としては、

  • 購読者が購読可能なデータ量を発行者に伝え、発行者はそれに合わせてデータを発行する
  • 発行者の発行しているデータをバッファリングする
  • 受け取れないデータは捨てる

などがあります。どの戦略が適しているかはデータの性格（失われると困るのか、多少失われても問題ないのか）やデータ発行の処理（購読者の要求に応じて発行できるのか、とりあえず生成し続けるしかないのか）によって変わります。

リアクティブプログラミングのユースケース

リアクティブプログラミングを適用できるユースケースをいくつか挙げます。

  1. リアルタイムデータのストリーミング：フィンテック、株価のストリーミングや、ライブスポーツのスコア更新など
  2. リアルタイムのダッシュボード：ユーザーアクティビティ、システムメトリクス、eコマースの販売統計など、リアルタイムで更新する必要があるダッシュボード
  3. チャットアプリケーション：ユーザー間でリアルタイムにメッセージを交換するアプリ
  4. オンラインゲーム：特にマルチプレイヤーオンラインゲームで、プレイヤー間のリアルタイムのインタラクションが必要
  5. イベント駆動のマイクロサービスアーキテクチャ：サービスが非同期的にデータを交換する
  6. 非同期なバッチ処理：大量のデータを効率的に処理する必要がある場面で、特にデータの供給速度が不均一な場合
  7. リアルタイムの通知システム：ユーザーにリアルタイムで通知やアラートを提供するシステム
  8. センサーデータの処理：IoTデバイスからのリアルタイムデータを効率的に収集、分析、反応する
  9. 動的なネットワーク応答：ユーザーのリクエストに応じて、非同期的にコンテンツを動的に生成・配信するウェブサービス
  10. リソース制限のある環境：例えばモバイルデバイスや組み込みシステムなど、リソースが制限されている環境での非同期処理やリアルタイム処理

最近ではWebアプリケーションで使用することが多いため、サーバーが発行者、クライアントが購読者という組み合わせや画面のコンポーネント間での使用をイメージしやすいですが、サービス間でのやりとりや非同期バッチなどに使用することもあります。

まとめ

サービスを作成しようとするとRxJSを使うことになるため、先にリアクティブプログラミングについて説明しました。次回はRxJSについて説明します。

Angularでモジュール（NgModule）を作成する

前回作成したコンポーネントがAppModuleに登録されているので、SharedModuleを作成してそちらに登録するように変更します。

これは後からモジュールを作成するパターンになりますが、一般的には先にモジュールを作成する方が多いため、今後使用するUserModuleも作成しておきます。

モジュールとは

Angularのモジュールは、アプリケーションの一部を構成し、関連するコンポーネント、ディレクティブ、パイプ、サービスなどをグループ化するコンテナです。モジュールはアプリケーションの機能を整理し、再利用しやすくする役割を果たします。

特に、Angularのモジュールは@NgModuleデコレータを使用して定義され、以下の主要なメタデータプロパティを持ちます：

  • declarations: モジュール内で使用されるコンポーネント、ディレクティブ、パイプを宣言します。
  • imports: 他のモジュールがエクスポートしたクラスを使用できるように、このモジュールが他のモジュールに依存していることを指定します。
  • exports: 他のモジュールで使用できるように、宣言されたクラスの一部をエクスポートします。
  • providers: アプリケーション全体で使用できるサービスのプロバイダーを登録します。
  • bootstrap: アプリケーションの起点となるルートコンポーネントを指定します。

モジュールを作成する

モジュールを作成するにはng generate moduleコマンドを使用します。

--dry-runオプション

モジュールを作成する前に--dry-runオプションについて確認しておきましょう。

--dry-runオプションはコマンドを実行せずに、コマンドで作成・更新される内容を確認できるオプションです。前回のようにコンポーネントを指定する際に、appから指定すればいいのかappの下から指定すればいいのか迷うことがあると思います。このような場合には、--dry-runオプションでどんなファイルが作成されてどんなファイルが更新されるかを確認するとよいでしょう。

$ ng generate module shared --dry-run
CREATE src/app/shared/shared.module.ts (192 bytes)

NOTE: The "--dry-run" option means no changes were made.

実際に実行してみると、作成されるモジュールのパスと名前が確認でき、「NOTE: The “–dry-run” option means no changes were made.」と変更がなかった旨のメッセージ表示されています。

SharedModuleはルーティングを必要としない共通コンポーネント・サービス等をまとめたモジュールですので、--routingオプションなしで実行します。

では、--dry-runなしで実行しましょう。

$ ng generate module shared
CREATE src/app/shared/shared.module.ts (192 bytes)

気づいたかもしれませんが、コンポーネントのときとは違ってモジュールクラスのファイルが作成された以外に更新されたファイルなどはありません。すなわち、作成したモジュールが自動的にどこかのモジュールに自動登録されることはありません。

まずはSharedModuleを修正します。まずは修正前の状態を確認しておきましょう。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class SharedModule { }

前回作成したTitleComponentを追加していきます。モジュールに属するコンポーネント、ディレクティブ、パイプはdeclarationsに記載します。加えて、他のモジュールに公開するためにexportsに記載します。

修正後のモジュールが以下のようになります。

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TitleComponent } from './components/title/title.component';

@NgModule({
  declarations: [TitleComponent],
  imports: [CommonModule],
  exports: [TitleComponent],
})
export class SharedModule {}

次にAppModuleを修正します。これまではTitleComponentをapp.component.htmlで使用するためにAppModuleに登録していました。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { TitleComponent } from './shared/components/title/title.component';

@NgModule({
  declarations: [AppComponent, TitleComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

今後は、SharedModuleをインポートすることでTitleComponentを使用できるようにします。まずはdeclarationsからTitleComponentを削除し、その代わりにimportsにTitleComponentが登録されているSharedModuleを追加します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

実際に動作するか確認してみましょう。http://localhost:4200/にアクセスし、これまでどおり

のように表示されれば正しく修正できています。

UserModuleを作成する

次に今後使用するUserModuleを作成します。

モジュール名は単数形か複数形か

結論からいうと、チームによって異なります。これは個人的な見解となりますが、単数形と複数形で意味が異なる単語もあるため、単数形で書くことを基本にして複数形の意味を使いたい場合は複数形を使用する、というのがよいのではないかと考えています。

モジュールを作成する

ではUserModuleを作成します。今回はルーティングを伴うモジュールとするため、--routingオプションを使用します。また、今回は省略形であるng g mコマンドで実行します。--dry-runオプションをつけて確認しましょう。

$ ng g m user --routing --dry-run
CREATE src/app/user/user-routing.module.ts (247 bytes)
CREATE src/app/user/user.module.ts (272 bytes)

NOTE: The "--dry-run" option means no changes were made.

appディレクトリの下にuserディレクトリが作成され、user.module.tsが作成されます。加えて、ルーティングモジュールであるuser-routing.module.tsも作成されることが確認できます。

期待したとおりに作成されることを確認できたので、--dry-runオプションを外して実行します。

$ ng g m user --routing
CREATE src/app/user/user-routing.module.ts (247 bytes)
CREATE src/app/user/user.module.ts (272 bytes)

UserModuleは現時点ではコンポーネントなど何も属していないのでこのままにしておきます。とりあえず作成したコードだけ確認しておきます。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserRoutingModule } from './user-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    UserRoutingModule
  ]
})
export class UserModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

これまでに作成したモジュールとは異なり、user-routing.module.tsにはroutesという定数があります。使い方については今後確認していきます。

変更をコミット＆プッシュする

毎度のことですが、ここまでの変更をコミット＆プッシュします。

$ git add . 
$ git commit -m 'create SharedModule and UserModule'
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main ed5311a] create SharedModule and UserModule
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/shared.module.ts
 create mode 100644 src/app/user/user-routing.module.ts
 create mode 100644 src/app/user/user.module.ts
$ git push
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 10 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (10/10), 1.12 KiB | 1.12 MiB/s, done.
Total 10 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), completed with 4 local objects.
To github.com:t0k0sh1/angular-tutorial.git
   90cd6c9..ed5311a  main -> main

まとめ

今回はSharedModuleを作成し、TitleComponentをAppModuleからSharedModuleに移しました。今後は共通コンポーネントはSharedModuleに登録していくことにします。

また、今後に備えてルーティング設定をもったUserModuleも作成しました。こちらは今後使用していきます。

次回は画面にメッセージを表示するコンポーネントの作成を通じてサービスを使ったコンポーネント間のデータの受け渡しについて見ていきます。

AngularプロジェクトにTailwind CSSを導入する

今回はTailwind CSSを導入し、簡単なコンポーネントを作成します。

Tailwind CSSとは


Tailwind CSSは、高度にカスタマイズ可能なユーティリティファーストのCSSフレームワークです。ユーティリティファーストとは、小さい単位（ユーティリティ）のクラスを組み合わせてデザインを構築するアプローチのことで、そのための多くのプリセットクラスが提供されています。

特徴

  1. ユーティリティファースト: HTMLの中で直接、スタイリングができるため、CSSファイルを跨いで行ったり来たりする必要がありません。
  2. カスタマイズ可能: プロジェクトの特定のデザイン要件に合わせて、設定ファイルを使って色、サイズ、余白などをカスタマイズすることが可能です。
  3. レスポンシブデザイン: レスポンシブデザインのプレフィックスが提供されているため、さまざまなデバイスサイズでの表示を容易にコントロールできます。
  4. プラグインシステム: カスタムユーティリティやコンポーネントを簡単に追加するためのプラグインシステムも提供しています。

Angularでのサポート状況

Angular v11.2から公式にサポートされています。

Tailwind CSSを導入する

では、AngularプロジェクトにTailwind CSSを導入していきます。基本的には公式の手順に従って進めます。

$ npm install -D tailwindcss postcss autoprefixer

added 26 packages, changed 1 package, and audited 1161 packages in 3s

186 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

必要なパッケージをインスト−ルし、tailwind.config.jsが作成されます。

続いてtailwind.config.jsを以下のように変更します。

/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: [
+   "./src/**/*.{html,ts}",
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修正後のtailwind.config.jsは以下のようになります。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

続いてsrc/styles.cssを以下のように編集します。

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

元々あるコメントは追加しても削除してもどちらでも構いません。

ここまででインストールは完了です。実際に使用可能か動作確認をしてみます。

まずは開発サーバーを起動します。

$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.98 MB | 
polyfills.js          | polyfills     | 333.16 kB | 
styles.css, styles.js | styles        | 242.41 kB | 
main.js               | main          |  46.29 kB | 
runtime.js            | runtime       |   6.53 kB | 

                      | Initial Total |   2.59 MB

Build at: 2023-08-06T07:20:58.691Z - Hash: 34fc5b5c11ac8fa2 - Time: 4089ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

ng serveコマンドは開発サーバーを起動するコマンドです。デフォルトでは4200ポートを使用します。

動作確認をするために、src/app/app.component.htmlを以下のように書き換えます。

<h1 class="text-3xl font-bold underline">Hello world!</h1>

元々ある大量のコードはすべて削除しています。

変更保存をするとすぐに反映されます。では、http://localhost:4200/にアクセスし、以下のように表示されればTailwind CSSが有効になっています。

Tailwind CSSを便利にする拡張機能をインストールする

Tailwind CSSでのプログラミングを便利にする拡張機能をいくつかご紹介します。

Tailwind CSS IntelliSense

marketplace.visualstudio.com
Tailwind CSS IntelliSense – Visual Studio Marketplace
Extension for Visual Studio Code – Intelligent Tailwind CSS tooling for VS Code

Tailwind CSSのオートコンプリート、リント、class属性で設定されるスタイルのプレビューなどの機能を提供する拡張機能です。

Tailwind Fold

marketplace.visualstudio.com
Tailwind Fold – Visual Studio Marketplace
Extension for Visual Studio Code – Improves code readability by folding class attributes

Tailwind CSSを使用するとclass属性が長くなりがちです。これはコード全体の可読性低下にもつながるため、この拡張機能で普段は省略表示しておくとよいでしょう。

Tailwind Documentation

marketplace.visualstudio.com
Tailwind Documentation – Visual Studio Marketplace
Extension for Visual Studio Code – Instant documentation search for Tailwind CSS

Tailwind CSSのドキュメントにすばやくアクセスするための拡張機能です。最近ではチートシートサイトがいくつもりますので、そちらの方が使いやすければこの拡張機能は特に使う必要はありません。

コンポーネントを作成する

動作確認は行っていますが、実際にコンポーネントを作成してみましょう。

ここで作成するコンポーネントは先ほど動作確認のために作成したタグをコンポーネント化してみましょう。

コンポーネントのひな形を自動生成する

ng generateコマンドを使ってコンポーネントのひな形を作成します。コンポーネントを作成する場合はcomponentを指定して、その後に生成するコンポーネントのパスを書きます。

$ ng generate component shared/components/title
CREATE src/app/shared/components/title/title.component.css (0 bytes)
CREATE src/app/shared/components/title/title.component.html (20 bytes)
CREATE src/app/shared/components/title/title.component.spec.ts (552 bytes)
CREATE src/app/shared/components/title/title.component.ts (198 bytes)
UPDATE src/app/app.module.ts (390 bytes)

コマンドは省略形もありますが、今回は省略せずに書きました。また、コンポーネントのパスにはsrc/app/を含まない点に注意してください。

コンポーネントを作成する

このコンポーネントは呼び出し元からテキスト（先ほど作成したタグのHello world!の部分）を受け取って表示するコンポーネントにします。

まずはtitle.component.tsから作成します。自動生成したコードは次のようになっています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.css']
})
export class TitleComponent {

}

詳しくは別途解説しますが、コンポーネントを使用する側から何か値を受け取るには@Inputディレクティブを使用します。

修正後のtitle.component.tsは以下のとおりです。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.css'],
})
export class TitleComponent {
  @Input() title: string;

  constructor() {
    this.title = '';
  }
}

titleというメンバ変数に@Input()を付与し、呼び出し元から受け取れるようにしています。

次にtitle.component.htmlを作成します。

<h1 class="text-3xl font-bold underline">{{ title }}</h1>

先ほどTitleComponentに追加したtitleを表示しています。

では実際に使ってみましょう。app.component.htmlを以下のように修正します。

<app-title title="{{ title }}" />

app-titleコンポーネントのtitle属性にAppComponentのtitleを設定します。

AppComponentのtitleメンバに設定されている文言が表示されれば期待したとおりの動作になっています。

テストを行う

最後にテストを行いましょう。

今回作成したTestComponentとHTMLを変更したAppComponentの両方を修正します。

まずはTestComponentのテストです。

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { TitleComponent } from './title.component';

describe('TitleComponent', () => {
  let component: TitleComponent;
  let fixture: ComponentFixture<TitleComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TitleComponent],
    });
    fixture = TestBed.createComponent(TitleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the title component', () => {
    expect(component).toBeTruthy();
  });

  it('should have as title an empty string', () => {
    expect(component.title).toEqual('');
  });

  it('should display the title', () => {
    const expected = 'Test title';
    component.title = expected;
    fixture.detectChanges();

    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(expected);
  });
});

次にAppComponentのテストです。

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { TitleComponent } from './shared/components/title/title.component';

describe('AppComponent', () => {
  beforeEach(() =>
    TestBed.configureTestingModule({
      declarations: [AppComponent, TitleComponent],
    }),
  );

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angular-tutorial'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angular-tutorial');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('app-title h1')?.textContent).toContain('angular-tutorial');
  });
});

テストの実行はng testコマンドを使用します。

$ ng test
✔ Browser application bundle generation complete.
06 08 2023 20:16:25.133:WARN [karma]: No captured browser, open http://localhost:9876/
06 08 2023 20:16:25.140:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
06 08 2023 20:16:25.140:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
06 08 2023 20:16:25.141:INFO [launcher]: Starting browser Chrome
06 08 2023 20:16:25.984:INFO [Chrome 115.0.0.0 (Mac OS 10.15.7)]: Connected on socket A-bmpclSUPRNDYqsAAAB with id 34000686
Chrome 115.0.0.0 (Mac OS 10.15.7): Executed 6 of 6 SUCCESS (0.035 secs / 0.024 secs)
TOTAL: 6 SUCCESS

テストではブラウザが開き結果が表示されます。

テストは起動しっぱなしにしておいて、コードを変更すればリロードされます。

コミットとプッシュを行う

ここまでの変更をコミット、プッシュします。

$ git add .
$ git commit -m 'add tailwind css'
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 90cd6c9] add tailwind css
 11 files changed, 428 insertions(+), 633 deletions(-)
 create mode 100644 src/app/shared/components/title/title.component.css
 create mode 100644 src/app/shared/components/title/title.component.html
 create mode 100644 src/app/shared/components/title/title.component.spec.ts
 create mode 100644 src/app/shared/components/title/title.component.ts
 create mode 100644 tailwind.config.js
$ git push
Enumerating objects: 26, done.
Counting objects: 100% (26/26), done.
Delta compression using up to 10 threads
Compressing objects: 100% (14/14), done.
Writing objects: 100% (17/17), 5.50 KiB | 1.10 MiB/s, done.
Total 17 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To github.com:t0k0sh1/angular-tutorial.git
   58ad1f8..90cd6c9  main -> main

まとめ

今回はTailwind CSSを導入し、コンポーネントを作成しました。

今回sharedにTitleComponentを作成したのですが、このコンポーネントはAppModuleに含まれています。AppModuleにすべてのコンポーネントを含めるのではなく、いくつかのモジュールに分けた方が管理しやすいです。

次回はSharedModuleを作成してTitleComponentを含めるように変更する手順を解説します。

AngularプロジェクトにHuskyを導入する

今回、Huskyを導入しますが、これにはトレードオフ（メリットとデメリット）があります。

メリット:

  1. コードの品質を保つ: Huskyはコードがリポジトリにコミットされる前に自動的にリントやテストを行うことができます。これにより、間違ったコードやコーディング規約に適合しないコードがマージされるのを防ぐことができます。
  2. 自動化: Huskyを設定することで、手動でリントやテストを行う手間を省くことができます。
  3. チームの一貫性: Huskyをプロジェクトに組み込むことで、全ての開発者が同じリントやテストを実行することを保証することができます。

デメリット:

  1. 初期設定の複雑さ: Huskyの設定は少々複雑であり、最初に設定する際には時間と労力が必要となります。
  2. 間違った設定による問題: Huskyが間違って設定された場合、全く関係のないファイルがコミットの対象になってしまったり、正常なコードでもコミットできなくなる可能性があります。
  3. コミットの遅延: もし大きなプロジェクトでテストが時間を要する場合、Huskyによりコミットが遅延する可能性があります。ただし、これは通常はリントやテストの速度問題であり、Husky自体の問題ではありません。

最も注意しなければならないのは、修正した箇所とは関係ない箇所でリントエラーが発生してコミットができないという自体が起こる可能性があるか、という点です。特に途中から導入する場合はリントエラーだらけでその対応に追われるということがあります。

リントエラーが解消したコードがコミットされることが理想的ではありますが、時と場合によってはそれよりもコミットすることが優先事項であることもありますし、プロジェクトの事情で修正箇所以外のエラーは一旦見なかったことにしたいということもあると思います。

また、コードベースが非常に大きく、リントに時間がかかってコミットがストレスになるというリスクもあります。こちらについては対策がありますので、併せてご紹介します。

Huskyとは

Huskyは、JavaScriptプロジェクトにおいてGitのフック（特定のGitイベントが発生した時に実行されるスクリプト）を簡単に管理できるようにするツールです。

Gitフックは、コミット、プッシュなどのGit操作の前後に自動的に実行されるスクリプトです。これを活用することで、コードの品質を一定に保つためのチェックやテストを自動化したり、特定の操作を制限したりすることが可能になります。

しかし、GitフックはGitリポジトリごとに設定され、通常はGitリポジトリ自体と一緒にバージョン管理されません。これは、他の開発者が同じフックを設定するのを難しくするだけでなく、フックの変更を追跡するのも困難にします。

Huskyはこれらの問題を解決します。Huskyを使用すると、フックはプロジェクトの一部としてバージョン管理でき、設定はすべての開発者間で共有できます。また、Huskyの設定は通常、プロジェクトのpackage.jsonファイルに記述され、設定の変更もGitを通じて追跡することができます。

このように、HuskyはJavaScriptプロジェクトにおけるGitフックの管理を効率化し、プロジェクト全体のコード品質を向上させる強力なツールとなることができます。

Huskyのインストール

まずはじめにHuskyをインストールします。

$ npm install husky --save-dev

added 1 package, and audited 1098 packages in 1s

165 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

インストール自体に難しいところはありません。

pre-commitフックを設定する

では早速pre-commitフックを設定しましょう。

$ npx husky install
husky - Git hooks installed

上記のコマンドを実行すると.huskyディレクトリが作成されます。

次にpre-commitフックを追加します。実行するコマンドは前回設定したnpm run lintにします。

$ npx husky add .husky/pre-commit "npm run lint"
husky - created .husky/pre-commit

では実際に実行してみましょう。Huskyをインストールしたときの変更のコミットがまだなので、これをコミットします。

$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package-lock.json
        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .husky/

no changes added to commit (use "git add" and/or "git commit -a")
$ git add .  
$ git commit -m 'install husky'

> angular-tutorial@0.0.0 lint
> ng lint


Linting "angular-tutorial"...

All files pass linting.

[main e0c8f78] install husky
 3 files changed, 21 insertions(+)
 create mode 100755 .husky/pre-commit

コミット時にリントが実行されていることが確認できます。

pre-commitフックでフォーマットを行う

次にpre-commitフックでPrettierを実行するようにしてみましょう。ついでに動作を確認もしてみます。

まず、Huskyのコマンドにはpre-commitフックを削除するコマンドがありません。では変更したい場合はどのようにするかを見ていきます。

現在の状態を確認する

まず、現在の状態はnpm run lintを設定してある状態です。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

ここに新たなコマンドを追加する場合は変わらずnpx husky addコマンドを使用します。

$ npx husky add .husky/pre-commit "npm run format"
husky - updated .husky/pre-commit

npx husky addコマンドを実行することで現在設定されているコマンドに加えて新たなコマンドがpre-commitフックに追加されます。

次にnpm run formatを削除してnpm run lintだけの状態にしてみます。これを実現するには、npx husky setコマンドを使用してnpm run lintを設定することでnpm run lintだけの状態になります。

$ npx husky set .husky/pre-commit "npm run lint"
husky - created .husky/pre-commit

このコマンドの実行するとnpm run lintだけになっていることが確認できます。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

最後にすべて削除する方法を確認します。先ほど使用したnpx husky setコマンドを使って削除ができます。

$ npx husky set .husky/pre-commit ""
husky - created .husky/pre-commit

上記コマンドを実行するとコマンドが削除されます。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pre-commitフックでlintとフォーマットの設定を行う

話を戻してpre-commitフックにnpm run lintコマンドとnpm run formatを設定します。npx husky addコマンドを2回呼び出してコマンドを追加します。

$ npx husky add .husky/pre-commit "npm run lint"
husky - updated .husky/pre-commit
$ npx husky add .husky/pre-commit "npm run format"
husky - updated .husky/pre-commit

これにより期待したとおりコマンドが登録されます。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"


npm run lint
npm run format

では、動作確認をしていきます。.husky/pre-commitが変更されているのでこれをコミットすることで動作確認とします。

$ git add .
$ git commit -m 'update pre-commit hook'

> angular-tutorial@0.0.0 lint
> ng lint


Linting "angular-tutorial"...

All files pass linting.


> angular-tutorial@0.0.0 format
> prettier "src/**/*.{js,jsx,ts,tsx,html,css,scss}" --write

src/app/app.component.css 9ms
src/app/app.component.html 85ms
src/app/app.component.spec.ts 71ms
src/app/app.component.ts 3ms
src/app/app.module.ts 2ms
src/index.html 1ms
src/main.ts 2ms
src/styles.css 0ms
[main aeba2e0] update pre-commit hook
 1 file changed, 2 insertions(+)

git commitをするとリントに続いてフォーマットが行われていることが確認できます。

リントおよびフォーマットの対象を限定する

現在は非常にコードが少ないためリントやフォーマットの時間がそれほどかかりません。ただ、実際のプロジェクトでは非常にたくさんのコードがある場合もあります。そのような場合、リントやフォーマットに時間がかかるだけでなく、対応した範囲とは関係ない箇所でエラーになってしまい、コミットがいつまでもできない、ということが起きることは容易に想像できます。

こういった問題を解決する一つの方法として、lint-stagedを導入します。

lint-stagedをインストール

普通のパッケージと同じようにインストールしていきます。

$ npm install --save-dev lint-staged

added 37 packages, and audited 1135 packages in 3s

180 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

lint-stagedを設定する

lint-stagedを設定していきます。まずはHuskyがpre-commitフックで実行するコマンドをnpx lint-stagedに変更します。

$ npx husky set .husky/pre-commit "npx lint-staged"
husky - created .husky/pre-commit

次にlint-stagedでnpm run lintコマンドとnpm run formatを実行するようにします。

{
  "name": "angular-tutorial",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "format": "prettier \"src/**/*.{js,jsx,ts,tsx,html,css,scss}\" --write"
  },
+ "lint-staged": {
+   "*.{js,jsx,ts,tsx}": [
+     "npm run lint"
+   ],
+   "*.{js,jsx,ts,tsx,html,css,scss}": [
+     "npm run format"
+   ]
+ },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.6",
    "@angular-eslint/builder": "16.1.0",
    "@angular-eslint/eslint-plugin": "16.1.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0",
    "@angular-eslint/schematics": "16.1.0",
    "@angular-eslint/template-parser": "16.1.0",
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.9.0",
    "husky": "^8.0.3",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "lint-staged": "^13.2.3",
    "prettier": "^3.0.0",
    "typescript": "~5.1.3"
  }
}

"lint-staged"がコマンドの設定を行っている箇所です。リントとフォーマットで対象としたいファイルが異なるため分けて設定しています。

pre-commitフックを確認するまえに、npx lint-stagedコマンドを実行して動作を確認してみましょう。

$ npx lint-staged
→ No staged files found.

ステージされているファイルが何もないため、処理が行われませんでした。

では、現在変更されているコードをステージしてから実行してみましょう。

$ npx lint-staged
→ No staged files match any configured task.

少しメッセージが変わりました。ステージされているファイルはありましたが、条件にマッチするファイルがなかったため、処理が行われませんでした。

では、1つだけ処理対象となるファイルを変更してステージして動作を確認してみましょう。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-tutorial';
}

app.component.tsを以下のように変更します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
* title = 'angular-tutorial1';
}

titleをちょっとだけ変更しています。

変更をステージして実行してみます。

$ git add .
$ npx lint-staged
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ package.json — 4 files
    ❯ *.{js,jsx,ts,tsx} — 1 file
      ✖ npm run lint [FAILED]
    ✔ *.{js,jsx,ts,tsx,html,css,scss} — 1 file
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ npm run lint:
Error: Invalid values:
  Argument: project, Given: "/Users/t0k0sh1/Workspace/angular-tutorial/src/app/app.component.ts", Choices: "angular-tutorial"

> angular-tutorial@0.0.0 lint
> ng lint /Users/t0k0sh1/Workspace/angular-tutorial/src/app/app.component.ts

実行したところエラーになりました。

結論からいうと、lint-stagedに指定したコマンドが原因です。リントを行うためにeslintを使用しているのではなく、ng lintを使用しています。

ng lintはプロジェクト全体に対して実行するコマンドのため、ステージしたファイルに対して限定的に使用することができません。ですので、少しコマンドを変更します。

{
  "name": "angular-tutorial",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "format": "prettier \"src/**/*.{js,jsx,ts,tsx,html,css,scss}\" --write"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
*     "eslint --fix"
    ],
    "*.{js,jsx,ts,tsx,html,css,scss}": [
      "npm run format"
    ]
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.6",
    "@angular-eslint/builder": "16.1.0",
    "@angular-eslint/eslint-plugin": "16.1.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0",
    "@angular-eslint/schematics": "16.1.0",
    "@angular-eslint/template-parser": "16.1.0",
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.9.0",
    "husky": "^8.0.3",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "lint-staged": "^13.2.3",
    "prettier": "^3.0.0",
    "typescript": "~5.1.3"
  }
}

実行するコマンドをnpm run lintからeslint --fixに変更しました。変更したついでに--fixオプションをつけて修正もできるようにしてあります。

再度実行してみましょう。

$ npx lint-staged
✔ Preparing lint-staged...
✔ Hiding unstaged changes to partially staged files...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Restoring unstaged changes to partially staged files...
✔ Cleaning up temporary files...

今度はすべて成功しています。

最後にコードを整理してコミット＆プッシュ

app.component.tsに加えた変更は不要なので、戻しておきます。

$ git restore --staged src/app/app.component.ts
$ git checkout -- src/app/app.component.ts

それ以外の変更は正式に採用するので、ステージしてコミットし、これまでの変更も含めてプッシュしておきます。

$ git add .
$ git commit -m 'set up husky and lint-staged'
→ No staged files match any configured task.
[main 58ad1f8] set up husky and lint-staged
 3 files changed, 504 insertions(+), 3 deletions(-)
$ git push
Enumerating objects: 19, done.
Counting objects: 100% (19/19), done.
Delta compression using up to 10 threads
Compressing objects: 100% (13/13), done.
Writing objects: 100% (16/16), 5.23 KiB | 892.00 KiB/s, done.
Total 16 (delta 7), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (7/7), completed with 3 local objects.
To github.com:t0k0sh1/angular-tutorial.git
   f20d6df..58ad1f8  main -> main

まとめ

少し長くなりましたが、Huskyとlint-stagedを導入してリントとフォーマットをpre-commitフックで実行できるようになりました。

もう少し設定が必要ですが、それは必要になったときに設定することとします。

開発を行う前に結構時間がかかりましたが、こういった設定は最初の段階で整備しておいた方がよいです。開発途中で導入しようとすると、これまでの分の修正に追われ、本来やるべきことに集中できなくなりますので、最初に説明しました。

次回はTailwind CSSを導入してコンポーネントを作成してみたいと思います。

AngularプロジェクトにPrettierとESLintを導入する

AngularプロジェクトではPrettierとESLintは最初から導入されてはいません。プロジェクト作成後にセットアップすることで利用可能となります。

実際のプロジェクトではPrettierとESLintは導入した方がよいので、実際にセットアップしていきます。

ESLintを導入する

Angular CLIにはng lintというコマンドが用意されています。プロジェクト作成直後はESLintが導入されていないため、lintの実行の代わりにELintのインストールを行うことができます。実際にやってみましょう。

$ ng lint
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: enabled
Local setting: disabled
Effective status: disabled
Cannot find "lint" target for the specified project.
You can add a package that implements these capabilities.

For example:
  ESLint: ng add @angular-eslint/schematics

Would you like to add ESLint now? Yes
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@16.1.0.
✔ Package information loaded.

The package @angular-eslint/schematics@16.1.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
    
    All @angular-eslint dependencies have been successfully installed 🎉
    
    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.
    
    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.
    
    Please see https://github.com/angular-eslint/angular-eslint for more information.
    
CREATE .eslintrc.json (991 bytes)
UPDATE package.json (1424 bytes)
UPDATE angular.json (3085 bytes)
✔ Packages installed successfully.

一番最初の質問はAngular CLIの使用状況データを提供するかどうかを聞いています。その後に@angular-eslint/schematicsのインストールを行うかの確認があります。基本的にはデフォルトのまま進めていただいて構いません。

インストールが完了すると、以下が行われます。

  • AngularプロジェクトでESLintを使用する基本的なパッケージがインストールされる
  • lintを実行するためのスクリプトがpackage.jsonに追加される
  • ESLintの設定ファイル（.eslintrc.json）が追加される
  • angular.jsonにESLintに関する設定が追加される

これでlintが使用可能になります。実際に使ってみましょう。

$ ng lint

Linting "angular-tutorial"...

All files pass linting.

ESLint拡張機能を導入する

Visual Studio Codeを使用している場合は、ESLint拡張機能を導入するとリアルタイムに違反をチェックできるようになりますので、導入をお勧めします。

marketplace.visualstudio.com
ESLint – Visual Studio Marketplace
Extension for Visual Studio Code – Integrates ESLint JavaScript into VS Code.

拡張機能にはいくつか設定項目がありますが、特に設定変更しなくても動作します。

Prettierを導入する

次にPrettierを導入します。こちらはAngular CLIに専用のコマンドが用意されているわけではないため、インストールおよび設定作業は手動で行います。

Prettierをインストールしますが、先にインストールしたESLintと競合した設定が一部あるため、eslint-config-prettierを併せてインストールします。

$ npm install --save-dev prettier eslint-config-prettier

added 2 packages, and audited 1097 packages in 4s

164 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これでインストール作業が完了しました。続いて設定作業を行います。

ESLintとPrettierを併用できるようにする設定を追加する

.eslintrc.jsonにPrettierを併用できるようにするための設定を追加します。

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
+       "prettier"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility"
      ],
      "rules": {}
    }
  ]
}

"prettier"を追記します。前の行にカンマをつけるのを忘れないように気をつけてください。

.prettierrc.jsonを作成する

Prettierの設定ファイルである.prettier.jsonを作成します。

$ touch .prettierrc.json

ファイルを作成したら以下のように記述します。

{
  "printWidth": 120,
  "singleQuote": true
}

ここでは1行の文字数を120文字、文字列でシングルクォーテーションを使用するように設定しています。シングルクォーテーションを使用する設定はEditorConfigの設定ファイル.editorconfigに記載されている

[*.ts]
quote_type = single

と一致するように設定してください。ダブルクォーテーションを使用したい場合は、.prettierrc.jsonの設定を"singleQuote": falseにし、.editorconfigの設定をquote_type = doubleに変更します。ただし、Angularプロジェクトを作成したときに自動生成されているコードはシングルクォーテーションを使用しているため、特段理由がなければシングルクォーテーションを使用してください。

コマンドでフォーマットできるようにする

package.jsonを編集してコマンドでフォーマットできるようにしましょう。

{
  "name": "angular-tutorial",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
+   "format": "prettier \"src/**/*.{js,jsx,ts,tsx,html,css,scss}\" --write"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.6",
    "@angular-eslint/builder": "16.1.0",
    "@angular-eslint/eslint-plugin": "16.1.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0",
    "@angular-eslint/schematics": "16.1.0",
    "@angular-eslint/template-parser": "16.1.0",
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.9.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.0.0",
    "typescript": "~5.1.3"
  }
}

コマンド名は何でも構いませんが、ここではnpm run formatで実行できるようにしています。

これから動作確認のためにコマンドを実行しますが、実行するといくつかのファイルが変更されます。変更したくない場合は記事を読むだけにしてください。

$ npm run format

> angular-tutorial@0.0.0 format
> prettier "src/**/*.{js,jsx,ts,tsx,html,css,scss}" --write

src/app/app.component.css 9ms
src/app/app.component.html 84ms
src/app/app.component.spec.ts 72ms
src/app/app.component.ts 3ms
src/app/app.module.ts 3ms
src/index.html 1ms
src/main.ts 2ms
src/styles.css 1ms

実行するといくつかのファイルについて変更されたことが表示されます。

Prettier – Code formatter拡張機能を導入する

Visual Studio Codeを使用している場合はPrettier – Code formatter拡張機能を導入することで、コードフォーマットを自動化することができます。

marketplace.visualstudio.com
Prettier – Code formatter – Visual Studio Marketplace
Extension for Visual Studio Code – Code formatter using prettier

こちらは拡張機能導入後にいくつかの設定を行う必要があります。主な設定項目は以下の3つです。

  • Format On Paste
  • Format On Save
  • Default Formatter

他からコピーしたコードをペーストしたときにフォーマットする場合はFormat On Pasteの設定にチェックを入れてください。これは好みかもしれませんが、ペースト後に少しいじってから保存することがほとんどなので私はチェックを入れていません。

次に保存時にフォーマットを行うようにすることでコードフォーマットを自動化できます。基本的にはチェックを入れていただくとよいのですが、自動フォーマットを有効化していると操作性が気になる場合があるかもしれません。実際に試していただいて好みに合うように調整してください。

デフォルトのフォーマッタをPrettierに変更します。これによりPrettierが有効化します。一つだけ注意点があり、PrettierはPythonには対応していません。そのため、Pythonでの開発もVisual Studio Codeで行う場合は、デフォルトのフォーマッタをPrettierに変更した上で、settings.jsonに以下の記述を追加してください。

  "[python]": {
    "editor.defaultFormatter": null,
  },

これにより.pyファイルではPrettierをフォーマッタとして使用しなくなります。少し脱線しますが、blackをフォーマッタとして使用している場合は、

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "python.formatting.provider": "black",
  "[python]": {
    "editor.defaultFormatter": null,
  },
}

のような記載になります。

変更をコミットする

前回からずっとコミットしていなかったので、ここまでの変更をコミットしておきます。

$ git add .
$ git commit -m 'install eslint and prettier'
[main f20d6df] install eslint and prettier
 11 files changed, 3137 insertions(+), 327 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 .prettierrc.json

本記事で使用しているプロジェクトは以下にありますので、必要に応じて参考にしてみてください。

github.com
GitHub – t0k0sh1/angular-tutorial
Contribute to t0k0sh1/angular-tutorial development by creating an account on GitHub.

まとめ

ちょっと長くなったので今回はここまでにします。次回はHuskyを使ってpre-commitフックでESLintとPrettierを自動実行するようにしたいと思います。

ただし、若干のトレードオフがあるため、その点についても解説します。

Angular向けのVSCode拡張機能をインストールする

Visual Studio CodeでAngularプロジェクトの開発をするために必要な拡張機能をインストールしていきます。

ここで紹介する拡張機能は以下の3つです。

  • Angular Language Service
  • Angular Snippets (Version 16)
  • EditorConfig for VS Code

ここに掲載している拡張機能は必須といえるものを選んでいます。すべての拡張機能がAngularプロジェクトの作成直後から使用可能です。

では、一つずつ見ていきましょう。

Angular Language Service

marketplace.visualstudio.com
Angular Language Service – Visual Studio Marketplace
Extension for Visual Studio Code – Editor services for Angular templates

Angularチーム公式の拡張機能で、テンプレートファイル内でのIntelliSense機能や定義へのジャンプなど、様々な便利な機能を提供しています。

Angularアプリケーションの開発を行う際は必ず入れておきましょう。

Angular Snippets (Version 16)

marketplace.visualstudio.com
Angular Snippets (Version 18) – Visual Studio Marketplace
Extension for Visual Studio Code – Angular version 18 snippets by John Papa

いくつかのバージョン対応版が見つかると思いますが、今回使用するバージョンは16.xですので、対応するバージョンの拡張機能を使用しています。

強力な拡張機能であることは間違いありませんが、人によっては使用する／しないがはっきり分かれると思います。最近ではGitHub CopilotなどのAIを活用したコード生成も手段としてあるので、必要性を感じない場合はインストールしなくても問題ありません。

EditorConfig for VS Code

marketplace.visualstudio.com
EditorConfig for VS Code – Visual Studio Marketplace
Extension for Visual Studio Code – EditorConfig Support for Visual Studio Code

Angularプロジェクトを作成すると、.editorconfigファイルが作成されていますので、これを有効化させるために導入します。

実務のことを考えるとPrettierやESLintを導入する必要がありますが、プロジェクト作成直後では使える状態になっていないため、今回の拡張機能から除外しました。

EditorConfigを使うべきか否か

Prettierを導入する場合、EditorConfigは必要かどうか、という議論があるようです。機能的には重複している部分があるため、EditorConfigを使わずにPrettierのみを使用する、という選択肢もアリという主張はそれなりに筋が通っています。

ただ、PrettierとEditorConfigは共存可能で、VSCode以外のIDEを自由に使用するという選択肢がある場合、多くのIDEでサポートされているEditorConfigの設定ファイルを残しておくことで、Prettierの設定が行われていない場合やGitのpre-commit時にしかPrettierが動作しない状況などにおいても必要最低限のフォーマットが行われるというメリットがあります。

そのため、本記事では必要な拡張機能にEditorConfig for VS Codeを挙げています。

まとめ

今回はAngularプロジェクトの開発に最低限必要なVisual Studio Codeの拡張機能3つをインストールしていきました。

実用面を考えると、PrettierとESLintの導入は必要ですので、次回はPrettierとESLintの導入とHuskyによるpre-commitフックの設定を行っていきましょう。

Angular CLIのインストールとプロジェクトの作成

AngularはGoogleによって開発され、維持されているオープンソースのJavaScriptフレームワークであり、主にSingle Page Application（SPA）の開発に使用されます。AngularはTypeScriptで書かれており、高度なツールやエディタのサポートを享受できます。

Angularの特徴

以下がAngularの主な特徴です。

  1. コンポーネントベースのアーキテクチャ： Angularはコンポーネントベースのアーキテクチャを採用しており、アプリケーションは再利用可能なコンポーネントに分割されます。これにより、コードの管理が容易になり、再利用性と可読性が向上します。
  2. 依存性注入： Angularは依存性注入パターンを採用しており、依存オブジェクトをコンポーネントに提供します。これにより、コードの再利用性とテストのしやすさが向上します。
  3. データバインディング： Angularは双方向データバインディングをサポートしており、モデルとビュー間の同期を自動的に保つことができます。
  4. ルーティング： Angularのルーティング機能により、アプリケーション内でのページ間の移動が容易になります。
  5. Angular CLI： Angular Command Line Interface（CLI）を使用すると、プロジェクトの作成、開発、テスト、ビルドが容易になります。
  6. テスト容易性： Angularは単体テストからエンドツーエンド（E2E）テストまで、テストを容易にするツールとライブラリを提供します。

他の主要なJavaScriptフレームワーク、特にReactやVue.jsと比較した場合、Angularはフルスタックなフレームワークで、多くの機能を提供します。一方で、ReactやVue.jsはライブラリとしてスタートし、他のライブラリやツールと組み合わせて使用することでフレームワークのような機能を達成します。そのため、ReactやVue.jsはより柔軟性がありますが、セットアップや学習曲線が少し複雑になる可能性があります。

また、AngularはTypeScriptを使用しますが、ReactやVue.jsはJavaScriptを使用します（ただし、TypeScriptのサポートもあります）。TypeScriptは静的型付けを提供し、大規模なプロジェクトでは開発効率やコードの品質を向上させますが、一方で学習コストがかかることも事実です。

Angularは日本国内においてはReactやVue.jsと比べるとメジャーではありませんが、まったく使われていないというわけではありません。主に企業向けシステムを中心に利用されています。

Angular CLIのセットアップとプロジェクトの作成

Angularのプロジェクト作成およびコードのひな形の生成にはAngular CLIを使用します。

本記事では、執筆時点で最新版の16.1.6を使用します。基本的にAngularで使用するNode.jsは同時期の安定版をサポートしているため、ここではNode.jsは18.17.0、npmは9.8.1を使用します。また、全体を通してパッケージマネージャーはnpmを使用します。

$ node -v
v18.17.0
$ npm -v
9.8.1

以下のコマンドを入力してAngular CLIをインストールします。

$ npm install -g @angular/cli

added 240 packages in 13s

36 packages are looking for funding
  run `npm fund` for details

Angular CLIのインストール成功すると、ngコマンドが使用可能になります。versionサブコマンドでインストールしたAngular CLIのバージョンを確認してみましょう。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.1.6
Node: 18.17.0
Package Manager: npm 9.8.1
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.6 (cli-only)
@angular-devkit/core         16.1.6 (cli-only)
@angular-devkit/schematics   16.1.6 (cli-only)
@schematics/angular          16.1.6 (cli-only)

Angular CLI、Node.js、パッケージマネージャー（npm）およびインストールしたパッケージのバージョンを確認することができます。

開発者全員で同じバージョンのAngular CLIを使用する場合は、latestの部分を指定のバージョンに変更します。

$ npm install -g @angular/cli@16.1.6

added 240 packages in 15s

36 packages are looking for funding
  run `npm fund` for details

システム開発においてはバージョンを明示的に指定するこちらの方法でインストールしてください。

Angularプロジェクトの作成

Angular CLIのインストールが完了したら、Angularプロジェクトを作成します。

プロジェクト名は任意の名前で構いませんが、本記事ではangular-tutorialというプロジェクト名にします。

Angular CLIでAngularプロジェクトを作成するには、newサブコマンドを使用します。

$ ng new angular-tutorial

使用するAngular CLIのバージョンによって変わる場合がありますが、コマンド実行後にいくつか質問が表示されます。ここではすべてデフォルト値のまま進めることにします。

$ ng new angular-tutorial
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-tutorial/README.md (1069 bytes)
CREATE angular-tutorial/.editorconfig (274 bytes)
CREATE angular-tutorial/.gitignore (548 bytes)
CREATE angular-tutorial/angular.json (2750 bytes)
CREATE angular-tutorial/package.json (1047 bytes)
CREATE angular-tutorial/tsconfig.json (901 bytes)
CREATE angular-tutorial/tsconfig.app.json (263 bytes)
CREATE angular-tutorial/tsconfig.spec.json (273 bytes)
CREATE angular-tutorial/.vscode/extensions.json (130 bytes)
CREATE angular-tutorial/.vscode/launch.json (470 bytes)
CREATE angular-tutorial/.vscode/tasks.json (938 bytes)
CREATE angular-tutorial/src/main.ts (214 bytes)
CREATE angular-tutorial/src/favicon.ico (948 bytes)
CREATE angular-tutorial/src/index.html (301 bytes)
CREATE angular-tutorial/src/styles.css (80 bytes)
CREATE angular-tutorial/src/app/app.module.ts (314 bytes)
CREATE angular-tutorial/src/app/app.component.css (0 bytes)
CREATE angular-tutorial/src/app/app.component.html (23083 bytes)
CREATE angular-tutorial/src/app/app.component.spec.ts (922 bytes)
CREATE angular-tutorial/src/app/app.component.ts (220 bytes)
CREATE angular-tutorial/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: 	git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: 	git branch -m <name>
    Successfully initialized git.

質問は2つありますので、1つずつ見ていきましょう。

Would you like to add Angular routing?

ルーティングモジュールを追加するかについて訪ねられています。ルーティングモジュールを使用しないことはほとんどないので、yを回答しても構いませんが、後で追加するのでここではデフォルト値のままにしておきます。

Which stylesheet format would you like to use?

スタイルシートのフォーマットを選択することができます。デフォルトはCSSですが、SCSSやSASS、LESSなどを選択できます。UIをどのように開発するか決まっていればそれに合わせて選択していただくのがよいと思います。本記事執筆時点ではいくつかのCSSフレームワークを試そうと思っていますので、デフォルトのCSSのままにしておきます。

hint: Using ‘master’ as the name for the initial branch. This default branch name

プロジェクトの作成が成功したあと、いくつかhint:で始まるメッセージが表示されています。

私の環境では最初に作成されるGitのブランチがmasterになっているため、このメッセージが表示されています。変更しなくても動作には支障はありませんが、不適切なブランチ名であるというのが業界における共通認識になっていると思いますので、GitHubの方針に合わせてmainブランチに変更しておきましょう。

また、git config --global init.defaultBranch <name>でデフォルトのブランチ名を変更しておくことも可能です。毎回変更するのが面倒な場合はこちらでデフォルトブランチを変更してください。ただし、次回以降の作成で有効になる点にはご注意ください。（すでに作成済みのGitリポジトリは変更されません）

これ以降ではVisual Studio Codeを使って開発を進めていきますので、作成したプロジェクトをcodeコマンドで表示し、ターミナルを開きます。

$ code angular-tutorial

Visual Studio CodeでAngularプロジェクトを開くと、拡張機能をインストールを勧めるメッセージが表示されますが、あとでインストールするので、ここでは閉じておいてください。

$ git branch
* master

ブランチを確認すると、masterブランチになっています。これをgit branch -mコマンドでmainに変更します。

$ git branch -m main
$ git branch
* main

ブランチ名がmainに変わったことを確認できました。

まとめ

Angular CLIのインストールとAngularプロジェクトの作成までを行いました。

次回はVisual Studio CodeでのAngularの開発を円滑に進めるための拡張機能をインストールしていきます。

グローバルインストールしたAngular CLIをアップデートする

グローバルインストールしたAngular CLIをアップデートする手順について解説します。

注意事項

本手順はグローバルインストールされたAngular CLIのバージョンアップする手順です。
プロジェクトのAngularをバージョンアップする手順ではないのでご注意ください。

アップデート前の状態

アップデート前の状態を確認しておきます。ng versionでインストールされているAngular CLIのバージョンを確認することができます。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.3.1
Node: 16.14.2
Package Manager: npm 8.7.0
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.1 (cli-only)
@angular-devkit/core         13.3.1 (cli-only)
@angular-devkit/schematics   13.3.1 (cli-only)
@schematics/angular          13.3.1 (cli-only)

本手順では、13.3.1がアップデート前の状態になります。

Angular CLIをアップデートする

Angular CLIを13.3.1から13.3.4にアップデートしましょう。

まずは、現在インストールしているAngular CLIをアンインストールします。

$ npm uninstall -g @angular/cli

removed 196 packages, and audited 1 package in 567ms

found 0 vulnerabilities

次にAngular CLIを再度インストールします。ここでは最新版をインストールしていますが、特定のバージョンにアップデートしたい場合は@angular/cli@x.x.xのようにバージョンを指定してください。

$ npm install -g @angular/cli

added 196 packages, and audited 197 packages in 10s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

インストール後に再度バージョンを確認します。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.3.4
Node: 16.14.2
Package Manager: npm 8.8.0
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.4 (cli-only)
@angular-devkit/core         13.3.4 (cli-only)
@angular-devkit/schematics   13.3.4 (cli-only)
@schematics/angular          13.3.4 (cli-only)

Angular CLIのバージョンが13.3.4にアップデートされたことを確認できました。

この手順はバージョンアップにもバージョンダウンにも使用できます。

Angularでキャッシュ対策を行う（–output-hashing=all）

Angularでキャッシュが使用されてアプリケーションが更新されないことがある問題を解消する方法について解説します。

この方法はプログラムを変更することなく実施できますが、必ずしも安全であるとは限りません。
実際にこの方法を試して、うまくいかない（キャッシュ対策ができない、というのではなく動作しない）ことがありました。このことから、アプリケーションの使用しているAngularのバージョンやアプリケーションの特性等の要因によって副作用が発生する場合があります。

必ずテスト環境で十分確認してから本番環境へ適用してください。

ビルドされたファイルにハッシュを付与する

ng buildコマンドのオプションに--output-hashing=allを設定します。

$ ng build --configuration production --output-hashing=all

もし、ビルドオプションを変更できない場合は、angular.jsonにoutputHashingオプションを設定します。

   "configurations": {
     "production": {
       ・・・
       "outputHashing": "all"
       ・・・
     },
   },
モバイルバージョンを終了