電気代を計算するツールを作りました！

公開日：2017/08/15

更新日：2019/09/17

カテゴリー: プログラミング

電気代を計算するツールを作ったので、そのときにコードした

HTML
javascript・jQuery

をメモしておきます。

ほんとつまらないツールなので誰が得するんだよ感満載ですが、プログラム初心者の方には役立つかもしれません。

電気代の計算ツール

電気代を計算するツールは既に巷に溢れておりわざわざ作成する必要はなかったのですが、暇つぶしを兼ねて最近さぼっていたプログラミングをするために作ってみました。

実際に作成したツールは電気代の計算ツールです。

ツールの設計

このツールは、数値記入のためのHTML（フォーム）部分と記入された数値を用いて電気代の計算を行うjavascript部分からなります。

HTML

電気代の計算のためには、調べたい電化製品の

消費電力
１日の使用時間
１か月間の使用日数
１kWhあたりの料金

の4つの数値が必要なので、それを入力してもらうためのフォームをこのように作りました。

<form id="tool">
<p>　消　費　電　力　：<input type="number" min="0.1" step="0.1" name="power-consumption" value="100">W<br />
１日の使用時間：<input type="number" min="0.1" max="24" step="0.1" name="usage-time" value="10">時間<br />
１か月間の使用日数：<input type="number" min="1" max="31" step="1" name="usage-day" value="30">日<br />
１kWhあたりの料金：<input type="number" min="0.1" step="0.1" name="price-per-1kwh" value="24">円</p>
<p><input id="calculation-button" type="submit" value="計算" /></p>
</form>

特に説明が必要な部分はないのでHTMLは以上です。

なお、電気代の計算は読み込みJSファイルに記述したjavascriptで行うので、計算結果の出力のために次のHTMLコードも準備しました。

<div id="add-contents"></div>

jsはべた書きしてもよかったのですが、サイトはWordPressで運営しており、あんまりエディタ部分にjavascriptのコードは書きたくないので外部ファイルに記述しました。

javascript・jQuery

javascript・jQueryの部分はこのようにしました。

jQuery(function($){
	//計算ボタンのクリックアクション
	$('#tool').submit(function(event){
		// HTMLでの送信をキャンセル
		event.preventDefault();

		//値を取得
		power_consumption = $('[name="power-consumption"]').val();
		usage_time = $('[name="usage-time"]').val();
		usage_day = $('[name="usage-day"]').val();
		price_per_1kwh = $('[name="price-per-1kwh"]').val();

		//電気代の計算
		answer = power_consumption / 1000 * price_per_1kwh * usage_time * usage_day;

		//出力
		$('#add-contents').prepend('<p>' + Math.round(answer) + '円</p>');
	});
});

流れとしては「計算」ボタンが押されたときのイベント（正確にはフォームのsubmit）を着火として、フォームの数値をjQueryで取得して、理科で習った知識で計算して電気代をゲット！

そしてそれをjQueryでHTMLの「add-contents」要素に出力するといった流れです。

本当はフォームに入力された値が「数値」であるかの確認が必要ですが、たぶん誰も使わないだろうし、使う自分は仕様が分かっているのでわざわざ時間かけるのも面倒だったので実装しませんでした。