teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問クラスのインスタンス化時にDIすべきオブジェクトとそうでないオブジェクトの判断の仕方

編集履歴

質問編集履歴

4

あ

2016/08/14 10:55

投稿

canvas
canvas

スコア62

test CHANGED
File without changes
test CHANGED
@@ -722,134 +722,116 @@
722
722
 
723
723
  ```JavaScript
724
724
 
725
- class Circle {
726
-
727
-
728
-
729
- private point: Point;
730
-
731
- private radius: Length;
732
-
733
-
734
-
735
- constructor(x: Cordinate, y: Cordinate, radius: number) {
736
-
737
- this.point = new Point(x, y);
738
-
739
- this.radius = new Length(radius);
740
-
741
- }
742
-
743
-
744
-
745
- get position(): {x: Cordinate, y: Cordinate} {
746
-
747
- return this.point.cordinates;
748
-
749
- }
750
-
751
-
752
-
753
-
754
-
755
- }
756
-
757
-
758
-
759
-
760
-
761
- class Point {
762
-
763
-
764
-
765
- private x: Cordinate;
766
-
767
- private y: Cordinate;
768
-
769
-
770
-
771
- constructor(x: Cordinate, y: Cordinate) {
772
-
773
- this.x = x;
774
-
775
- this.y = y;
776
-
777
- }
778
-
779
-
780
-
781
- get cordinates(): {x: Cordinate, y: Cordinate} {
782
-
783
- return {x: this.x, y: this.y};
784
-
785
- }
786
-
787
-
788
-
789
- }
790
-
791
-
792
-
793
- class Cordinate {
794
-
795
-
796
-
797
- private cordinate: number;
798
-
799
-
800
-
801
- constructor(value: number) {
802
-
803
- this.cordinate = value;
804
-
805
- }
806
-
807
-
808
-
809
- get value(): number{
810
-
811
- return this.cordinate;
812
-
813
- }
814
-
815
-
816
-
817
- }
818
-
819
-
820
-
821
-
822
-
823
- class Length {
824
-
825
-
826
-
827
- private length: number;
828
-
829
-
830
-
831
- constructor(value: number) {
832
-
833
- this.length = value;
834
-
835
- }
836
-
837
-
838
-
839
- get value(): number {
840
-
841
- return this.length;
842
-
843
- }
844
-
845
-
846
-
847
- }
848
-
849
-
850
-
851
-
725
+ var Circle = (function () {
726
+
727
+ function Circle(x, y, radius) {
728
+
729
+ this.point = new Point(x, y);
730
+
731
+ this.radius = new Length(radius);
732
+
733
+ }
734
+
735
+ Object.defineProperty(Circle.prototype, "position", {
736
+
737
+ get: function () {
738
+
739
+ return this.point.cordinates;
740
+
741
+ },
742
+
743
+ enumerable: true,
744
+
745
+ configurable: true
746
+
747
+ });
748
+
749
+ return Circle;
750
+
751
+ }());
752
+
753
+ var Point = (function () {
754
+
755
+ function Point(x, y) {
756
+
757
+ this.x = x;
758
+
759
+ this.y = y;
760
+
761
+ }
762
+
763
+ Object.defineProperty(Point.prototype, "cordinates", {
764
+
765
+ get: function () {
766
+
767
+ return { x: this.x, y: this.y };
768
+
769
+ },
770
+
771
+ enumerable: true,
772
+
773
+ configurable: true
774
+
775
+ });
776
+
777
+ return Point;
778
+
779
+ }());
780
+
781
+ var Cordinate = (function () {
782
+
783
+ function Cordinate(value) {
784
+
785
+ this.cordinate = value;
786
+
787
+ }
788
+
789
+ Object.defineProperty(Cordinate.prototype, "value", {
790
+
791
+ get: function () {
792
+
793
+ return this.cordinate;
794
+
795
+ },
796
+
797
+ enumerable: true,
798
+
799
+ configurable: true
800
+
801
+ });
802
+
803
+ return Cordinate;
804
+
805
+ }());
806
+
807
+ var Length = (function () {
808
+
809
+ function Length(value) {
810
+
811
+ this.length = value;
812
+
813
+ }
814
+
815
+ Object.defineProperty(Length.prototype, "value", {
816
+
817
+ get: function () {
818
+
819
+ return this.length;
820
+
821
+ },
822
+
823
+ enumerable: true,
824
+
825
+ configurable: true
826
+
827
+ });
828
+
829
+ return Length;
830
+
831
+ }());
852
832
 
853
833
  var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
854
834
 
835
+
836
+
855
837
  ```

