？？？となってしまった方でも１から理解できるように前提の前提から理解できるようにわかりやすく解説します。

Angular：ルーティングとは？

Angularのルーティングは、Webアプリケーション内でのページ遷移（＝実際にはページを遷移するのではなく、今見ているページの内容を書き換える）を制御する仕組み。

通常のWebアプリケーションでは複数のページ（ユーザ情報表示用ページ、トップページ、レポートページなど）があり、リンクをたどることでそれぞれのページに遷移していくのですが、AngularはSPA（シングルページアプリケーション）なのでそのような動作はしません。

シングルページアプリケーション（SPA）では、従来のWebサイトのようにページを全て読み込み直して表示するのではなく、必要なデータやコンポーネントのみを動的に読み込むことでページの内容を更新します。つまり、ここでいう「ページ遷移」とは、実際にはページをまたいで移動するのではなく、単一のページ内で表示内容を切り替えることを指します。

この方法を採用することで、リンクをクリックするたびに発生する全画面の読み込みを待つことなく、ほぼ即座に新しいコンテンツを見ることができるようになります。また、このページ遷移のプロセスはブラウザの履歴管理と連携しているので、ユーザーがブラウザの「戻る」や「進む」ボタンを使用しても、適切なコンテンツが表示されるようにできている点が特徴です。

Angularでは別のページに移動しているわけではなく、１つのページ内で表示を変えている！ってのを理解できればOKです。

それでは、ここから具体的な実装方法を見ていきます。Angularではどのようにページ遷移を実現しているのか？という点に注目してください。

Angularでのルーティング設定

Angularでのルーティング設定を４ステップにわけて説明します。ざっくり言うと、ルーティング用のモジュール（ここにはURLと表示するコンポーネントの紐づけ情報を保持）を作って、そのモジュールをアプリケーションモジュールにImportするという手順です。

ステップ１　ルーティングモジュールの作成

Angular CLIを使用して、ルーティングモジュールを作成します。このモジュールは、ルート（URLパターンとそれに対応するAngularコンポーネントのマッピング）の定義を保持します。

コマンドは以下の通り。

ng generate module app-routing --flat --module=app

1. --flatフラグ
   • 新しいフォルダを作成せずにファイルをプロジェクトのルートに直接置くことを指定。
2. --module=app
   • 新しく生成されたルーティングモジュールをアプリケーションのルートモジュールに自動的にインポートするように指定。

このフラグは必要に応じて書き換えてください。

ステップ２　ルートの定義

ルーティングモジュール（例: app-routing.module.ts）内で、Routes型の配列を定義し、各ルートを設定します。Routes型は@angular/routerからインポートされます。

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component'; // 例としてHomeComponentをインポート
import { AboutComponent } from './about/about.component'; // AboutComponentも例として

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // その他のルート定義...
];

↑の配列はpathとcomponentプロパティを持ちます。pathはURLの一部。componentにはそのURLが指定されたときに表示されるコンポーネントを指定します。

/home を含むURLを押したときに「HomeComponent」を表示するよ！ということ。

ステップ３　RouterModuleのインポートと設定

次に、RouterModuleをルーティングモジュールにインポートし、forRoot()メソッドを使ってアプリケーションのルートルートを設定します。

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

• imports配列でRouterModule.forRoot(routes)を呼び出すことにより、先ほど定義したルートがアプリケーションに登録されます。
• exports配列にRouterModuleを含めることで、ルーティング機能がアプリケーションの他の部分から利用可能になります。

ステップ４　アプリケーションモジュールにルーティングモジュールをインポート

最後に、AppRoutingModuleをアプリケーションのルートモジュール（通常はapp.module.ts）にインポートします。これは、Angular CLIを使用してルーティングモジュールを生成した場合、自動的に行われることが多いですが、手動で行う必要がある場合もあります。

import { AppRoutingModule } from './app-routing.module'; // AppRoutingModuleのインポート

@NgModule({
  // ...
  imports: [
    // ...
    AppRoutingModule // ルーティングモジュールをインポート
  ],
  // ...
})
export class AppModule { }

これで、ルーティングの基本設定は完了。実はそんなに難しいことはしていません。

が、Angularのルーティングはここからが本番です。ページを切り替えたときにどのコンポーネントを表示するか？は決まったものの、どこに表示するか？を決められていません。

続いては、ルーターアウトレット（router-outlet）についてご説明します。

Angular：<router-outlet>とは何か？

<router-outlet>は、テンプレート内に配置されるディレクティブ（指示子）で、Angularが動的にコンポーネントを表示する場所を表します。

つまり、URLに基づいて、コンポーネントをこの<router-outlet>の場所に読み込む役割を持ちます。

サンプルコード　router-outlet

app-routing.module.tsに、2つのコンポーネントへのルートを定義。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

app.component.html（または任意のテンプレートファイル）に<router-outlet>を配置。これにより、ルートに応じてコンポーネントがこの場所に表示されます。

<!-- ナビゲーションリンク -->
<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

<!-- ルートコンポーネントが表示される場所 -->
<router-outlet></router-outlet>

上記の例では、ブラウザで/homeや/aboutにアクセスすると、<router-outlet>の位置に対応するコンポーネントが表示されるということです。

<router-outlet>がAngularアプリケーションにおけるルーティングとビューの管理の中心であることが理解できましたか？実際には、さらに多くのルートや複雑なナビゲーション構造を設定することができますが、基本的な考え方は同じ。

<router-outlet>は、Angularでのルーティングシステムにおいて、動的にコンポーネントを表示する場所を指定するディレクティブ。アプリケーションのナビゲーションに従って、指定されたコンポーネントをこの場所に読み込み、表示します。

ナビゲーションとリンク

最後にリンクの設定方法を解説します。

ルーティングモジュール（コンポーネントとURLの紐づけ）、ルーターアウトレット（コンポーネントの表示領域）の設定が完了したら、あとは画面上に上記のURLを配置していくだけ。ただし、普通にHTMLのaタグを配置するだけでは不十分です。

Angularでは、ページ遷移を実現するために、ディレクティブとプログラム的な方法の両方を提供しています。ここでは、両方の方法を使ってナビゲーションを実装する方法について詳しく見ていきましょう。

ナビゲーションリンク（routerLinkディレクティブ）

Angularでは、テンプレート内で<a>タグにrouterLinkディレクティブを使用して、ナビゲーションリンクを簡単に作成することができます。routerLinkは、ユーザーがリンクをクリックしたときに遷移するパスを指定します。

<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

参考　navタグ / リストタグ

このサンプルコードでは、ホームページ(/home)と詳細ページ(/about)へのリンクを含むナビゲーションバーを作成しています。ユーザーがこれらのリンクのいずれかをクリックすると、指定されたパスに対応するコンポーネントを<router-outlet>に表示します。

プログラムによるナビゲーション（Routerサービス）

Angularでは、Routerサービスをインジェクトしてプログラムによるナビゲーションを実装することもできます。これは、ユーザーがフォームを送信した後や、特定のイベントが発生したときなど、コード内から直接ページ遷移をトリガーする場合に便利です。

ちょっと難しいですが、実際のコードを見てみましょう。コンポーネントクラス内でRouterサービスを使う方法は以下の通り。

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(private router: Router) {}

  navigateToHome() {
    this.router.navigate(['/home']);
  }
}

そして、テンプレート内で、このメソッドをイベント（例えば、ボタンクリック）にバインドします。↓の例では、navigateToHomeメソッドがボタンクリックイベントにバインドされているので、このメソッドが実行されると、アプリケーションは/homeパスに遷移させます。

<button (click)="navigateToHome()">Go to Home</button>

最後にAngularにおけるルーティングの基本知識を表形式で整理します。自分の理解が十分であるかどうか？チェックしておきましょう。

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

このページでは、Angular初心者の方向けにそもそもモジュールとは何か？という初歩の初歩から解説し、@NgModuleの意味と基本的な使い方を１からわかりやすくサンプルコード付きで解説します。

Angularのモジュールとは？

Angularのモジュールは、レゴブロックのセットのようなものです。

レゴは１つひとつの小さなブロックを組み合わせて様々なものを組み立てていきますよね。たとえば、家を作る時には、窓のブロック、ドアのブロック、屋根のブロックなど、それぞれのパーツを組み合わせることで１つの家を作り上げることができます。
レゴブロックに家を組み立てるためのブロックセットがあるように、Webページの一部分を作るために必要な「コンポーネント」や「サービス」などのパーツを１つにまとめたものとして、Angularのモジュールが存在します。

例えば、「プロフィールページ」というモジュールがあるとすると、このモジュールには「ユーザーの写真を表示するパーツ」「ユーザーの名前を表示するパーツ」「連絡先を表示するパーツ」などが含まれるかもしれません。これらのパーツを１つにまとめたものが「プロフィールページモジュール」です。

モジュールの必要性

大きなレゴの城を組み立てるとき、0から100までの全部を一度に組み立てようとすると大変です。（土台から天守閣までの一度に作成しようとすると、作業中に「いまは何をしていたっけ？」というように混乱してしまう・・・）

しかし、城の一部分ごとにセットを分けて、それぞれのセットを別々に組み立ててから、最後に全部をつなげるともっと簡単にできます。まずは、土台を作り、次に1階部分、2階部分として作成し、最後にそれぞれのブロックを連結させて作った方が簡単です。

Angularのモジュールも同じで、Webアプリケーションをいろいろなモジュール（セット）に分けることで、ひとつひとつをシンプルに作っていくことができます。そして、全部のモジュールが完成したら、それをつなげて一つの大きなWebアプリケーションを完成させるようなイメージです。

このモジュールを作成するために利用するのが@NgModuleです。

Angular：@NgModuleデコレータ

@NgModuleはAngularのデコレータの一種で、指定したクラスをAngularモジュールとして識別する役割を担います。モジュールのメタデータをAngularフレームワークに提供するために使用され、モジュールの振る舞いを定義します。

【TypeScript】デコレータ＠とは？1分でわかりやすく解説

Angularのデコレータは、コードをより宣言的で簡潔にし、フレームワークの機能を効果的に活用するための強力なツールです。この記事で紹介した主要なデコレータを理解することで、Angularアプリケーションの開発がよりスムーズに進むはずです。

it-biz.online

2025.04.23

ひとまずここでは「モジュールはいろんな部品をまとめた１つの箱」のようなイメージを持てればOK。

言葉だけで説明されても、中々イメージは湧かないと思いますので、早速モジュールの作成方法～利用方法までをサンプルコード付きで解説していきます。

@NgModuleの構文ルール

@NgModuleデコレータは、クラス定義の直前に配置。デコレータは次のように使用します。

@NgModule({
  // プロパティ: 値
})
export class MyModule {}

@NgModuleデコレータのプロパティ

これらのプロパティを使用して、Angularモジュールを定義し、アプリケーションの構造を整理することができます。

サンプルコード　Angularモジュールの作成例

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー（ここでは空）
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

AppModuleはAngularのルートモジュールとして機能し、アプリケーションで最初にロードされるモジュールです。declarationsには、このモジュールが直接使用するAppComponentが含まれています。importsには、アプリケーションがブラウザで動作するために必要なBrowserModuleが含まれています。bootstrapには、アプリケーションの起動時に最初にロードされるコンポーネントが指定されています。

モジュールの使用

ここからは、具体的な例を用いて実際にモジュールを定義する方法を見ていきましょう。

サンプルシナリオ

アプリケーションに「ユーザー管理機能」と「注文管理機能」があるとします。これらの機能をそれぞれ別のモジュールで管理することにしました。UserModuleとOrderModuleを作成し、それぞれに関連するコンポーネントやサービスをグループ化します。

ステップ1: 機能モジュールの作成

UserModuleには、ユーザー一覧を表示するUserListComponentとユーザーの詳細を表示するUserDetailComponentを含めます。

// src/app/user/user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule],
  exports: [UserListComponent] // UserListComponentを外部に公開
})
export class UserModule {}

同様に、OrderModuleには注文一覧を表示するOrderListComponentを含めます。

// src/app/order/order.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderListComponent } from './order-list.component';

@NgModule({
  declarations: [OrderListComponent],
  imports: [CommonModule],
  exports: [OrderListComponent] // OrderListComponentを外部に公開
})
export class OrderModule {}

