Q&A
過去の質問が放置されています。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問に状況を追記するなどしてみてください。
ストップウォッチを作っています。
start をクリックすると画像のように時間部分がNaNaNaのようになります。
JavaScript のコードを繰り返しみて，
const d =new Date(Date.now - startTime); の部分にDate.now() になっていない事に気付きました。
この誤りに素早く気付くにはどのようにしたら良いでしょうか？
開発者ツールでブレークポイントを使う探すという事を調べたのですが，ブレークポイントの使い方が良く分かりません。
どのようにすればいいか教えて頂けると助かります。
JavaScript
1"use strict"; 2{ 3 const timer = document.getElementById("timer"); 4 const start = document.getElementById("start"); 5 const stop = document.getElementById("stop"); 6 const reset = document.getElementById("reset"); 7 8 let startTime; 9 10 function countUp(){ 11 const d =new Date(Date.now - startTime); 12 const m =d.getMinutes(); 13 const s =d.getSeconds(); 14 const ms =d.getMilliseconds(); 15 timer.textContent = `${m}:${s}.${ms}`; 16 17 setTimeout(() => { 18 countUp() 19 },10); 20 21 } 22 23 start.addEventListener("click", () => { 24 startTime = Date.now(); 25 countUp(); 26 }); 27}
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 <title>タイムウォッチ</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 <div id="timer">00:00.000</div> 11 <div id="start">start</div> 12 <div id="reset">reset</div> 13 <div id="stop">stop</div> 14 15 <script src="js/main.js"></script> 16</body> 17</html>
すみません。先ほどコメントを致しました。
わからない事が多数あったため，状況を追記する前に質問をしていました。
放置をしていたわけでは決してございません。
丁寧なご回答ありがとうございます。
当該回答でのコメントにも書きましたが、書籍等で体系だてた学習をされてから、ご自身の課題に取り組むことをお勧めします。
ありがとうございます!
回答4件
0
開発者ツールでブレークポイントを使う探すという事を調べたのですが，ブレークポイントの使い方が良く分かりません。
なぜコレを使えるようにしようとしないのでしょうか？
他には、デバッグ環境の用意できるエディタを使うことで、同様のことが可能です。
投稿2020/02/19 19:50
退会済みユーザー
総合スコア0
使えるようになろうと思いましたが，微塵も分かりませんでしたので質問をした次第になります。
スマホからなので簡単に。
過去の質問でデバッグに関して調べてみてください。。わかりやすい説明があったはず。
ここはかじりつくべきところなので、頑張って。
デバッグ環境を扱えるか扱えないかで、学習効率が全然異なります。
以下の記事も見てくださいね。
https://teratail.com/questions/242878#reply-352446
0
スマホからなので簡単に。
oecさんやte2jiさんが書かれているようなデバッグ、確認方法はぜひ身につけて下さい。必須です。
間違えは早めに見つけたほうが楽なので、visual studio codeなど、コードを書くときに支援してくれる機能があるものを使いましょう。
Date.nowと入力した時にnowはメソッドだと教えてくれるので、()忘れにすぐ気づけます。
良くある全角スペースでのエラーやカッコ閉じ忘れなども分かりやすいのでおすすめです。
学習意欲は高いと思いますので頑張って下さい。
投稿2020/02/19 23:10
編集2020/02/19 23:32総合スコア2826
コードを書く時に支援してくれる機能を試してみます！
0
↓みたいな感じで細かく全部コンソールに出力して確認しておくと割とすぐ見つけれます
js
1console.log("timerの中身") 2console.log("d", d) 3console.log("m", m) 4console.log("s", s) 5console.log("ms", ms) 6
投稿2020/02/19 16:13
総合スコア271
ありがとうございます。やってみます！
【補足】
Webクライアントなら、ブラウザでF12押した時に出てくる開発ツールのConsoleで、出力を確認できます。
サーバー系はコマンドラインに出力されます。
0
ベストアンサー
3つの流れがあります
- プログラミングの腕を上達させる
- タイピング速度を上げて確かめる頻度を上げる
- TOOLに頼る
結論から言えば、
プログラミングの腕を意識して上げていく事で、
こういった問題からは徐々に解放されていきます。
なのであまり気にする必要はないんじゃないかな？と思います。
TOOLに頼るの部分は今出来る最善の方法だと思います。
oikashinoaさんを始め、既に回答が上げられているので割愛します。
建築の現場でも技術力の高い大工さんは
建物の悪い場所を一瞬で見抜いてすぐに的確な処置をしてくれます。
しかし初心者の見習いはあれこれ道具を持ち出しては見当外れの事をやらかし、時間だけを浪費します。
これと同じで、プログラミングも腕が上がれば瞬時に分かるようになります。
そして瞬時に分かるようなコードを書くようになるのでバグも少なくなります。
上級者はこのような事をやっています。
- エラー文やそのパターンがどのような状況で出るのかを知る
- タイピング速度を上げてコンソールで確認する
- 計算ロジックと表示部を分ける
エラー文やそのパターンがどのような状況で出るのかを知る
今回のコードを例で出します。
NaNは「非数 (Not-A-Number)」であり、数値計算が失敗した時に出現します。
js
1function hoge() { 2 return true; 3} 4console.log(hoge - 1); 5// NaN
もし表示結果がNaN:NaN:NaNとなっているなら、
timer.textContent = ${m}:${s}.${ms};の行の各種値がNaNであるに決まっているので、
NaNがNot-A-Numberの略であると知っているならば数値計算を行っている所が悪いと分かるので、瞬時に下記の行に辿り付きます。
const d =new Date(Date.now - startTime);
そしてF12(Mac時:option + command + i)でデベロッパーツールを立ち上げて
コンソール上でDate.nowの確認をするわけですよ
> Date.now <- ƒ now() { [native code] } > Date.now - 10 <- NaN > Date.now() <- 1582165556068 > Date.now() - 10 1582165650756
関数だから結果がNaNになるという結果が得られました。
タイピング速度の話
初心者の内は「なんでこんな回りくどい事を……」と思いますが、
人間は1日の内の判断に使える回数というのが限られており、
目視で探し続けるというのは精神を削り取っていきます。
なのでパターンを知っており、瞬時にコンソールで確認しにいく上級者は
この判断回数を節約しながら作業しているのです。
その補助となるタイピング速度です。
億劫なのはタイピング速度が遅いからです。
ドットインストールの動画の人(田口さん)はわかりやすい説明を口でしながら
凄まじい速度でタイピングしていますが、大体typing.ioでWPM40程度です。
動画を見ながら黙って打ち込んでいる私のタイピング速度はWPM50以上なので動画を一時停止させる事無く余裕で追いつきます。
本気でタイピング速度を上げたいならtyping.ioの無料コースを各5週ずつやりましょう。
これだけやれば確実にWPM50には辿り着きますし、
ソースコードを目の前にしながら云々唸っている人を傍目に自分は瞬時に値を確認しまくるという上級者ムーブに変わります。
投稿2020/02/20 02:42
総合スコア21203
めっちゃ分かり易いです！！ありがとうございます！
とても参考になります！頑張ろうと思いました！
typing.io というサイトは，タイプミスしたら最初からやり直しになりますか？
最初からやり直しではありません。
なんと「バックスペースを押して消して入力し直せ」という超ドM仕様です。
バババッと入力して間違っているとバックスペースキーを超連打する事になります。
「それが嫌なら正確に入力してね^^」
めっちゃ記号入力や英数字を入力するのが正確になります。
まぁ、普通は誤っていたら消して入力し直すものですから公平っちゃ公平かなと思ってます。
ありがとうございます！早速取り組んでいます！
あなたの回答
tips
プレビュー
