単位変換(換算)

キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。
長さは「m(メートル)」、重さは「kg(キログラム)」、時間は「s(秒)」、速度は「m/s(メートル毎秒)」、面積は「m²(平方メートル)」、体積・容量は「m³(立方メートル)」、仕事率・電力は「W(ワット)」を基準にして計算します。

長さの単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

重さの単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

時間の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

速度の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

面積の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

体積・容量の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

仕事率・電力の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

温度の単位変換

変換前の数値 変換前の単位
=
変換後の数値 変換後の単位
計算式

単位変換(換算)の注意事項

  • 単位の一覧には単位ではないものも含まれています。
  • 単位変換(換算)の結果などは正確性を保証するものではありません。
  • 単位変換(換算)の結果などに関して当サイトは一切責任を負いません。
学校授業の「IT化」で、こんなお悩みありませんか?【e-おうち】
出張/持込/宅配でパソコン修理・設定 24時間365日対応

単位変換(換算)ツールについて

単位変換(換算)ツールはJavaScriptで制作していて、浮動小数点数による誤差をなくすためにbignumber.jsを使用しています。掲載しているソースコードは、解説のためにエラーメッセージの表示やバリデーション処理、ソースコード内のコメントなどを省略しているので、実際のソースコードとは異なります。

使用しているJavaScriptのライブラリ

HTML

カテゴリごとに変わる箇所は○○にしています。

HTML
<h3>○○の単位変換</h3>
<table>
    <tr>
        <th>変換前の数値</th>
        <th>変換前の単位</th>
    </tr>
    <tr>
        <td><input type="text" id="○○-before-conversion-num"></td>
        <td><select id="○○-before-conversion-unit"></select></td>
    </tr>
</table>

<div>=</div>

<table>
    <tr>
        <th>変換後の数値</th>
        <th>変換後の単位</th>
    </tr>
    <tr>
        <td><input type="text" id="○○-after-conversion-num"></td>
        <td><select id="○○-after-conversion-unit"></select></td>
    </tr>
    <tr>
        <th colspan="2">計算式</th>
    </tr>
    <tr>
        <td colspan="2" id="○○-formula"></td>
    </tr>
</table>

<button type="submit" name="○○">○○の単位を変換する</button>

変換に使用する一覧を用意

変換先と変換後の単位の一覧(※)をJSONファイルで用意し、内容を定数に格納します。
ここで格納した内容はselectタグと変換処理で使用します。
※ブラウザーによっては直接開くと文字化けします。

JavaScript
const JSON_UNIT_CONVERSION_LIST = 'unit-conversion-list.json';
const LIST = getUnitConversionList();

function getUnitConversionList() {
    return $.ajax({
        type    : 'GET', 
        url     : JSON_UNIT_CONVERSION_LIST,
        dataType: 'json'
    });
}

selectタグに単位を挿入

各カテゴリのselectタグに変換先と変換後の単位の一覧を挿入します。

JavaScript
LIST.done(data => {
    $.each(data, (key, val) => {
        $.each(val, (k, v) => {
            $('select[id^="' + key + '-"]').append('<option value="' + k + '">' + k + '</option>');
        });
    });
})

単位変換を実行

「○○の単位を変換する」が押された時に単位変換を実行します。
jQueryオブジェクトの変数名には$を付けています。

JavaScript
$('button[type="submit"]').on('click', (e) => {
    unitConversion($(e.currentTarget).attr('name'));
});

