🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

692閲覧

メソッドをどのクラスで定義するかの判断基準

toromou

総合スコア30

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/11/21 06:47

TypeScriptやオブジェクト指向の勉強としてチンチロリンっぽいものを作っています。
MVCモデルを参考にして、Modelクラス・Viewクラス・Controllerクラスを定義しました。
これまで作ったプログラムは以下のようになっています。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>チンチロ</title> 8 <script src="bundle.js"></script> 9</head> 10<body> 11 <button class="btn">サイコロを振る</button> 12 <p class="result"></p> 13</body> 14</html>

typescript

1// サイコロクラス 2class Dice { 3 pips: number | null = null; 4} 5 6// プレイヤークラス 7class Player { 8 dices: Dice[] = []; 9 roll: string | null = null; 10 11 constructor() { 12 for (let i = 0; i < 3; i++) { 13 this.dices.push(new Dice()); 14 } 15 } 16} 17 18// Modelクラス 19class Model { 20 player = new Player; 21 22 // サイコロを振る 23 rollDice() { 24 for (let dice of this.player.dices) { 25 dice.pips = Math.floor(Math.random() * 6) + 1; 26 } 27 } 28 29 // 出目を判定 30 analyzeRoll() { 31 const pips = []; 32 for (let dice of this.player.dices) { 33 pips.push(dice.pips); 34 } 35 pips.sort(); 36 37 const dice0 = pips[0]; 38 const dice1 = pips[1]; 39 const dice2 = pips[2]; 40 41 const joinStr = [dice0, dice1, dice2].join('') 42 43 const flag1 = dice0 === dice1; 44 const flag2 = dice1 === dice2; 45 46 const result = 47 flag1 && flag2 ? dice1 + 'ゾロ' : 48 flag1 && !flag2 ? dice2 + '' : 49 !flag1 && flag2 ? dice0 + '' : 50 joinStr === '456' ? 'シゴロ' : 51 joinStr === '123' ? 'ヒフミ' : 52 '目無し'; 53 54 this.player.roll = result; 55 } 56} 57 58// Viewクラス 59class View { 60 constructor(public model: Model) { 61 } 62 63 // 結果を表示 64 showResult() { 65 const pips = []; 66 for (let dice of this.model.player.dices) { 67 pips.push(dice.pips); 68 } 69 $('.result').html(`${pips[0]} ${pips[1]} ${pips[2]}: ${this.model.player.roll}`); 70 } 71} 72 73// Controllerクラス 74class Controller { 75 constructor(public model: Model, public view: View) { 76 $('.btn').on('click', () => { 77 this.clickBtn(); 78 }); 79 } 80 81 // 「サイコロを振る」ボタンをクリックした際の動作 82 clickBtn() { 83 this.model.rollDice(); 84 this.model.analyzeRoll(); 85 this.view.showResult(); 86 } 87} 88 89// チンチロクラス 90class Chinchiro { 91 model = new Model(); 92 view = new View(this.model); 93 controller = new Controller(this.model, this.view); 94} 95 96// メイン処理 97$(() => { 98 new Chinchiro(); 99});

ModelクラスはPlayerクラスのインスタンスをプロパティに持ち、
PlayerクラスはDiceクラスのインスタンスをプロパティに持つ、という風に入れ子のような状態になっています。
このとき、rollDiceメソッドやanalyzeRollメソッドはPlayerクラスやDiceクラスのメソッドとして定義すべきなのでしょうか?

他にもおかしな部分があればご教授いただけたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

オブジェクト指向の分析、設計についてオーソドックスな手法はご存知でしょうか?
未習得な状態ならその考え方を学習された方がよろしいかと。
付け焼き刃の知識で済ませても理解しきれないと思います。
急がば回れです。

その上でご自身が扱う問題領域に照らして、デザインパターンの適用ができそうかどうかなど評価しつつ適用していく感じでしょうか。デザインパターンも学習が必要なことは申し上げるまでもありませんが。

投稿2019/11/21 21:17

編集2019/11/22 03:50
ironya

総合スコア456

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toromou

2019/11/22 03:22

アドバイス頂きありがとうございます。 オブジェクト指向の分析や設計について1から勉強してみたいのですが、 JavaScriptやTypeScriptを扱った記事があまりないように思います。 例えば下記の記事ではJavaを扱っていますが、学習のうえで支障はないでしょうか? https://thinkit.co.jp/series/6932
ironya

2019/11/22 03:52

オブジェクト指向の分析、設計の考え方で、基礎部分の知識としては Java でも問題ないと思います。 プログラミング言語の特性による差異は追って身につけられると良いでしょう。
toromou

2019/11/22 04:01

ご親切にありがとうございした。 時間はかかりそうですが頑張ります。
ironya

2019/11/22 04:03

頑張ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問