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

2022年5月18日

この記事では、ホームページに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()関数が実行されてoutputの要素の値が変わります。
借入金額: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>

プラグインインストールでローンシュミレーションを簡単に設置

ご希望の借入金額や返済期間から、毎月の返済額を計算できる住宅ローンシュミレーションです。

“住宅ローンシュミレーション【元利均等】プラグイン” をダウンロード vente_lone.zip – 121 回のダウンロード – 2 KB

元利均等ローンシュミレーションプラグイン「vente_lone.zip」をダウンロードしていただき、ワードプレス管理画面のプラグイン>新規追加>プラグインのアップロードより「vente_lone.zip」を選択してインストールしてください。

プラグインを有効化していただき、住宅ローンシュミレーションを設置したい記事に下記のショートコード

lone_code file='loan'

を[]で括って追記すれば設置できます。

住宅ローンシュミレーションプラグインのファイル構成

「vente_lone.zip」 を解凍すると、フォルダには下記のファイルがございます。

  1. functions.php
  2. loan.php

「functions.php」はプラグインの内容と投稿ページや固定ページで呼び出すためのショートコードを登録するためのコード記述しています。マンション売却査定プラグインのコードを解説で同様の内容のコードを解説していますのでご参照ください。

<?php
/*
Plugin Name: ローンシュミレーション
Plugin URI: https://jisaku-hp.jp/
Description: お使いのテーマで元利均等のローンシュミレーションプログラムを表示できます。
Author: 廣本 隆史
Version: 1.0
Author URI: https://jisaku-hp.jp/
*/
function lone_Include($params = array()) {
 extract(shortcode_atts(array('file' => 'default'), $params));
 ob_start();
 include(plugin_dir_path( __FILE__ ) . "/$file.php");
 return ob_get_clean();
}
add_shortcode('lone_code', 'lone_Include');
?>

「loan.php」は、この記事で紹介しているHTMLとJavaScriptのコードとCSSを記述しています。

<div class="loan">
<div class="box-title">住宅ローンシュミレーション【元利均等】</div>
<div class="contents">
<p>ご希望の借入金額や返済期間から、毎月の返済額を計算します。返済額がどのように変わるのかシミュレーションしてみましょう。</p>
<form method="post" target="_top" name="loan">
<div class="koumoku_box"><span class="koumoku">借入金額</span><span class="koumoku_value"><input type="number" name="pv" id="pv" value="4000" size="10" min="1">万円</span></div>
<div class="koumoku_box"><span class="koumoku">融資金利</span><span class="koumoku_value"><input type="number" name="ir" id="ir" value="0.625" size="10" min="0.3">%</span></div>
<div class="koumoku_box"><span class="koumoku">返済期間(月数)</span><span class="koumoku_value"><input type="number" name="np" id="np" value="420" size="10" min="1" max="420">ヶ月</span></div>
</tr>
</table>
<button type="button" class="loan-button" onclick="a.value = PMT ();">計算する</button>
<div class="koumoku_box"><span class="koumoku">返済月額</span><span class="koumoku_value red"><input name="a" class="red" value="(計算結果)" readonly>円</span></div>
</div>
</div>
</form>
<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>
<style>
.loan .koumoku_box{ border-bottom:solid 1px; position:relative; height:50px; max-width:400px; margin:auto; margin-top:20px;}
.loan .koumoku{ background:white; position:absolute; bottom:5px; border-radius:10px; padding:5px 10px; border:solid 1px;}
.loan .koumoku_value{position:absolute; right:0; bottom:5px; text-align:right;}
.loan .koumoku_box input{ border:none; background:white; text-align:right; background:none; font-size:20px; max-width:70%;}
.red{ color:red; }
.loan {
    margin: 2em 0;
    background: #fff8e8;
	margin-bottom:50px;
	position:relative;
}
.loan .box-title {
    font-size: 1.2em;
    background: #ffc06e;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.loan .contents{
	padding:10px;
}
.loan p {
    padding: 15px 20px;
    margin: 0;
}
.loan-button {
    text-align: center;
    text-decoration: none!important;
    padding: .5em 1em;
    color: #fff;
    display: block;
    font-size: 1.2em;
    line-height: 1.5em;
    background-color: #09c;
    background-image: -webkit-linear-gradient(#009fd4,#09c,#0086b2);
    background-image: -moz-linear-gradient(#009fd4,#09c,#0086b2);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
    border: 1px solid #0086b2;
    cursor: pointer;
    margin:auto;
    margin-top:30px;
}
</style>