入力してもらった数値をJavaScript(jQuery)を使って動的に計算させる @TECH CAMP #23
どうも、やる事たくさんで暇しない、とだです。もっと遊びたい。
前回の投稿の最後に「gem 'ancestry'による多階層データを用いて、選択肢を動的に変化させる機能をJavaScript（jQuery）とAjax(非同期通信)を用いて実装する」話を投稿すると言いましたが、内容が結構重たい(量が多い)ので、その前に軽い話を先に投稿してしまおうと思います。
フリマアプリなどにある、金額を入力したらそれに関わる金額を自動で計算してくれる機能を実装したい
それも入力したら、そのまますぐさま反映されるような動的なページを作りたい、という要望を叶えてくれる機能のご紹介です。
イメージとしては上の画像のような入力欄に数値を入力した時…
このように下の欄に計算結果を反映させる事ができます。
どうやって実装するのか
この機能はJavaScript(下記のコードはjQueryを用いています)を使って実装できます。販売価格の入力欄が変更されたことを検知して計算を始め、結果を反映させる、ということを即座にやってくれるイメージです。下にコードを載せます。
// 販売価格が入力されたら、販売手数料と販売利益を計算してくれます
$(function(){
$( document ).on( 'keyup', 'ここに販売価格入力欄のclassもしくはid名', function(){
// 販売価格の入力欄に入力すると動きます
let amount = $( this ).val();
// 販売価格の入力欄に入力された値を変数「amount」に代入
let tax = Math.ceil(amount * 0.1);
// 販売手数料は10%としています。またMath.ceilメソッドで1円単位に切り上げています。
// 計算結果を変数「tax」に代入
let profit = Math.floor(amount * 0.9);
// 利益は残りの金額。Math.floorメソッドで、1円単位で切り捨てておけば「販売価格 = 販売手数料 + 販売利益」が成り立ちます。
// 計算結果は変数「profit」に代入。
$('ここに販売手数料の欄のclassもしくはid名').html(tax);
// htmlメソッドを使って販売手数料の欄を丸ごと書き換えます。
$('ここに販売利益の欄のclassもしくはid名').html(profit);
// 同じように販売利益の欄も書き換えます。
});
});それぞれの部分にコメントアウトで説明を書いてあります。
メソッドを解説
ここで出てくるメソッド等を少し解説します。
on()メソッド
「on()」は、さまざまなイベント処理、例えば
・マウス操作（クリック、ホバー、移動など）が行われた時
・キーボードから何か入力された時
・フォームが送信された時
・任意のフォーム要素にフォーカスされた時
・画面がスクロールされた時
etc...
などのイベントを処理する記述をするために使われるメソッドです。今回の場合は「入力されたらどうするか」を記述していきます。
イベントタイプ「keyup」
まずJavaScriptにおけるイベントという概念は、HTMLの要素に対して行われた処理要求のことをいいます。例えば「ブラウザ上、ページの中にあるボタンをクリックした」「テキストフィールドでキーボードで入力をした」「要素の上にマウスカーソルを乗せた」などがいずれもイベントです。このイベントの種類をイベントタイプと言います。
また、イベントを起こすのはユーザーだけでなく、「ドキュメントの読み込みが終わった」などブラウザが発生させるものもあります。
イベントタイプとしてはkeyupを使用するのがカッコイイです。入力した瞬間にjavascriptが動き出すので、見ているページがリアルタイムで動き、利用しているユーザーにも優しい仕様となります。他にも似たようなイベントタイプがありますが、keydownだと今入力した文字が含まれない状態でイベントが実行されてしまいますし、changeを使うとテキストボックスからフォーカスが外れないとイベントが発火しない(動き出さない)のでオススメしません。
補足ですが、場合によってはキー入力とボタン操作のどちらでもイベント発火させたい、なんていう複数のイベントタイプに応じてonメソッドを使いたい時があります。そういう時、つまりchangeとkeyupを同時に使いたい時は以下のように記述すればOKです。
$( document ).on( 'change keyup', 'classもしくはid名', function(){...上記でも触れましたが、さまざまなイベント処理のうち、主なイベントを以下に列挙します。
イベント名 内容
change フォーム部品の状態に何らかの変化があった時に発動
click 要素がクリックされた時に発動
blur / focus 要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
load ドキュメントが読み込まれたあとに発動
resize ウィンドウサイズが変化した時に発動
scroll 画面がスクロールした時に発動
keyup / keypress キーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedown マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove 指定の要素内でマウスが動いている時に発動
submit フォームが送信された時に発動
error 何らかのJavaScriptエラーが発生した時に発動
$(this)の値について
onメソッドの内部では、$(this)と書くことでonメソッドを利用しているノードのオブジェクトが参照されます。今回は変更された販売価格の入力欄のdivタグを指します。
val()メソッド
「val()」は、HTMLタグ内に記述されているvalue属性を取得したり変更することができるメソッドです。今回は販売価格入力欄に入力された数値を取得しています。
Math.ceil()メソッド
このメソッドは、引数として与えられている()内の計算式の結果の小数点以下を切り上げてくれます。
Math.floor()メソッド
このメソッドは先ほどとは逆に、引数として与えられている()内の計算式の結果の小数点以下を切り捨ててくれます。
html()メソッド
「html()」を使うと、任意のHTML要素を取得したり意図的に要素を追加・書き換えをすることが出来るメソッドです。1つの要素を3つに増やしたり、削除してしまったり、p要素をa要素にしてリンクに変えてしまう事も出来ます。今回は引数に変数(今回はtaxやprofit)を入れて、それぞれのクラス名が当たっているdiv要素の中身をごっそり書き換えています。
※参考にした記事は以下に載せておきます。
おしまい
なんだかんだ長くなってしまいましたが、備忘録として残しておきたいと思います。どなたかの助けになれば幸いです。いつもここまで読んでいただいてありがとうございます！次こそはgem 'ancestry'についての記事を投稿できますように…！