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

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

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

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

Q&A

解決済

2回答

153閲覧

thisが機能しない。。。

masa000

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2019/02/28 09:48

thisのところをそれぞれ start/stopに書き換えるとうまく機能するのですが、thisにしたら機能しなくなりました。 使い方を間違っているのでしょうか?

js

1(function(){ 2 'using strict'; 3 4 var start = document.getElementById('start'); 5 var stop = document.getElementById('stop'); 6 var result = document.getElementById('result'); 7 var comment = document.getElementById('comment'); 8 var startTime; 9 10 start.addEventListener('click',()=>{ 11 startTime = Date.now(); // スタート 12 ここ=>this.className = 'pushed'; 13 stop.className = ''; 14 }); 15 16 stop.addEventListener('click',()=>{ 17 var elapsedTime; 18 var diff; 19 elapsedTime = (Date.now() - startTime) / 1000; 20 // ストップ & (start - stop)/1000 = result 21 result.textContent = elapsedTime.toFixed(3); 22 23  ここ=this.className = 'pushed'; 24 start.className = ''; 25 26 diff = elapsedTime - 5.0; 27 // if(diff < -1.0 && diff < 1.0) 28 if(Math.abs(diff) < 0.0){ 29 comment.textContent = 'おめでとう'; 30 }else if(Math.abs(diff) < 0.3){ 31 comment.textContent = 'もうちょっと我慢・・・'; 32 }else if(Math.abs(diff) < 1.0){ 33 comment.textContent = '早すぎや'; 34 }else{ 35 comment.textContent = 'はぁ?'; 36 } 37 }); 38})();

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

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

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

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

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

m.ts10806

2019/02/28 09:55 編集

thisをconsole.log()で確認されましたか? ついでにエラー内容もご確認ください。
m.ts10806

2019/02/28 09:50

再現確認のため、HTMLもご提示ください(必要に応じてCSSもですね)
guest

回答2

0

javascript

1 start.addEventListener('click',function(){ 2 this.className = 'pushed'; 3 });

という書き方をすればthisが自分自身になりますが

javascript

1 start.addEventListener('click',()=>{ 2 this.className = 'pushed'; 3 });

における、thisはwindowを示すので駄目です
こういう場合はイベントを拾って

javascript

1 start.addEventListener('click',e=>{ 2 e.target.className = 'pushed'; 3 });

という書き方をしてください

投稿2019/02/28 09:57

編集2019/02/28 09:59
yambejp

総合スコア114585

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

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

yambejp

2019/02/28 09:58

ちなみにclassの付け替えは今はclassListを利用するのが定番です
masa000

2019/02/28 12:05

ご丁寧にありがとうございます!  JSの理解が深まりました!
guest

0

ベストアンサー

thisは文脈により4種類の意味合いに分かれるJavaScriptが誇る最もクソ要素の1つです。
ES2015以降thisはクラス構文内のメソッド以外では一切使う場面をなくすという方向性にシフトしていっています。
JSでthisは技術的負債なので使うのをヤメロと言ってるわけです。

因みにthisの奥深さを知りたければNinjaの極意が超詳しいので買って読んでください。


さて質問への回答をしていきましょう。

ES2015でサポートされたアロー関数() => {}は、
無名関数function () {}とは違ってthisを作りません。

アロー関数 - MDN

なのでthisは最初の無名関数のfunction () {}に束縛されたままなので、
thisをstartに見立ててなにかしようと思っても、そんなプロパティねーよという意味のundefinedが帰ってくるはずです。

かといってこれをthisに変更してもうまくいくかはちょっと怪しいですね。
上のスコープでvarで宣言したのなら、その名前でアクセスしてあげるのが無難です。

投稿2019/02/28 10:03

miyabi-sun

総合スコア21158

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

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

masa000

2019/02/28 12:06

ありがとうございます。 ES5とES6の理解がまだ曖昧で少し理解ができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問