3

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

2016/08/14 10:55

投稿

canvas
canvas

スコア62

test CHANGED
File without changes
test CHANGED
@@ -1,32 +1,26 @@
1
1
  #質問
2
2
 
3
- 別に立てた質問の[「円クラスをMVC的に実装したいです！」](https://teratail.com/questions/44161)に掲載したコードに登場するCircleクラスが持つpositionプロパティーにPositionXYクラスのインスタンスを代入するようにしてみました。
4
-
5
-
6
-
7
- ※Positionという名前のクラスがブラウザの組み込みクラスと衝突するため、PositionXYクラスにひとまずしておきました
8
-
9
-
10
-
11
- PositionXYクラスを新たに作成したのは良いのですが、どのようにCircleクラスのpositionプロパティーにpositionXYクラスのインスタンスをセットするのが適切なのか、いまいちわかりません。
12
-
13
-
14
-
15
- 以下に掲載する２パターンのコードのうち、パターン１はDI(依存性の注入）と呼ばれるパターンなのだと思います。
16
-
17
-
18
-
19
- DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。（そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…？)
20
-
21
-
22
-
23
- 質問としましては、(1)以下のようなコードの場合はどちらのパターンがより適しているでしょうか？
24
-
25
- PositionXYクラスというのはあまり他と置き換えられることが想定されないような類のクラスのように感じられます。
26
-
27
-
28
-
29
- また、もう１つの質問としましては(2)どういうオブジェクトを、またはどういうシチュエーションではDIをすべきなのでしょうか？
3
+ 以下に掲載する3パターンのコードのうち、パターン2とパターン3はDI(依存性の注入）と呼ばれるパターンなのだと思います。
4
+
5
+ 逆にパターン1はクラスのコンストラクタ内で依存しているクラスのインスタンスを生成しているものです。
6
+
7
+
8
+
9
+ DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。
10
+
11
+
12
+
13
+ というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。（そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…？)
14
+
15
+
16
+
17
+ 質問としましては以下２点となります。
18
+
19
+
20
+
21
+ (1)以下のようなコードの場合はどのパターンがより適しているでしょうか？
22
+
23
+ (2)どういうオブジェクトを、またはどういうシチュエーションではDIをすべきなのでしょうか？
30
24
 
31
25
 
32
26
 
@@ -38,69 +32,199 @@
38
32
 
39
33
  ## パターン1
40
34
 
41
- Circleクラス外でPositionXYクラスをインスタンス化し、Circleクラスのインスタンス化時にコンストラクタの引数にPositionXYクラスのインスタンスを注入して、Circleクラスのpositionプロパティーに代入。
42
-
43
35
  ```TypeScript
44
36
 
45
37
  class Circle {
46
38
 
47
-
48
-
39
+
40
+
49
- private position: PositionXY;
41
+ private point: Point;
50
-
42
+
51
- private radius: number;
43
+ private radius: Length;
44
+
45
+
46
+
52
-
47
+ constructor(x: number, y: number, radius: number) {
48
+
53
-
49
+ this.point = new Point(new Cordinate(x), new Cordinate(y));
50
+
54
-
51
+ this.radius = new Length(radius);
52
+
53
+ }
54
+
55
+
56
+
57
+
58
+
59
+ get position(): {x: Cordinate, y: Cordinate} {
60
+
61
+ return this.point.cordinates;
62
+
63
+ }
64
+
65
+
66
+
67
+
68
+
69
+ }
70
+
71
+
72
+
73
+
74
+
75
+ class Point {
76
+
77
+
78
+
79
+ private x: Cordinate;
80
+
81
+ private y: Cordinate;
82
+
83
+
84
+
85
+ constructor(x: Cordinate, y: Cordinate) {
86
+
87
+ this.x = x;
88
+
89
+ this.y = y;
90
+
91
+ }
92
+
93
+
94
+
95
+ get cordinates(): {x: Cordinate, y: Cordinate} {
96
+
97
+ return {x: this.x, y: this.y};
98
+
99
+ }
100
+
101
+
102
+
103
+ }
104
+
105
+
106
+
107
+ class Cordinate {
108
+
109
+
110
+
111
+ private cordinate: number;
112
+
113
+
114
+
115
+ constructor(value: number) {
116
+
117
+ this.cordinate = value;
118
+
119
+ }
120
+
121
+
122
+
123
+ get value(): number{
124
+
125
+ return this.cordinate;
126
+
127
+ }
128
+
129
+
130
+
131
+ }
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+ class Length {
140
+
141
+
142
+
143
+ private length: number;
144
+
145
+
146
+
147
+ constructor(value: number) {
148
+
149
+ this.length = value;
150
+
151
+ }
152
+
153
+
154
+
155
+ get value(): number {
156
+
157
+ return this.length;
158
+
159
+ }
160
+
161
+
162
+
163
+ }
164
+
165
+
166
+
167
+
168
+
169
+ var circle = new Circle(10, 10, 10);
170
+
171
+ ```
172
+
173
+
174
+
175
+
176
+
177
+
178
+
179
+ ## パターン2
180
+
181
+ ```TypeScript
182
+
183
+ class Circle {
184
+
185
+
186
+
187
+ private point: Point;
188
+
189
+ private radius: Length;
190
+
191
+
192
+
55
- constructor(position: PositionXY, radius: number) {
193
+ constructor(point: Point, radius: Length) {
56
-
194
+
57
- this.position = position;
195
+ this.point = point;
58
196
 
59
197
  this.radius = radius;
60
198
 
61
199
  }
62
200
 
63
-
64
-
65
- //左上を起点としたxy座標を返す
201
+
66
-
202
+
67
- public getPosition(): {x: number, y: number} {
203
+ get position(): {x: Cordinate, y: Cordinate} {
68
-
204
+
69
- return this.position.getPosition();
205
+ return this.point.cordinates;
70
-
206
+
71
- }
207
+ }
72
-
73
-
74
-
75
- //円の中心を起点としたxy座標を返す
208
+
76
-
77
- public getCenterPosition(): {x: number, y: number} {
209
+
78
-
79
- var positionAtLeftTop: {x: number, y: number} = this.position.getPosition();
210
+
80
-
81
- return {x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius};
82
-
83
- }
211
+ }
84
-
85
-
86
-
87
- }
212
+
88
-
89
-
90
-
91
-
92
-
213
+
214
+
215
+
216
+
93
- class PositionXY {
217
+ class Point {
94
-
95
-
96
-
218
+
219
+
220
+
97
- private x: number;
221
+ private x: Cordinate;
98
-
222
+
99
- private y: number;
223
+ private y: Cordinate;
100
-
101
-
102
-
224
+
225
+
226
+
103
- constructor(x: number, y: number) {
227
+ constructor(x: Cordinate, y: Cordinate) {
104
228
 
105
229
  this.x = x;
106
230
 
@@ -108,21 +232,87 @@
108
232
 
109
233
  }
110
234
 
111
-
112
-
235
+
236
+
113
- public getPosition(): {x: number, y: number} {
237
+ get cordinates(): {x: Cordinate, y: Cordinate} {
114
238
 
115
239
  return {x: this.x, y: this.y};
116
240
 
117
241
  }
118
242
 
119
-
120
-
243
+
244
+
245
+
246
+
247
+
248
+
121
- }
249
+ }
250
+
251
+
252
+
122
-
253
+ class Cordinate {
254
+
255
+
256
+
123
-
257
+ private cordinate: number;
258
+
259
+
260
+
124
-
261
+ constructor(value: number) {
262
+
263
+ this.cordinate = value;
264
+
265
+ }
266
+
267
+
268
+
269
+ get value(): number{
270
+
271
+ return this.cordinate;
272
+
273
+ }
274
+
275
+
276
+
277
+ }
278
+
279
+
280
+
281
+
282
+
283
+
284
+
285
+ class Length {
286
+
287
+
288
+
289
+ private length: number;
290
+
291
+
292
+
293
+ constructor(value: number) {
294
+
295
+ this.length = value;
296
+
297
+ }
298
+
299
+
300
+
301
+ get value(): number{
302
+
303
+ return this.length;
304
+
305
+ }
306
+
307
+
308
+
309
+ }
310
+
311
+
312
+
313
+
314
+
125
- var circle = new Circle(new PositionXY(10, 10), 10);
315
+ var circle = new Circle(new Point(new Cordinate(10), new Cordinate(10)), new Length(10));
126
316
 
127
317
  ```
128
318
 
@@ -130,73 +320,57 @@
130
320
 
131
321
 
132
322
 
133
-
134
-
135
- ## パターン2
323
+ ## パターン3
136
-
137
- Circleクラス内でPositionXYクラスをインスタンス化し、Circleクラスのpositionプロパティーに代入。
138
324
 
139
325
  ```TypeScript
140
326
 
141
327
  class Circle {
142
328
 
143
-
144
-
145
- private position: PositionXY;
146
-
147
- private radius: number;
148
-
149
-
150
-
151
- constructor(x: number, y: number, radius: number) {
152
-
153
- this.position = new PositionXY(x, y);
154
-
155
- this.radius = radius;
156
-
157
- }
158
-
159
-
160
-
161
- //左上を起点としたxy座標を返す
162
-
163
- public getPosition(): {x: number, y: number} {
164
-
165
- return this.position.getPosition();
166
-
167
- }
168
-
169
-
170
-
171
- //円の中心を起点としたxy座標を返す
172
-
173
- public getCenterPosition(): {x: number, y: number} {
174
-
175
- var positionAtLeftTop: {x: number, y: number} = this.position.getPosition();
176
-
177
- return {x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius};
178
-
179
- }
180
-
181
-
182
-
183
- }
184
-
185
-
186
-
187
-
188
-
189
- class PositionXY {
190
-
191
-
192
-
193
- private x: number;
194
-
195
- private y: number;
196
-
197
-
198
-
199
- constructor(x: number, y: number) {
329
+
330
+
331
+ private point: Point;
332
+
333
+ private radius: Length;
334
+
335
+
336
+
337
+ constructor(x: Cordinate, y: Cordinate, radius: number) {
338
+
339
+ this.point = new Point(x, y);
340
+
341
+ this.radius = new Length(radius);
342
+
343
+ }
344
+
345
+
346
+
347
+ get position(): {x: Cordinate, y: Cordinate} {
348
+
349
+ return this.point.cordinates;
350
+
351
+ }
352
+
353
+
354
+
355
+
356
+
357
+ }
358
+
359
+
360
+
361
+
362
+
363
+ class Point {
364
+
365
+
366
+
367
+ private x: Cordinate;
368
+
369
+ private y: Cordinate;
370
+
371
+
372
+
373
+ constructor(x: Cordinate, y: Cordinate) {
200
374
 
201
375
  this.x = x;
202
376
 
@@ -204,9 +378,9 @@
204
378
 
205
379
  }
206
380
 
207
-
208
-
381
+
382
+
209
- public getPosition(): {x: number, y: number} {
383
+ get cordinates(): {x: Cordinate, y: Cordinate} {
210
384
 
211
385
  return {x: this.x, y: this.y};
212
386
 
@@ -218,6 +392,196 @@
218
392
 
219
393
 
220
394
 
395
+ class Cordinate {
396
+
397
+
398
+
399
+ private cordinate: number;
400
+
401
+
402
+
403
+ constructor(value: number) {
404
+
405
+ this.cordinate = value;
406
+
407
+ }
408
+
409
+
410
+
411
+ get value(): number{
412
+
413
+ return this.cordinate;
414
+
415
+ }
416
+
417
+
418
+
419
+ }
420
+
421
+
422
+
423
+
424
+
425
+ class Length {
426
+
427
+
428
+
429
+ private length: number;
430
+
431
+
432
+
433
+ constructor(value: number) {
434
+
435
+ this.length = value;
436
+
437
+ }
438
+
439
+
440
+
441
+ get value(): number {
442
+
443
+ return this.length;
444
+
445
+ }
446
+
447
+
448
+
449
+ }
450
+
451
+
452
+
453
+
454
+
455
+ var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
456
+
457
+ ```
458
+
459
+
460
+
461
+
462
+
463
+ ## 追記(14:29)
464
+
465
+ [TypeScript Playground - https://www.typescriptlang.org/play/](https://www.typescriptlang.org/play/)
466
+
467
+
468
+
469
+ TypeScriptのJavaScriptにコンパイルされたコードの掲載リクエストがありましたので追記させて頂きます。
470
+
471
+
472
+
473
+ ## パターン1のJavaScriptコード
474
+
475
+ ```JavaScript
476
+
477
+ var Circle = (function () {
478
+
479
+ function Circle(x, y, radius) {
480
+
481
+ this.point = new Point(new Cordinate(x), new Cordinate(y));
482
+
483
+ this.radius = new Length(radius);
484
+
485
+ }
486
+
487
+ Object.defineProperty(Circle.prototype, "position", {
488
+
489
+ get: function () {
490
+
491
+ return this.point.cordinates;
492
+
493
+ },
494
+
495
+ enumerable: true,
496
+
497
+ configurable: true
498
+
499
+ });
500
+
501
+ return Circle;
502
+
503
+ }());
504
+
505
+ var Point = (function () {
506
+
507
+ function Point(x, y) {
508
+
509
+ this.x = x;
510
+
511
+ this.y = y;
512
+
513
+ }
514
+
515
+ Object.defineProperty(Point.prototype, "cordinates", {
516
+
517
+ get: function () {
518
+
519
+ return { x: this.x, y: this.y };
520
+
521
+ },
522
+
523
+ enumerable: true,
524
+
525
+ configurable: true
526
+
527
+ });
528
+
529
+ return Point;
530
+
531
+ }());
532
+
533
+ var Cordinate = (function () {
534
+
535
+ function Cordinate(value) {
536
+
537
+ this.cordinate = value;
538
+
539
+ }
540
+
541
+ Object.defineProperty(Cordinate.prototype, "value", {
542
+
543
+ get: function () {
544
+
545
+ return this.cordinate;
546
+
547
+ },
548
+
549
+ enumerable: true,
550
+
551
+ configurable: true
552
+
553
+ });
554
+
555
+ return Cordinate;
556
+
557
+ }());
558
+
559
+ var Length = (function () {
560
+
561
+ function Length(value) {
562
+
563
+ this.length = value;
564
+
565
+ }
566
+
567
+ Object.defineProperty(Length.prototype, "value", {
568
+
569
+ get: function () {
570
+
571
+ return this.length;
572
+
573
+ },
574
+
575
+ enumerable: true,
576
+
577
+ configurable: true
578
+
579
+ });
580
+
581
+ return Length;
582
+
583
+ }());
584
+
221
585
  var circle = new Circle(10, 10, 10);
222
586
 
223
587
 
@@ -228,55 +592,43 @@
228
592
 
229
593
 
230
594
 
231
- ## 追記(14:29)
595
+
232
-
233
- [TypeScript Playground - https://www.typescriptlang.org/play/](https://www.typescriptlang.org/play/)
596
+
234
-
235
-
236
-
237
- TypeScriptのJavaScriptにコンパイルされたコードの掲載リクエストがありましたので追記させて頂きます。
238
-
239
-
240
-
241
- ### パターン１のJavaScriptにコンパイルされたコード
597
+ ## パターン2のJavaScriptコード
242
598
 
243
599
  ```JavaScript
244
600
 
245
601
  var Circle = (function () {
246
602
 
247
- function Circle(position, radius) {
603
+ function Circle(point, radius) {
248
-
604
+
249
- this.position = position;
605
+ this.point = point;
250
606
 
251
607
  this.radius = radius;
252
608
 
253
609
  }
254
610
 
255
- //左上を起点としたxy座標を返す
256
-
257
- Circle.prototype.getPosition = function () {
611
+ Object.defineProperty(Circle.prototype, "position", {
612
+
258
-
613
+ get: function () {
614
+
259
- return this.position.getPosition();
615
+ return this.point.cordinates;
616
+
260
-
617
+ },
618
+
619
+ enumerable: true,
620
+
621
+ configurable: true
622
+
261
- };
623
+ });
262
-
263
- //円の中心を起点としたxy座標を返す
264
-
265
- Circle.prototype.getCenterPosition = function () {
266
-
267
- var positionAtLeftTop = this.position.getPosition();
268
-
269
- return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
270
-
271
- };
272
624
 
273
625
  return Circle;
274
626
 
275
627
  }());
276
628
 
277
- var PositionXY = (function () {
629
+ var Point = (function () {
278
-
630
+
279
- function PositionXY(x, y) {
631
+ function Point(x, y) {
280
632
 
281
633
  this.x = x;
282
634
 
@@ -284,78 +636,220 @@
284
636
 
285
637
  }
286
638
 
287
- PositionXY.prototype.getPosition = function () {
639
+ Object.defineProperty(Point.prototype, "cordinates", {
640
+
288
-
641
+ get: function () {
642
+
289
- return { x: this.x, y: this.y };
643
+ return { x: this.x, y: this.y };
644
+
290
-
645
+ },
646
+
647
+ enumerable: true,
648
+
649
+ configurable: true
650
+
291
- };
651
+ });
292
-
652
+
293
- return PositionXY;
653
+ return Point;
294
654
 
295
655
  }());
296
656
 
657
+ var Cordinate = (function () {
658
+
659
+ function Cordinate(value) {
660
+
661
+ this.cordinate = value;
662
+
663
+ }
664
+
665
+ Object.defineProperty(Cordinate.prototype, "value", {
666
+
667
+ get: function () {
668
+
669
+ return this.cordinate;
670
+
671
+ },
672
+
673
+ enumerable: true,
674
+
675
+ configurable: true
676
+
677
+ });
678
+
679
+ return Cordinate;
680
+
681
+ }());
682
+
683
+ var Length = (function () {
684
+
685
+ function Length(value) {
686
+
687
+ this.length = value;
688
+
689
+ }
690
+
691
+ Object.defineProperty(Length.prototype, "value", {
692
+
693
+ get: function () {
694
+
695
+ return this.length;
696
+
697
+ },
698
+
699
+ enumerable: true,
700
+
701
+ configurable: true
702
+
703
+ });
704
+
705
+ return Length;
706
+
707
+ }());
708
+
297
- var circle = new Circle(new PositionXY(10, 10), 10);
709
+ var circle = new Circle(new Point(new Cordinate(10), new Cordinate(10)), new Length(10));
710
+
711
+
298
712
 
299
713
  ```
300
714
 
301
715
 
302
716
 
717
+
718
+
719
+
720
+
303
- ### パターン2のJavaScriptにコンパイルされたコード
721
+ ## パターン3のJavaScriptコード
304
722
 
305
723
  ```JavaScript
306
724
 
307
- var Circle = (function () {
308
-
309
- function Circle(x, y, radius) {
310
-
311
- this.position = new PositionXY(x, y);
312
-
313
- this.radius = radius;
314
-
315
- }
316
-
317
- //左上を起点としたxy座標を返す
318
-
319
- Circle.prototype.getPosition = function () {
320
-
321
- return this.position.getPosition();
322
-
323
- };
324
-
325
- //円の中心を起点としたxy座標を返す
326
-
327
- Circle.prototype.getCenterPosition = function () {
328
-
329
- var positionAtLeftTop = this.position.getPosition();
330
-
331
- return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
332
-
333
- };
334
-
335
- return Circle;
336
-
337
- }());
338
-
339
- var PositionXY = (function () {
340
-
341
- function PositionXY(x, y) {
342
-
343
- this.x = x;
344
-
345
- this.y = y;
346
-
347
- }
348
-
349
- PositionXY.prototype.getPosition = function () {
350
-
351
- return { x: this.x, y: this.y };
352
-
353
- };
354
-
355
- return PositionXY;
356
-
357
- }());
358
-
359
- var circle = new Circle(10, 10, 10);
725
+ class Circle {
726
+
727
+
728
+
729
+ private point: Point;
730
+
731
+ private radius: Length;
732
+
733
+
734
+
735
+ constructor(x: Cordinate, y: Cordinate, radius: number) {
736
+
737
+ this.point = new Point(x, y);
738
+
739
+ this.radius = new Length(radius);
740
+
741
+ }
742
+
743
+
744
+
745
+ get position(): {x: Cordinate, y: Cordinate} {
746
+
747
+ return this.point.cordinates;
748
+
749
+ }
750
+
751
+
752
+
753
+
754
+
755
+ }
756
+
757
+
758
+
759
+
760
+
761
+ class Point {
762
+
763
+
764
+
765
+ private x: Cordinate;
766
+
767
+ private y: Cordinate;
768
+
769
+
770
+
771
+ constructor(x: Cordinate, y: Cordinate) {
772
+
773
+ this.x = x;
774
+
775
+ this.y = y;
776
+
777
+ }
778
+
779
+
780
+
781
+ get cordinates(): {x: Cordinate, y: Cordinate} {
782
+
783
+ return {x: this.x, y: this.y};
784
+
785
+ }
786
+
787
+
788
+
789
+ }
790
+
791
+
792
+
793
+ class Cordinate {
794
+
795
+
796
+
797
+ private cordinate: number;
798
+
799
+
800
+
801
+ constructor(value: number) {
802
+
803
+ this.cordinate = value;
804
+
805
+ }
806
+
807
+
808
+
809
+ get value(): number{
810
+
811
+ return this.cordinate;
812
+
813
+ }
814
+
815
+
816
+
817
+ }
818
+
819
+
820
+
821
+
822
+
823
+ class Length {
824
+
825
+
826
+
827
+ private length: number;
828
+
829
+
830
+
831
+ constructor(value: number) {
832
+
833
+ this.length = value;
834
+
835
+ }
836
+
837
+
838
+
839
+ get value(): number {
840
+
841
+ return this.length;
842
+
843
+ }
844
+
845
+
846
+
847
+ }
848
+
849
+
850
+
851
+
852
+
853
+ var circle = new Circle(new Cordinate(10), new Cordinate(10), 10);
360
854
 
361
855
  ```

2

jsコードの追加

2016/08/14 10:54

投稿

canvas
canvas

スコア62

test CHANGED
File without changes
test CHANGED
@@ -223,3 +223,139 @@
223
223
 
224
224
 
225
225
  ```
226
+
227
+
228
+
229
+
230
+
231
+ ## 追記(14:29)
232
+
233
+ [TypeScript Playground - https://www.typescriptlang.org/play/](https://www.typescriptlang.org/play/)
234
+
235
+
236
+
237
+ TypeScriptのJavaScriptにコンパイルされたコードの掲載リクエストがありましたので追記させて頂きます。
238
+
239
+
240
+
241
+ ### パターン１のJavaScriptにコンパイルされたコード
242
+
243
+ ```JavaScript
244
+
245
+ var Circle = (function () {
246
+
247
+ function Circle(position, radius) {
248
+
249
+ this.position = position;
250
+
251
+ this.radius = radius;
252
+
253
+ }
254
+
255
+ //左上を起点としたxy座標を返す
256
+
257
+ Circle.prototype.getPosition = function () {
258
+
259
+ return this.position.getPosition();
260
+
261
+ };
262
+
263
+ //円の中心を起点としたxy座標を返す
264
+
265
+ Circle.prototype.getCenterPosition = function () {
266
+
267
+ var positionAtLeftTop = this.position.getPosition();
268
+
269
+ return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
270
+
271
+ };
272
+
273
+ return Circle;
274
+
275
+ }());
276
+
277
+ var PositionXY = (function () {
278
+
279
+ function PositionXY(x, y) {
280
+
281
+ this.x = x;
282
+
283
+ this.y = y;
284
+
285
+ }
286
+
287
+ PositionXY.prototype.getPosition = function () {
288
+
289
+ return { x: this.x, y: this.y };
290
+
291
+ };
292
+
293
+ return PositionXY;
294
+
295
+ }());
296
+
297
+ var circle = new Circle(new PositionXY(10, 10), 10);
298
+
299
+ ```
300
+
301
+
302
+
303
+ ### パターン2のJavaScriptにコンパイルされたコード
304
+
305
+ ```JavaScript
306
+
307
+ var Circle = (function () {
308
+
309
+ function Circle(x, y, radius) {
310
+
311
+ this.position = new PositionXY(x, y);
312
+
313
+ this.radius = radius;
314
+
315
+ }
316
+
317
+ //左上を起点としたxy座標を返す
318
+
319
+ Circle.prototype.getPosition = function () {
320
+
321
+ return this.position.getPosition();
322
+
323
+ };
324
+
325
+ //円の中心を起点としたxy座標を返す
326
+
327
+ Circle.prototype.getCenterPosition = function () {
328
+
329
+ var positionAtLeftTop = this.position.getPosition();
330
+
331
+ return { x: positionAtLeftTop.x + this.radius, y: positionAtLeftTop.y + this.radius };
332
+
333
+ };
334
+
335
+ return Circle;
336
+
337
+ }());
338
+
339
+ var PositionXY = (function () {
340
+
341
+ function PositionXY(x, y) {
342
+
343
+ this.x = x;
344
+
345
+ this.y = y;
346
+
347
+ }
348
+
349
+ PositionXY.prototype.getPosition = function () {
350
+
351
+ return { x: this.x, y: this.y };
352
+
353
+ };
354
+
355
+ return PositionXY;
356
+
357
+ }());
358
+
359
+ var circle = new Circle(10, 10, 10);
360
+
361
+ ```

1

\)漏れ

2016/08/14 05:32

投稿

canvas
canvas

スコア62

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。（そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…？
19
+ DIすることでオブジェクト間の依存度を下げることが出来るのはなんとなく理解していますが、何でもかんでもDIすれば良いっていう話でもないような気がしています。というのも、今回のケースではオブジェクトを一つ引数に渡して済む程度の話ですが、依存するオブジェクトが複数あった場合、その数分だけ引数に渡すとなった場合、煩雑な気がしてしまいます。（そこでDIコンテナが登場という話になるのかもしれませんが、それでも、なんでもDIしたほうが良いという話なのでしょうか…？)
20
20
 
21
21
 
22
22