function unitConversion(type) {
    const BEFORE_CONVERSION_UNIT = $('#' + type + '-before-conversion-unit').val();
    const AFTER_CONVERSION_UNIT  = $('#' + type + '-after-conversion-unit').val();
    const $OUTPUT_RESULT  = $('#' + type + '-after-conversion-num');
    const $OUTPUT_FORMULA = $('#' + type + '-formula');
    const BASIC_UNIT_LIST = [
        'm(メートル)',
        'kg(キログラム)',
        's(秒)',
        'm/s(メートル毎秒)',
        'm\u00B2(平方メートル)',
        'm\u00B3(立方メートル)',
        'W(ワット)',
        'K(ケルビン)'
    ];
    
    let beforeConversionNum = $('#' + type + '-before-conversion-num').val().replace('/', '/');
    let result  = '';
    let formula = '';

    LIST.done(data => {
        if (beforeConversionNum.match(/[/]+/)) {
            let match = beforeConversionNum.match(/([0-9]+)[/]([0-9]+)/);
            match[1]  = new BigNumber(match[1]);
            match[2]  = new BigNumber(match[2]);
            beforeConversionNum = match[1].div(match[2]);
        }

        beforeConversionNum = new BigNumber(beforeConversionNum);

        const BASIC_UNIT = Object.keys(data[type]).filter(key =>
            data[type][key]['num'] === 1
        ).toString();

        let baseNum = new BigNumber(data[type][BEFORE_CONVERSION_UNIT]['num']);

        if (BEFORE_CONVERSION_UNIT === AFTER_CONVERSION_UNIT) {
            result = beforeConversionNum;
        } else if (BASIC_UNIT_LIST.indexOf(BEFORE_CONVERSION_UNIT) !== -1) {
            if (AFTER_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)') {
                result = beforeConversionNum.times(1.8).minus(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
                formula = '( 変換前の数値 × 1.8 ) - ' + data[type][AFTER_CONVERSION_UNIT]['num'] + ' = 変換後の数値'
                        + '<br>'
                        + '( ' + beforeConversionNum + ' × 1.8 ) - ' + data[type][AFTER_CONVERSION_UNIT]['num'] + ' = ' + result
                        + '<br>'
                        + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                        + '<br>'
                        + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
            } else if (AFTER_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)') {
                result = beforeConversionNum.minus(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
                formula = '変換前の数値 - ' + data[type][AFTER_CONVERSION_UNIT]['num'] + ' = 変換後の数値'
                        + '<br>'
                        + beforeConversionNum + ' - ' + data[type][AFTER_CONVERSION_UNIT]['num'] + ' = ' + result
                        + '<br>'
                        + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                        + '<br>'
                        + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
            } else {
                result = beforeConversionNum.div(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
                formula = '変換前の数値 ÷ 1' + removeBrackets(AFTER_CONVERSION_UNIT) + 'を'
                        + removeBrackets(BASIC_UNIT) + 'に換算した数値 = 変換後の数値'
                        + '<br>'
                        + beforeConversionNum + ' ÷ ' + data[type][AFTER_CONVERSION_UNIT]['num']
                        + ' = ' + result
                        + '<br>'
                        + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                        + '<br>'
                        + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
            }
        } else {
            if (BASIC_UNIT_LIST.indexOf(AFTER_CONVERSION_UNIT) !== -1) {
                if (BEFORE_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)') {
                    result = (beforeConversionNum.minus(32)).div(1.8).plus(data[type]['\u2103(セルシウス度【摂氏度】)']['num']).toNumber();
                    formula = '( ( 変換前の数値 - 32 ) ÷ 1.8 ) + ' + data[type]['\u2103(セルシウス度【摂氏度】)']['num'] + ' = 変換後の数値'
                            + '<br>'
                            + '( ( ' + beforeConversionNum + ' - 32 ) ÷ 1.8 ) + ' + data[type]['\u2103(セルシウス度【摂氏度】)']['num'] + ' = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                } else if (BEFORE_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)') {
                    result = beforeConversionNum.plus(data[type][BEFORE_CONVERSION_UNIT]['num']).toNumber();
                    formula = '変換前の数値 + ' + data[type][BEFORE_CONVERSION_UNIT]['num'] + ' = 変換後の数値'
                            + '<br>'
                            + beforeConversionNum + ' + ' + data[type][BEFORE_CONVERSION_UNIT]['num'] + ' = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                } else {
                    result = beforeConversionNum.times(baseNum).toNumber();
                    formula = '変換前の数値 × 1' + removeBrackets(BEFORE_CONVERSION_UNIT) + 'を'
                            + removeBrackets(BASIC_UNIT) + 'に換算した数値 = 変換後の数値'
                            + '<br>'
                            + beforeConversionNum + ' × ' + baseNum + ' = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                }
            } else {
                if (
                    BEFORE_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)'
                    && AFTER_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)'
                ) {
                    result = (beforeConversionNum.minus(32)).div(1.8).toNumber();
                    formula = '( 変換前の数値 - 32 ) ÷ 1.8 = 変換後の数値'
                            + '<br>'
                            + '( ' + beforeConversionNum + ' - 32 ) ÷ 1.8 = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                } else if (
                    BEFORE_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)'
                    && AFTER_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)'
                ) {
                    result = beforeConversionNum.times(1.8).plus(32).toNumber();
                    formula = '( 変換前の数値 × 1.8 ) + 32 = 変換後の数値'
                            + '<br>'
                            + '( ' + beforeConversionNum + ' × 1.8 ) + 32 = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                } else {
                    result = beforeConversionNum.times(baseNum.div(data[type][AFTER_CONVERSION_UNIT]['num'])).toNumber();
                    formula = '変換前の数値 × ( 1' + removeBrackets(BEFORE_CONVERSION_UNIT) + 'を'
                            + removeBrackets(BASIC_UNIT) + 'に換算した数値'
                            + ' ÷ 1' + removeBrackets(AFTER_CONVERSION_UNIT) + 'を'
                            + removeBrackets(BASIC_UNIT) + 'に換算した数値 ) = 変換後の数値'
                            + '<br>'
                            + beforeConversionNum
                            + ' × ( ' + baseNum + ' ÷ ' + data[type][AFTER_CONVERSION_UNIT]['num'] + ' )'
                            + ' = ' + result
                            + '<br>'
                            + '変換前の単位:' + data[type][BEFORE_CONVERSION_UNIT]['sup']
                            + '<br>'
                            + '変換後の単位:' + data[type][AFTER_CONVERSION_UNIT]['sup'];
                }
            }
        }

        $OUTPUT_RESULT.val(result);
        $OUTPUT_FORMULA.html(formula);
    });
}

