JavaScript初心者の者です。

https://www.youtube.com/watch?v=weZFfrjF-k4
こちらのチュートリアルでJavaScriptを学んでいました。

以下のコードのSetInterval内の意味が理解できなくて上手く言語化できません。

具体的には、
getHours()30の30の意味、
getMinutes()*deg,getSeconds()degのdegの意味、
transform内の文法の意味

これらの意味をご教授いただくと幸いです。
よろしくお願いします。

Javascript
1'use strict';
2{
3    //degという変数で6を保持
4    const deg = 6;
5    //#hr,#mn,#scをHTMLから変数hr,mn,scで取得
6    const hr = document.querySelector('#hr')
7    const mn = document.querySelector('#mn')
8    const sc = document.querySelector('#sc')
9
10
11    setInterval(()=>{
12        //dayという変数で現在日時を取得できるnew.Date()を保持
13        let day = new Date();
14        //hhという変数で時間を取得
15        let hh = day.getHours()*30;
16         //mmという変数で分を取得
17        let mm = day.getMinutes()*deg;
18         //ssという変数で秒を取得
19        let ss = day.getSeconds()*deg;
20    
21        hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
22        mn.style.transform = `rotateZ(${mm}deg)`;
23        sc.style.transform = `rotateZ(${ss}deg)`;
24    });
25    
26
27
28}

追記：transform内の文法の意味、ですが、具体的には、
ratateZの意味と、その中のdegの意味です。
よろしくお願いいたします。

miyabi_pudding

2020/08/07 00:38

* が、乗算を行う演算子ということはご存知ですか？

m.ts10806

2020/08/07 01:00

わざわざ言語化（正しくは「文章化」でしょうか）しなくても「書いた通り動く」だけで良くないですか？

miyabi_pudding

2020/08/07 01:09

誰か後輩さんとかに構文の説明できるようにしたいんですかね。（だったら、まず何をやろうとしているかを理解しないと説明しようが・・・）

行動規範の内容に同意します

回答3件

以下のコードのSetIntervalの意味が理解できなくて上手く言語化できません。

いずれも、プログラミング的な意味ではなくやりたいことの理解が必要な場面です。

getHours()30の30の意味

アナログ時計の時針は12時間で1周しますので、1時間あたり30度です。

getMinutes()*deg,getSeconds()degのdegの意味、

分針・秒針は60（分/秒）で1週ですので、1（分/秒）あたり6度です。

transform内の文法の意味

いくつか疑問点が考えられますが、もう少し詳しく疑問点を挙げていただけませんでしょうか？

投稿2020/08/07 00:36

maisumakun

総合スコア145930

何をするものかはわからないけど、12 に 30 をかけると 360 になります。
また 60 に 6 をかけると 360 になります。
deg は degree つまり度の意味だと思います。
要するに、針の 1 つ動く度数を表しています。
長針と秒針は 1 つ動くと 6 度、短針は 1 時間分動くと 30 度になります。

投稿2020/08/07 00:38

Zuishin

総合スコア28662

ベストアンサー

ratateZの意味と、その中のdegの意味です。

これは、Z軸回転を、単位deg（よく使う、360度の単位）で回転を加える、ということです。

回転の単位に関しては、

度 (角度) - Wikipedia

を参照してください。

それを理解すれば、自ずと、
なぜ、この数値をかけているのか？という上行の構文の意味も理解できるかと。

以下元回答

getHours()30の30の意味

ここに関しては、maisumakunさんの回答をご覧ください。
文法の意味がわからない、というのであれば、
getHoursメソッドで返された数値に、30を掛け算しています。
他行も、*を使っている箇所は全て同様です。

transform内の文法の意味

テンプレートリテラルという記述方法です。
簡素な記述で、文字列を定義できます。
変数を使った文字列の定義に、特に有効な記法です。
通常の文字列処理だと下記になります。

javascript
1hr.style.transform = "rotateZ(" + (hh + (mm/12)) + "deg)";
2mn.style.transform = "rotateZ(" + mm + "deg)";
3sc.style.transform = "rotateZ(" + ss + "deg)";