ステップ2: モジュールの利用

AppModule（ルートモジュール）でUserModuleとOrderModuleを利用することにします。これにより、アプリケーション全体でユーザー管理と注文管理の機能が使えるようになります。

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module'; // UserModuleをインポート
import { OrderModule } from './order/order.module'; // OrderModuleをインポート

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UserModule, // AppModuleにUserModuleを追加
    OrderModule // AppModuleにOrderModuleを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

このように、Angularモジュールは「呼び出し」されるものではなく、アプリケーションの構造を定義し、コードを機能単位で整理するために「利用」されます。ルートモジュール（AppModule）または他の機能モジュール内でモジュールをインポートすることにより、そのモジュールが提供する機能（コンポーネント、サービスなど）をアプリケーションの他の部分で使用できるようになります。

デコレータとは？コードへの注釈による機能拡張

デコレータは、クラス、メソッド、プロパティ、パラメータに対して付与される特殊な構文です。@ 記号に続いてデコレータ名を記述することで、対象となるコード要素に対する注釈として機能し、TypeScriptコンパイラや関連フレームワークに対し、その要素の特性や振る舞いに関する情報を提供することになります。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

// ↓がデコレータ
@sealed
class MyClass {
  constructor(public name: string) {}
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

TypeScriptにおけるデコレータの利点：表現力と保守性の向上

TypeScriptでデコレータを活用することには、複数の利点があります。

使いこなしていくうちに徐々にメリットを感じていけると思いますが、事前に簡単に利点を整理しておきます。

• メタプログラミングの実現
  プログラム自身がその構造や実行時の振る舞いを操作するメタプログラミングを可能にする。
• 関心事の分離
  ログ記録、認証、トランザクション管理といった横断的な関心事を、主要なビジネスロジックから分離し、コードの可読性と保守性を高めることができる。
• コードの再利用性
  一度定義されたデコレータは、複数のクラスやメンバーに適用でき、重複したコードを削減できる。
• フレームワークとの統合
  Angularなどのフレームワークは、デコレータを基盤としており、フレームワークの機能利用を簡潔化します。

TypeScriptの主要なデコレータの種類と機能

TypeScriptは、デコレータが適用される対象に応じて、以下の種類を提供します。

1. クラスデコレータ

クラス定義の直前に記述され、クラス全体の振る舞いを変更、またはメタデータを付与します。クラスデコレータは、クラスのコンストラクタ関数を引数として受け取ります。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class MyClass {
  constructor(public name: string) {}
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("TypeScript");
instance.greet(); // 出力結果：Hello, TypeScript!

2. メソッドデコレータ

メソッド定義の直前に記述され、メソッドの振る舞いを修飾、またはメタデータを付与します。メソッドデコレータは、ターゲットオブジェクト、メソッド名、プロパティ記述子を引数として受け取ります。

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`メソッド '${propertyKey}' が引数 ${JSON.stringify(args)} で呼び出されました。`);
    const result = originalMethod.apply(this, args);
    console.log(`メソッド '${propertyKey}' の実行結果: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
const sum = calc.add(5, 3);
console.log(`合計: ${sum}`);
// 出力結果：
// メソッド 'add' が引数 [5,3] で呼び出されました。
// メソッド 'add' の実行結果: 8
// 合計: 8

3. プロパティデコレータ

プロパティ定義の直前に記述され、プロパティのメタデータを付与、またはアクセス時の振る舞いを変更します。プロパティデコレータは、ターゲットオブジェクトとプロパティ名を引数として受け取ります。

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Person {
  @readonly
  name: string = "John Doe";

  constructor() {}
}

const person = new Person();
console.log(person.name); // 出力結果：John Doe
// person.name = "Jane Doe"; // コンパイルエラーが発生します

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Person {
  @readonly
  name: string = "John Doe";

  constructor() {}
}

4. パラメータデコレータ

メソッドのパラメータ定義の直前に記述され、パラメータに関するメタデータを付与します。パラメータデコレータは、ターゲットオブジェクト、メソッド名、パラメータのインデックスを引数として受け取ります。

function paramInfo(target: any, methodKey: string, parameterIndex: number) {
  console.log(`クラス '${target.constructor.name}' のメソッド '${methodKey}' のインデックス ${parameterIndex} 番目のパラメータです。`);
}

class Greeter {
  greet(@paramInfo message: string) {
    console.log(`Greeting: ${message}`);
  }
}

const greeter = new Greeter();
greeter.greet("Hello!");
// 出力結果：
// クラス 'Greeter' のメソッド 'greet' のインデックス 0 番目のパラメータです。
// Greeting: Hello!

デコレータの動作原理：メタデータの利用

TypeScriptコンパイラは、デコレータを特別な関数として処理し、デコレートされた要素に関する情報を引数としてデコレータ関数に渡します。

デコレータ関数は、この情報に基づいて、クラスやメンバーの振る舞いを変更したり、メタデータを格納したりします。このメタデータは、TypeScriptランタイムやフレームワークがコードの構造と意図を解釈し、適切な処理を実行するために利用されます。

Angularにおけるデコレータの応用：フレームワークの基礎構造

Angularフレームワークは、TypeScriptのデコレータ機能を広範に活用しています。

@Component、@Directive、@Injectable、@Input、@Output などのAngularデコレータは、クラスに特定の役割と機能を持たせるための重要なメカニズムです。例えば、@Component デコレータは、TypeScriptクラスをUIコンポーネントとして定義し、テンプレートやスタイルといった関連情報をAngularに提供します。

深堀りしていくと、深い話も尽きないのがどのプログラミング言語にも共通する特徴ですが、まずはその土台としての解説ページです！是非最後までご覧ください。

プログラミングの超基本：「文」と「セミコロン」

どんなプログラミング言語にも共通しますが、プログラムはコンピューターに対する指示の集まりでできています。この１つ１つの指示のことを文 (Statement) と呼びます。

// これは「変数 message を宣言し、"Hello" という文字列を代入する」という１つの文
let message: string = "Hello";

// これも「変数 year を宣言し、2025 という数値を代入する」という別の１つの文
let year: number = 2025;

// これも「コンソールに message 変数の内容を表示する」という文
console.log(message);

プログラムは、これらの文が上から順に実行されることで動きます。

セミコロン ; の役割

多くのプログラミング言語では、文の終わりを明確にするためにセミコロン (;) を付けます。TypeScript（および元になったJavaScript）でも、文の終わりにはセミコロンを付けるのが基本的なルールです。

let greeting: string = "Good morning"; // 文の終わりにセミコロン
let count: number = 10;             // 文の終わりにセミコロン
console.log(greeting);             // 文の終わりにセミコロン

Tips：セミコロンは省略できる？

実は、TypeScript (JavaScript) では、多くの場合、行の終わりが文の終わりであると自動的に判断してくれるため、セミコロンを省略しても動くことがあります。

let city: string = "Tokyo" // セミコロンなしでもOK
let population: number = 14000000 // セミコロンなしでもOK
console.log(city)           // セミコロンなしでもOK

しかし、以下のような理由から、基本的にはセミコロンを付けることが推奨されています。

1. 意図しない動作を防ぐ
   特定の状況では、セミコロンがないとコードが予期せぬ形で結合され、エラーやバグの原因になることがあります。
2. コードの明確性
   文の終わりが明確になり、コードが読みやすくなります。
3. チーム開発での一貫性
   複数人で開発する場合、セミコロンを付けるか付けないかのルールを統一しておくと、コードのスタイルが揃います。

TypeScriptとは？

さて、本題のTypeScriptです。
TypeScriptは、Microsoftによって開発された、JavaScriptを拡張して作られたプログラミング言語です。一番大きな特徴は静的型付けができることです。

• JavaScriptのスーパーセット
  TypeScriptはJavaScriptの機能をすべて含んでいます。つまり、JavaScriptを知っていれば、TypeScriptは比較的スムーズに学べます！
• 静的型付け
  プログラムを実行する前に、データ（後述する「値」や「変数」）に「型」（種類）を指定することで、型の間違いを早期に発見できます。これがコードの品質を高め、開発を助けてくれます。

なぜ型が必要なの？

コンピューターは、「数値」と「文字列（文字の並び）」を区別します。
例えば、100 は数値、"100" は文字列です。

JavaScriptでは、実行時に型が決まるため、意図せず数値と文字列を足し合わせてしまうようなミスが起こりえます（例: 1 + "0" が "10" になる）。TypeScriptでは、あらかじめ「これは数値だよ」「これは文字列だよ」と宣言することで、そのようなミスを防ぎます。

参考　「データ型」とは？

基本的な「値」と「型」

プログラムが扱うデータの基本的な単位を値 (Value) と呼びます。値には様々な種類があり、その種類のことを型 (Type) と言います。

TypeScriptでよく使う基本的な型を見ていきましょう。

• string (文字列型)
  文字や文章を表す値の型です。ダブルクォーテーション " またはシングルクォーテーション ' で囲みます。
  • 値の例: "こんにちは", 'TypeScript', "123" (これは数値ではなく文字列)
• number (数値型)
  整数や小数を表す値の型です。
  • 値の例: 100, 0, -5, 3.14
• boolean (真偽値型)
  「正しい (true)」か「間違っている (false)」かの二択を表す値の型です。
  • 値の例: true, false
• Array (配列型)
  同じ型の値を複数まとめて順番に格納する型です。角括弧 [] を使います。
  • 値の例: [1, 2, 3] (数値の配列), ["apple", "banana"] (文字列の配列)
• null
  「何もない」ことを意図的に示す特殊な値。
• undefined
  値が「未定義」であることを示す特殊な値。変数を宣言しただけで、まだ値を入れていない状態など。
• any (任意型)
  どんな型の値でも入る特殊な型。
  便利ですが、TypeScriptの型チェックの恩恵を受けられなくなるため、使用は慎重に。

値を覚えておく：「変数」

プログラムの中で、値を一時的に保存しておくための「名前付きの箱」のようなものが変数 (Variable) です。変数を使うことで、値に名前を付けて何度も利用したり、値を変更したりできます。

参考　プログラミングの変数とは？１分でわかりやすく

変数を使うには、まず宣言 (Declaration) が必要です。TypeScriptでは let または const を使って変数を宣言します。

• let: 値を後から変更可能な変数を宣言します。
• const: 値を後から変更不可能な（定数 Constant）変数を宣言します。基本的には const を使い、値の変更が必要な場合のみ let を使うのが良い習慣です。

宣言の際には、変数名の後に : (コロン) と型名を指定しその変数にどんな型の値を入れるかを指定します（型注釈 Type Annotation）。そして = の後に、その変数に入れる最初の値（初期値）を書きます。

// string 型の変数 message を宣言し、初期値として "Hello, TypeScript!" を入れる
let message: string = "Hello, TypeScript!";

// number 型の定数 year を宣言し、初期値として 2025 を入れる
const year: number = 2025;

// boolean 型の変数 isActive を宣言し、初期値として true を入れる
let isActive: boolean = true;

// number 型の配列 scores を宣言
const scores: number[] = [80, 95, 72];

// message 変数の中身を "Hi!" に変更する (let なので変更可能)
message = "Hi!";

// year 変数の中身を変更しようとするとエラーになる (const なので変更不可)
// year = 2026; // エラー!

// 型が違う値を入れようとするとエラーになる
// message = 100; // エラー! message は string 型

TypeScript：変数と基本的な型を３分でわかりやすく解説

TypeScriptの変数宣言、基本的なデータ型（number, string, boolean, null, undefined, array, tuple, enumなど）の概要と使用方法を3分で簡潔に解説します。TypeScriptでの型注釈と型推論の基本もカバーし、初心者がTypeScriptの型システムを効果的に活用するための入門ガイド。

it-biz.online

2024.03.08

型推論 (Type Inference)

実は多くの場合、TypeScriptは初期値から変数の型を自動的に推測してくれます。これを型推論と呼びます。型推論が可能な場合は、型注釈を省略できます。

let user = "Alice"; // 初期値が文字列なので string 型と推論される
const pi = 3.14;    // 初期値が数値なので number 型と推論される

// user = 123; // エラー! user は string 型と推論されている

値を作り出す：「式」

プログラムの中で、計算や処理を実行して最終的に１つの値になるものを式 (Expression) と呼びます。

• 1 + 2 は、計算されて 3 という値になるので式。
• year （上で宣言した変数）は、その中に入っている 2025 という値になるので式。
• message は、その中に入っている "Hi!" という値になるので式。
• scores[0] は、配列 scores の最初の要素である 80 という値になるので式。
• isActive === true は、比較の結果 true または false という値になるので式。

文と式の違い

• 文 (Statement)
  コンピューターへの指示。何かを実行させる。
  例: let x = 10;, console.log("OK");
• 式 (Expression)
  評価されると１つの値になるもの。
  例: 10, x, 10 + 5, x > 5

文の中に式が含まれていることがよくあります。例えば、let x = 10 + 5; という文には、10 + 5 という式が含まれています。この式が評価されて 15 という値になり、その値が変数 x に代入されます。

処理をまとめる：「関数」

一連の処理をまとめて名前を付け、繰り返し呼び出せるようにしたものが関数 (Function) です。関数を使うことで、同じようなコードを何度も書く手間が省け、プログラムが整理されます。

参考　プログラミングの「関数」とは？

関数を定義するには function キーワードを使います。関数には引数 (Argument/Parameter) を渡すことができ、処理の結果として戻り値 (Return Value) を返すことができます。

TypeScriptでは、関数の引数と戻り値にも型注釈を付けます。

// 関数宣言の基本形
// function 関数名(引数1: 型, 引数2: 型, ...): 戻り値の型 {
//   // 関数の処理
//   return 戻り値; // 戻り値がある場合
// }

// ２つの数値を受け取り、合計を返す関数
function add(a: number, b: number): number {
  const result: number = a + b; // a + b は式
  return result;             // result を戻り値として返す文
}

// 戻り値がない (何かを表示するだけなど) 関数の戻り値の型は `void`
function printMessage(message: string): void {
  console.log(message); // message を表示する文
  // return 文がない、または return; だけ
}

// 関数を呼び出す (実行する)
const sum: number = add(5, 3); // add関数を呼び出し、戻り値 (8) を変数 sum に代入する文
console.log(sum); // 出力: 8

printMessage("関数のテスト"); // printMessage関数を呼び出す文 (出力: 関数のテスト)

アロー関数

JavaScriptでお馴染みの、より簡潔に関数を書く方法であるアロー関数も使えます。

// アロー関数の基本形
// const 関数名 = (引数1: 型, 引数2: 型, ...): 戻り値の型 => {
//   // 関数の処理
//   return 戻り値;
// };

const multiply = (x: number, y: number): number => {
  return x * y;
};

// 処理が1行で終わる場合は {} と return を省略可
const difference = (a: number, b: number): number => a - b;

const resultMultiply: number = multiply(4, 6); // 24
const resultDifference: number = difference(10, 7); // 3

console.log(resultMultiply);
console.log(resultDifference);

TypeScript：関数宣言/関数式の基本を１分でわかりやすく

TypeScriptでの関数の基本的な定義方法、実行方法、さらにジェネリック型、高階関数、オーバーロード、タプルとデストラクチャリングを使った応用的な使い方までをわかりやすく解説しています。TypeScriptの型安全性を活かした関数の使いこなし方を学び、より安全で再利用可能なコードの書き方をマスターしましょう。

it-biz.online

2025.01.10

オブジェクトの形を決める：「インターフェース」

複数の値をまとめて、１つの意味のあるデータとして扱いたい場合があります。例えば、「ユーザー」を表すデータとして、ID、名前、メールアドレスなどをまとめたい、といった場合です。このようなデータのまとまりをオブジェクト (Object) と呼びます。（オブジェクトについては、次の章で解説します。）

インターフェース (Interface) は、オブジェクトがどのようなプロパティ（オブジェクト内の個々のデータのこと）を持つべきか、その「形」や「構造」を定義するための設計図のようなものです。

// User というインターフェース (設計図) を定義
interface User {
  id: number;     // id という名前のプロパティがあり、その型は number
  name: string;    // name という名前のプロパティがあり、その型は string
  isAdmin: boolean; // isAdmin という名前のプロパティがあり、その型は boolean
  email?: string; // ? を付けると、あってもなくても良いプロパティ (オプショナル)
}

// User インターフェースに従ったオブジェクトを作成
// このオブジェクトは User の設計図通りに作られている
let user1: User = {
  id: 1,
  name: "David",
  isAdmin: true,
  email: "david@example.com"
};

// email プロパティがなくても User インターフェースを満たす
let user2: User = {
  id: 2,
  name: "Eve",
  isAdmin: false
};

// インターフェースで定義されていないプロパティを持っていたり、
// 必須のプロパティがなかったりするとエラーになる
// let user3: User = {
     id: 3, 
     username: "Frank"
}; // エラー: nameがない、username は未定義

// 関数が User 型のオブジェクトを受け取ることを明示できる
function displayUserName(user: User): void {
  console.log(user.name);
}

displayUserName(user1); // 出力: David
displayUserName(user2); // 出力: Eve

インターフェースを使うことで、「このオブジェクトには必ず id と name が number 型と string 型で存在する」といったルールを明確にでき、コードの安全性が高まります。

TypeScript：interface（インターフェース）の基本を３分で解説

TypeScriptのインターフェースの基本から応用までを徹底解説。初心者でも理解しやすいように、インターフェースの定義方法、利点、関数やクラスとの連携、さらには宣言のマージについても具体的な例を交えて紹介。TypeScriptでの型安全なコーディングをマスターしたい方必見の内容です。

it-biz.online

2025.01.17

オブジェクトの設計図と機能：「クラス」

インターフェースがオブジェクトの「形」だけを定義するのに対し、クラス (Class) はオブジェクトの「形」（プロパティ）に加えて、そのオブジェクトが持つ「機能」（メソッド Method と呼ばれる関数）も一緒に定義できる、より高機能な設計図です。オブジェクト指向プログラミングの中心的な概念です。

参考　Typescriptのオブジェクトとは？

class Product {
  // プロパティ (クラスが持つデータ)
  name: string;
  price: number;
  readonly id: number; // readonly: 一度設定したら変更できない

  // コンストラクタ: クラスからオブジェクトを生成するときに自動的に呼ばれる特殊なメソッド
  // プロパティの初期化などを行う
  constructor(id: number, name: string, price: number) {
    this.id = id; // this は生成されるオブジェクト自身を指す
    this.name = name;
    this.price = price;
    console.log(`商品「${this.name}」が生成されました。`);
  }

  // メソッド (クラスが持つ機能・関数)
  getPriceWithTax(taxRate: number): number {
    // 税込み価格を計算して返す
    return this.price * (1 + taxRate);
  }
}

// クラス (設計図) から実際のオブジェクト (インスタンス) を生成する
const productA = new Product(101, "高機能マウス", 5000); // コンストラクタが呼ばれる
const productB = new Product(102, "キーボード", 8000);

// オブジェクトのプロパティにアクセス
console.log(productA.name); // 出力: 高機能マウス
console.log(productB.price); // 出力: 8000

// オブジェクトのメソッドを呼び出す
const priceAWithTax = productA.getPriceWithTax(0.1); // 税率10%
console.log(`商品Aの税込価格: ${priceAWithTax}円`); // 出力: 商品Aの税込価格: 5500円

// readonly なプロパティは変更できない
// productA.id = 200; // エラー!

クラスを使うと、関連するデータ（プロパティ）と処理（メソッド）をひとまとめにして管理できるため、複雑なプログラムを構造化しやすくなります。

型に別名を付ける：「型エイリアス」

複雑な型や何度も使う型に、分かりやすい別名を付けることができるのが型エイリアス (Type Alias) です。type キーワードを使って定義します。

// 文字列リテラルの組み合わせに 'Status' という別名を付ける
type Status = "pending" | "processing" | "completed" | "failed";
// Status 型の変数は、上記4つの文字列のどれかしか受け付けない

let orderStatus: Status = "processing";
console.log(orderStatus);

orderStatus = "completed";
// orderStatus = "shipped"; // エラー! Status 型には 'shipped' は含まれない

// オブジェクトの型にも別名を付けられる (インターフェースと似ている)
type Point = {
  x: number;
  y: number;
};

function distance(p1: Point, p2: Point): number {
  const dx = p1.x - p2.x;
  const dy = p1.y - p2.y;
  return Math.sqrt(dx * dx + dy * dy); // Math.sqrt は平方根を計算する組み込み関数
}

const point1: Point = { x: 0, y: 0 };
const point2: Point = { x: 3, y: 4 };
console.log(distance(point1, point2)); // 出力: 5

// 関数型に別名を付ける
type StringFormatter = (input: string) => string;

const toUpperCase: StringFormatter = (str) => str.toUpperCase();
const addGreeting: StringFormatter = (str) => `Hello, ${str}!`;

console.log(toUpperCase("test")); // 出力: TEST
console.log(addGreeting("World")); // 出力: Hello, World!

型エイリアスを使うと、コードが読みやすく、意図が伝わりやすくなります。

型を引数にする：「ジェネリクス」

ジェネリクス (Generics) は、関数やクラスを定義するときに、そこで使われる型を固定せず、後から指定できるようにする仕組みです。→型を関数の引数のように扱えます。

これにより、様々な型に対応できる、再利用性の高いコードを書くことができます。

// この関数は、呼び出すときに指定された型 T の配列を受け取り、
// その型の要素を返す（もし配列が空なら undefined を返す）
function getFirstItem<T>(items: T[]): T | undefined {
  // T は型引数と呼ばれる。呼び出し時に具体的な型が決まる。
  return items.length > 0 ? items[0] : undefined;
}

// number 型を指定して呼び出す
const numbers: number[] = [10, 20, 30];
const firstNum: number | undefined = getFirstItem<number>(numbers);
console.log(firstNum); // 出力: 10

// string 型を指定して呼び出す
const colors: string[] = ["red", "green", "blue"];
const firstColor: string | undefined = getFirstItem<string>(colors);
console.log(firstColor); // 出力: red

// 型を省略すると、TypeScriptが推論してくれる場合もある
const flags = [true, false, true];
const firstFlag = getFirstItem(flags); // boolean 型だと推論される
console.log(firstFlag); // 出力: true

// 空の配列の場合
const emptyArray: any[] = [];
const firstEmpty = getFirstItem(emptyArray);
console.log(firstEmpty); // 出力: undefined

ジェネリクスは少し高度な概念ですが、ライブラリなどでは頻繁に使われているため、覚えておくと役立ちます。

コードの説明書き：「コメント」

コードの中に、プログラムの動作には影響しない説明文を書き残すことができます。これをコメントと呼びます。後で自分が見返したときや、他の人がコードを読むときに、処理内容を理解しやすくするために使います。

TypeScript (JavaScript) では、コメントの書き方は主に2種類あります。

• 一行コメント: // から行末までがコメントになります。 TypeScript// これは一行コメントです let price: number = 100; // 税抜き価格
• 複数行コメント: /* と */ で囲まれた範囲がコメントになります。 TypeScript/* これは複数行コメントです。 複数行にわたって説明を記述できます。 関数やクラスの説明などによく使われます。 */ function calculateTotal(price: number, quantity: number): number { // 消費税率 (10%) const taxRate = 0.1; const subTotal = price * quantity; const tax = subTotal * taxRate; return subTotal + tax; // 合計金額を返す }

コメントのルールはJavaと同一です。

適切なコメントは、コードの可読性を大きく向上させます。

TypeScript：文法まとめ

今回は、プログラミングの本当に基本的な「文」や「値」から始まり、TypeScriptのコアとなる「型」「変数」「関数」「インターフェース」「クラス」などの概念を駆け足で見てきました。

• プログラムは文の集まり。文末にはセミコロン ; を付けるのが基本。
• データには値があり、その種類が型。
• 値を保存するのが変数 (let, const)。型注釈と型推論がある。
• 値を生成するのが式。
• 処理をまとめるのが関数。引数と戻り値に型を付ける。
• オブジェクトの形を定義するのがインターフェース。
• 形と機能を定義するのがクラス。
• 型に別名を付けるのが型エイリアス。
• 型を柔軟に扱うのがジェネリクス。
• コードの説明はコメントで。

TypeScriptは、JavaScriptに「型」という強力な武器を与えてくれます。最初は覚えることが多く感じるかもしれませんが、型があることでエラーが減り、コードが読みやすくなり、安心して開発を進められるようになります。

ぜひ、ご自身の環境でTypeScriptをセットアップして、実際にコードを書いて動かしてみてください。公式ドキュメントや様々なチュートリアルも素晴らしい学習リソースです。

なので、JavaScriptに対する基礎知識を持っているとある程度楽に学習を進めることができます。

TypeScriptで書いたコードは、TypeScriptコンパイラまたはBabelなどのトランスパイラを使用してJavaScriptに変換→任意のブラウザやNode.js環境で実行することができます。手軽さや移行のしやすさから、現在多くのWebサイトがTypeScriptを用いて構築されています。

function addNumbers(a: number, b: number): number {
    return a + b;
}

const sum = addNumbers(10, 5);
console.log(sum); // 出力: 15

このページではTypeScriptの基本的な概念を解説します。
また、今後TypeScriptを使ってみたいと思う方のために、必要な環境設定から最初のTypeScriptファイルの作成方法に至るまで1個1個順を追ってご説明します。

TypeScriptとは

TypeScriptはJavaScriptの拡張版（＝進化版）としてMicrosoftにより開発されたプログラミング言語です。JavaScriptの弱点の一つであった「データ型」の問題を克服するために、静的型付けといった強力な型システムを加えることで、開発者がより安全に、かつ効率的にコードを記述できるようにすることを目的としています。

JavaScriptが、ブラウザやNode.jsなど広範囲にわたるプラットフォームでの動的なWebアプリケーション開発に不可欠な言語というのは変わりませんが、TypeScriptはその能力をさらに拡張し、大規模なアプリケーションの開発を容易にしているという点がポイントです。

参考　Node.jsとは？

TypeScriptの特徴（Type：型）

TypeScriptの核心機能は、その名が示す通り「Type：型」にあります。

この仕組みのおかげで、変数、関数の引数、戻り値などに明確な型を指定できるため、開発の早い段階で型不一致やその他の一般的なエラーを検出することが可能になります。この型システムはオプショナル：任意の機能なので、JavaScriptのコードをそのままTypeScriptファイルにコピー＆ペーストして、段階的に型を導入することもできます。

また、IDEやエディタの強力なサポートがあるので、リアルタイムのエラーチェック、コード補完、リファクタリングが容易に。→開発プロセスの生産性を大幅に向上させることが可能になります。

TypeScriptの環境設定

TypeScriptを利用するためには、まず開発環境を適切にセットアップする必要があります。このセクションでは、TypeScript開発のための基本的な環境設定手順を説明します。

主に、Node.jsのインストール、TypeScriptコンパイラのセットアップ、そして開発効率を高めるための統合開発環境（IDE）の設定などをご説明します。

Node.jsのインストール

TypeScriptをコンパイルするにはNode.jsが必要です。Node.jsは、サーバーサイドでJavaScriptを実行するためのランタイム環境であり、npm（Node Package Manager）が含まれています。npmとは、JavaScriptのライブラリやツールを管理するためのパッケージマネージャーのようなもの。

まずは、Node.jsの公式ウェブサイトからインストーラをダウンロードし、指示に従ってNode.jsをインストールしてください。

TypeScriptコンパイラのセットアップ

Node.jsのインストールが完了したら、次はnpmを使用してTypeScriptコンパイラをインストールします。コマンドラインまたはターミナルを開き、以下のコマンドを実行してください。

npm install -g typescript

このコマンドにより、TypeScriptコンパイラがグローバルにインストールされ、任意のプロジェクトで使用できるようになります。インストールが完了したら、以下のコマンドを実行してTypeScriptのバージョンを確認し、正しくインストールされていることを確認します。

tsc --version

IDEの設定

TypeScriptの開発には、Visual Studio Code（VS Code）などのTypeScriptに対応したIDEを使用することをお勧めします。VS Codeは無料で提供されており、TypeScriptのコード補完、リファクタリング、エラーチェックなどの強力な機能を備えています。VS Codeをまだお持ちでない場合は、Visual Studio Codeの公式ウェブサイトからダウンロードしてインストールしましょう。

インストール後、VS Codeで新しいプロジェクトを開き、.ts拡張子を持つファイルを作成すると、自動的にTypeScriptのサポートが有効になります。

これで、TypeScriptの開発環境の基本的なセットアップが完了です。

TypeScriptファイルの作成

ここまでの章でTypeScriptの基本と環境設定の方法を解説してきました。ここからは、実際にTypeScriptを使って最初のファイルを作成し、それをJavaScriptにトランスパイルするプロセスを見ていきます。

このステップでは、TypeScriptの基本的な使い方を理解し、TypeScriptプロジェクトでの作業フローを体験していきます。

TypeScriptファイルの作成

まず、任意のテキストエディタまたはIDE（前述のVisual Studio Codeがお勧め）を使用して、新しいファイルを作成します。ファイル名はhello.tsとしましょう。このファイルに以下のTypeScriptコードを記述してください。

function sayHello(name: string): string {
    return `Hello, ${name}!`;
}

const message = sayHello('TypeScript');
console.log(message);

このコードは、与えられた名前に挨拶を返すシンプルな関数sayHelloを定義しています。ここで、引数nameと戻り値に型アノテーションstringを使用しています。これにより、関数が文字列型の引数を受け取り、文字列型の値を返すことがTypeScriptによって保証されます。

tscコマンドによるトランスパイル

次に、コマンドラインまたはターミナルを開き、hello.tsファイルが保存されているディレクトリに移動します。次のコマンドを実行して、TypeScriptファイルをJavaScriptにトランスパイルしてください。

tsc hello.ts

このコマンドを実行すると、同じディレクトリにhello.jsという新しいファイルが作成されます。このファイルには、hello.tsからトランスパイルされたJavaScriptコードが含まれています。TypeScriptコンパイラは、TypeScriptのコードを標準的なJavaScriptに変換することで、どのJavaScript環境でも実行できるようにします。

実行結果の確認

最後に、トランスパイルされたJavaScriptファイルを実行してみましょう。次のコマンドを使用して、hello.jsをNode.jsで実行します。

node hello.js

コマンドを実行すると、コンソールにHello, TypeScript!というメッセージが表示されます。これは、TypeScriptで書かれたコードが正しくJavaScriptに変換され、期待通りの結果を出力したことを意味します。

これで、あなたはTypeScriptの基本的な使い方をマスターできました。

TypeScriptファイルの作成、トランスパイル、そして実行のプロセスを通じて、TypeScriptがどのように機能するかの基本的な理解を深めることができたかと思います。

Angularにおけるパイプ (Pipe) は、テンプレート内で表示するデータを「見た目」や「形式」の観点から変換・加工する仕組みです。このページでは、初心者向けのイメージと、仕組みの本質的な部分を段階的に解説していきます。

パイプ (Pipe) とは何か？

パイプの目的・役割

1. データ変換 (Formatting / Transforming)
   テンプレート (HTML) に表示する「直前」で、コンポーネントから受け取った生データを、ユーザーが見やすい・使いやすい形に整形する。
   例）日付の表示形式、数値の3桁区切り、文字列の大文字化など。
2. テンプレートの可読性向上
   もしパイプがない場合、コンポーネントやテンプレート内にフォーマット用の複雑な処理が散らばるおそれがある。パイプを使うことで、
   • ビジネスロジック (コンポーネント) と表示用のフォーマット処理 (ビュー) を分離しやすい
   • テンプレートは「必要な変換をパイプでつなぐ」だけになる
     ため可読性が向上する。
3. Angular が提供するビルトイン機能との連携
   代表的なビルトインパイプ (DatePipe, NumberPipe, CurrencyPipe, PercentPipe, UpperCasePipe など) を利用することで、面倒なデータ変換の多くを少ないコードで実現できる。

パイプを使うには

• “|” (パイプ記号) を使う
  テンプレート内で {{ 変数 | pipe名 }} のように使います。複数のパイプをつなげて使うこともできます。

<!-- 例: 価格を3桁区切りにフォーマットし、通貨も付けて表示する -->
{{ price | number:'1.0-0' | currency:'JPY' }}

初心者がつかむべき「イメージ」と簡単な利用シーン

単純なビルトインパイプの利用例

<!-- コンポーネントのプロパティ -->
export class ExampleComponent {
  today = new Date();  // たとえば 2025-01-18
  price = 1234.5;
  userName = 'angular user';
}

<!-- テンプレート -->
<!-- ① 日付を表示 -->
<p>Today: {{ today | date:'yyyy/MM/dd' }}</p>
<!-- 出力例: Today: 2025/01/18 -->

<!-- ② 価格を3桁区切りにして、通貨表記に -->
<p>Price: {{ price | currency:'USD':'symbol':'1.0-2' }}</p>
<!-- 出力例: Price: $1,234.50 -->

<!-- ③ 文字列をすべて大文字に -->
<p>User: {{ userName | uppercase }}</p>
<!-- 出力例: User: ANGULAR USER -->

• このように、{{ 変数 | pipe名:オプション }} の形で、テンプレート上で値を変換するのがパイプの基本的な使い方です。
• 利用シーン: ユーザーに見せたい情報があるとき、コンポーネント側のデータ構造や型はそのままで、最後の「表示」のタイミングだけパイプでスッキリ変換できる。

複数パイプの連続利用

1つの値に対して、パイプ記号 | を複数つなげることも可能です。

<!-- 価格を3桁区切り→JPY表記→大文字に -->
<p>{{ price | number:'1.0-0' | currency:'JPY':'symbol' | uppercase }}</p>

• price を整数表記にして (number:'1.0-0')、
• currency で通貨（￥）を付与し (currency:'JPY')、
• uppercase で最終的に大文字化したものが表示される。

データ変換が段階的に行われるため、一連のフォーマット処理をテンプレート上で可視化しやすいのが利点の１つです。

カスタムパイプの基本と概念

Angularで用意されているビルドインパイプでは要件を満たさない場合、自分でパイプを作成することもできます。

例）日付 +「何日前」「何時間前」といった表示形式にしたい、配列を特定の条件でフィルタリングしたい、など。

カスタムパイプの最小構成

// ex-rate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exRate' // テンプレート上で使うパイプ名
})
export class ExRatePipe implements PipeTransform {
  // transformメソッドが肝。引数は自由に定義できる（最初が「値」、それ以降がパラメータ）
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

1. @Pipe() デコレーターで、パイプであることとパイプ名を宣言。
2. PipeTransform インターフェースの transform メソッドを実装する（必須）。
3. 変換したい処理を transform で書き、戻り値を返す。

テンプレートでの使用例

<!-- コンポーネントで amount = 100 として、1ドル=135円換算 で表示 -->
<p>JPY: {{ amount | exRate:135 }}</p>
<!-- 実行結果: 13500 -->

@Pipe({
  name: 'exRate'
})
export class ExRatePipe implements PipeTransform {
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

Change Detection (変更検知) との関係

(1) Angular における変更検知

• Angular はコンポーネントのプロパティが変わったかどうかを監視 (Change Detection) し、変更があればテンプレートを再描画 (再評価) する仕組み。
• 純粋パイプ (Pure Pipe) は「入力値 (およびその参照) が変わったときのみ」transform を再実行する。
• 非純粋パイプ (Impure Pipe) は「変更検知サイクルごとに」transform を再実行する。

(2) 純粋パイプと非純粋パイプ

1. 純粋パイプ (Pure Pipe)
   • デフォルトではこちら。@Pipe({ name: 'xxx' }) と書くだけで純粋パイプとして扱われる。
   • 値が変わったときだけ再評価されるので、パフォーマンスによい。
   • 単純な日付変換や数値フォーマットなど、入力値が変わらないときに「結果も変わらない」処理に最適。
2. 非純粋パイプ (Impure Pipe)
   • @Pipe({ name: 'xxx', pure: false }) のように、pure: false を指定すると非純粋パイプになる。
   • 変更検知サイクルのたびに毎回 transform が走るので、配列やオブジェクトの“中身”の変化に対しても都度再評価される。
   • 利用シーン:
     • 配列・オブジェクトをテンプレート上でフィルタやソートしたいときに、「単純に参照が新規になった/ならない」を超えて、内容の微細な変化に対応させたい場合など。
     • ただしパフォーマンスに影響するので、よく検討してから使う。

非純粋パイプの簡単な例

@Pipe({
  name: 'search',
  pure: false // 非純粋パイプ
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], keyword: string): any[] {
    return items.filter(item => item.name.includes(keyword));
  }
}

この例では、items (配列) や keyword (検索文字列) が細かく変化するたびにパイプを再評価し、フィルタ済みの配列を返す。もし純粋パイプだと、配列の「参照」が同じままでは再実行されないため、意図するタイミングで結果が更新されない場合がある。とはいえ「毎回呼ばれる」ことになるため、大きな配列・複雑な処理には注意が必要です。

具体的な利用シーンとコード例

シーン1: ユーザー一覧の表示をフィルタ/ソートしたい

• パイプでフィルタ処理を書けば、テンプレートに | filterUser:'xxx' のように書くだけで表示を切り替えられる。
• ただし大量データがある場合は、都度全件フィルタするとパフォーマンスが落ちるため、コンポーネント側でフィルタした結果を保持するなど検討が必要。

@Pipe({ 
  name: 'filterUser'
})
export class FilterUserPipe implements PipeTransform {
  transform(users: { id: number; name: string; }[], searchTerm: string): any[] {
    if (!searchTerm) return users;
    return users.filter(user => 
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

<!-- テンプレート -->
<input [(ngModel)]="keyword" placeholder="検索ワード" />
<ul>
  <li *ngFor="let user of users | filterUser:keyword">
    {{ user.name }}
  </li>
</ul>

シーン2: 日付の差分を表示したい (たとえば「xx日前」「xx時間前」)

• ビルトインの DatePipe では「相対的な日付表示」はサポートしていない (locale, format によるもの) ので、カスタムパイプで実装する。

@Pipe({
  name: 'relativeTime'
})
export class RelativeTimePipe implements PipeTransform {
  transform(value: Date): string {
    const now = new Date();
    const diffMs = now.getTime() - value.getTime();
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));

    if (diffDays > 0) {
      return `${diffDays}日前`;
    } else if (diffHours > 0) {
      return `${diffHours}時間前`;
    } else {
      return 'たった今';
    }
  }
}

<!-- テンプレート例 -->
<p>投稿時刻: {{ post.createdAt | relativeTime }}</p>
<!-- 出力例: "1日前" "2時間前" ... -->

パイプは「コンポーネント → テンプレート」の単方向データフローの、テンプレート直前でのフォーマット処理 としてとらえると理解しやすいです。

前提として「Angularの変更検知の流れ (コンポーネントのプロパティが変わるとテンプレートに反映される)」を押さえておけば、純粋パイプと非純粋パイプの振る舞いも自然と理解できるでしょう。一度使ってみるとその便利さを実感できるので、まずはビルトインパイプの日付フォーマットや数値フォーマットから試し、必要に応じてカスタムパイプでオリジナルの変換処理を実装してみてください。

前提知識として、「プログラミング言語のクラス構文」というものがあることを少し聞いたことがある、ぐらいのイメージで読み進めていただければ大丈夫です。

【前提】そもそも「メソッド」とは？

メソッドとは、あるクラス(オブジェクト)の中で定義される「関数(処理のかたまり)」のことです。「関数」とほとんど同じ意味ですが、「クラスの中に入っている関数」を特別に「メソッド」と呼びます。

• 関数（function）: 単体の処理のかたまり
• メソッド（method）: クラスの一部として定義された関数

もし「クラス」や「オブジェクト」という言葉がまだピンとこない場合は、「設計図」と「それをもとに作られる実体」とイメージしてみてください。クラスは「設計図」、そこから作られる実体を「インスタンス（オブジェクト）」と呼びます。詳しくはこちら（参考 TypeScriptのクラス）

TypeScript：メソッド定義の基本構文

TypeScriptでは、JavaScriptにクラス構文（class）が追加されており、そこに「メソッド」を定義できます。基本構文は以下のようになります。

class MyClass {
  public myMethod(param: string): number {
    return param.length;
  }
}

class MyClass:

• class キーワードでクラスを定義し、MyClass という名前を付けています。
• 「MyClassという種類のオブジェクトが作れる設計図」を作っているイメージです。

public myMethod(param: string): number { ... }:

• myMethod という名前の「メソッド」を定義しています。
• 丸かっこの中に (param: string) と書いてあり、param は「string型の引数(パラメータ)」ですよ、という型注釈が付いています。
• : number は「このメソッドは数値（number）を返します」という戻り値の型を示しています。
• { ... } の中に処理を書きます。上の例では return param.length; として、文字列の長さ（param.length）を数値で返しています。

アクセス修飾子 (public, private, protected)

public の部分は、「このメソッドはどこからでも呼び出せますよ」という意味の アクセス修飾子 です。TypeScriptでは主に3種類あり、以下のようにクラスのプロパティ（変数）やメソッド（関数）に付けられます。

1. public: どこからでもアクセス（呼び出し）可能。
2. private: 同じクラスの中だけからアクセス可能。（クラスの外からは呼べない）
3. protected: 同じクラスと継承（サブクラス）したクラスの中だけからアクセス可能。

初心者のうちは、まずは public でメソッドを定義しておけばOKです。

メソッドを呼び出すときのイメージ 〜インスタンス化とは？〜

クラスは「設計図」なので、そのままでは実際に使えません。クラスから「インスタンス」（実体）を作って、そのインスタンスを通じてメソッドを呼び出します。これを 「インスタンス化」 といいます。

// 1. クラスの定義
class Greeter {
  public greet(name: string): void {
    console.log(`Hello, ${name}!`);
  }
}

// 2. インスタンスを作成（インスタンス化）
const myGreeter = new Greeter();

// 3. メソッドを呼び出す
myGreeter.greet("Alice");  // 「Hello, Alice!」 と表示される

• new Greeter() でクラス Greeter の実体（インスタンス）が生成され、myGreeter という変数に格納されます。
• myGreeter.greet("Alice") のように、「インスタンス.メソッド名(引数)」 という書き方で、メソッドを呼び出します。

非同期処理を扱う「asyncメソッド」とは？

TypeScript（JavaScript）では、「非同期処理」 を扱うために async/await という機能があります。

たとえば、サーバーにデータを取りにいく処理などは時間がかかるため、プログラムがそれを待っているあいだ他のことを停止してしまわないように、いわゆる「非同期」の仕組みが使われます。

class DataFetcher {
  public async fetchData(url: string): Promise<any> {
    // `async` を付けることで、このメソッドはPromiseを返すようになる
    const response = await fetch(url); // fetch は非同期関数
    // `await` を使うと、その処理が終わるまで一旦待ってくれる
    return await response.json();
  }
}

// 使い方
(async () => {
  const fetcher = new DataFetcher();
  const data = await fetcher.fetchData("https://example.com/data.json");
  console.log(data);
})();

• async は「このメソッドは非同期処理を行うよ」という宣言です。
• await は「Promiseを返す処理が終わるまで待ち合わせ」をするためのキーワードです。
• これにより、見た目は「同期的（順番に処理が進んでいる）」なコードを書きながら、内部は非同期で動作させることができます。

「Promise」というのは、ざっくり言うと「非同期の結果がいつか返ってくることを約束するオブジェクト」のようなものです。実際には「非同期処理が成功した場合は成功の結果、失敗した場合はエラーを返す」という仕組みになっていますが、初学者のうちは「長い時間かかる処理でも、その結果をひとまとめに扱える仕組み」と考える程度で大丈夫です。

実践的なサンプル：商品を管理するクラス

ここまでの知識を応用して、商品情報を扱うクラスを作る例を示します。たとえば、オンラインストアのシステムなどをイメージしてください。（参考 TypeScriptのインターフェースとは？）

// Productという「型（インターフェース）」を用意
interface Product {
  id: number;
  name: string;
  price: number;
}

class ProductService {
  // クラスの中で共通して使う配列を用意（ここではproductsという変数）
  private products: Product[] = [];

  // 商品を追加するメソッド
  public addProduct(product: Product): void {
    this.products.push(product);
  }

  // 商品一覧を返すメソッド
  public getAllProducts(): Product[] {
    return this.products;
  }

  // IDを指定して商品を取得するメソッド
  public getProductById(productId: number): Product | undefined {
    return this.products.find((p) => p.id === productId);
  }

  // 非同期で在庫チェックをするメソッド
  public async checkInventory(productId: number): Promise<boolean> {
    // 擬似的な「サーバー問い合わせ」を再現するため、1秒待機している
    await new Promise((resolve) => setTimeout(resolve, 1000)); 
    // ランダムにtrue/falseを返す（50%の確率で在庫あり）
    return Math.random() > 0.5; 
  }
}

// === 実際に使ってみる ===
const productService = new ProductService();

// 商品を追加
productService.addProduct({ id: 1, name: "Book", price: 1000 });
productService.addProduct({ id: 2, name: "Pen", price: 100 });

// 追加された商品一覧を表示
console.log(productService.getAllProducts());

// IDが1の商品を取得してみる
const product = productService.getProductById(1);
console.log("ID=1の商品:", product);

// 在庫チェック（非同期メソッド）の呼び出し
(async () => {
  const hasInventory = await productService.checkInventory(1);
  console.log("ID=1に在庫があるか:", hasInventory);
})();

サンプルコードで注目すべきポイント

1. private products: Product[] = [];
   • private 修飾子が付いた「クラス内の変数（プロパティ）」です。クラスの外からは直接アクセスできません。
   • products は配列(Product[])として初期化しています。
   • メソッドからは自由にアクセス・操作できますが、クラスの外から productService.products のように直接操作することはできません。
2. メソッドの設計
   • addProduct : 商品を配列に追加する。
   • getAllProducts : 登録されている商品を全部返す。
   • getProductById : IDに一致する商品を返す。
   • checkInventory : 在庫があるかを確認し、Promise（true or false）を返す非同期メソッド。
3. オブジェクト指向の考え方
   • データ（products）と、そのデータを扱うための処理（addProduct, getProductById など）が同じクラスにまとまっています。
   • これが「オブジェクト指向」という考え方の基本で、設計図（クラス）を元に作られたモノ（インスタンス）に対して、メソッドを使って操作をします。

クラスを使用することでより安全で保守しやすいコードを書くことが可能になります。本記事では、TypeScriptにおけるクラスの基本的な定義方法から、より高度な利用方法まで、ステップバイステップで解説していきます。初心者の方でも理解しやすいように、基礎からしっかりと学べる内容となっていますので、是非最後までご一読ください。

参考　TypeScriptとは？

クラスの概念や基本的な利用方法はJavaScriptとほぼ同様です。そもそも「クラスって何？」という方は、まずは以下のページをご覧いただくことを推奨します。

Javascript：クラスとは何か？を３分で【初心者向け】

JavaScriptのクラスに関する基本的な概念、継承、カプセル化、ポリモーフィズム、静的メソッドとプロパティについて解説します。初心者から中級者向けに、クラスの使い方とオブジェクト指向プログラミングの鍵となる概念を学ぶことができます。

it-biz.online

2025.01.17

TypeScript：クラスとは

クラスとは、オブジェクトの青写真（＝設計書）です。具体的にいうと、クラスはデータ（属性）とそのデータに操作を加えるメソッド（関数）を１つのまとまりとして定義したものを指します。TypeScriptでは、このクラスを使用してデータ構造を定義し、その構造に沿ったオブジェクトを生成することができます。

クラスの基本的な構造には、以下のような要素が含まれます。

1. プロパティ（属性）
   • クラスに属するデータの変数。オブジェクトの状態を表します。
2. メソッド
   • クラスに属する関数。オブジェクトの振る舞いを定義。プロパティの値を操作したり、何らかの処理を行うために使用されます。
3. コンストラクタ
   • クラスからオブジェクトを生成する際に自動的に呼び出される特殊なメソッド。オブジェクトの初期化に用いられます。

TypeScriptでは、これらのクラス要素を利用することで、コードの再利用性を高め、複雑なアプリケーションでも管理しやすい構造を作ることを可能にします。

例えば、車を表すクラスを作成する場合、プロパティとして「色」「車種」を、メソッドとして「加速する」「停止する」を定義。このように定義することで、同じ構造を持つ複数の車オブジェクトを簡単に作成し、それぞれに異なる属性を持たせることができます。

class Car {
  // プロパティの定義
  color: string;
  model: string;

  // コンストラクタの定義
  constructor(color: string, model: string) {
    this.color = color;
    this.model = model;
  }

  // メソッドの定義
  accelerate() {
    console.log(`${this.model} is accelerating.`);
  }

  stop() {
    console.log(`${this.model} has stopped.`);
  }
}

// Carクラスのオブジェクトを生成
const myCar = new Car('red', 'Toyota');
myCar.accelerate(); // 出力: Toyota is accelerating.
myCar.stop();       // 出力: Toyota has stopped.

クラスの定義方法はJavascriptとほとんど同じ。「型」を指定する必要があるという点を除けば、その概念も役割もほとんど同じです。

クラスの定義方法

class Person {
  // プロパティの定義
  name: string;
  age: number;

  // コンストラクタの定義
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // メソッドの定義
  describe() {
    console.log(`${this.name} is ${this.age} years old.`);
  }
}

// Personクラスのインスタンスを作成
const person1 = new Person('Alice', 30);
person1.describe(); // 出力: Alice is 30 years old.

1. クラスキーワードの使用
   • class キーワードを利用
2. クラス名の指定
   • クラスを識別するための名前が必要。名前は大文字で始めることが一般的。
3. プロパティの定義
   • クラス内で使用されるデータ（プロパティ）を定義。これらはクラスのインスタンス毎に異なる値を持つことができます。
4. コンストラクタの定義
   • 必要に応じて、constructor メソッドを定義して、クラスのインスタンスが作成された際の初期化処理を記述。
5. メソッドの追加
   • クラスが行うべき操作をメソッドとして追加。プロパティの値を変更するメソッドや、何らかの処理を実行するメソッドが含まれます。

↑の例では、Personという名前のクラスを定義し、nameとageという２つのプロパティ、およびdescribeというメソッドを持っています。new Person('Alice', 30)を使ってPersonクラスのインスタンスを生成し、そのインスタンスに対してdescribeメソッドを呼び出しています。

プロパティ

プロパティは、そのクラスのインスタンスに関連付けられたデータ（＝変数）です。プロパティは通常クラスの先頭部分で定義されます。TypeScriptでは、プロパティの型を明示的に宣言することで、型安全性とコードの読みやすさを向上させます。

class Vehicle {
  color: string;
  constructor(color: string) {
    this.color = color; // プロパティの初期化
  }
}

メソッド

メソッドはクラスに属する関数であり、クラスのインスタンスが行う操作を定義します。メソッド内でthisキーワードを使用することで、同じクラスの他のメソッドやプロパティにアクセスできます。

class Vehicle {
  color: string;
  constructor(color: string) {
    this.color = color;
  }
  describe() {
    console.log(`This vehicle is ${this.color}.`);
  }
}

アクセス修飾子

TypeScriptでは、プロパテやメソッドに対してアクセス修飾子を使用することができます。

アクセス修飾子とは、簡単に言えばそのプロパティ/メソッドが、プログラムの他の部分から参照できるのか？参照できないのか？を表すもの。

アクセス修飾子にはpublic、private、protectedの3種類があり、それぞれがメンバーの可視性とアクセス範囲を定義します。

• public: どこからでもアクセス可能。デフォルトはpublicとして扱われる。
• private: メンバーが定義されたクラス内からのみアクセス可能。クラスの外部からはアクセスできない。
• protected: privateと似ていますが、派生クラスからのアクセスも許可される。

class Vehicle {
  private color: string;

  constructor(color: string) {
    this.color = color;
  }

  public describe() {
    console.log(`This vehicle is ${this.color}.`);
  }
}

上記の「color」はprivateであるため、外部から「Vehicle.color」のような形で参照することができません。クラス内でのみ利用可能だよ！ということを示しています。

アクセス修飾子を使用することで、クラスの使用方法を制限し、予期しない方法での利用を防止することが可能になります。また、クラスの設計者が意図した安全なインターフェースを提供することができます。

ゲッターとセッター

TypeScriptでは、プロパティの値へのアクセスを制御するために、ゲッター（getter）とセッター（setter）を定義することができます。これらはそれぞれ、プロパティの値を取得または設定するメソッドとして機能します。ゲッターとセッターを使用することで、プロパティへのアクセスをより詳細に制御し、外部からの不適切な値の設定を防ぐことが可能になります。

class Vehicle {
  private _color: string;

  constructor(color: string) {
    this._color = color;
  }

  get color() {
    return this._color;
  }

  set color(value: string) {
    if(value === '') throw new Error("Color cannot be empty.");
    this._color = value;
  }
}

const vehicle = new Vehicle("red");
console.log(vehicle.color); // "red"
vehicle.color = "blue";     // セッターを通じて値を設定
console.log(vehicle.color); // "blue"

本来、プロパティ_colorはprivateで宣言されており、クラスの外部から直接アクセスすることはできません。ですが代わりに、ゲッターとセッターを通じて、間接的にこのプロパティの値を取得または設定しています。このテクニックを用いることで、値の検証や処理をゲッター/セッター内で実施することができ、より安全なプログラミングが可能になります。

継承

継承は、オブジェクト指向プログラミングの中心的な概念の１つ。クラス間でコードを再利用するためのメカニズムです。継承を使用することで、既存のクラス（親クラス、またはスーパークラスとも呼ばれる）のプロパティやメソッドを新しいクラス（子クラス、またはサブクラスとも呼ばれる）が受け継ぎ、それらを使用、拡張、または変更することができます。このプロセスにより、コードの重複を減らし、プログラムの構造をより管理しやすく、拡張しやすいものにすることができます。

TypeScriptでは、extendsキーワードを使用して継承を実装します。サブクラスはスーパークラスのすべての公開（public）メンバーと保護（protected）メンバーを継承しますが、プライベート（private）メンバーは継承されません。サブクラスは継承したメンバーに加えて、独自のメンバーを持つことができます。

例として、Animalクラスを親クラスとし、このクラスからDogクラスとCatクラスを派生させることを考えてみましょう。

Animalクラスには、すべての動物に共通のプロパティやメソッドが定義されているとします。DogクラスとCatクラスでは、これらを継承しつつ、種に特有の振る舞いを追加することができます。

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound() {
    console.log('Some generic animal sound');
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name); // 親クラスのコンストラクタを呼び出す
  }
  makeSound() {
    console.log('Woof');
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }
  makeSound() {
    console.log('Meow');
  }
}

この例では、DogとCatの両クラスがAnimalクラスからnameプロパティとmakeSoundメソッドを継承していますが、それぞれのmakeSoundメソッドをオーバーライドして独自の音を出すようにしています。これにより、同じメソッドを呼び出しても、オブジェクトの型に応じて異なる結果が得られるようになります。これが継承の実例です。

ポイント　継承の主な利点

1. コードの再利用
   • 既存のクラスの機能を基にして新しいクラスを作成することで、コードを効率的に再利用することができる。
2. 拡張性
   • 既存のクラスに新しい機能を追加したり、既存の機能をカスタマイズすることが簡単になる。
3. 階層的なクラス構造
   • クラス間の関係を階層的に構築することができ、より組織的で理解しやすいコードベースを作成することが可能になる。この階層構造により、共通の機能は上位のクラスに、特有の機能は下位のクラスに配置することで、クラスの専門化を進めることができる。
4. 多様性の実現
   • サブクラスはスーパークラスのメソッドをオーバーライド（上書き）することができ、同一のインターフェースを持ちながら異なる振る舞いを実装することが可能になります。これにより、同じ種類のオブジェクトでも異なる動作をさせることができるため、柔軟な設計が実現されます。

ポリモーフィズム（多態性）

ポリモーフィズムは、オブジェクト指向プログラミングにおける重要な概念の１つ。「多態性」または「多形性」とも呼ばれます。

ポリモーフィズムを利用することで、異なるクラスのオブジェクトが同じインターフェースやメソッドを通じて操作されることを可能にし、コードの柔軟性と再利用性を高めることができます。ポリモーフィズムには主に２つの形式があります：サブタイプポリモーフィズム（継承によるポリモーフィズム）とアドホックポリモーフィズム（オーバーロードやジェネリクスによるポリモーフィズム）

1. サブタイプポリモーフィズム（継承によるポリモーフィズム）

サブタイプポリモーフィズムは、クラスの継承を利用して実現されます。基底クラス（またはインターフェース）の参照を通じて、派生クラスのオブジェクトを操作することができます。これにより、異なるサブクラスのオブジェクトを同一の方法で扱うことが可能になります。

// スーパークラス：Animal
class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    // 共通の行動をメソッドで定義
    makeSound() {
        console.log("Some generic sound");
    }
}

// サブクラス：Dog
class Dog extends Animal {
    // Dogクラス固有のメソッド
    wagTail() {
        console.log("Wagging tail");
    }

    // スーパークラスのメソッドをオーバーライド（上書き）
    makeSound() {
        console.log("Woof!");
    }
}

// サブクラス：Cat
class Cat extends Animal {
    // Catクラス固有のメソッド
    chaseMouse() {
        console.log("Chasing a mouse");
    }

    // スーパークラスのメソッドをオーバーライド（上書き）
    makeSound() {
        console.log("Meow");
    }
}

// Animal型の配列に、DogとCatのインスタンスを追加
const animals: Animal[] = [new Dog("Rex"), new Cat("Whiskers")];

// 各動物のmakeSoundメソッドを呼び出す
animals.forEach(animal => animal.makeSound());

この例では、Animalクラスが基底クラス（スーパークラス）として定義され、DogとCatがそれを継承しています（サブクラス）。DogとCatは、AnimalのmakeSoundメソッドをそれぞれの鳴き声に合わせてオーバーライドしています。さらに、それぞれのクラスには、固有の行動を表すメソッド（wagTail、chaseMouse）が追加されています。

このコードのポイントは、異なる種類のオブジェクト（Dog、Cat）を、共通のスーパークラス型（Animal）の配列に格納し、共通のインターフェース（makeSoundメソッド）を介して、それぞれ異なる具体的な振る舞いを実行させることができる点です。これにより、コードの柔軟性と再利用性が高まります。

2. アドホックポリモーフィズム

アドホックポリモーフィズムは、関数のオーバーロードやジェネリクスを通じて実現されます。これにより、同じ関数名でも異なる型の引数に対応したり、同一のインターフェースを持つが内部的に異なる挙動をする関数を定義することができます。

関数のオーバーロード（関数オーバーロード）

TypeScriptでは、同じ関数名でも異なる引数の型や数に応じて異なる実装を提供することができます。ただし、TypeScriptでは直接的なオーバーロードの実装はサポートされていないため、シグネチャをオーバーロードする形で実現します。

function greet(name: string): string;
function greet(age: number): string;
function greet(value: string | number): string {
    if (typeof value === 'string') {
        return `Hello, ${value}`;
    } else {
        return `You are ${value} years old`;
    }
}

console.log(greet("Alice")); // Hello, Alice
console.log(greet(25)); // You are 25 years old

参考　TypeScript：関数

ジェネリクス（ジェネリックプログラミング）

ジェネリクスを使用すると、型をパラメータとして関数やクラスに渡すことができ、コードの再利用性を高めることが可能になります。

function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

console.log(output1); // myString
console.log(output2); // 100

identity関数はどのような型の引数も受け取り、同じ型の値を返します。ジェネリクスを用いることで、関数の呼び出し時に型を指定し、様々な型に対して柔軟に対応することができます。

abstract class Animal {
    constructor(public name: string) {}

    abstract makeSound(): void; // 抽象メソッド
}

class Dog extends Animal {
    constructor(name: string, public owner: string) {
        super(name); // 親クラスのコンストラクタを呼び出す
    }

    makeSound(): void {
        console.log(`${this.name} says Woof!`);
    }
}

interface Pet {
    play(): void;
}

class Cat extends Animal implements Pet {
    constructor(name: string) {
        super(name);
    }

    makeSound(): void {
        console.log(`${this.name} says Meow!`);
    }

    play(): void {
        console.log(`${this.name} is playing with a ball.`);
    }
}

const myDog = new Dog("Buddy", "John");
myDog.makeSound(); // Buddy says Woof!

const myCat = new Cat("Whiskers");
myCat.makeSound(); // Whiskers says Meow!
myCat.play(); // Whiskers is playing with a ball.

このページでは、そもそもディレクティブって何？という人向けにディレクティブのイメージ・本質的な理解が進むように１からわかりやすく使い方や注意点を解説していきます。

まずはディレクティブのイメージをつかむ

たとえば、普通のHTMLでは<div>や<p>などの要素をただ書いただけでは、そこに特別な「動き」はありません。テキストを表示したり、見出しを表現したりするだけです。

そこに「この要素は、ある条件が満たされたら表示し、そうでなければ非表示にしたい」とか、「ある配列のデータをもとに、同じ形の要素を繰り返し表示したい」といった動的な振る舞いを付けたくなる場面が出てきます。

Angularにおいては、この「動的な振る舞い」をHTML要素に追加するための仕組みこそがディレクティブです。ディレクティブを使うと、HTMLタグをただ書くだけでなく、「この要素はどう表示されるのか」「いつレンダリングされるのか」といった命令を付け加えることができます。

「HTMLに命令を埋め込む」という発想

ディレクティブはHTML側に命令を埋め込むようなイメージで考えると理解しやすくなります。「ここにもしデータがあったら繰り返し表示する」「ここの条件がtrueなら、このブロックを描画する」といった振る舞いを、HTMLタグの属性として書けるのです。

• 例: *ngIf="isVisible"
  • isVisibleという変数がtrueのときだけ要素が表示される
• 例: *ngFor="let item of items"
  • items配列をひとつずつ取り出して要素を繰り返し生成する

こうしたディレクティブをHTMLに貼り付けるだけで、Angularはテンプレートを解釈し、内部的にDOMを追加／削除したり、表示／非表示の切り替えを行ってくれます。

コンポーネントとの違いをざっくり知る

Angularを学び始めると、ディレクティブとほぼ同時に「コンポーネント」という言葉を耳にするはずです。コンポーネントも広い意味では「ディレクティブの一種」とされますが、次のような違いがあります。

• コンポーネント
  • HTMLテンプレート、TypeScriptのクラス、CSSスタイルなどをひとまとめにした「画面の部品」
  • <app-○○>のような独自タグとして使うことが多い
• ディレクティブ（構造・属性ディレクティブなど）
  • 画面の見た目そのものではなく、既存のHTML要素の振る舞いだけを拡張する命令書のようなイメージ
  • *ngIfや*ngForのような構造ディレクティブ、[ngClass]のような属性ディレクティブが代表例

このようにコンポーネントとディレクティブは、どちらも「AngularがHTMLをどう解釈して動的に扱うか」を制御していますが、コンポーネントは「見た目のかたまり」を構成するのに対し、ディレクティブは「特定の振る舞いを要素に追加する」という役割に特化しているというイメージを持つと、両者を使い分けやすくなります。

ディレクティブがもたらすメリット

1. HTMLテンプレートに直接“動き”を宣言できる
   • *ngIfや*ngForを見れば、一目で「ここの要素が条件付き表示／繰り返し表示なんだ」と理解できる。
2. コードの可読性・メンテナンス性の向上
   • 画面遷移や表示切り替えといったロジックを、HTML側と直接リンクさせて書けるため、可読性が上がる。
3. 複雑なDOM操作の削減
   • もしディレクティブがなければ、JavaScriptでDOM操作のAPIを使って要素の追加削除を毎回行う必要があるが、その分の処理をAngular側が肩代わりしてくれる。

こうしたメリットから、AngularのディレクティブはアプリケーションのUIをより動的かつ宣言的に構築できる重要な機能だと言えます。

このようにディレクティブの本質は「HTML要素をベースに、より複雑な処理を記述できる拡張機能」として存在していることにあります。単純なHTMLの延長線として考えられるので、初心者の方でも慣れてくると「ここで*ngIfを使えばいいのか」「繰り返し表示には*ngForを使うんだな」と自然に使いこなせるようになるでしょう。

ディレクティブの種類

Angularでは、多彩な動きをHTML要素に追加できるディレクティブですが、大きく分けて3つのカテゴリーに分類されます。ここでは、それぞれの特徴や使い方をイメージしやすいように、順を追って解説していきます。

1. コンポーネント（Component Directive）

• 何をする？
  • 画面（UI）を構成する最小単位の部品を定義するためのディレクティブです。
  • 独自のHTMLテンプレート、CSSスタイル、そして振る舞い（TypeScriptクラス）をまとめて管理します。
• どんなイメージ？
  • 「ボタン」「カード」「ユーザー情報パネル」のように、ひとかたまりのUI要素として切り出したいときに使います。
  • <app-xxx> のような独自タグが作られて、テンプレート内で再利用できるようになります。
• なぜ便利？
  • テンプレートやロジックが分離されずに一体化して管理できるため、開発・保守がしやすい。
  • コードの再利用やチーム開発時の分担がやりやすくなる。

コンポーネントはディレクティブの一種

技術的には、コンポーネント（@Component）もディレクティブ（@Directive）の拡張版として位置付けられています。ただし、コンポーネントが「UIのひとかたまり」であるのに対して、構造・属性ディレクティブは「UIの見た目や構造を変化させるための命令書」という位置づけです。

コンポーネントについては別切りで解説ページを作っておりますので以下で詳しく確認してください。

Angular：コンポーネントの基本：作成方法を３分で解説

Angularのコンポーネントとは何か、そして簡単なステップで自分のAngularコンポーネントを作成する方法を学びましょう。このガイドでは、コンポーネントの基本概念から、Angular CLIを利用した効率的なコンポーネントの生成、テンプレートとスタイルのカスタマイズ方法までをわかりやすく解説します。

it-biz.online

2025.01.10

2. 構造ディレクティブ（Structural Directive）

• 何をする？
  • HTMLの要素を「追加・削除」して、DOM（画面構造）自体を変化させるためのディレクティブです。
• どんなイメージ？
  • 「条件がtrueのときだけ要素を表示したい」「配列の要素を繰り返し表示したい」など、動的に要素を増減する仕組みが必要なときに使います。
• なぜ便利？
  • 従来ならJavaScriptでDOM操作をして要素を手動で増やしたり削除したりしていた部分を、テンプレートの記述だけで表現できる。
  • 画面ロジックがHTML上で明確にわかるので、可読性も高い。

サンプルコード1　*ngIfと*ngFor の併用

<div *ngIf="items && items.length > 0">
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

要素が存在して、かつ1つ以上アイテムがある場合にのみ、リストを表示する構造を簡潔に表現できます。構造ディレクティブは、*プレフィックスを使用してテンプレート上で適用されます。これにより、Angularはディレクティブの存在する要素をラップする<ng-template>を自動的に作成し、その内容の表示を制御することができます。

サンプルコード2　*ngIfを使用して条件に応じて要素を表示/非表示にする

<!-- 条件が真の場合のみ<p>タグを表示します -->
<p *ngIf="condition">条件が真のときに表示されます</p>

サンプルコード3　*ngForディレクティブを使用して配列の各アイテムに対して要素を繰り返し表示

<!-- 配列itemsの各アイテムに対して<li>タグを繰り返し表示します -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

カスタム構造ディレクティブ

カスタム属性ディレクティブとは、開発者が定義する属性ディレクティブの一種。標準の属性ディレクティブ（例えば、ngStyleやngClass）以外に、アプリケーションの特定の要求に応じた特別なロジックやスタイリングを適用する必要がある場合に、カスタム属性ディレクティブを作成します。

ポイント　カスタム属性ディレクティブの作成ステップ

1. ディレクティブクラスの作成
   • Angular CLIのコマンドng generate directive my-directiveを使用するか、手動でディレクティブクラスを作成します。ディレクティブのデコレーター@Directiveには、セレクターが指定され、このセレクターはディレクティブが適用される属性を識別します。
2. ロジックの実装
   • ディレクティブクラス内に、要素の外見や振る舞いを変更するロジックを実装します。ElementRefを使用してディレクティブが適用されるDOM要素にアクセスし、Renderer2を使って要素のスタイルやプロパティを安全に変更します。
3. アプリケーションのモジュールにディレクティブを宣言
   • 作成したディレクティブをアプリケーションのモジュール（通常はAppModule）のdeclarations配列に追加します。

サンプル　highlight.directive.ts (カスタム属性ディレクティブ)

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

app.component.htmlでappHighlightディレクティブを使用する方法

<div appHighlight>This text will be highlighted when hovered over.</div>

カスタム属性ディレクティブを作成することで、アプリケーションの再利用可能なロジックやビジュアルエフェクトを効率的に管理できるようになります。

3. 属性ディレクティブ（Attribute Directive）

• 何をする？
  • 既存のHTML要素やコンポーネントに対して、見た目や振る舞いを変更するための追加機能を付与するディレクティブです。
  • “HTMLタグそのものの構造を増減する”のではなく、“そのタグの属性やスタイルなどを動的に操作する”イメージです。
• どんなイメージ？
  • 「ある条件でクラスを切り替えたい」「スタイルを動的に変更したい」など、要素の属性に関わる部分をAngularの仕組みと連動させたいときに活躍します。
• なぜ便利？
  • 画面のデザインや動的変化をコード内のロジックと直接リンクできるので、UIの変更がわかりやすい。
  • Sassなどのスタイル管理とも相性がよく、UIの動的変更を細かく制御できます。

代表的な属性ディレクティブ

1. [ngClass]
   • 条件に応じてクラスを追加・削除したり、複数のクラスを同時に切り替えたりできる。
   • 例: [ngClass]="{ 'active': isActive, 'error': hasError }"
2. [ngStyle]
   • スタイルをオブジェクト形式で動的に変更できる。
   • 例: [ngStyle]="{ 'background-color': bgColor }"
3. [ngModel]
   • フォーム要素（入力欄など）とデータをバインドするために使う。（Template-driven formsで利用）
4. その他カスタム属性ディレクティブ
   • Angularが用意しているディレクティブ以外にも、自分で作成して要素の見た目や挙動を拡張できます。

サンプルコード4　ngClass の使用例

<button 
  [ngClass]="{ 'btn-primary': isPrimary, 'btn-disabled': isDisabled }">
  ボタン
</button>

サンプルコード5　ngStyleディレクティブを使用して要素のスタイルを動的に適用

<!-- スタイルオブジェクトに基づいて動的にスタイルを適用 -->
<div [ngStyle]="{'font-size': size + 'px'}">テキストサイズを動的に変更</div>

これらのディレクティブを利用することで、Angularアプリケーション内のHTML要素の外見や振る舞いを柔軟に制御することができます。構造ディレクティブと属性ディレクティブは、それぞれDOMの構造変更と要素のプロパティ/スタイルの変更という異なる目的で使用され、アプリケーションのUIをよりダイナミックにするために重要な役割を果たします。

interfaceを適切に利用することで、コード内で一貫性と予測可能性を保ちながら、エラーを減らし開発プロセスをスムーズにすることができます。

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

function registerUser(user: User) {
  // userオブジェクトがUserインターフェースに従っていることが保証されています。
}

ポイント　interfaceの主なポイント

1. 型の定義: オブジェクトが特定の構造を持つことを保証。
2. コードの再利用性向上: 同じインターフェースを様々な場所で再利用可能。
3. 開発プロセスの支援: エディタの自動補完機能により、プロパティやメソッドの入力を容易に。
4. 保守性の向上: コードベースが成長しても、型の安全性を維持しやすくなります。

interfaceを使うことで、TypeScriptの型システムの全能力を活用し、より安全で読みやすく、保守しやすいコードを書くことができます。このページでは、TypeScriptのキーファクターとなるinterfaceの基本～使い方、利用する際の注意点やTipsをわかりやすくご説明します。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

TypeScript：interaceとは？

interface（インターフェース）は、TypeScriptにおけるオブジェクトの形状（構造）を定義するため構文です。特定のオブジェクトが持つべきプロパティやメソッドの型を定義することで、コードの安全性と予測可能性を高めることが可能になります。

インターフェースは建物を建てる際の「設計図」のようなものだと考えるとわかりやすいかもしれません。設計図（インターフェース）は、建築物（オブジェクト）の構造を定義し、部屋の配置やサイズ、材料の種類や建物の耐久性など建築物が満たすべき具体的な要件（プロパティ）を示す役割を担います。

設計図（インターフェース）の主な目的は、家がどのように見えどう機能するかを示すことです。 建築家（プログラマー）は、この設計図に基づいて家（オブジェクト）を構想しますが、実際に家を建てるのは建設業者（クラス）です。設計図は具体的な建築材料や建築方法を指定しませんが、最終的な建物が満たすべき基本的な要件や構造を定義します。

もし途中で窓をもう1つ追加することになった場合、設計図（インターフェース）にこの変更を加えるだけで、建設プロジェクト全体がこの新しい要件を反映するようになります。

インターフェースの概要はここまで。実際のコードを見ていった方がより具体的にイメージが付きやすいと思いますので、ここからは、順を追ってインターフェースの定義方法～利用方法をご説明していきます。

ステップ１：インターフェースの定義

インターフェースの定義方法は以下の通り。

interface インターフェース名 {
  プロパティ名: 型;
  // 他のプロパティやメソッドの定義
}

参考　TypeScriptの基本的なデータ型

例えば、次のようにPersonインターフェースを定義することができます。↓のインターフェースは、nameプロパティが文字列型で、ageプロパティが数値型であることを示しています。

interface Person {
  name: string;
  age: number;
}

インターフェースは他のインターフェースをネストすることも可能です。ネストすることで、プロパティがさらにオブジェクトであるような場合に、そのオブジェクトの形状を明確に指定することができるようになります。

interface Address {
  street: string;
  city: string;
  zipCode: number;
}

interface Person {
  name: string;
  age: number;
  address: Address; // Addressインターフェースを使用
}

const person: Person = {
  name: "Taro Yamada",
  age: 30,
  address: {
    street: "123 Maple St",
    city: "Tokyo",
    zipCode: 1000001
  }
};

↑のサンプルコードでは、PersonインターフェースがAddressインターフェースをネストして使用しています。これにより、personオブジェクトに含まれるaddressプロパティが、Addressインターフェースで定義された形状に従っていることが保証されます。

ネストされたインターフェースを使用することで、実際のアプリケーションのデータ構造をより正確にモデル化できます。例えば、企業や製品のカタログ、ユーザーインターフェースのコンポーネントの設定など、階層的なデータ構造を持つ多くのシナリオで役立ちます。

interface Employee {
  name: string;
  position: string;
}

interface Company {
  name: string;
  employees: Employee[]; // Employeeインターフェースの配列
}

const myCompany: Company = {
  name: "Tech Solutions",
  employees: [
    { name: "John Doe", position: "Software Developer" },
    { name: "Jane Smith", position: "Project Manager" }
  ]
};

ステップ２：インターフェースを使用してオブジェクト型を定義する

インターフェースを定義したら、それを使ってオブジェクトの型を指定することができます。以下のように、オブジェクトリテラル（{}）でオブジェクトを作成する際に、その型としてインターフェースを指定します。

// インターフェース定義
interface Person {
  name: string;
  age: number;
}

// オブジェクト定義
let john: Person = {
  name: "John Doe",
  age: 32
};

ここで、johnオブジェクトはPersonインターフェースに従っているため、nameとageプロパティを持っている必要があります。もしこれを満たさない場合、TypeScriptがコンパイル時にエラーを発生させます。

このように「型」の不一致をエラーにすることで、予期せぬバグやオブジェクト間での不整合を防止することができます。

ステップ３：任意プロパティの定義

インターフェースでは任意プロパティも定義することが可能です。これにより、あるプロパティがオブジェクトに存在しなくても良い場合に柔軟に対応することができるようになります。

任意プロパティはプロパティ名の後に?をつけて定義します。

interface Profile {
  name: string;
  age?: number; // 任意プロパティ
}

このProfileインターフェースでは、nameプロパティは必須ですが、ageプロパティは任意→つまり、ageプロパティを含むProfileオブジェクトも、含まないProfileオブジェクトも、どちらもProfileインターフェースの要件を満たすということです。

サンプルコード　任意プロパティの使用例

let person1: Profile = {
  name: "Alice"
};

let person2: Profile = {
  name: "Bob",
  age: 30
};

ポイント　任意プロパティの利点

• 柔軟性: データモデルがすべてのプロパティを必須としない場合に柔軟に対応可能。
• 進化するAPIへの対応: APIからのレスポンスなど、時間と共に変化する可能性のあるオブジェクト構造を表現する際に便利。
• オプションの設定: ユーザーによる設定オプションなど、存在しない場合にデフォルト値を使うプロパティの表現に適しています。

任意プロパティを使う場合、プロパティが存在しない可能性を考慮したコードの記述が必要になります。例えば、undefinedチェックを行うなどして、プログラムが安全に動作するようにします。

if (person2.age !== undefined) {
  console.log(person2.age); // ageが存在する場合のみログを出力
}

以上のように、任意プロパティはTypeScriptのインターフェースを使った型定義の柔軟性を高める重要な機能です。

ステップ４：インターフェースの継承

インターフェースは他のインターフェースを継承し、新しいインターフェースを作成することができます。インターフェースを継承することで、既存のインターフェースのプロパティを新しいインターフェースに「引き継ぐ」ことができ、これにより複数のインターフェースの特性を組み合わせて、新しい複合型を形成することができます。

インターフェースの継承はextendsキーワードを使用して行います。

interface NamedEntity {
  name: string;
}

interface Person extends NamedEntity {
  age: number;
}

↑の例では、PersonインターフェースはNamedEntityインターフェースからnameプロパティを継承します。その結果、Personインターフェースはnameプロパティとageプロパティの両方を持つことになります。

また、TypeScriptではインターフェースは複数のインターフェースを継承することができ、異なる特性を持つ複数のインターフェースを１つにまとめることができます。

interface NamedEntity {
  name: string;
}

interface Ageable {
  age: number;
}

interface Employee extends NamedEntity, Ageable {
  employeeId: number;
}

EmployeeインターフェースはNamedEntityとAgeableの両方からプロパティを継承するので、Employeeインターフェースはname、age、そしてemployeeIdプロパティを持つことになります。

ただし、インターフェースの継承を使用する際は、継承の階層が複雑になりすぎないように注意する必要があります。

階層が深くなると、コードの理解やデバッグが難しくなる可能性があります。また、不必要に多くのプロパティやメソッドを含むインターフェースが形成されることを避けるため、継承を使用する際は慎重に設計することが重要です。

ステップ５：インターフェースを実装するクラス

クラスがインターフェースを実装するとき、そのクラスはインターフェースに定義されているすべてのプロパティとメソッドを持つ必要があります。これは、implementsキーワードを使って行います。

interface Greetable {
  greet(): void;
}

class Person implements Greetable {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

PersonクラスはGreetableインターフェースを実装しています。これにより、Personクラスはgreetメソッドを実装する必要があり、この契約を満たすために、greetメソッドがクラス内に定義されています。

なお、TypeScriptではクラスは複数のインターフェースを実装することができます。異なる機能のセットを組み合わせて、より複雑な振る舞いを持つクラスを作成できます。

interface Greetable {
  greet(): void;
}

interface Identifiable {
  id: number;
}

class Employee implements Greetable, Identifiable {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and my ID is ${this.id}`);
  }
}

