車で移動するときに使うガソリン代は、走行距離・実燃費・ガソリン単価が分かれば計算できます。

計算式そのものはシンプルですが、Webツールとして実装する場合は、

走行回数をどう扱うか
必要燃料量をどの順番で計算するか
小数をどう表示するか
入力変更時にどう自動更新するか
乗車人数を使った1人あたり費用をどう出すか

といった部分まで設計する必要があります。

株式会社NENKA JAPANが運営する「日々Calc」では、走行距離・実燃費・ガソリン単価からガソリン代を計算できるツールを公開しています。

今回は、その計算ロジックを整理します。

基本となる計算式

ガソリン代を求めるためには、最初に必要燃料量を計算します。

必要燃料量は、

必要燃料量 = 総走行距離 ÷ 実燃費

で求められます。

たとえば、

走行距離：60km
実燃費：18km/L

の場合、

60 ÷ 18 = 3.333...

となるため、必要燃料量は約3.33Lです。

次にガソリン単価を掛けます。

ガソリン代 = 必要燃料量 × ガソリン単価

ガソリン単価が175円/Lなら、

3.333... × 175 = 583.333...

なので、ガソリン代は約583円になります。

1つの式にまとめる

必要燃料量を中間値として持たず、1つの式として表すこともできます。

ガソリン代 = 総走行距離 ÷ 実燃費 × ガソリン単価

60km、18km/L、175円/Lの場合は、

60 ÷ 18 × 175

です。

実装上は1行で計算できますが、画面上では、

総走行距離
必要燃料量
ガソリン代

をそれぞれ表示できるようにした方が、ユーザーが計算結果を理解しやすくなります。

そのため、内部では中間値である必要燃料量も保持する形にしました。

100km走行する場合

もう少し分かりやすい例として、

走行距離：100km
実燃費：10km/L
ガソリン単価：175円/L

を考えます。

必要燃料量は、

100 ÷ 10 = 10L

です。

ガソリン代は、

10 × 175 = 1,750円

となります。

1つの式なら、

100 ÷ 10 × 175 = 1,750円

です。

このように、基本ロジック自体はかなり単純です。

Webツールとして考えたときに重要なのは、入力値をどのように扱うかです。

走行回数を加える

実際には、同じ距離を複数回走るケースがあります。

たとえば、

片道60km
走行回数2回

の場合、総走行距離は、

60 × 2 = 120km

です。

そのため、ツール内部ではまず、

総走行距離 = 走行距離 × 走行回数

を計算します。

その後、

必要燃料量 = 総走行距離 ÷ 実燃費

を求めます。

処理の順番としては、

走行距離
↓
走行回数を反映
↓
総走行距離
↓
実燃費で割る
↓
必要燃料量
↓
ガソリン単価を掛ける
↓
ガソリン代

という流れになります。

乗車人数を使った1人あたり費用

複数人でドライブする場合、ガソリン代を人数で分けたいこともあります。

その場合は、

1人あたりのガソリン代 = ガソリン代 ÷ 乗車人数

で計算できます。

たとえばガソリン代が1,750円で、4人乗車している場合は、

1,750 ÷ 4 = 437.5

となります。

ただし、実際の支払いでは0.5円単位では扱えません。

ここでは、

計算上の値

と、

実際に支払う金額

を分けて考える必要があります。

ガソリン代計算ツールでは、まず計算結果として費用を表示し、人数を入力した場合には1人あたりの目安も確認できるようにしています。

実燃費が0の場合を防ぐ

計算式は、

必要燃料量 = 総走行距離 ÷ 実燃費

なので、実燃費が0の場合は除算できません。

JavaScriptで単純に処理すると、

const fuel = distance / efficiency;

efficiency が0の場合、

Infinity

になる可能性があります。

そのため実装では、計算前に入力値を確認する必要があります。

たとえば考え方としては、

if (efficiency <= 0) {
  return null;
}

のように、0以下の場合は計算を止めます。

距離やガソリン単価についても、負の値をそのまま計算に使わないようにしておく方が安全です。

入力値は文字列として受け取る

HTMLの入力欄から取得した値は、基本的に文字列として扱われます。

たとえば、

<input type="number" id="distance">

から、

const value = document.querySelector("#distance").value;

で取得した場合、value は文字列です。

そのため計算前に、

const distance = Number(value);

