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

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

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

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

jQuery

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

Q&A

解決済

ES2022 プライベート・フィールドについて

taka_oct092018
taka_oct092018

総合スコア116

JavaScript

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

jQuery

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

2回答

0グッド

0クリップ

188閲覧

投稿2022/11/29 06:53

前提

専門書のコードをES2022仕様で書き直してみたところ、
constructor内のhtmlはthis.#htmlとして初期化しようとすると、
div要素が生成されませんでした。エラーが表示される訳ではないのですが、
この不具合がよく分かりません。どうしてなのでしょうか。
よろしくお願い致します。

「改訂新版jQuery本格入門_サンプルコード_P282_list6-42」より

実現したいこと

理由を知りたい。

発生している問題・エラーメッセージ

なし。

jQuery

1 2// 改訂新版jQuery本格入門_サンプルコード_P282_list6-42 3// ボタンとカウンタの値を表示する要素を持つカウンタウィジェット 4var CounterWidget = function(id, btnVal, initial, step) { 5 // ウィジェットの初期値を設定 6 this.id = id || 'counter'; 7 this.btnVal = btnVal || 'カウンタ'; 8 this.count = !isNaN(initial) && Number(initial) || 0; 9 this.step = !isNaN(step) && Number(step) || 1; 10 11 // HTMLの生成 12 this.html = '<div id="' + id + '" class="counter-widget">' + 13 '<input type="button" value="' + btnVal + '" />' + 14 '<span></span>' + 15 '</div>'; 16}; 17 18CounterWidget.prototype = { 19 inc: function() { // カウンタの加算 20 this.count += this.step; 21 }, 22 set: function(tag) { // カウンタの値を表示 23 tag.text(this.count); // tagはウィジェット内の<span> 24 }, 25 click: function() { // ボタンクリック時のイベント処理 26 this.inc(); this.set(this.tag); 27 }, 28 appendTo: function(toElem) { // ウィジェットのHTML文書への追加 29 this.root = $(this.html).appendTo(toElem); 30 $(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click')); 31 this.tag = this.root.find('span'); 32 this.tag.promise().done($.proxy(this, 'set')); // カウンタの初期値を表示 33 return this; 34 }, 35 remove: function() { 36 $(this.root).off('click', 'input[type="button"]'); 37 $(this.root).remove(); 38 } 39}; 40 41new CounterWidget('counter1', '増えるカウンタ').appendTo(document.body); 42new CounterWidget('counter2', '減るカウンタ', 0, -1).appendTo(document.body);

jQuery

1 // 編集後 2 // ボタンとカウンタの値を表示する要素を持つカウンタウィジェット 3 class CounterWidget { 4 #btnVal; 5 #count; 6 #html; 7 #id; 8 #initial; 9 #step; 10 11 constructor(id, btnVal, initial, step, count, html) { 12 13 // ウィジェットの初期値を設定 14 this.#btnVal = btnVal || `カウンタ`; 15 this.#count = !Number.isNaN(initial) && Number(initial) || 0; 16 this.#id = id || 'counter'; 17 this.#step = !Number.isNaN(step) && Number(step) || 1; 18 19 // 問題の箇所 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 20 //this.#html = html とするとエラーにならないがdiv要素が生成されない 21 this.html = html 22 || 23 // HTMLの生成 24 `<div id="${ id }" class="counter-widget"> 25 <input type="button" value="${ btnVal }"> 26 <span></span> 27 </div>`; 28 } 29 30 // カウンタの加算 31 inc() { this.#count += this.#step; } 32 33 // カウンタの値を表示。 tagはウィジェット内の<span> 34 set(tag) { tag.text(this.#count); } 35 36 // ボタンクリック時のイベント処理 37 click() { 38 this.inc(); 39 this.set(this.tag); 40 } 41 42 // ウィジェットのHTML文書への追加 43 appendTo(toElem) { 44 this.root = $(this.html).appendTo(toElem); 45 $(this.root).on('click', 'input[type="button"]', $.proxy(this, 'click')); 46 this.tag = this.root.find('span'); 47 this.tag 48 .promise() 49 .done($.proxy(this, 'set')); // カウンタの初期値を表示 50 51 return this; 52 } 53 54 remove() { 55 $(this.root).off('click', 'input[type="button"]'); 56 $(this.root).remove(); 57 } 58 } 59 60 new CounterWidget('counter1', '増えるカウンタ').appendTo(document.body); 61 new CounterWidget('counter2', '減るカウンタ', 0, -1).appendTo(document.body);

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

appendTo(toElem) の中の this.htmlthis.#html にすれば動くのではないでしょうか。

投稿2022/11/29 06:58

int32_t

総合スコア17200

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

自己解決

this.root = $(this.html).appendTo(toElem);

this.root = $(this.#html).appendTo(toElem);
単に#を書き忘れているだけでした。

投稿2022/11/29 06:57

taka_oct092018

総合スコア116

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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