LabEx
ログイン登録

JavaScript における Math オブジェクトのメソッドを探索する

JavaScriptBeginner
オンラインで実践に進む

はじめに

この実験では、参加者は JavaScript の Math オブジェクトに深く突き入り、HTML ベースのハンズオンなデモを通じてその強力なメソッドとプロパティを探索します。この実験では、Math.PI や Math.E などの組み込みプロパティにアクセスし、計算方法を実装し、乱数を生成し、実際のシナリオで Math オブジェクトのテクニックを適用するなど、様々な数学的演算を展示するインタラクティブな Web ページを作成することで学習者を案内します。

段階的なアプローチに従って、学生は Math オブジェクトの機能を試すことができる埋め込み JavaScript を持つ HTML ファイルを構築します。彼らは Math.random()、Math.floor() などのメソッドをどのように使用するかを学び、計算問題の解決や数値操作を行うために JavaScript の組み込み数学機能を活用する実際の経験を得ます。

Math オブジェクトのデモ用の HTML ファイルをセットアップする

このステップでは、JavaScript の Math オブジェクトのメソッドをデモするための HTML ファイルを作成します。Math オブジェクトの機能を探索して実験するための script セクション付きの基本的な HTML 構造を設定します。

WebIDE を開き、~/projectディレクトリに移動します。次の内容でmath-demo.htmlという新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Math Object Demonstration</title>
  </head>
  <body>
    <h1>Math Object Exploration</h1>
    <div id="output"></div>

    <script>
      // 次のステップで Math オブジェクトのデモをここに追加します
      const outputDiv = document.getElementById("output");

      function displayOutput(message) {
        outputDiv.innerHTML += `<p>${message}</p>`;
      }
    </script>
  </body>
</html>

この HTML ファイルの主要なコンポーネントを分解してみましょう。

  1. 基本的な HTML5 ドキュメント構造を作成しました
  2. JavaScript の結果を表示するためにid="output"の<div>を追加しました
  3. Math オブジェクトのデモを記述する<script>セクションを含めました
  4. ページ上に結果を簡単に表示するためのdisplayOutput()ヘルパー関数を作成しました

このファイルをブラウザで開いたときの例の出力：

Math Object Exploration

displayOutput()関数は、次のステップで Math オブジェクトのメソッドの結果を簡単に表示するのに役立ちます。このセットアップは、JavaScript の Math オブジェクトの機能を探索するためのクリーンでインタラクティブな方法を提供します。

Math オブジェクトのプロパティを使用する

このステップでは、JavaScript の Math オブジェクトの組み込みプロパティを探索します。前のステップのmath-demo.htmlファイルを開き、これらのプロパティをデモするために script セクションを変更します。

既存の<script>セクションに次のコードを追加します。

// Math オブジェクトのプロパティを探索する
displayOutput(`Math.PI: ${Math.PI}`);
displayOutput(`Math.E: ${Math.E}`);
displayOutput(`オイラー数 (e): ${Math.E}`);
displayOutput(`円周率の値：${Math.PI}`);

// 単純な計算でこれらのプロパティの使用を示す
let circleRadius = 5;
let circleCircumference = 2 * Math.PI * circleRadius;
displayOutput(
  `円の周長 (半径 ${circleRadius}): ${circleCircumference.toFixed(2)}`
);

JavaScript の Math オブジェクトはいくつかの重要な数学定数を提供します。

  1. Math.PI: 数学定数π（パイ）を表し、約 3.14159
  2. Math.E: オイラー数（e）を表し、約 2.71828

HTML ファイルをブラウザで開くと、次のような出力が表示されます。

Math.PI: 3.141592653589793
Math.E: 2.718281828459045
オイラー数 (e): 2.718281828459045
円周率の値: 3.141592653589793
円の周長 (半径5): 31.42

これらのプロパティは、特に円、指数関数、その他の数学的計算に関係する数学的計算に役立ちます。

