InversifyJSによるDIコンテナ
コンテナにサービスを登録し、解決します。
「InversifyJSによるDIコンテナ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
DIコンテナーが必要な理由
大規模なオブジェクトグラフを手作業で接続するのは、面倒で間違いも起こりやすくなります。DIコンテナーは各依存関係の構築方法を登録し、それらを自動的に解決します。InversifyJSは、TypeScriptでよく使われるコンテナーです。
インストールと有効化
InversifyJSはデコレーターとリフレクションメタデータに依存します。inversifyからインポートし、experimentalDecoratorsとreflect-metadataを有効にします。
import "reflect-metadata";
import { Container, injectable, inject } from "inversify";クラスに@injectableを付ける
@injectable()デコレーターは、クラスを構築して注入できることをコンテナーに伝えます。コンテナーが構築するすべてのクラスに必要です。
import { injectable } from "inversify";
@injectable()
class ConsoleLogger {
log(m: string) { console.log(m); }
}@injectで依存関係を宣言する
コンストラクターの引数に@inject(token)を使用すると、どのバインディングを提供するかをコンテナーに伝えられます。トークンが依存関係を識別します。
@injectable()
class OrderService {
constructor(@inject("Logger") private logger: ConsoleLogger) {}
place() { this.logger.log("placed"); }
}コンテナーを作成する
Containerには、アプリケーションのすべてのバインディングが格納されます。起動時に1つ作成し、そこへ依存関係を登録します。
import { Container } from "inversify";
const container = new Container();インターフェースを実装にバインドする
流れるように呼び出せるAPIのbind<T>(token).to(Impl)は、トークン（多くの場合はインターフェース）を、コンテナーがインスタンス化する具体的なクラスに対応付けます。
interface Logger { log(m: string): void; }
container.bind<Logger>("Logger").to(ConsoleLogger);サービスを解決する
container.get<T>(token)は、要求されたサービスを構築します。その際、依存関係も再帰的に構築して注入します。
container.bind<OrderService>(OrderService).toSelf();
const svc = container.get<OrderService>(OrderService);
svc.place();実装を入れ替える
別のロガーを使うには、トークンを別のクラスに再バインドします。利用側は具体的なクラスではなくトークンに依存しているため、変更する必要がありません。
@injectable()
class SilentLogger implements Logger { log() {} }
container.rebind<Logger>("Logger").to(SilentLogger);シングルトンスコープ
デフォルトでは、getを呼び出すたびに新しいインスタンスが構築される場合があります。inSingletonScope()を使うと、アプリ全体で1つのインスタンスを共有できます。
container.bind<Logger>("Logger").to(ConsoleLogger).inSingletonScope();コンテナーを使ってテストする
テストでは新しいコンテナーを作成してフェイクをバインドできます。テスト対象の単位を分離しながら、同じ接続のメリットを得られます。
const testContainer = new Container();
testContainer.bind<Logger>("Logger").to(SilentLogger);コンテナーのトレードオフ
コンテナーは大規模な依存関係グラフの定型コードを減らしますが、依存関係、デコレーター、間接層が増えます。小規模なアプリでは、手作業によるコンストラクターインジェクションのほうが明確なことがよくあります。
クイックチェック
このレッスンのクイックチェックです。
まとめ
InversifyJSでは、@injectable、@inject(token)、Containerを使用します。bind<Interface>(token).to(Impl)でバインドし、container.getを呼び出すと依存関係のグラフが自動的に解決されます。reflect-metadataとデコレーターが必要になる代わりに、ボイラープレートを減らして間接化を導入します。
よくある質問
「InversifyJSによるDIコンテナ」レッスンは無料ですか？
はい。「InversifyJSによるDIコンテナ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「InversifyJSによるDIコンテナ」で何を学びますか？
コンテナにサービスを登録し、解決します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「InversifyJSによるDIコンテナ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 制御の反転の基礎
- コンストラクターインジェクション
- InversifyJSによるDIコンテナ
- 型安全なサービスToken