ポイント　インターフェースの実装の利点

• 型安全: インターフェースを実装するクラスは、インターフェースの契約に従う必要があるため、コードの型安全性が向上。
• 再利用性と保守性: 共通のインターフェースを実装する複数のクラス間でコードを再利用しやすくなる。また、インターフェースを変更すると、それに依存するすべてのクラスに変更が自動的に反映されるため、保守性が向上する。
• 柔軟性: インターフェースを利用することで、実装の詳細を抽象化し、クラス間の依存性を減らすことができる。

インターフェースとクラスの関係性を理解し、適切に活用することで、より強力で柔軟なコードを書くことができます。

インターフェースの基本を押さえたところで、ここからはより実践的なテクニックやTipsをご紹介します。

インデックス署名

インデックス署名は、TypeScriptにおいてオブジェクトのプロパティ名とその型があらかじめ特定できない場合に使える便利な機能です。いんですが署名は動的なプロパティ名に対応し、さまざまなキーとその値の型を柔軟に定義できます。

インデックス署名は以下の形式で定義されます。

interface インターフェース名 {
  [key: キータイプ]: バリュータイプ;
}

サンプルコード　文字列のキーを持つ場合

interface StringDictionary {
  [key: string]: number;
}

const myDict: StringDictionary = {
  apple: 5,
  orange: 10,
  banana: 20
};

