トピックク

• Math.PIの説明
• Math.sin(x)の説明
• Math.cos(x)の説明
• Math.tan(x)の説明
• 三角関数のグラフを描く方法
• まとめ

Math.PIの説明

Math.PIは、円周率（\(\pi\)）の値を表します。その値はおおよそ3.14159です。 JavaScriptでは定数として提供されており、円の周長や面積を計算する際に使用されます。

例

// 円の周長を計算
const radius = 5; // 半径
const circumference = 2 * Math.PI * radius;
console.log(circumference); // 結果: 31.41592653589793

// 円の面積を計算
const area = Math.PI * radius ** 2;
console.log(area); // 結果: 78.53981633974483
    

Math.sin(x)の説明

Math.sin(x)は、三角関数の正弦関数（\(\sin(x)\)）を計算します。 引数\(x\)はラジアンで指定する必要があります（度ではありません）。例えば、\(\sin(\pi/2) = 1\)です。

例

// sin(π/2) を計算
const result1 = Math.sin(Math.PI / 2);
console.log(result1); // 結果: 1

// sin(0) を計算
const result2 = Math.sin(0);
console.log(result2); // 結果: 0
    

Math.cos(x)の説明

Math.cos(x)は、三角関数の余弦関数（\(\cos(x)\)）を計算します。 引数\(x\)もラジアンで指定します。例えば、\(\cos(\pi) = -1\)です。

例

// cos(π) を計算
const result1 = Math.cos(Math.PI);
console.log(result1); // 結果: -1

// cos(0) を計算
const result2 = Math.cos(0);
console.log(result2); // 結果: 1
    

Math.tan(x)の説明

Math.tan(x)は、三角関数の正接関数（\(\tan(x)\)）を計算します。 引数\(x\)はラジアンで指定します。例えば、\(\tan(\pi/4) = 1\)です。

例

// tan(π/4) を計算
const result1 = Math.tan(Math.PI / 4);
console.log(result1); // 結果: 1

// tan(0) を計算
const result2 = Math.tan(0);
console.log(result2); // 結果: 0
    

三角関数のグラフを描く方法

JavaScriptとHTMLの<canvas>要素を使用して、三角関数のグラフを描画することができます。 以下は、\(\sin(x)\)、\(\cos(x)\)、\(\tan(x)\)のグラフを描画するサンプルコードです。

例

<canvas id="graphCanvas" width="600" height="400"></canvas>
<script>
// キャンバスの設定
const canvas = document.getElementById("graphCanvas");
const ctx = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
const centerX = width / 2;
const centerY = height / 2;
const scale = 50; // 1単位あたりのピクセル数

// グラフの軸を描画
ctx.beginPath();
ctx.moveTo(0, centerY);
ctx.lineTo(width, centerY);
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, height);
ctx.strokeStyle = "black";
ctx.stroke();

// グラフを描画する関数
function drawFunction(func, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    for (let x = -Math.PI * 2; x <= Math.PI * 2; x += 0.01) {
        const y = func(x);
        const canvasX = centerX + x * scale;
        const canvasY = centerY - y * scale;
        if (x === -Math.PI * 2) {
            ctx.moveTo(canvasX, canvasY);
        } else {
            ctx.lineTo(canvasX, canvasY);
        }
    }
    ctx.stroke();
}

// 三角関数のグラフを描画
drawFunction(Math.sin, "red"); // sin(x) のグラフ
drawFunction(Math.cos, "blue"); // cos(x) のグラフ
drawFunction(Math.tan, "green"); // tan(x) のグラフ（注意: 大きな値が出る場合があります）
</script>
    

まとめ

JavaScriptではMath.PIや三角関数を利用して数学的な計算が簡単に行えます。 また、HTMLの<canvas>を使うことで視覚的にグラフを描画できます。 本記事で紹介した例を参考に、さまざまな応用を試してみてください。