Index

HOME > プログラムTOP > JavaScript


数値処理いろいろ

　JavaScript の実用的なTips集です。ここでは、数値の処理に関するTipsを集めてみました。主に、Mathオブジェクトを使った数学処理を扱っています。Mathオブジェクトは、数学処理を行うために用意されたオブジェクトです。
[INDEX] ・小数と絶対値: 四捨五入、小数点の切り上げ・切り下げ、絶対値、桁そろえ
・乱数: 乱数の生成、乱数の範囲指定
・三角関数と円周率: 三角関数（sin/cos/tan）、円周率、逆三角関数
・その他の数学処理: べき乗、平方根、対数、二つの数字の比較

sasaraan programming

Exposition

■小数と絶対値

　Math オブジェクトには、小数を処理するメソッドがいくつか用意されています。四捨五入する場合は round、切り上げて整数にする場合は ceil、切り捨てて整数にする場合は floor を使用します。また、絶対値を求めるには abs メソッドを利用します。
Math.round(n)　四捨五入（n : 数値）
Math.ceil(n)　小数以下切り上げ（n : 数値）
Math.floor(n)　小数以下切り捨て（n : 数値）
Math.abs(n)　絶対値（n : 数値）
// JavaScriptソース 
// 小数の処理と絶対値
// ... 引数 mode : 0=四捨五入 / 1=切り上げ / 2=切り捨て / 3=絶対値
function GetValue(mode) {
    var n = document.Form2.Text2a.value;
    if (n=="" || isNaN(n)) {
        alert("数字ではありません。");
    } else {
        if (mode == 0) n = Math.round(n);
        else if (mode==1) n = Math.ceil(n);
        else if (mode==2) n = Math.floor(n);
        else if (mode==3) n = Math.abs(n);
        document.Form2.Text2b.value = n;
    }
}    
<!-- HTMLソース -->
<form name="Form2" style="margin:1ex">
    ↓値を入力してボタンを押してください。結果が表示されます。<br>
    <input type="text" name="Text2a" size="16" value="5.56"/> 
    <input type="button" value="四捨五入"  onclick="GetValue(0)"/> 
    <input type="button" value="切り上げ"  onclick="GetValue(1)"/> 
    <input type="button" value="切り捨て"  onclick="GetValue(2)"/> 
    <input type="button" value="絶対値"  onclick="GetValue(3)"/> 
    <input type="text" name="Text2b" size="16"/> 
</form>
　また、数字の表示をする際、桁数を指定することができます。小数桁を指定したい時は toFixed メソッド、総桁数を指定したい場合は toPrecision メソッドで指定します。いずれもグローバルメソッドとして定義されています。ただし、toPrecision メソッドで、数値が小数のみの時は、小数部分の桁数となります。（使用例は次節「乱数」に掲載）
n.toFixed(figure)　小数以下の桁数の指定（n : 数値 / figure : 桁数）
n.toPrecision(figure)　総桁数の指定（n : 数値 / figure : 桁数）

■乱数

乱数は、Math オブジェクトの random メソッドによって求めることができます。このメソッドは、 通常は0以上1未満（ブラウザによっては1を含む）の値を返します。この時、値は小数を含みますので注意が必要です。
Math.random()　乱数の取得（0.0000... 〜 1.0000...）
　特定の範囲の乱数は、「Math.random() × 範囲の要素数 ＋ 最小値」 で求められます。また、整数値のみを取得したい場合は、一般には下表のような式で求めることができます。この時、乱数に 1 を含むブラウザへの対策をする必要があります（下例の乱数４、乱数５を参照）
範囲最小値min最大値max式 （求める乱数 : n）
・ x超 y未満　x + 1　y - 1 　n = Math.floor(Math.random() * (max - min + 1)) + min;
　if (n == max + 1) n -= 1;
・ x以上 y未満　x　y - 1
・ x以上 y以下　x　y
// JavaScriptソース 
// 乱数の取得と表示
function GetRand(mode) {
    var i = 0;
    var s = "";

    // 乱数を100個生成
    while (i++ < 100) {
        var n = Math.random();
        if (mode == 2) {
            n = n.toFixed(5);                 // 小数桁5に整形
        } else if (mode == 3) {	
            n = (n*100).toPrecision(6);  // 総桁数6に整形
        } else if (mode == 4) {
            n = Math.floor(n *100);        // 0以上100未満
            if (n == 100) n = 99;            // "1"対策
            if (n < 10) n = "0" + n;        // 一桁の場合は0をつける
        } else if (mode == 5) {
            n = Math.floor(n * 21) + 10;  // 10以上30以下
            if (n == 31) n = 30;              // "1"対策
        }
        s += n + " ";
    }
    document.Form3.Text3.value = s;
}    
<!-- HTMLソース -->
<form name="Form3" action="" style="margin:1ex">
    <input type="button" value="乱数１"  onclick="GetRand(1)"><br>
    <input type="button" value="乱数２"  onclick="GetRand(2)"><br>
    <input type="button" value="乱数３"  onclick="GetRand(3)"><br>
    <input type="button" value="乱数４"  onclick="GetRand(4)"><br>
    <input type="button" value="乱数５"  onclick="GetRand(5)"><br>
    <textarea name="Text3" rows="4" cols="66" style="font-size:90%;"></textarea>
