質問するログイン新規登録

質問編集履歴

4

2016/08/14 10:55

投稿

canvas
canvas

スコア62

title CHANGED
File without changes
body CHANGED
@@ -360,69 +360,60 @@
360
360
 
361
361
  ## パターン3のJavaScriptコード
362
362
  ```JavaScript
363
+ var Circle = (function () {
364
+ function Circle(x, y, radius) {
365
+ this.point = new Point(x, y);
366
+ this.radius = new Length(radius);
367
+ }
368
+ Object.defineProperty(Circle.prototype, "position", {
369
+ get: function () {
370
+ return this.point.cordinates;
371
+ },
372
+ enumerable: true,
373
+ configurable: true
374
+ });
363
- class Circle {
375
+ return Circle;
376
+ }());
377
+ var Point = (function () {
378
+ function Point(x, y) {
379
+ this.x = x;
380
+ this.y = y;
381
+ }
382
+ Object.defineProperty(Point.prototype, "cordinates", {
383
+ get: function () {
384
+ return { x: this.x, y: this.y };
385
+ },
386
+ enumerable: true,
387
+ configurable: true
388
+ });
389
+ return Point;
390
+ }());
391
+ var Cordinate = (function () {
392
+ function Cordinate(value) {
393
+ this.cordinate = value;
394
+ }
395
+ Object.defineProperty(Cordinate.prototype, "value", {
396
+ get: function () {
397
+ return this.cordinate;
398
+ },
399
+ enumerable: true,
400
+ configurable: true
401
+ });
402
+ return Cordinate;
403
+ }());
404
+ var Length = (function () {
405
+ function Length(value) {
406
+ this.length = value;
407
+ }
408
+ Object.defineProperty(Length.prototype, "value", {
409
+ get: function () {
410
+ return this.length;
411
+ },
412
+ enumerable: true,
413
+ configurable: true
414
+ });
415
+ return Length;
416
+ }());
417
+ var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
364
418
 
365
- private point: Point;
366
- private radius: Length;
367
-
368
- constructor(x: Cordinate, y: Cordinate, radius: number) {
369
- this.point = new Point(x, y);
370
- this.radius = new Length(radius);
371
- }
372
-
373
- get position(): {x: Cordinate, y: Cordinate} {
374
- return this.point.cordinates;
375
- }
376
-
377
-
378
- }
379
-
380
-
381
- class Point {
382
-
383
- private x: Cordinate;
384
- private y: Cordinate;
385
-
386
- constructor(x: Cordinate, y: Cordinate) {
387
- this.x = x;
388
- this.y = y;
389
- }
390
-
391
- get cordinates(): {x: Cordinate, y: Cordinate} {
392
- return {x: this.x, y: this.y};
393
- }
394
-
395
- }
396
-
397
- class Cordinate {
398
-
399
- private cordinate: number;
400
-
401
- constructor(value: number) {
402
- this.cordinate = value;
403
- }
404
-
405
- get value(): number{
406
- return this.cordinate;
407
- }
408
-
409
- }
410
-
411
-
412
- class Length {
413
-
414
- private length: number;
415
-
416
- constructor(value: number) {
417
- this.length = value;
418
- }
419
-
420
- get value(): number {
421
- return this.length;
422
- }
423
-
424
- }
425
-
426
-
427
- var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
428
419
  ```

3

コードを全面的に書き換えました。もう1パターン増やしました。

2016/08/14 10:55

投稿

canvas
canvas

スコア62

title CHANGED
File without changes
body CHANGED
@@ -1,115 +1,231 @@
1
1
  #質問
