制御の反転の基礎
依存関係を反転する理由とタイミングを理解します。
「制御の反転の基礎」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ハードコードされた依存関係
クラスがnewを使って依存するオブジェクトを自分で生成すると、具体的な型に強く結合されます。そのため、クラスの構成変更やテストが難しくなります。
強く結合された例
ここでは、サービスが独自にロガーを生成しています。クラスを編集せずに別のロガーへ置き換える方法はありません。
class ConsoleLogger { log(m: string) { console.log(m); } }
class OrderService {
private logger = new ConsoleLogger(); // hard-coded
place() { this.logger.log("order placed"); }
}
new OrderService().place();制御の反転とは
制御の反転（Inversion of Control、IoC）は、依存関係を決定する主体を逆転させます。クラスが依存関係を生成するのではなく、外部から提供します。クラスは必要なものを宣言し、それを受け取ります。
依存性の注入
依存性の注入（Dependency Injection、DI）は、IoCを実現する一般的な方法です。依存するオブジェクトを内部で構築するのではなく、外部から渡します。どの実装を使うかは呼び出し側が制御します。
注入を利用したバージョン
ここでは、ロガーが外部から提供されています。サービスは、どの具体的なロガーを受け取ったかを認識する必要も、気にする必要もありません。
class OrderService {
constructor(private logger: { log(m: string): void }) {}
place() { this.logger.log("order placed"); }
}
new OrderService(new ConsoleLogger()).place();IoCでテスト容易性が向上する理由
依存関係が外部から渡されるため、テストではフェイクやスパイを渡せます。実際のI/O、データベース、ネットワーク呼び出しを使わずに、動作を検証できます。
const calls: string[] = [];
const fakeLogger = { log: (m: string) => calls.push(m) };
new OrderService(fakeLogger).place();
console.log(calls); // ["order placed"]抽象に依存する
IoCは、クラスではなくインターフェースに依存すると最も効果を発揮します。インターフェースを満たす実装であれば、どれでも注入できます。
interface Logger { log(m: string): void; }
class OrderService {
constructor(private logger: Logger) {}
}コンストラクターインジェクション
コンストラクターインジェクションでは、依存関係をコンストラクターの引数として渡します。依存関係はすぐに利用でき、readonlyとして指定することもできるため、必要なものが明確になります。
class OrderService {
constructor(private readonly logger: Logger) {}
}プロパティインジェクション
プロパティインジェクションでは、構築後にパブリックプロパティまたは設定可能なプロパティへ依存関係を設定します。柔軟性が高い一方で、依存関係がない状態で一時的にオブジェクトが存在することを許してしまいます。
class OrderService {
logger!: Logger; // set after construction
place() { this.logger.log("placed"); }
}
const s = new OrderService();
s.logger = new ConsoleLogger();スタイルを選ぶ
必須の依存関係にはコンストラクターインジェクションを優先してください。オブジェクトが未完成の状態にならないためです。オプションの依存オブジェクトや、構築時の循環を解消する場合は、プロパティインジェクションを使用します。
IoCコンテナーの概要
大規模なアプリでは、依存関係を手作業で接続するのは次第に面倒になります。IoCコンテナーは、依存関係の生成と提供を自動化します。次のレッスンでは、InversifyJSを使って詳しく説明します。
クイックチェック
このレッスンの理解度を確認します。
まとめ
制御の反転では、依存関係の生成をクラスの外部へ移します。依存性の注入では、依存関係を外部から提供します。インターフェースに依存し、必須の依存関係にはコンストラクターインジェクションを優先すると、フェイクを注入して簡単にテストできます。
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「制御の反転の基礎」レッスンは無料ですか？
はい。「制御の反転の基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「制御の反転の基礎」で何を学びますか？
依存関係を反転する理由とタイミングを理解します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「制御の反転の基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。