計算用の Math オブジェクトのメソッドを実装する

このステップでは、数学的計算を行うための様々な Math オブジェクトのメソッドを探索します。math-demo.htmlファイルを開き、次のコードを追加して異なる Math メソッドをデモします。

// Math 計算メソッドのデモ
let number = -7.5;
let positiveNumber = Math.abs(number);
displayOutput(`${number}の絶対値：${positiveNumber}`);

let decimalNumber = 4.7;
let roundedDown = Math.floor(decimalNumber);
let roundedUp = Math.ceil(decimalNumber);
let rounded = Math.round(decimalNumber);
displayOutput(`${decimalNumber}の切り捨て：${roundedDown}`);
displayOutput(`${decimalNumber}の切り上げ：${roundedUp}`);
displayOutput(`${decimalNumber}の四捨五入：${rounded}`);

let baseNumber = 2;
let exponent = 3;
let powerResult = Math.pow(baseNumber, exponent);
displayOutput(`${baseNumber}を${exponent}乗した結果：${powerResult}`);

let largestNumber = Math.max(10, 5, 8, 12, 3);
let smallestNumber = Math.min(10, 5, 8, 12, 3);
displayOutput(`最大の数：${largestNumber}`);
displayOutput(`最小の数：${smallestNumber}`);

let squareRoot = Math.sqrt(16);
displayOutput(`16 の平方根：${squareRoot}`);

このコードはいくつかの重要な Math オブジェクトのメソッドを示しています。

  1. Math.abs(): 数値の絶対値を返します
  2. Math.floor(): 最も近い整数に切り捨てます
  3. Math.ceil(): 最も近い整数に切り上げます
  4. Math.round(): 最も近い整数に四捨五入します
  5. Math.pow(): 数値を指定された累乗にする
  6. Math.max(): リスト内の最大の数値を返します
  7. Math.min(): リスト内の最小の数値を返します
  8. Math.sqrt(): 数値の平方根を計算します

例の出力：

-7.5の絶対値: 7.5
4.7の切り捨て: 4
4.7の切り上げ: 5
4.7の四捨五入: 5
2を3乗した結果: 8
最大の数: 12
最小の数: 3
16の平方根: 4

Math.random() を使って乱数を生成する

このステップでは、Math.random()を使って乱数を生成する方法を探索し、より高度な乱数生成技術を作成します。math-demo.htmlファイルを開き、乱数生成をデモするために次のコードを追加します。

// 乱数生成のデモ
// 基本的な乱数 (0 以上 1 未満)
let basicRandom = Math.random();
displayOutput(`基本的な乱数：${basicRandom}`);

// 特定の範囲内の乱数を生成する
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 1 から 10 までの乱数
let randomInt = getRandomNumber(1, 10);
displayOutput(`乱数 (1-10): ${randomInt}`);

// 複数の乱数を生成する
displayOutput("5 つの乱数 (1-100):");
for (let i = 0; i < 5; i++) {
  let randomNumber = getRandomNumber(1, 100);
  displayOutput(randomNumber);
}

// コイントスをシミュレートする
function coinFlip() {
  return Math.random() < 0.5 ? "表" : "裏";
}
displayOutput(`コイントスの結果：${coinFlip()}`);

// ランダムな色を生成する
function getRandomColor() {
  let r = getRandomNumber(0, 255);
  let g = getRandomNumber(0, 255);
  let b = getRandomNumber(0, 255);
  return `rgb(${r}, ${g}, ${b})`;
}
displayOutput(`ランダムな色：${getRandomColor()}`);

例の出力は次のようになるかもしれません。

基本的な乱数: 0.7234567890123456
乱数 (1-10): 7
5つの乱数 (1-100):
42
15
83
61
29
コイントスの結果: 表
ランダムな色: rgb(134, 45, 211)