↑の例では、StringDictionaryインターフェースは文字列のキーと数値の値を持つオブジェクト（[key: string]: number）を表します。この定義により、任意の文字列のキーに対して数値を割り当てることができるという仕組み。

サンプルコード　数値のキーを持つ場合

interface NumberDictionary {
  [index: number]: string;
}

const myArray: NumberDictionary = {
  10: "ten",
  20: "twenty",
  30: "thirty"
};

インデックス署名を使用することで、オブジェクトのプロパティ名を動的に定義できるため、APIからのレスポンスなど予測不可能なプロパティ名を持つデータ構造を扱いやすくなります。また、インデックス署名により、キーと値の型を厳密に指定できるため、型安全性が向上します。

インデックス署名を使用する際には、キーと値の型を正しく設定することが重要です。また、インデックス署名で定義された型以外のキーまたは値を割り当てようとすると、TypeScriptコンパイラはエラーを報告します。

関数型のインターフェース

TypeScriptでは、関数の型を定義する場合にもインターフェースを使用することができます。→関数が受け取る引数の型や返す値の型を厳密に指定することができ、プログラムの型安全性を向上させることができます。

関数のインターフェースを定義するには、インターフェース内に呼び出しシグネチャを記述します。呼び出しシグネチャは、関数の引数のリストと戻り値の型を定義します。