変換前と変換後の単位を設定

selectタグで選択された変換前と変換後の単位を定数に格納します。

JavaScript
const BEFORE_CONVERSION_UNIT = $('#' + type + '-before-conversion-unit').val();
const AFTER_CONVERSION_UNIT  = $('#' + type + '-after-conversion-unit').val();

基本単位を設定

基本単位かどうかによって計算式が変わるため、各カテゴリの基本単位を定数に格納します。
「00B2」は「²」のUnicodeコードポイント、「00B3」は「³」のUnicodeコードポイントです。

JavaScript
const BASIC_UNIT_LIST = [
    'm(メートル)',
    'kg(キログラム)',
    's(秒)',
    'm/s(メートル毎秒)',
    'm\u00B2(平方メートル)',
    'm\u00B3(立方メートル)',
    'W(ワット)',
    'K(ケルビン)'
];

変換前の数値を設定

変換前の数値を変数に格納します。その際、全角スラッシュは半角スラッシュに置換します。

JavaScript
let beforeConversionNum = $('#' + type + '-before-conversion-num').val().replace('/', '/');

単位の変換を開始

Ajaxで変換先と変換後の単位の一覧を取得できていたら開始します。

JavaScript
LIST.done(data => {
    ~
});

分数を少数に変換

入力された分数を少数に変換します。matchメソッドで分子と分母を分割し、bignumber.jsのdivメソッドで分子を分母で割ります。bignumber.jsのメソッドを使用することで浮動小数点数による誤差をなくします。

JavaScript
if (beforeConversionNum.match(/[/]+/)) {
    let match = beforeConversionNum.match(/([0-9]+)[/]([0-9]+)/);
    match[1]  = new BigNumber(match[1]);
    match[2]  = new BigNumber(match[2]);
    beforeConversionNum = match[1].div(match[2]);
}

beforeConversionNum = new BigNumber(beforeConversionNum);

対象の基本単位を設定

dataに格納されている単位一覧の、変換しようとしている単位のカテゴリ内の値が1になっている単位を基本単位として定数に格納します。

JavaScript
const BASIC_UNIT = Object.keys(data[type]).filter(key =>
    data[type][key]['num'] === 1
).toString();

基本単位に換算した数値を設定

基本単位に換算した変換前の単位の数値を変数に格納します。
基本単位に換算した数値は事前に計算して用意しておきます。

