【コピペで簡単】WordPressで作った不動産ホームページに住宅ローンシュミレーション( Javascript）を設置する

この記事では、ホームページにjavascriptで作成した住宅ローンシュミレーションを設置します。コピペで簡単に設置できるのでご利用下さい。

元利均等でのローンシュミレーション

元利均等ローンシュミレーションの計算式

元利均等でのローンシュミレーションで、毎月の返済額が試算できます。
コードをコピペで簡単に設置できますが、計算式を覚えておくと利用方法やカスタマイズの幅が広がるかと思いますので、記載します。

【計算式】
毎月の返済額＝（借入金額（借入金利/12）（1+（借入金利/12））^返済回数）/（（1+（借入金利/12））^返済回数－1）
計算式に数字を入れていくと下記になります。
エクセルに＝以降を入力すると確認できます。
借入金額：3000万円
借入金利：0.75％
返済回数：420回

81235.45＝(30000000*(0.0075/12)*(1+(0.0075/12))^420)/((1+(0.0075/12))^420-1)

Javascriptで元利均等ローンシュミレーションを作成する

コピペするのは、javascriptとフォームの2つです。

フォーム
【解説】
設置箇所：記事内
inputの各要素に下記のnameを割り当てて、ユーザーが入力後に計算ボタンをクリックすると、javascriptで作成されたPMT（）関数が実行されてinputの要素の値が変わります。
借入金額：pv
融資金利：ir
返済期間（月数）:np

<form method="post" target="_top" name="loan">
<table>
<tr>
<td>借入金額：<input name="pv" id="pv" value="4000" size="10" min="1">万円</td>
</tr>
<tr>
<td>融資金利：<input type="number" name="ir" id="ir" value="0.625" size="10" min="0.3">%</td></tr><tr><td>返済期間（月数）：<input type="number" name="np" id="np" value="420" size="10" min="1" max="420">ヶ月</td>
</tr>
</table>
<div style="text-align:center; margin-top:20px;"><button type="button" class="square_btn" onclick="a.value = PMT ();">計算</button></div>
<table>
<tr>
<th>返済月額</th>
</tr>
<tr>
<td><input name="a" class="satei_result" value="（計算結果）"><span class="red">円</span></td>
</tr>
</table>
</form>

Javascript
【解説】
設置箇所：一つの記事で使用するのであれば記事内に、複数の記事で使用するのであればfooter.phpにペーストして下さい。
下記の変数を宣言し、formのinput要素を代入します。
借入金額：pv　＝　document.loan.pv.value
融資金利：ir　＝　document.loan.ir.value
返済期間（月数）:np　＝　document.loan.np.value
「parseFloat関数」は文字列を数値に変換する関数です。
「floor関数」は小数点以下の値を切り捨てた結果を返します。
「pow関数」は1番目の引数を、2番目の引数で累乗した値を返します。
「toLocaleString関数」で整数部分を3桁毎に区切り文字を挿入した形式で文字列に変換した結果を返します。（ロケールに応じたNumberクラスのオブジェクトの文字列表現を返します。）

<script>
function PMT() {
var pv = parseFloat(document.loan.pv.value);
var ir = parseFloat(document.loan.ir.value);
var np = parseFloat(document.loan.np.value);
   return Math.floor((pv *10000 * (ir / 100 / 12) * (Math.pow(1 + (ir / 100 / 12), np))) / (Math.pow(1 + (ir / 100 / 12), np) -1)).toLocaleString();
}
</script>