2
+ 以下に掲載する3パターンのコードのうち、パターン2とパターン3はDI(依存性の注入)と呼ばれるパターンなのだと思います。
2
- 立てた質問の[「円クラスをMVC的に実装したいす!」](https://teratail.com/questions/44161)に掲載たコードに登場すCircleクラスが持つpositionプロパティーにPositionXYクラスのインスタンスを代入するようにしてみました
3
+ パターン1はクラスのコンストラクタ内依存ているクラスのインスタンスを生成しているものです
3
4
 
4
- ※Positionいう名前のクラスがラウザの組み込みラス衝突すため、PositionXYクラスにひまずしておきまし
5
+ DIするこでオジェト間の依存度を下げるこが出来のはなんなく理解してすが、何でもかんでもDIすれば良いっていう話でもないような気がています。
5
6
 
6
- PositionXYクラスを新た作成は良いのですが、どのようにCircleラスpositionプロパティーpositionXYクラスのインスタンスをセットるのが適切のか、いまいちわません
7
+ というのも、今回のケーではオブジェクト一つ引数て済む程度ですが、依存するオブジェトが複数あった場合、そ数分だけ引数った場合煩雑な気がしてしまいます。(そこでDIコンテナが登場とう話になるのもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…?)
7
8
 
8
- 以下に掲載するパターンのコードのうち、パターン1はDI(依存性の注入)呼ばれるパターンのだと思います。
9
+ 質問としましては以下2となます。
9
10
 
10
- DIすることでオブジェクト間の依存度をげることが出来るはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケスではオブジェクトを一つ引数に渡して済む程度話ですが、依存するオブジェクトが複数あった場合、そ数分だけ引数に渡すとなった場合、煩雑な気がしてしまます。(そこでDIコンテナが登場という話になのかもしれませんが、それも、なんでもDIたほうが良いという話なのでしょうか…)
11
+ (1)以下のようなの場合はどパターンより適しているでしょうか?
12
+ (2)どういうオブジェクトを、またはどういうシチュエーションではDIをすべきなのでしょうか?
11
13
 
12
- 質問としましては、(1)以下のようなコードの場合はどちらのパターンがより適しているでしょうか?
13
- PositionXYクラスというのはあまり他と置き換えられることが想定されないような類のクラスのように感じられます。
14
-
15
- また、もう1つの質問としましては(2)どういうオブジェクトを、またはどういうシチュエーションではDIをすべきなのでしょうか?
16
-
17
14
  ご教授頂けると大変ありがたいです。よろしくお願いいたします。
18
15
 
19
16
 
20
17
  ## パターン1
21
- Circleクラス外でPositionXYクラスをインスタンス化し、Circleクラスのインスタンス化時にコンストラクタの引数にPositionXYクラスのインスタンスを注入して、Circleクラスのpositionプロパティーに代入。
22
18
  ```TypeScript
23
19
  class Circle {
24
-
20
+
25
- private position: PositionXY;
21
+ private point: Point;
26
- private radius: number;
22
+ private radius: Length;
27
-
23
+
28
- constructor(position: PositionXY, radius: number) {
24
+ constructor(x: number, y: number, radius: number) {
29
- this.position = position;
25
+ this.point = new Point(new Cordinate(x), new Cordinate(y));
30
- this.radius = radius;
26
+ this.radius = new Length(radius);
31
27
  }
32
-
33
- //左上を起点としたxy座標を返す
28
+
29
+
34
- public getPosition(): {x: number, y: number} {
30
+ get position(): {x: Cordinate, y: Cordinate} {
35
- return this.position.getPosition();
31
+ return this.point.cordinates;
36
32
  }
37
-
38
- //円の中心を起点としたxy座標を返す
33
+
39
- public getCenterPosition(): {x: number, y: number} {
34
+
40
- var positionAtLeftTop: {x: number, y: number} = this.position.getPosition();
41
- return {x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius};
42
- }
43
-
44
35
  }
45
36
 
46
37
 
47
- class PositionXY {
38
+ class Point {
48
-
39
+
49
- private x: number;
40
+ private x: Cordinate;
50
- private y: number;
41
+ private y: Cordinate;
51
-
42
+
52
- constructor(x: number, y: number) {
43
+ constructor(x: Cordinate, y: Cordinate) {
53
44
  this.x = x;
54
45
  this.y = y;
55
46
  }
56
-
47
+
57
- public getPosition(): {x: number, y: number} {
48
+ get cordinates(): {x: Cordinate, y: Cordinate} {
58
49
  return {x: this.x, y: this.y};
59
50
  }
60
51
 
61
52
  }
62
53
 
54
+ class Cordinate {
55
+
56
+ private cordinate: number;
57
+
58
+ constructor(value: number) {
59
+ this.cordinate = value;
60
+ }
61
+
62
+ get value(): number{
63
+ return this.cordinate;
64
+ }
65
+
66
+ }
67
+
68
+
69
+
70
+ class Length {
71
+
72
+ private length: number;
73
+
74
+ constructor(value: number) {
75
+ this.length = value;
76
+ }
77
+
78
+ get value(): number {
79
+ return this.length;
80
+ }
81
+
82
+ }
83
+
84
+
63
- var circle = new Circle(new PositionXY(10, 10), 10);
85
+ var circle = new Circle(10, 10, 10);
64
86
  ```
65
87
 
66
88
 
67
89
 
68
90
  ## パターン2
69
- Circleクラス内でPositionXYクラスをインスタンス化し、Circleクラスのpositionプロパティーに代入。
70
91
  ```TypeScript
71
92
  class Circle {
72
-
93
+
73
- private position: PositionXY;
94
+ private point: Point;
74
- private radius: number;
95
+ private radius: Length;
75
-
96
+
76
- constructor(x: number, y: number, radius: number) {
97
+ constructor(point: Point, radius: Length) {
77
- this.position = new PositionXY(x, y);
98
+ this.point = point;
78
99
  this.radius = radius;
79
100
  }
101
+
102
+ get position(): {x: Cordinate, y: Cordinate} {
103
+ return this.point.cordinates;
104
+ }
105
+
106
+ }
107
+
108
+
109
+ class Point {
110
+
111
+ private x: Cordinate;
112
+ private y: Cordinate;
113
+
114
+ constructor(x: Cordinate, y: Cordinate) {
115
+ this.x = x;
116
+ this.y = y;
117
+ }
118
+
119
+ get cordinates(): {x: Cordinate, y: Cordinate} {
120
+ return {x: this.x, y: this.y};
121
+ }
122
+
123
+
124
+
125
+ }
126
+
127
+ class Cordinate {
128
+
129
+ private cordinate: number;
80
130
 
81
- //左上を起点としたxy座標を返す
82
- public getPosition(): {x: number, y: number} {
131
+ constructor(value: number) {
83
- return this.position.getPosition();
132
+ this.cordinate = value;
84
133
  }
134
+
135
+ get value(): number{
136
+ return this.cordinate;
137
+ }
138
+
139
+ }
140
+
141
+
142
+
143
+ class Length {
144
+
145
+ private length: number;
85
146
 
86
- //円の中心を起点としたxy座標を返す
87
- public getCenterPosition(): {x: number, y: number} {
147
+ constructor(value: number) {
88
- var positionAtLeftTop: {x: number, y: number} = this.position.getPosition();
89
- return {x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius};
148
+ this.length = value;
90
149
  }
150
+
91
-
151
+ get value(): number{
152
+ return this.length;
153
+ }
154
+
92
155
  }
93
156
 
94
157
 
158
+ var circle = new Circle(new Point(new Cordinate(10), new Cordinate(10)), new Length(10));
159
+ ```
160
+
161
+
162
+ ## パターン3
163
+ ```TypeScript
164
+ class Circle {
165
+
166
+ private point: Point;
167
+ private radius: Length;
168
+
169
+ constructor(x: Cordinate, y: Cordinate, radius: number) {
170
+ this.point = new Point(x, y);
171
+ this.radius = new Length(radius);
172
+ }
173
+
174
+ get position(): {x: Cordinate, y: Cordinate} {
175
+ return this.point.cordinates;
176
+ }
177
+
178
+
179
+ }
180
+
181
+
95
- class PositionXY {
182
+ class Point {
96
-
183
+
97
- private x: number;
184
+ private x: Cordinate;
98
- private y: number;
185
+ private y: Cordinate;
99
-
186
+
100
- constructor(x: number, y: number) {
187
+ constructor(x: Cordinate, y: Cordinate) {
101
188
  this.x = x;
102
189
  this.y = y;
103
190
  }
104
-
191
+
105
- public getPosition(): {x: number, y: number} {
192
+ get cordinates(): {x: Cordinate, y: Cordinate} {
106
193
  return {x: this.x, y: this.y};
107
194
  }
108
195
 
109
196
  }
110
197
 
111
- var circle = new Circle(10, 10, 10);
198
+ class Cordinate {
112
199
 
200
+ private cordinate: number;
201
+
202
+ constructor(value: number) {
203
+ this.cordinate = value;
204
+ }
205
+
206
+ get value(): number{
207
+ return this.cordinate;
208
+ }
209
+
210
+ }
211
+
212
+
213
+ class Length {
214
+
215
+ private length: number;
216
+
217
+ constructor(value: number) {
218
+ this.length = value;
219
+ }
220
+
221
+ get value(): number {
222
+ return this.length;
223
+ }
224
+
225
+ }
226
+
227
+
228
+ var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
113
229
  ```
114
230
 
115
231
 
@@ -118,64 +234,195 @@
118
234
 
119
235
  TypeScriptのJavaScriptにコンパイルされたコードの掲載リクエストがありましたので追記させて頂きます。
120
236
 
121
- ### パターンのJavaScriptンパイルされたコード
237
+ ## パターン1のJavaScriptコード
122
238
  ```JavaScript
123
239
  var Circle = (function () {
124
- function Circle(position, radius) {
240
+ function Circle(x, y, radius) {
125
- this.position = position;
241
+ this.point = new Point(new Cordinate(x), new Cordinate(y));
126
- this.radius = radius;
242
+ this.radius = new Length(radius);
127
243
  }
128
- //左上を起点としたxy座標を返す
129
- Circle.prototype.getPosition = function () {
244
+ Object.defineProperty(Circle.prototype, "position", {
245
+ get: function () {
130
- return this.position.getPosition();
246
+ return this.point.cordinates;
247
+ },
248
+ enumerable: true,
249
+ configurable: true
131
- };
250
+ });
132
- //円の中心を起点としたxy座標を返す
133
- Circle.prototype.getCenterPosition = function () {
134
- var positionAtLeftTop = this.position.getPosition();
135
- return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
136
- };
137
251
  return Circle;
138
252
  }());
139
- var PositionXY = (function () {
253
+ var Point = (function () {
140
- function PositionXY(x, y) {
254
+ function Point(x, y) {
141
255
  this.x = x;
142
256
  this.y = y;
143
257
  }
144
- PositionXY.prototype.getPosition = function () {
258
+ Object.defineProperty(Point.prototype, "cordinates", {
259
+ get: function () {
145
- return { x: this.x, y: this.y };
260
+ return { x: this.x, y: this.y };
261
+ },
262
+ enumerable: true,
263
+ configurable: true
146
- };
264
+ });
147
- return PositionXY;
265
+ return Point;
148
266
  }());
267
+ var Cordinate = (function () {
268
+ function Cordinate(value) {
269
+ this.cordinate = value;
270
+ }
271
+ Object.defineProperty(Cordinate.prototype, "value", {
272
+ get: function () {
273
+ return this.cordinate;
274
+ },
275
+ enumerable: true,
276
+ configurable: true
277
+ });
278
+ return Cordinate;
279
+ }());
280
+ var Length = (function () {
281
+ function Length(value) {
282
+ this.length = value;
283
+ }
284
+ Object.defineProperty(Length.prototype, "value", {
285
+ get: function () {
286
+ return this.length;
287
+ },
288
+ enumerable: true,
289
+ configurable: true
290
+ });
291
+ return Length;
292
+ }());
149
- var circle = new Circle(new PositionXY(10, 10), 10);
293
+ var circle = new Circle(10, 10, 10);
294
+
150
295
  ```
151
296
 
297
+
298
+
152
- ### パターン2のJavaScriptンパイルされたコード
299
+ ## パターン2のJavaScriptコード
153
300
  ```JavaScript
154
301
  var Circle = (function () {
155
- function Circle(x, y, radius) {
302
+ function Circle(point, radius) {
156
- this.position = new PositionXY(x, y);
303
+ this.point = point;
157
304
  this.radius = radius;
158
305
  }
159
- //左上を起点としたxy座標を返す
160
- Circle.prototype.getPosition = function () {
306
+ Object.defineProperty(Circle.prototype, "position", {
307
+ get: function () {
161
- return this.position.getPosition();
308
+ return this.point.cordinates;
309
+ },
310
+ enumerable: true,
311
+ configurable: true
162
- };
312
+ });
163
- //円の中心を起点としたxy座標を返す
164
- Circle.prototype.getCenterPosition = function () {
165
- var positionAtLeftTop = this.position.getPosition();
166
- return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
167
- };
168
313
  return Circle;
169
314
  }());
170
- var PositionXY = (function () {
315
+ var Point = (function () {
171
- function PositionXY(x, y) {
316
+ function Point(x, y) {
172
317
  this.x = x;
173
318
  this.y = y;
174
319
  }
175
- PositionXY.prototype.getPosition = function () {
320
+ Object.defineProperty(Point.prototype, "cordinates", {
321
+ get: function () {
176
- return { x: this.x, y: this.y };
322
+ return { x: this.x, y: this.y };
323
+ },
324
+ enumerable: true,
325
+ configurable: true
177
- };
326
+ });
178
- return PositionXY;
327
+ return Point;
179
328
  }());
329
+ var Cordinate = (function () {
330
+ function Cordinate(value) {
331
+ this.cordinate = value;
332
+ }
333
+ Object.defineProperty(Cordinate.prototype, "value", {
334
+ get: function () {
335
+ return this.cordinate;
336
+ },
337
+ enumerable: true,
338
+ configurable: true
339
+ });
340
+ return Cordinate;
341
+ }());
342
+ var Length = (function () {
343
+ function Length(value) {
344
+ this.length = value;
345
+ }
346
+ Object.defineProperty(Length.prototype, "value", {
347
+ get: function () {
348
+ return this.length;
349
+ },
350
+ enumerable: true,
351
+ configurable: true
352
+ });
353
+ return Length;
354
+ }());
355
+ var circle = new Circle(new Point(new Cordinate(10), new Cordinate(10)), new Length(10));
356
+
357
+ ```
358
+
359
+
360
+
361
+ ## パターン3のJavaScriptコード
362
+ ```JavaScript
363
+ class Circle {
364
+
365
+ private point: Point;
366
+ private radius: Length;
367
+
368
+ constructor(x: Cordinate, y: Cordinate, radius: number) {
369
+ this.point = new Point(x, y);
370
+ this.radius = new Length(radius);
371
+ }
372
+
373
+ get position(): {x: Cordinate, y: Cordinate} {
374
+ return this.point.cordinates;
375
+ }
376
+
377
+
378
+ }
379
+
380
+
381
+ class Point {
382
+
383
+ private x: Cordinate;
384
+ private y: Cordinate;
385
+
386
+ constructor(x: Cordinate, y: Cordinate) {
387
+ this.x = x;
388
+ this.y = y;
389
+ }
390
+
391
+ get cordinates(): {x: Cordinate, y: Cordinate} {
392
+ return {x: this.x, y: this.y};
393
+ }
394
+
395
+ }
396
+
397
+ class Cordinate {
398
+
399
+ private cordinate: number;
400
+
401
+ constructor(value: number) {
402
+ this.cordinate = value;
403
+ }
404
+
405
+ get value(): number{
406
+ return this.cordinate;
407
+ }
408
+
409
+ }
410
+
411
+
412
+ class Length {
413
+
414
+ private length: number;
415
+
416
+ constructor(value: number) {
417
+ this.length = value;
418
+ }
419
+
420
+ get value(): number {
421
+ return this.length;
422
+ }
423
+
424
+ }
425
+
426
+
180
- var circle = new Circle(10, 10, 10);
427
+ var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
181
428
  ```

2

jsコードの追加

2016/08/14 10:54

投稿

canvas
canvas

スコア62

title CHANGED
File without changes
body CHANGED
@@ -110,4 +110,72 @@
110
110
 
111
111
  var circle = new Circle(10, 10, 10);
112
112
 
113
+ ```
114
+
115
+
116
+ ## 追記(14:29)
117
+ [TypeScript Playground - https://www.typescriptlang.org/play/](https://www.typescriptlang.org/play/)
118
+
119
+ TypeScriptのJavaScriptにコンパイルされたコードの掲載リクエストがありましたので追記させて頂きます。
120
+
121
+ ### パターン1のJavaScriptにコンパイルされたコード
122
+ ```JavaScript
123
+ var Circle = (function () {
124
+ function Circle(position, radius) {
125
+ this.position = position;
126
+ this.radius = radius;
127
+ }
128
+ //左上を起点としたxy座標を返す
129
+ Circle.prototype.getPosition = function () {
130
+ return this.position.getPosition();
131
+ };
132
+ //円の中心を起点としたxy座標を返す
133
+ Circle.prototype.getCenterPosition = function () {
134
+ var positionAtLeftTop = this.position.getPosition();
135
+ return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
136
+ };
137
+ return Circle;
138
+ }());
139
+ var PositionXY = (function () {
140
+ function PositionXY(x, y) {
141
+ this.x = x;
142
+ this.y = y;
143
+ }
144
+ PositionXY.prototype.getPosition = function () {
145
+ return { x: this.x, y: this.y };
146
+ };
147
+ return PositionXY;
148
+ }());
149
+ var circle = new Circle(new PositionXY(10, 10), 10);
150
+ ```
151
+
152
+ ### パターン2のJavaScriptにコンパイルされたコード
153
+ ```JavaScript
154
+ var Circle = (function () {
155
+ function Circle(x, y, radius) {
156
+ this.position = new PositionXY(x, y);
157
+ this.radius = radius;
158
+ }
159
+ //左上を起点としたxy座標を返す
160
+ Circle.prototype.getPosition = function () {
161
+ return this.position.getPosition();
162
+ };
163
+ //円の中心を起点としたxy座標を返す
164
+ Circle.prototype.getCenterPosition = function () {
165
+ var positionAtLeftTop = this.position.getPosition();
166
+ return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
167
+ };
168
+ return Circle;
169
+ }());
170
+ var PositionXY = (function () {
171
+ function PositionXY(x, y) {
172
+ this.x = x;
173
+ this.y = y;
174
+ }
175
+ PositionXY.prototype.getPosition = function () {
176
+ return { x: this.x, y: this.y };
177
+ };
178
+ return PositionXY;
179
+ }());
180
+ var circle = new Circle(10, 10, 10);
113
181
  ```

1

\)漏れ

2016/08/14 05:32

投稿

canvas
canvas

スコア62

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  以下に掲載する2パターンのコードのうち、パターン1はDI(依存性の注入)と呼ばれるパターンなのだと思います。
9
9
 
10
- DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。(そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…?
10
+ DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。(そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…?)
11
11
 
12
12
  質問としましては、(1)以下のようなコードの場合はどちらのパターンがより適しているでしょうか?
13
13
  PositionXYクラスというのはあまり他と置き換えられることが想定されないような類のクラスのように感じられます。