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

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

質問する

ただいまの
回答率

88.34%

JS　文法の意味が言語化できない

解決済

回答 3

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 482
Surofuture

Surofuture

score 39

JavaScript初心者の者です。

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

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

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

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

'use strict';
{
    //degという変数で6を保持
    const deg = 6;
    //#hr,#mn,#scをHTMLから変数hr,mn,scで取得
    const hr = document.querySelector('#hr')
    const mn = document.querySelector('#mn')
    const sc = document.querySelector('#sc')


    setInterval(()=>{
        //dayという変数で現在日時を取得できるnew.Date()を保持
        let day = new Date();
        //hhという変数で時間を取得
        let hh = day.getHours()*30;
         //mmという変数で分を取得
        let mm = day.getMinutes()*deg;
         //ssという変数で秒を取得
        let ss = day.getSeconds()*deg;

        hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
        mn.style.transform = `rotateZ(${mm}deg)`;
        sc.style.transform = `rotateZ(${ss}deg)`;
    });



}

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert3 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    miyabi_takatsuk

    2020/08/07 09:38

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

    キャンセル

  • m.ts10806

    m.ts10806

    2020/08/07 10:00

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

    キャンセル

  • miyabi_takatsuk

    miyabi_takatsuk

    2020/08/07 10:09

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

    キャンセル

回答 3 件

link

+8

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

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

getHours()*30の*30の意味

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

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

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

transform内の文法の意味

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+4

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

checkベストアンサー

+2

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

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

回転の単位に関しては、

度 (角度) - Wikipedia

を参照してください。

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

以下元回答

getHours()*30の*30の意味

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

transform内の文法の意味

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

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

これを見れば、テンプレートリテラルが、変数を使う文字列の定義の時、特に記述しやすいことがわかるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/07 09:50

    数値を文字列に混ぜ込む足し算の場合、数値演算と文字列連結が正しく行われるように順番を考えないといけない、というのもハマりどころですね。

    キャンセル

  • 2020/08/07 09:52

    ですね。
    数値として演算した後に文字列として連結させるというのを意識しないと難しいですね。
    その点、テンプレートリテラルはやっぱ便利だなーと思います。
    （回答の文字列定義だと、()を増やす必要ありましたし）

    キャンセル

  • 2020/08/07 10:01

    >テンプレートリテラルはやっぱ便利だなーと思います。

    そして「IE１１で動かない」という質問が生まれるわけで。

    キャンセル

  • 2020/08/07 10:04

    > そして「IE１１で動かない」という質問が生まれるわけで。

    IE、早く滅ぶべし・・・。

    キャンセル

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

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る