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

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

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

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

jQuery

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

Q&A

1回答

776閲覧

prototypeからPrivateクラスフィールドを用いたclass構文に 書き換える方法が分かりません。

taka_oct092018

総合スコア133

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2022/11/03 09:38

Privateクラスフィールドを使わないclass構文では意図した通り作動してくれますが、
クラスの変数をプライベート変数として設定しようとすると、上手く行きません。
エラーも出ないのでどこに不具合があるのかがよく分からないです。

「改訂新版jQuery本格入門_サンプルコード_P260より」 一部編集しています。

調べたサイト
MDN plus
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields

JavaScript Primer
https://jsprimer.net/basic/class/

HTML

1<div> 2 <input type="button" value="カウンタ"> 3 <span id="count"></span> 4</div>

jQuery

1$(function() { 2 3 // 問題なく作動する 4 // カウンターオブジェクト 5 function Counter(initial, step) { 6 this.count = !isNaN(initial) && Number(initial) || 0; // 初期値 7 this.step = !isNaN(step) && Number(step) || 1; // 増分 8 } 9 10 // thisはCounterインスタンスを表す 11 Counter.prototype = { 12 increment() { this.count += this.step } 13 }; 14 15 // カウンタの値を表示する処理(thisと引数tagは$.proxyにて設定) 16 function adapter(tag) { $(tag).text(this.count); } 17 18 // 表示に用いるCounter()インスタンス 19 const counter = new Counter(); 20 21 // ボタンのクリックでカウンタを増やせるようにする 22 // increment、setはカスタムイベント 23 $('input[type="button"]').on({ 24 25 increment : $.proxy(counter, 'increment'), // カウンタを増やす 26 set : $.proxy(adapter, counter, $('#count')), // カウンタの値を表示 27 28 // カスタムイベントの発火(thisはクリックされた要素) 29 click() { 30 $(this) 31 .trigger('increment') 32 .trigger('set') 33 } 34 }); 35 36 // カウンタの初期値を表示 37 adapter.call(counter, $('#count')); 38});

jQuery

1// カウンターオブジェクトをclass構文で書き換えた 2// 問題なく作動 3class Counter { 4 constructor(count, step) { 5 this.count = !isNaN(count) && Number(count) || 0; // 初期値 6 this.step = !isNaN(step) && Number(step) || 1; // 増分 7 } 8 9 // thisはCounterインスタンスを表す 10 increment() { this.count += this.step; } 11} 12// 以下は元のコードと同じ

jQuery

1// 作動せず。 2class Counter { 3 #count; 4 #step; 5 6 constructor(count, step) { 7 this.#count = count; 8 this.#step = step; 9 } 10 11 get count() { 12 return this.#count; 13 } 14 15 get step() { 16 return this.#step; 17 } 18 19 set count(newCount) { 20 this.#count = !isNaN(newCount) && Number(newCount) || 0; // 初期値 21 } 22 23 set step(newStep) { 24 this.#step = !isNaN(newStep) && Number(newStep) || 1; // 増分 25 } 26 27 // thisはCounterインスタンスを表す 28 increment() { this.count += this.step; } 29} 30// 以下は元のコードと同じ

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

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

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

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

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

guest

回答1

0

コンストラクタで単に代入しているだけ(ゲッター・セッターは経由しない)なので、new Counter()と呼び出せば#count#stepundefinedになってしまうのではないでしょうか。

投稿2022/11/03 09:53

maisumakun

総合スコア145184

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

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

taka_oct092018

2022/11/08 14:21

maisumakun様、返信ありがとうございます。 #を用いたプライベート変数については情報が少なくて、 結局良く分かりませんでした。 別の技術を利用した擬似的なプライベート変数を検討してみます。
maisumakun

2022/11/08 14:32 編集

> 結局良く分かりませんでした。 他のパターンでやっているような、!isNaN(count) && Number(count) のチェックをコンストラクタでも行えばいいだけです。「private変数だから」発生している問題ではありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問