などで数値へ変換します。

複数の入力値を扱うなら、

const distance = Number(distanceInput.value);
const efficiency = Number(efficiencyInput.value);
const price = Number(priceInput.value);

のようにします。

その上で、

const totalDistance = distance * trips;
const fuelAmount = totalDistance / efficiency;
const gasolineCost = fuelAmount * price;

と計算できます。

表示用の丸めと内部計算を分ける

60kmを18km/Lで走る場合、

60 ÷ 18 = 3.333333...

となります。

この値をそのまま画面に表示すると読みにくいため、必要燃料量は小数点以下を整理して表示したくなります。

ただし、ここで内部値そのものを先に丸めると、最終的なガソリン代に誤差が生じる可能性があります。

たとえば、

3.33 × 175 = 582.75

ですが、

3.333333... × 175 = 583.333...

です。

そのため、

内部計算：丸める前の数値
画面表示：必要な桁数へ整形

と分けて扱う方が安全です。

JavaScriptなら、

const fuelAmount = totalDistance / efficiency;
const gasolineCost = fuelAmount * price;

const displayFuel = fuelAmount.toFixed(2);

のような考え方です。

最終的な費用についても、表示時に円単位へ整えます。

計算ボタンを置かずに自動更新する

このツールでは、計算ボタンを押す必要がない形にしています。

ユーザーが、

走行距離を変更する
実燃費を変更する
ガソリン単価を変更する
走行回数を変更する
乗車人数を変更する

と、その時点で結果を再計算します。

基本的には各入力欄の input や change イベントを監視します。

たとえば、

distanceInput.addEventListener("input", calculate);
efficiencyInput.addEventListener("input", calculate);
priceInput.addEventListener("input", calculate);

のような形です。

そして計算処理を1つの関数にまとめます。

function calculate() {
  const distance = Number(distanceInput.value);
  const efficiency = Number(efficiencyInput.value);
  const price = Number(priceInput.value);

  if (
    distance < 0 ||
    efficiency <= 0 ||
    price < 0
  ) {
    return;
  }

  const fuelAmount = distance / efficiency;
  const gasolineCost = fuelAmount * price;

  // 結果を画面へ反映
}

入力イベントのたびに同じ関数を呼び出せば、計算ロジックを複数箇所に書く必要がありません。

詳細設定は基本計算と分離する

ガソリン代を知りたいだけなら、

走行距離
実燃費
ガソリン単価

の3つで計算できます。

走行回数や乗車人数まで最初からすべて表示すると、画面が複雑になります。

そのため、

基本入力

と、

詳細設定

を分けて考えました。

基本入力では、

走行距離
実燃費
ガソリン単価

だけを表示します。

必要なユーザーだけ詳細設定を開いて、

走行回数
乗車人数

を入力します。

機能を増やしても、初期画面の操作量を増やさないようにする考え方です。

実燃費が分からない場合

ガソリン代を計算するには実燃費が必要です。

実燃費が分からない場合は、

実燃費 = 走行距離 ÷ 使用した燃料量

で求められます。

つまり、ガソリン代計算と燃費計算は別々の計算に見えて、内部では関連しています。

走行距離 + 給油量
↓
実燃費

走行距離 + 実燃費 + ガソリン単価
↓
ガソリン代

という関係です。

Webツールを設計するときは、こうした関連する計算を分離しておくと、それぞれの入力項目をシンプルにできます。

実際のツール

今回紹介した考え方を使ったガソリン代計算ツールを、日々Calcで公開しています。

走行距離、実燃費、ガソリン単価を入力すると、必要燃料量とガソリン代を自動計算します。

詳細設定では、走行回数や乗車人数も指定できます。

日々Calcのガソリン代計算ツール

まとめ

ガソリン代の基本式は、

必要燃料量 = 総走行距離 ÷ 実燃費
ガソリン代 = 必要燃料量 × ガソリン単価

とシンプルです。

しかしWebツールとして実装すると、

走行回数を含めた総走行距離
実燃費0による除算エラー
入力文字列から数値への変換
小数の内部計算と表示上の丸め
乗車人数による1人あたり費用
入力変更時の自動再計算
基本入力と詳細設定の分離

なども考える必要があります。

単純な計算ツールでも、計算式そのものより「入力から結果表示までをどう設計するか」の方が、実装上は重要になる部分が多いと感じました。