質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

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

Q&A

解決済

1回答

265閲覧

どなたかこのコードの解説をしてください(>_<)

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

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

0グッド

2クリップ

投稿2017/12/14 03:33

編集2017/12/14 06:07

typescript

1class ButtonDOM { 2 elm: HTMLElement; 3 static create(): ButtonDOM { 4 let button = new ButtonDOM(); 5 button.elm = document.createElement("button"); 6 return button; 7 } 8 9 addLabel(labelText: string): ButtonDOM { 10 this.elm.appendChild(document.createTextNode(labelText)); 11 return this; 12 } 13 14 onClick(content: string): ButtonDOM { 15 this.elm.onclick = function () { 16 alert(content); 17 }; 18 return this; 19 } 20 21} 22 23let myButton = ButtonDOM.create() 24 .addLabel("押してください").onClick("押しました"); 25 26document.body.appendChild(myButton.elm);

このコードの流れを理解できないです。

まずクラス ButtonDOMのフィールドには変数 elmが用意されている。

次に、その中のstaticなメソッド(create)で ButtonDOMクラスからインスタンス(let button)を生成する。

これによってstaticなメソッド createの中で、button.elmといった形で ButtonDOMクラスの変数を使うことができる。

そこに要素を格納してから buttonインスタンスを返す。

ここまではなんとなくですが理解できたようなできてないような気がします。

まず上記の理解は合ってますでしょうか。

分からないところは、

・ static create(): ButtonDOM の :ButtonDOM のところ。ここは何をしているのでしょうか。

・ addLabelメソッドとonClickメソッドのreturn this;というところのthisに何が入っているのか。

・ ButtonDOM.create().addLabel("押してください").onClick("押しました");
という書き方ができるのは createメソッドが、 ButtonDOMクラスのインスタンスを返すから、このような表記で addlabelメソッドが呼べるのでしょうか。
そしてそこに続けて onClickメソッドが呼べるのは onClickは同じようにクラスのインスタンスを返す。つまり return this;の thisはクラスのインスタンス指しているのでしょうか。

・ ファクトリーメソッド(create)の利点を教えてください。メソッドの中で自分が所属するクラスのインスタンスを生成し返す。というこの書き方のメリットを教えてください。

読みづらいところが多々あって申し訳ないです。
どなたか教えてください(>_<)
分からないところの一部でもかまいません。

追記
ぼくの、「分からないところ」の項目を無視して独自の解説をしてくださってもかまいません。
どのような形であれ回答をくださったらとても嬉しいです。

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

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

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

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

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

defghi1977

2017/12/14 04:01

「ファクトリーメソッドの利点を教えてください。 」は質題と全く関係のない別の質問ですから, 横着せず別のトピックスとして質問を立てるべきです.
退会済みユーザー

退会済みユーザー

2017/12/14 04:08

修正以来ありがとうございます!!! すみません、メソッドcreateって、ファクトリメソッドではないのですか!?ぼくの勘違いだったら申し訳ないです
defghi1977

2017/12/14 04:17

「ファクトリメソッド」は一般にデザインパターン分野での用語ですので, 不用意に用いると混乱をきたします.
退会済みユーザー

退会済みユーザー

2017/12/14 06:04 編集

なるほどです…。ぼくの書き方が明らかに説明不足すぎました。修正いたします。
defghi1977

2017/12/14 08:45

> ファクトリーメソッド(create)の利点を教えてください。TypeScriptをよく判っていませんが, new 演算子によるオブジェクト生成のショートカットに過ぎず, むしろnew ButtonDOM()と記述すると破綻しそうなので, 取り立ててメリットがあるように思えません. 単にコーディングの癖なのでは?
guest

回答1

0

ベストアンサー

・static create(): ButtonDOM の :ButtonDOM のところ。ここは何をしているのでしょうか。

そこには戻り値の型を記載します。→参考
戻り値の型は省略しても構いませんのでこのコードは丁寧に書かれていることになります。

・ addLabelメソッドとonClickメソッドのreturn this;というところのthisに何が入っているのか。

javascriptのthisは大変難しいですが、ひとまず説明を読んで下さい。

いったん、クラス内でthisが使われている場合は「生成されたインスタンス自身」を指すという理解で良いと思います。
つまりこの場合thisはButtonDOMのインスタンスを指しますので this.elm というような書き方ができます。

・ ButtonDOM.create().addLabel("押してください").onClick("押しました");
という書き方ができるのは createメソッドが、 ButtonDOMクラスのインスタンスを返すから、このような表記で addlabelメソッドが呼べるのでしょうか。
そしてそこに続けて onClickメソッドが呼べるのは onClickは同じようにクラスのインスタンスを返す。つまり return this;の thisはクラスのインスタンス指しているのでしょうか。

そのとおりです。

・ ファクトリーメソッドの利点を教えてください。

これは何のことを指されているのか逆にお聞きしたいのですが、こういうことでしょうか。

投稿2017/12/14 04:11

編集2017/12/14 04:12
akabee

総合スコア1947

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

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

退会済みユーザー

退会済みユーザー

2017/12/14 06:23 編集