</form>

■三角関数と円周率


　左図は三角関数の概念図です。
　Math オブジェクトには三角関数に対応したメソッドが多数用意されています。基本的なものは以下の三つです
Math.sin(rad)　サイン（rad : ラジアン）
Math.cos(rad)　コサイン（rad : ラジアン）
Math.tan(rad)　タンジェント（rad : ラジアン）
　上記中、ラジアンは角度の単位です。これは点の円周上での移動距離を元にした単位で、１周、つまり 360度は 2πラジアンとなります。度数をラジアンに直す時は、"1度 = (π/180)ラジアン" となりますので、「度数×π／180」とすれば求められます。逆にラジアンを度数に直す時は、"1ラジアン = (180/π)度" ですので、「ラジアン×180／π」となります。
　また、円周率（π）は、以下のように、定数プロパティとして用意されています。
Math.PI　円周率（π）= 3.14159...
// JavaScriptソース
// 三角関数の値を求めてテキストに表示
// ... 引数 mode : 0=sin / 1=cos / 2=tan
function GetTrig(mode) {
    var n = document.Form4.Text4a.value;
    if (isNaN(n)) {
        alert("数値ではありません。");
    } else {
        var t;
        n *= Math.PI / 180;                // 度をラジアンに変換
        if (mode == 1) t = Math.sin(n);
        else if (mode == 2) t = Math.cos(n);
        else if (mode == 3) t = Math.tan(n);
        document.Form4.Text4b.value = t.toPrecision(6);    // 総桁数6に整形
    }
}   
<!-- HTMLソース -->
<form name="Form4" action="" style="margin:1ex">
    ↓度数を入力してボタンを押してください。結果が表示されます。<br>
    <input type="text" name="Text4a" size="12" value="30"> 度の
    <input type="button" value="sin"  onclick="GetTrig(1)">
    <input type="button" value="cos"  onclick="GetTrig(2)">
    <input type="button" value="tan"  onclick="GetTrig(3)">
    は <input type="text" name="Text4b" size="16">
</form>
　上記の他に、逆三角関数を求めるメソッドも用意されています。
Math.asin(rad)　アークサイン（rad : ラジアン）
Math.acos(rad)　アークコサイン（rad : ラジアン）
Math.atan(rad)　アークタンジェント（rad : ラジアン）
Math.atan2(x, y)　角度を取得（x : X座標 / y : Y座標）

■その他の数学処理

　上記以外にも、Math オブジェクトには、下記のような数値処理のメソッドがあります。
Math.pow(n, m)　n の m乗（ｎ, m : 数値）
Math.sqrt(n)　n の平方根（n : 数値）
Math.exp(n)　対数 : e の n乗（n : 数値）
Math.log(n)　ログの値 : e を底とした n の対数（n : 数値）
　これらのメソッドに関連して、次のような定数プロパティも用意されています。 　
Math.E　自然対数 e の値 ≒ 2.718
Math.LN2　2の自然対数 ≒ 0.693
Math.LN10　10の自然対数 ≒ 2.303
Math.LOG2E　2を底とする e の自然対数 ≒ 1.443
Math.LOG10E　10を底とする e の自然対数 ≒ 0.434
Math.SQRT2　2の平方根 ≒ 1.414
Math.SQRT1_2　2の平方根の1/2 ≒ 0.707
　また、二つの数値（式）を比較するメソッドもあります。
Math.max(x, y)　x と y のうち、大きい方を求める
Math.min(x, y)　x と y のうち、小さい方を求める

www.sasaraan.net

(c) morijoh