車で移動するときに使うガソリン代は、走行距離・実燃費・ガソリン単価が分かれば計算できます。
計算式そのものはシンプルですが、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で公開しています。
走行距離、実燃費、ガソリン単価を入力すると、必要燃料量とガソリン代を自動計算します。
詳細設定では、走行回数や乗車人数も指定できます。
まとめ
ガソリン代の基本式は、
必要燃料量 = 総走行距離 ÷ 実燃費
ガソリン代 = 必要燃料量 × ガソリン単価
とシンプルです。
しかしWebツールとして実装すると、
- 走行回数を含めた総走行距離
- 実燃費0による除算エラー
- 入力文字列から数値への変換
- 小数の内部計算と表示上の丸め
- 乗車人数による1人あたり費用
- 入力変更時の自動再計算
- 基本入力と詳細設定の分離
なども考える必要があります。
単純な計算ツールでも、計算式そのものより「入力から結果表示までをどう設計するか」の方が、実装上は重要になる部分が多いと感じました。