Math.random()に関するポイント：

  • 0（含む）以上 1（非含む）の間の疑似乱数を返します
  • 特定の範囲内の数値を生成するためにスケーリングと操作が可能です
  • ゲーム、シミュレーション、ランダムな選択に役立ちます

Math オブジェクトのメソッドを実際のシナリオに適用する

このステップでは、Math オブジェクトのメソッドが現実世界のシナリオでどのように実際に使われるかを探索します。math-demo.htmlファイルを開き、実際の使い方をデモするために次のコードを追加します。

// Math オブジェクトのメソッドを使った実際のシナリオ

// 1. 割引価格を計算する
function calculateDiscount(originalPrice, discountPercentage) {
  let discountAmount = originalPrice * (discountPercentage / 100);
  let finalPrice = originalPrice - discountAmount;
  displayOutput(`元の価格：$${originalPrice.toFixed(2)}`);
  displayOutput(`割引 (${discountPercentage}%): $${discountAmount.toFixed(2)}`);
  displayOutput(`最終価格：$${finalPrice.toFixed(2)}`);
  return finalPrice;
}
calculateDiscount(100, 20);

// 2. 円の面積を計算する
function calculateCircleArea(radius) {
  let area = Math.PI * Math.pow(radius, 2);
  displayOutput(`円の半径：${radius}`);
  displayOutput(`円の面積：${area.toFixed(2)} 平方単位`);
  return area;
}
calculateCircleArea(5);

// 3. 温度変換 (摂氏から華氏)
function celsiusToFahrenheit(celsius) {
  let fahrenheit = Math.round((celsius * 9) / 5 + 32);
  displayOutput(`${celsius}°C は${fahrenheit}°F`);
  return fahrenheit;
}
celsiusToFahrenheit(25);

// 4. 斜辺を計算する
function calculateHypotenuse(a, b) {
  let hypotenuse = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  displayOutput(`三角形の辺：${a}, ${b}`);
  displayOutput(`斜辺の長さ：${hypotenuse.toFixed(2)}`);
  return hypotenuse;
}
calculateHypotenuse(3, 4);

// 5. 小テストのためのランダムな点数を生成する
function generateQuizScores(numberOfStudents) {
  displayOutput(`${numberOfStudents}人の学生の小テストの点数:`);
  for (let i = 1; i <= numberOfStudents; i++) {
    let score = Math.floor(Math.random() * 51) + 50; // 50-100 の間の点数
    displayOutput(`学生${i}: ${score}`);
  }
}
generateQuizScores(5);

例の出力は次のようになるかもしれません。

元の価格: $100.00
割引 (20%): $20.00
最終価格: $80.00
円の半径: 5
円の面積: 78.54 平方単位
25°Cは77°F
三角形の辺: 3, 4
斜辺の長さ: 5.00
5人の学生の小テストの点数:
学生1: 75
学生2: 92
学生3: 63
学生4: 87
学生5: 69

このデモは、Math オブジェクトのメソッドがさまざまな実際のシナリオでどのように適用できるかを示しています。

  • 割引を計算する
  • 幾何学的な面積を計算する
  • 温度を変換する
  • 斜辺の長さを求める
  • ランダムな点数を生成する

まとめ

この実験では、参加者は HTML を使ったハンズオンなデモを通じて JavaScript の Math オブジェクトの機能を探索します。この実験は、結果を表示するための専用の出力 div とヘルパー関数を備えた対話型 HTML ファイルをセットアップすることから始まり、数学的演算とメソッドの学習のための構造化された環境を提供します。

学習の旅は、Math オブジェクトの重要な側面を網羅しており、Math.PI や Math.E などの組み込みプロパティの調査、丸めなどの計算方法の実装、最大値と最小値の検索、および乱数の生成などが含まれます。HTML の script セクションに順次コードを追加することで、学習者は JavaScript の数学的ユーティリティに関する実践的な経験を得て、さまざまな計算タスクや現実世界のプログラミングシナリオでこれらのメソッドをどのように活用するかを理解するようになります。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development