JavaScript
let baseNum = new BigNumber(data[type][BEFORE_CONVERSION_UNIT]['num']);

変換前と変換後の単位が同じ場合

変換前と変換後の単位が同じ場合は、変換前の数値をそのまま結果として変数に格納します。

JavaScript
if (BEFORE_CONVERSION_UNIT === AFTER_CONVERSION_UNIT) {
    result = beforeConversionNum;
    ~
}

変換前の単位が基本単位の場合

変換前の単位が基本単位かどうかは、基本単位の一覧に変換前の単位が含まれているかどうかで判定します。

JavaScript
} else if (BASIC_UNIT_LIST.indexOf(BEFORE_CONVERSION_UNIT) !== -1) {
    ~
}

変換前の単位が基本単位、かつ変換後の単位がファーレンハイト度(華氏度)の場合

変換前の単位が基本単位、かつ変換後の単位がファーレンハイト度(華氏度)の場合は、他の単位と共通の計算式が使用できないため、専用の計算式を使用します。変換前の数値にtimesメソッドで1.8を掛けた後、基本単位に換算した変換後の単位の数値をminusメソッドで引きます。

JavaScript
if (AFTER_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)') {
    result = beforeConversionNum.times(1.8).minus(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
    ~
}

「2109」は「℉」のUnicodeコードポイントです。

変換前の単位が基本単位、かつ変換後の単位がセルシウス度(摂氏度)の場合

変換前の単位が基本単位、かつ変換後の単位がセルシウス度(摂氏度)の場合は、ファーレンハイト度(華氏度)と同様に専用の計算式を使用します。変換前の数値からminusメソッドで、基本単位に換算した変換後の単位の数値を引きます。

JavaScript
} else if (AFTER_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)') {
    result = beforeConversionNum.minus(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
    ~
}

「2103」は「℃」のUnicodeコードポイントです。

変換前の単位が基本単位、かつ変換後の単位がファーレンハイト度(華氏度)でもセルシウス度(摂氏度)でもない場合

変換前の数値をdivメソッドで、基本単位に換算した変換後の単位の数値で割ります。

JavaScript
} else {
    result = beforeConversionNum.div(data[type][AFTER_CONVERSION_UNIT]['num']).toNumber();
    ~
}

変換前の単位が基本単位ではない場合

基本単位の一覧に変換前の単位が含まれていない場合、変換前の単位が基本単位ではないと判定します。

JavaScript
if (BASIC_UNIT_LIST.indexOf(BEFORE_CONVERSION_UNIT) !== -1) {
    ~
} else {
    // 変換前の単位が基本単位ではない場合
    ~
}

変換前の単位が基本単位ではない、かつ変換後の単位が基本単位の場合

変換後の単位が基本単位かどうかは、基本単位の一覧に変換後の単位が含まれているかどうかで判定します。

JavaScript
if (BASIC_UNIT_LIST.indexOf(AFTER_CONVERSION_UNIT) !== -1) {
    ~
}

変換前の単位がファーレンハイト度(華氏度)、かつ変換後の単位が基本単位の場合

変換前の数値からminusメソッドで32を引き、それをdivメソッドで1.8で割り、最後にplusメソッドで273.15を足します。

JavaScript
if (BEFORE_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)') {
    result = (beforeConversionNum.minus(32)).div(1.8).plus(data[type]['\u2103(セルシウス度【摂氏度】)']['num']).toNumber();
    ~
}

変換前の単位がセルシウス度(摂氏度)、かつ変換後の単位が基本単位の場合

変換前の数値にplusメソッドで273.15を足します。

JavaScript
} else if (BEFORE_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)') {
    result = beforeConversionNum.plus(data[type][BEFORE_CONVERSION_UNIT]['num']).toNumber();
    ~
}

変換前の単位がファーレンハイト度(華氏度)でもセルシウス度(摂氏度)でもなく、かつ変換後の単位が基本単位の場合

変換前の数値にtimesメソッドで、基本単位に換算した変換前の単位の数値を掛けます。

JavaScript
} else {
    result = beforeConversionNum.times(baseNum).toNumber();
    ~
}

