時計の針の角度と時刻計算

Q: 時計の針の角度と時刻計算とは何ですか？

時計の文字盤は1周 360° を12等分しているので、となり合う数字の間の角度は 360° \div 12 = 30° である。長針（分針）は60分で1周するので1分で 6° 動き、短針（時針）は12時間で1周するので1時間で 30°、1分では 0.5° ずつ動く。

Q: 時計の針の角度と時刻計算は社会やプログラミングでどのように使われていますか？

アナログ風UIの回転計算（ゲージ・ダイヤル表示）: アナログ時計と同じ「角度＝速さ×時間」の考え方は、スピードメーターや音量ダイヤルなどのアナログ風UI部品を作るときの回転角の計算にそのまま応用できる。値を角度に変換し、CSSやSVGのtransformで針や目盛りを回転させる。

長針と短針がつくる角度は、時刻からどう求まる？

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: 時計の針の角度と時刻計算の本質的な定義と直感的ビジュアルをシミュレーターで体験できる。
2: 公式や証明の背景にある数学的意味と、厳密な導出ステップを解説。
3: 実社会における工学応用（アナログ風UIの回転計算（ゲージ・ダイヤル表示））のTypeScript実装コードを収録。

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

時計の針の角度と時刻計算の基礎原理を体系化し、抽象的な計算を直感的に扱うために誕生した。

身につく武器・思考力

長針と短針がつくる角度は、時刻からどう求まる？。この考え方を身につけることで、複雑な課題を単純化して数理モデルとして解く力が養われる。

実社会・ITでの活躍現場

•アナログ風UIの回転計算（ゲージ・ダイヤル表示）
•ITシステム・アルゴリズム実装における論理設計
•データ分析やシミュレーションにおける数理モデリング

Layer 1 — 直感・シミュレーター

時刻のスライダーを動かして、アナログ時計の長針・短針を動かしてみよう。針の位置と一緒に、2本の針がつくる角度がリアルタイムで計算されて表示される。

時 (Hour): 3時

分 (Minute): 0分

短針の角度

90.0°

30° × 3 + 0.5° × 0

長針の角度

0.0°

6° × 0

針がつくる角度 (小さいほう)

90.0°

↑ 短針は「1時間に30度、1分に0.5度」動き、長針は「1分に6度」動きます。この2つの角速度の差を利用して、任意の時刻における針の角度が求まります。

Layer 2 — 定義・受験・証明

定義

時計の文字盤は1周 $360°$ を12等分しているので、となり合う数字の間の角度は $360° \div 12 = 30°$ である。長針（分針）は60分で1周するので1分で $6°$ 動き、短針（時針）は12時間で1周するので1時間で $30°$ 、1分では $0.5°$ ずつ動く。

公式・数理モデル

\theta = |30h + 0.5m - 6m|

証明・導出

時刻を「 $h$ 時 $m$ 分」とする。

短針は12時からの経過時間 $\left(h + \dfrac{m}{60}\right)$ 時間ぶん動くので、その角度は

\theta_{短} = 30 \times \left(h + \frac{m}{60}\right) = 30h + 0.5m

長針は $m$ 分ぶん動くので、その角度は

\theta_{長} = 6m

2本の針がつくる角度は、この2つの差の絶対値をとり、 $180°$ を超える場合は $360°$ から引いて求める。

\theta = \bigl|\,(30h + 0.5m) - 6m\,\bigr| = |30h - 5.5m|

押さえておきたいポイント

長針は1分間に $6°$ 、短針は1分間に $0.5°$ 動く
3時ちょうどのとき、長針と短針の角度は $90°$
計算した角度が $180°$ を超えたら、 $360°$ から引いて「小さいほうの角度」にする
時計の針の動きは一定の速さの回転運動である

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

アナログ風UIの回転計算（ゲージ・ダイヤル表示）

アナログ時計と同じ「角度＝速さ×時間」の考え方は、スピードメーターや音量ダイヤルなどのアナログ風UI部品を作るときの回転角の計算にそのまま応用できる。値を角度に変換し、CSSやSVGのtransformで針や目盛りを回転させる。

1function clockAngles(h: number, m: number) {
2  const minuteAngle = 6 * m;                 // 長針の角度（0〜360度）
3  const hourAngle = 30 * h + 0.5 * m;        // 短針の角度（0〜360度）
4  let diff = Math.abs(hourAngle - minuteAngle);
5  if (diff > 180) diff = 360 - diff;         // 小さいほうの角度に補正
6  return { hourAngle, minuteAngle, diff };
7}
8
9// SVGの針を回転させる場合の例
10// <line transform={`rotate(${hourAngle} 100 100)`} ... />
11
12console.log(clockAngles(3, 0));  // { hourAngle: 90, minuteAngle: 0, diff: 90 }
13console.log(clockAngles(6, 30)); // { hourAngle: 195, minuteAngle: 180, diff: 15 }