こんにちは！フロントエンドの世界へようこそ。
「JavaScriptを勉強し始めたけれど、コードの中に急に数学の記号や難しい計算が出てきて、頭が痛くなりそう……」
そんな風に思っていませんか？
大丈夫、その気持ち、ものすごくよく分かります。私も昔は「なんでWebサイトを作りたいだけなのに、数学の勉強をし直さなきゃいけないんだ！」と頭を抱えた一人ですから。
でも、安心してください。JavaScriptには「Math（マス）オブジェクト」という、数学が超得意で、いつでも頼りになる「専属のアシスタント（お助け電卓）」が最初から用意されています。
今回は、その頼れるアシスタントが引き出しの奥にこっそり隠し持っている、「数学定数」というお役立ち道具について、身近な例えを交えながら、世界一優しく解説します。一歩ずつ、お茶でも飲みながら一緒に見ていきましょう！
—
そもそも「数学定数」ってなに？
「定数（ていすう）」なんて言うと難しく聞こえますが、要するに「絶対に変わらない、決まりきった数字」のことです。
例えば、お買い物。日本の消費税率（10%や8%）は時々変わりますが、「1年は12ヶ月」とか「1日は24時間」というのは、宇宙がひっくり返っても変わりませんよね。これが「定数」です。
数学の世界にも、こういう「絶対に変わらないお決まりの数字」がいくつかあります。
JavaScriptの`Math`オブジェクトは、あなたが「ええっと、あの数字なんだっけ……？」とわざわざ手で打ち込まなくてもいいように、最初からそのお決まりの数字を覚えておいてくれているんです。
呼び出し方はとっても簡単。「Mathの、〇〇をちょうだい！」とドット（`.`）で繋げて呼ぶだけです。
—
主役たちを紹介します！JavaScriptの数学定数メンバー
それでは、`Math`オブジェクトが教えてくれる代表的な数字たちを、身近な例えと一緒にご紹介します。全部を丸暗記する必要はまったくありません！「へえ、そんな役割があるんだなぁ」と眺めるだけで十分ですよ。
1. `Math.PI`（円周率：約 3.14159）
おそらく、人生で一度は耳にしたことがある「パイ（$\pi$）」です。
- 身近なイメージ: 丸いピザの大きさや、バウムクーヘンの周りの長さ。
- どんなときに使う？
Webデザインで「まあるいボタン」を作ったり、アイコンを円状にぐるぐる回転させるアニメーションを作るときによく使います。
「円の面積 ＝ 半径 $\times$ 半径 $\times$ 3.14」ですが、この「3.14…」の代わりに `Math.PI` を使います。
2. `Math.SQRT2`（2の平方根：約 1.414）
「ルート2」と呼ばれる数字です。「ひとよひとよにひとみごろ」なんて語呂合わせで覚えた方もいるかもしれませんね。
- 身近なイメージ: コピー用紙（A4やB5サイズ）の「短辺と長辺の比率」。
- どんなときに使う？
実は、日本の伝統的な美意識である「白銀比（はくぎんひ）」は $1:\sqrt{2}$（約 1.414）です。キャラクターデザインや、Webサイトの画像を「なんだか落ち着く、きれいな長方形」の比率で自動リサイズしたいときに、この `Math.SQRT2` を掛け算してあげると、一発で美しい比率が作れます。
3. `Math.E`（ネイピア数：約 2.718）
「自然対数の底（てい）」という、名前だけで耳を塞ぎたくなるような数字ですが、怖がらなくて大丈夫です！
- 身近なイメージ: 「じわじわ、自然に増えていく」時のスピード。
- どんなときに使う？
銀行の複利計算（お金がじわじわ増える仕組み）や、Webアニメーションで「最初はゆっくり動いて、途中からなめらかに加速する」ような、人間の目に心地よい動き（イージング）を計算する裏側で、この数字がひっそりと大活躍しています。
4. 対数の仲間たち（`Math.LN10`, `Math.LN2`, `Math.LOG10E`, `Math.LOG2E`）
これらは「対数（ログ）」という、桁数を扱うための数字たちです。
- 身近なイメージ: 音量のボリュームや、地震の揺れの大きさ（マグニチュード）。
- どんなときに使う？
音量って、数字を2倍にしても、人間の耳には2倍の大きさに聞こえないんです。人間の感覚は「対数（ログ）」に近いため、音量スライダーの調整や、スマホゲームの音量調整機能を自作するときに、これらの定数が計算を助けてくれます。
—
【実践】エディタに貼り付けて動かしてみよう！
百聞は一見にしかず。実際にJavaScriptを動かして、これらの定数たちをのぞいてみましょう。
以下のコードをコピーして、ブラウザの開発者ツール（F12キーを押して「コンソール」タブを開く）や、お手元のHTMLファイルに貼り付けて実行してみてくださいね。
// ==========================================
// 1. Mathオブジェクトの定数たちを画面に表示してみよう！
// ==========================================
console.log(“— Mathオブジェクトの便利な定数たち —“);
// 円周率 (みんな大好き 3.14…)
console.log(“円周率 (Math.PI):”, Math.PI);
// 2の平方根 (白銀比の計算に便利！)
console.log(“2の平方根 (Math.SQRT2):”, Math.SQRT2);
// ネイピア数 (自然なアニメーションの裏方)
console.log(“ネイピア数 (Math.E):”, Math.E);
// ==========================================
// 2. 実用的な使い方：まあるいピザの面積を計算しよう！
// ==========================================
// 直径24cm（半径12cm）のMサイズピザの面積を計算します
const radius = 12; // 半径
// 面積 ＝ 半径 × 半径 × 円周率
const pizzaArea = radius radius Math.PI;
console.log(“\n— ピザの面積計算 —“);
console.log(`直径 ${radius 2} cm のピザの面積は、約 ${pizzaArea.toFixed(1)} 平方cm です！`);
// ※ .toFixed(1) は、小数点第一位まで丸める（四捨五入する）おまじないです。
// ==========================================
// 3. 実用的な使い方：美しい「白銀比」のバナーを作ろう！
// ==========================================
// 横幅が 300px のバナー画像を作りたいとき、
// 高さを「白銀比（1 : 1.414）」にして、きれいに見せたい！
const bannerWidth = 300; // 横幅
// 高さ ＝ 横幅 × 2の平方根
const bannerHeight = bannerWidth Math.SQRT2;
console.log(“\n— デザインの白銀比計算 —“);
console.log(`横幅が ${bannerWidth}px のとき、美しい高さは ${Math.round(bannerHeight)}px です。`);
// ※ Math.round() は、整数に四捨五入するお助け機能です。
—
泥臭いプロの知恵：なぜ自分で「3.14」と書いちゃダメなの？
ここで、現場で活躍するエンジニアから、ちょっとした裏話をさせてください。
「別に、`Math.PI` なんて使わずに、自分で `const pi = 3.14;` って書けばよくない？」
そう思うこともありますよね。確かに、簡単な計算ならそれでも動きます。
ですが、プロの現場でそれをやると、先輩から「ちょっと待って！」とストップがかかります。理由は3つあります。
1. 正確さが全然違う！
`3.14` と `3.141592653589793` では、計算が重なったときにズレが生じます。特に円周の計算や、滑らかなアニメーションを描画するとき、このわずかなズレが「なんか動きがカクつく」「グラフィックが微妙に歪む」原因になるんです。
2. 「マジックナンバー」を減らせる
コードの中に急に `3.14` や `1.414` という数字がポツンと書かれていると、後から読んだ人が「これ何の数字だっけ？ 消費税？ それとも別の計算？」と迷子になってしまいます（これをプロの世界では謎の数字＝マジックナンバーと呼びます）。
`Math.PI` と書いてあれば、誰が見ても一瞬で「あ、円周率だね！」と分かります。
3. タイピングの手間とミスが減る
「3.1415926…」を手で打ち込むのは面倒ですし、絶対にどこかで打ち間違えます。`Math.PI` なら、スペルミスがあればエディタがすぐに教えてくれるので安心です。
—
まとめ：焦らず、引き出しの場所だけ覚えておこう
今回は、JavaScriptの`Math`オブジェクトが持つ「数学定数」についてお話ししました。
「数式を完璧に理解しなきゃ！」と身構える必要は一切ありません。
大事なのは、「あ、円の計算とか、デザインの比率計算がしたいときは、Mathっていう引き出しの中に便利なお道具が入ってたな」と思い出せることです。
もし使い方が分からなくなったら、いつでもこのブログに戻ってきて、サンプルコードをコピーして使ってくださいね。
一歩一歩、あなたのペースでJavaScriptと仲良くなっていきましょう。大丈夫、あなたは着実に進んでいますよ！
それでは、また次回の記事でお会いしましょう。ハッピーコーディング！
コメント