interface 関数名 {
  (引数1: 型1, 引数2: 型2, ...): 戻り値の型;
}

サンプルコード　単純な関数インターフェース

interface GreetFunction {
  (name: string): string;
}

const greet: GreetFunction = function(name: string) {
  return `Hello, ${name}!`;
};

console.log(greet("Alice")); // "Hello, Alice!"

GreetFunctionインターフェースは、string型の引数を1つ取り、string型の値を返す関数の型を定義しています。

サンプルコード　複数の引数を取る関数インターフェース

interface CalculateSumFunction {
  (x: number, y: number): number;
}

const sum: CalculateSumFunction = function(x: number, y: number) {
  return x + y;
};

console.log(sum(1, 2)); // 3

関数のインターフェースを使用することで、関数が期待する引数の型と戻り値の型を厳密に指定することが可能になります。結果、間違った型のデータを関数に渡すことを防ぎ、プログラムの安全性を向上させることに繋がります。また、関数インターフェースは関数がどのような引数を取り、どのような値を返すかを明確に示します。これにより、コードの可読性が向上し、他の開発者がコードを理解しやすくなるという利点があります。。

インターフェース宣言のマージ（Declaration Merging）

TypeScriptでは「宣言のマージ（Declaration Merging）」という強力な機能があります。これは、同じ名前の２つ以上の宣言を１つの宣言として合体させることができるという仕組みのこと。分散していたインターフェースの定義を統合し拡張することができます。

interface Animal {
  name: string;
}

interface Animal {
  age: number;
}

// マージされたインターフェース
// interface Animal {
//   name: string;
//   age: number;
// }

Animalインターフェースが２つ定義されていますが、TypeScriptはこれらをマージして１つのインターフェースとして扱います。その結果、マージされたAnimalインターフェースはnameプロパティとageプロパティの両方を持つことになります。

これらの機能と概念を理解することで、TypeScriptのインターフェースをより効果的に利用し、より安全でメンテナンスしやすいコードを書くことができるようになります。網羅的に学習することは大変価値があり、TypeScriptの強力な型システムの利点を最大限に活用することができます。