変換前と変換後の単位がどちらも基本単位ではない場合

変換前と変換後の単位が同じではなく、変換前の単位が基本単位でもなく、変換後の単位も基本単位ではないかどうかで判定します。

JavaScript
if (BEFORE_CONVERSION_UNIT === AFTER_CONVERSION_UNIT) {
    ~
} else if (BASIC_UNIT_LIST.indexOf(BEFORE_CONVERSION_UNIT) !== -1) {
    ~
} else {
    if (BASIC_UNIT_LIST.indexOf(AFTER_CONVERSION_UNIT) !== -1) {
        ~
    } else {
        // 変換前と後の単位がどちらも基本単位ではない場合
    }
}

変換前の単位がファーレンハイト度(華氏度)かつ変換後の単位がセルシウス度(摂氏度)の場合

変換前の数値にminusメソッドで32を引き、それをdivメソッドで1.8で割ります。

JavaScript
if (
    BEFORE_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)'
    && AFTER_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)'
) {
    result = (beforeConversionNum.minus(32)).div(1.8).toNumber();
    ~
}

変換前の単位が変換後の単位がセルシウス度かつ変換後の単位がファーレンハイト度の場合

変換前の数値にtimesメソッドで1.8を掛け、それにplusメソッドで32を足します。

JavaScript
} else if (
    BEFORE_CONVERSION_UNIT === '\u2103(セルシウス度【摂氏度】)'
    && AFTER_CONVERSION_UNIT === '\u2109(ファーレンハイト度【華氏度】)'
) {
    result = beforeConversionNum.times(1.8).plus(32).toNumber();
    ~
}

変換前と変換後の単位がどちらも基本単位ではなく、かつ上記二つのどちらでもない場合

基本単位に換算した変換前の単位の数値を、divメソッドで基本単位に換算した変換後の単位の数値で割り、それを変換前の数値にtimesメソッドで掛けます。

JavaScript
} else {
    result = beforeConversionNum.times(baseNum.div(data[type][AFTER_CONVERSION_UNIT]['num'])).toNumber();
}

変換結果を表示

変換後の数値を表示させるinputタグのvalue属性の値に、valメソッドで変換結果をセットし、計算式を表示させる個所にhtmlメソッドで計算式をセットします。

JavaScript
$OUTPUT_RESULT.val(result);
$OUTPUT_FORMULA.html(formula);

おわりに

温度以外は決まった計算式を用いているため、「1海里=1852メートルであるので1ノット=1852メートル毎時」という風に単位間で決まっている単位への変換の場合は誤差が生じます。なので正確に計算する場合はそれぞれの計算式を用意する必要があります。単位変換(換算)には様々な方法があるので、ツールを作成する際は「javascript 単位 変換 換算」などで検索してみてください。

学校授業の「IT化」で、こんなお悩みありませんか?【e-おうち】
出張/持込/宅配でパソコン修理・設定 24時間365日対応
消費税計算

税率を設定して税込/税抜金額の消費税計算ができます。

文字数カウント

文字数をカウントできます。

和暦西暦変換

和暦と西暦を相互変換できます。

年齢計算

和暦または西暦から年齢を計算できます。

入学年・卒業年計算

履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。

単位変換(換算)

キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。

カラーコード変換

カラーコード(16進数)とRGB値(10進数)を相互変換できます。

Webタイマー(カウントダウン)

Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。

生活に便利な電話番号一覧

警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。

プロバイダーのカスタマーサポートの電話番号一覧

主なプロバイダーのカスタマーサポートの電話番号を確認できます。

タスク管理(ToDo)

自分のWebブラウザーだけでタスク管理(ToDo)ができます。

エクセル関数

エクセル関数を検索できます。

麻雀の点数計算

麻雀の和了時の点数(符数/翻数/役)を計算することができます。

便利なショートカット一覧

Windows 10やExcelなどで使用できる便利なショートカットを確認できます。

電気料金計算

消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。

パスワード生成(作成)

大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。

自分のグローバルIPアドレスを確認

自分がインターネットに接続する時のグローバルIPアドレスを確認できます。

出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス株式会社
コメント

パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。

エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。