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

公開日:
更新日:
カテゴリー: プログラミング

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

  • HTML
  • javascript・jQuery

をメモしておきます。

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

電気代の計算ツール

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

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

ツールの設計

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

HTML

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

  • 消費電力
  • 1日の使用時間
  • 1か月間の使用日数
  • 1kWhあたりの料金
の4つの数値が必要なので、それを入力してもらうためのフォームをこのように作りました。
<form id="tool">
<p> 消 費 電 力 :<input type="number" min="0.1" step="0.1" name="power-consumption" value="100">W<br />
1日の使用時間:<input type="number" min="0.1" max="24" step="0.1" name="usage-time" value="10">時間<br />
1か月間の使用日数:<input type="number" min="1" max="31" step="1" name="usage-day" value="30">日<br />
1kWhあたりの料金:<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」要素に出力するといった流れです。

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

おわりに

私はWebツールを作成するとき「ajax+PHP」のパターンでつくるのがデフォなのですが、今回も実はフォームの数値をajaxでサーバーにPOSTし、PHPで電気代を計算してリターンしてページに表示させていました。

そして、作り終わったときに

これってjavascriptだけでもできるじゃん・・・

と気づいて作り直しました(自分の頭の悪さにびっくり!なおPHP側では数値確認の処理を入れていましたが、javascript側はめんどくさくなって放棄しました)。

私は趣味でプログラミングをしているレベルでjavascriptよりPHPが好きなのですが、なんでもかんでもPHPでやろうとする悪いクセがあります。

javascript(jQuery)の方がユーザーサイドでサーバーリソースを使わずに済むし、もはやPHPよりjavascriptの方が優秀じゃないか?と気づき始めたので、今後はjavascriptの勉強に力を入れていきたいと思います。

ところで・・・電気代って電卓やスマホがあれば簡単に計算できますよね?なので途中、

 

作る必要あるのか?

と疑問には思っていたのですが、8割がたできていたので今さらやめるわけにもいかず作り上げたのですが、ぶっちゃけ

 

 

誰も使わないですよね?

 

 

 

 

 

俺も使わない。

 

あわせて読んでほしい!

 

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント