フリマサイトを制作しており、
商品出品画面で、販売手数料と販売利益をリアルタイムで表示させるコードをJSで記述しました。
備忘録として、実装の手順を書いていきます。
今回実装したものがこちら
それでは、実装していきます。
JQueryを使用するので、まず最初にjqueryのインストールをしましょう。
rails6で使用する場合は以前と導入方法が異なります。早速導入していきましょう
Jqueryを使えるようします
まずはjquetyを導入するためのパッケージマネージャーである、yarnをインストールします。
$ brew install yarn
インストールができたら、jqueryを追加します。
$yarn add jquery
これで追加ができました。
次に、webpacker/environment.jsに記述をします。
const { environment } = require('@rails/webpacker')
// ↓追加ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
// ↑追加ここまで
module.exports = environment
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #追記
app/javascript/packs/application.jsにも記述を加えます。
それではコードを記述するためのファイルを作成しましょう。
今回はprice.jsという名前にしたいと思います。
touch app/javascript/test.js
こちらのコマンドでファイルを作成されました。
次にjquery.jsを作成します。
touch app/javascript/jquery.js
jquery.jsにimportを追加します。
import "./price"
これで準備は完了です。
次からは、price.jsにコードを記述していきます。
販売手数料、販売利益を計算し表示させるコード
document.addEventListener("turbolinks:load", function () {
$("#item_price").on("keyup", function () {
console.log("ok");
let price = $(this).val();
let fee = Math.round(price * 0.1);
let profit = price - fee;
$("#fee").text(fee);
$("#profit").text(profit);
});
});
これで完成です。
フォームに入力される度にイベントを発火させたいので、keyupを使用します。
console.logを使って動作しているか確認するのおすすめします。
thisを使い、入力された箇所を検出し、val()で値を取得し、変数priceに代入してあげます。
次に10%の手数料を計算させ、Math.roundを使用して四捨五入してあげ、結果をfeeという変数に代入します。
金額 ー 手数料 = 販売利益 なので、そちらの計算式を書いてあげます。
これで必要な情報は揃いました。
表示させたい場所にセレクタで指定しtext()メソッドを使用して表示されるようにしてあげましょう。
これで完成です。
意外とシンプルな記述だけで完成するものですね。
jsはコードの書き方さえ知っていれば、いろいろ応用して使えそうですね。