昨日もありがとうございました。thisについて、「生成されたインスタンス自身」として理解すればある程度理解できました。ぼくは、例えばaddLabelメソッドで this.elmと宣言すれば、createクラスの中のelmとして解釈していました。正しくは、createクラスのインスタンスのelmということなのでしょうか。 インスタンスは、クラスの外部で newすることで生成される形以外ないと勝手に思っていたのですが、 あるメソッドから見た自分が所属しているクラスは既にインスタンス化されていて、それがthisであるという解釈でよろしいでしょうか。 例えば, addLabelメソッドから見たButtonDOMクラスは既にインスタンス化されていてthisとして使えるのでしょうか。しかしそう考えると static create(): ButtonDOM { let button = new ButtonDOM(); button.elm = document.createElement("button"); return button; } といった風にファクトリメソッドの中でnewする意味が分からなくなってきました。 ここに関しては最初にnewしなければいけない。 つまりthisをインスタンスとして使うことはできないんですよね。
退会済みユーザー

退会済みユーザー

2017/12/14 06:31 編集

あるいは、ファクトリメソッドを実行することによってインスタンス化されたクラスが返って来るから、そのインスタンスの中のメソッドでthisという表現が有効になる。という解釈が正しいでしょうか。 連投してすみません。 「生成された」インスタンス自身ということはそういうことなのでしょうか。
akabee

2017/12/14 07:56 編集

>ファクトリメソッドを実行することによってインスタンス化されたクラスが返って来るから、そのインスタンスの中のメソッドでthisという表現が有効になる。という解釈が正しいでしょうか。 文章表現だけを捉えますとこの表現が最も正しい理解のように思います。 この疑問を完全に理解するにはクラスとインスタンスの考え方を一度勉強してください。→http://www.rsch.tuis.ac.jp/~ohmi/software-intro/objectoriented.html オブジェクト指向は、やりたいことを現実に照らし合わせモデル化し、その後でプログラミングコードとして表現するという考え方です。 クラスとインスタンスは、その考え方の表現方法(プログラミングテクニック)に過ぎません。 ここでやりたいことはどんなことかというと、 1.ボタンは一つもありません。 2.新しいボタンを生成することができます。 3.作ったボタンには、ラベルを追加することができます。 4.作ったボタンには、指定した文字を表示するようなクリックイベントを追加することができます。 こういうことでしょうね。 こういったことを行うためのモデル化を行った結果がButtonDOMクラスです。 インスタンスを生成するためにcreateメソッド、ラベルを追加するためにaddLabelメソッド、クリックイベントを追加するためにonClickメソッドを作ってあります。 インスタンスを生成するには let myButton = ButtonDOM.create() のように記述します。このとき、myButtonに格納されているのが、ButtonDOMクラスのインスタンスです。 myButtonの中のthisは、全てmyButtonを指します。 もうひとつインスタンスを作ってみましょう。 let yourButton = ButtonDOM.create() このyourButtonの中のthisはyourButtonを指します。 なお「ファクトリメソッドの中でnewする意味が分からなくなってきました。」については、いまいちファクトリメソッドの指しているものが分かりませんが、クラスを生成するメソッドを指しているようなのでその意味でお答えしておきますと、これはstaticメソッドなのでそういう動きが可能になっており、やや特殊な例のように感じます。 通常、このようにインスタンスを生成するメソッドはクラス内でコンストラクタとして実装されるように思うのですが、そこは何故そうなっているのか、教本(でしたよね?)の内容に従ってみてください。 staticメソッドでもthisは恐らく利用可能ですが、インスタンスを指すという動きにはならないと思います。(自信ありません。不勉強ですみません) 回答になっているか分かりませんが、参考になれば。
akabee

2017/12/14 08:18 編集

補足欄にもdefghi1977さんが指摘して頂いていますがファクトリメソッドとはコンストラクタと似た働きをするようなデザインパターンのようですね。不勉強で知りませんでした。 https://qiita.com/torinist/items/9dd095d9dcb4b2621948 そういう意味では、ButtonDOMクラスのcreateメソッドは確かにファクトリメソッドなのでしょう。 理解が追いついていないのでこれの利点等については語ることができません。気になるようでしたら、これを主題とした別途質問をされるのが良いと思います。
退会済みユーザー

退会済みユーザー

2017/12/14 08:48

ありがとうございます! 「ファクトリメソッドの中でnewする意味が分からなくなってきました。」 というのは、その下の二つのメソッドの中でthisといきなり書いてインスタンスを扱えるのに、なぜこのstaticなメソッドではインスタンスを使うためにnewしなきゃいけないんだと思ったからです。 これは理解を間違えていました。 ぼくはstaticなメソッドと、その下の二つのメソッドを並列的に捉えてしまっていて… でもそうではなくて、staticメソッドのインスタンスの中にある二つのメソッドを扱っていたので、並列ではなかったです。 あまりにも説明が下手ですいません、理解できたと思います。 インスタンス化したことによって、インスタンスの中のメソッドの中で、thisという表現が有効になる で理解しました(>_<) ファクトリメソッドについてはおっしゃてるように、なぜコンストラクタでやらないのかという疑問です。 これについてはもう一度参考書を読み直してみます。 一応参考書のファクトリメソッドの説明は、 「メソッドの中でオブジェクトを新規作成し、属性値を与えて、そのオブジェクトを返すというメソッドです」 とあります笑 少し過去に戻って読み直してみます、昨日に引き続きありがとうございました(>_<)
akabee

2017/12/14 08:57

コンストラクタと何が違うのか、ファクトリメソッドの明確なメリットが分かるようなコード例が記載されていないのであれば、教本をあまり信用せず、そんなことをすることもあるのか程度で留めておいても良いと思いますよ。 実は参考書を書いている人自身も良く分かっておらずとりあえず紹介しただけ、みたいなケースもありますので笑
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問