JavaScriptにおける依存性注入

1// The GameReader class
2class GameReader {
3  constructor(input) {
4    this.input = input;
5  }
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9}
10
11// The NoSleepStation Console class
12class NSSConsole {
13  gameReader = new GameReader("TurboCars Racer");
14
15  play() {
16    this.gameReader.readDisc();
17  }
18}
19
20// use the classes above to play 
21const nssConsole = new NSSConsole();
22nssConsole.play();

1class GameReader {
2  constructor(input) {
3    this.input = input;
4  }
5
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9
10  changeDisc(input) {
11    this.input = input;
12    this.readDisc();
13  }
14}
15
16class NSSConsole {
17  constructor(gameReader) {
18    this.gameReader = gameReader;
19  }
20
21  play() {
22    this.gameReader.readDisc();
23  }
24
25  playAnotherTitle(input) {
26    this.gameReader.changeDisc(input);
27  }
28}
29
30const gameReader = new GameReader("TurboCars Racer");
31const nssConsole = new NSSConsole(gameReader);
32
33nssConsole.play();
34nssConsole.playAnotherTitle("TurboCars Racer 2");

1// nssconsole.test.js
2const gameReaderStub = {
3  readDisc: () => {
4    console.log("Read disc");
5  },
6  changeDisc: (input) => {
7    console.log("Changed disc to: " + input);
8  },
9};
10
11const nssConsole = new NSSConsole(gameReaderStub);

1// logger.service.ts
2import { Injectable } from '@angular/core';
3
4@Injectable({providedIn: 'root'})
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Component } from '@angular/core';
13import { Logger } from '../logger.service';
14
15@Component({
16  selector: 'hello-world-di',
17  templateUrl: './hello-world-di.component.html'
18})
19export class HelloWorldDependencyInjectionComponent  {
20  count = 0;
21
22  constructor(private logger: Logger) { }
23
24  onLogMe() {
25    this.logger.writeCount(this.count);
26    this.count++;
27  }
28}

1constructor(private logger: Logger) // Angular injects an instance of the LoggerService class

1// logger.service.ts
2import { Injectable } from '@nestjs/common';
3
4@Injectable()
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Controller } from '@nestjs/common';
13import { Logger } from '../logger.service';
14
15@Controller('')
16export class HelloWorldDependencyInjectionController  {
17  count = 0;
18
19  constructor(private logger: Logger) { }
20
21  onLogMe() {
22    this.logger.writeCount(this.count);
23    this.count++;
24  }
25}

1export default {
2provide: {
3message: 'hello!',
4}
5}

1export default {
2  inject: ['message'],
3  created() {
4    console.log(this.message) // injected value
5  }
6}

1import { createApp } from 'vue'
2
3const app = createApp({})
4
5app.provide(/* key */ 'message', /* value */ 'hello!')

1mkdir inversify-di
2cd inversify-di
3npm init

1# Using npm
2npm install inversify reflect-metadata
3
4# or if you use yarn: 
5# yarn add inversify reflect-metadata

1touch game-reader.mjs nssconsole.mjs

1// game-reader.mjs
2export default class GameReader {
3  constructor(input = "TurboCars Racer") {
4    this.input = input;
5  }
6
7  readDisc() {
8    console.log("Now playing: ", this.input);
9  }
10
11  changeDisc(input) {
12    this.input = input;
13    this.readDisc();
14  }
15}

1// nssconsole.mjs
2export default class NSSConsole {
3  constructor(gameReader) {
4    this.gameReader = gameReader;
5  }
6
7  play() {
8    this.gameReader.readDisc();
9  }
10
11  playAnotherTitle(input) {
12    this.gameReader.changeDisc(input);
13  }
14}

1touch config.mjs index.mjs

1// config.mjs
2import { decorate, injectable, inject, Container } from "inversify";
3import GameReader from "./game-reader.mjs";
4import NSSConsole from "./nssconsole.mjs";
5
6// Declare our dependencies' type identifiers
7export const TYPES = {
8  GameReader: "GameReader",
9  NSSConsole: "NSSConsole",
10};
11
12// Declare injectables
13decorate(injectable(), GameReader);
14decorate(injectable(), NSSConsole);
15
16// Declare the GameReader class as the first dependency of NSSConsole
17decorate(inject(TYPES.GameReader), NSSConsole, 0);
18
19// Declare bindings
20const container = new Container();
21container.bind(TYPES.NSSConsole).to(NSSConsole);
22container.bind(TYPES.GameReader).to(GameReader);
23
24export { container };

1// index.mjs
2// Import reflect-metadata as a polyfill
3import "reflect-metadata";
4import { container, TYPES } from "./config.mjs";
5
6// Resolve dependencies
7// Notice how we do not need to explicitly declare a GameReader instance anymore
8const myConsole = container.get(TYPES.NSSConsole);
9
10myConsole.play();
11myConsole.playAnotherTitle("Some other game");