コピペでできる！JavaScriptでかんたん計算フォームの作り方

今日はジャバスクリプトを使って、簡単な計算アプリを作って行きたいと思います。

こんな感じの計算フォームを作って行こうと思います。

こんな感じの計算フォームが完成します。

※サンプルの計算フォームはCSSで着色などしていますが、今回はCSSの適用は割愛していますので、好みのデザインに皆さんで仕上げて見てくださいね。

私の書いている記事だと省エネ法の増築を取り扱ったページなどでも使っている仕組みです。

JavaScript自体には条件分岐をしたりしながら、かなり複雑なプログラムを書くこともできますが、ポン。ポン。ポンッ！でできるシンプルな仕組みで解説していきたいと思います。

実際、処理したいプログラムはみんな違うけど、その前後にある、フォームに入力してWEBページに表示するところまではみんな同じなんですよね。

ただ、その入力した値をJavaScriptで受けとる、HTMLに書き出すっていうところが今から始める人にはわからないポイントだったりしますよね。

そんなわけで早速解説していきたいと思います。

HTMLで入力フォームと結果表示欄を作る

まずは数値を入力するための入力フォームをHTMLで作ります。

どんな計算式でもOKですが、ここでは三角形の面積を求める計算フォームを作って見ましょう。

必要な入力項目など、フォームのパーツを整理しておきます。

HTMLのコードはこちら。

<form id="form">
  <p>底辺の長さ</p>
  <input type="text" id="teihen" />
  <p>高さ</p>
  <input type="text" id="takasa" />
  <p>割る2</p>
  <input type="text" id="waru" />
  <input id="submit" type="submit" value="計算する" />
</form>
<div id="menseki"></div>

ここではinputタグにIDを設定していることろがポイントです。

JavaScriptから値を取得するときに、どこの値を取得するか指定するために使う名前になります。

フォームの下には結果を表示するスペースとしてDIVにmensekiというIDを付けて用意しておきます。

この中身をJavaScriptを使って書き換えて、計算結果を表示します。

フォームに入力された数値をJavaScriptで受け取る

HTMLの入力フォームで入力した値をJavaScriptで受け取るにはいくつかの工程があります。

HTMLの要素を取り込んでその中から値を受け取り、数値型というものに変換して計算を行う流れになります。

工程ごとにわかりやすくポイントを説明していきたいと思います。

①入力フォームの値を受け取る

JavaScriptで入力フォームの数値を受け取るプログラムを書いていきます。

// フォームの値をJavaScriptの変数で受け取る
const form = document.getElementById("form");
const teihen = form.teihen;
const takasa = form.takasa;
const menseki = form.waru;

constというのは定数を扱うもので、その後ろに任意の名前を記述することで、それを名前のついた入れ物として使うことができます。（constは定数なので、一度入れたものを入れ替えることはできません）

「=」はその右側に書いたものをconstで定義した名前の入れ物の中に入れるための記号です

const form = document.getElementById("form");ではdocument.getElementByIdという呪文を使って、HTMLの中のid=”from”の値を取って来ます。

それをconstで作ったformという名前の箱に入れています。

次のからはconst teihen = form.teihen;という呪文でconst formという箱の中から、id=”teihen”がついたHTML要素を取り出して、constで作ったteihenという箱の中に入れています。

受け取った値の確認

実際に入力フォームから値を受け取れているか確認してみましょう。

「計算する」ボタンを押したときに中身が確認できる仕組みを作ります。

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなるコマンド
  const teihen = form.teihen;
  const takasa = form.takasa;
  const waru = form.waru;

  console.log(form);
  console.log(teihen);
  console.log(takasa);
  console.log(waru);
});

form.addEventListener("submit", function (event) は

constで指定したformという名前の箱の中にあるsubmitボタンが実行（クリック）されたときにfunctionの中のeventを実行してね。というプログラムです。

今回は「計算する」ボタンをクリックしたときに、ページのリロードをかけたくないので、event.preventDefault();でリロードがかからないようにしています。

最後にコンソールで表示されるようにconsole.logを書いておきます。

コンソールの表示の仕方はブラウザによりますが、Google Chromeを使っている場合は、MACなら「option + command + i」で表示ができ、Windowsは「F12」で開くことができます。

ここのコンソールタブを開くとconsole.logで書いたものの中身が表示されます。

では実行してみましょう。

おや？HTMLのタグが入っているようですねぇ。

この中にある入力数値だけ使いたいので、.valueというものを使ってこんな感じで書き換えて上げましょう。

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなる
  const teihen = form.teihen.value;
  const takasa = form.takasa.value;
  const waru = form.waru.value;

  console.log(form);
  console.log(teihen);
  console.log(takasa);
  console.log(waru);
});

どうですか？うまく値が受け取れましたか？

データ型を数値に変換する

ここまでで、入力フォームの値を受け取るところまで完成しましたが、この値を計算で使うにはデータ型を数値に変換する必要があります。

デフォルトでは文字列としての数字が入っているため、算数的に数字を足し合わせることができません。

数値に変換するための呪文は「Number」です。

さっき書いた呪文にNumberを書き足してあげることで受け取った文字列が数値に変わります。

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなる
  const teihen = Number(form.teihen.value);
  const takasa = Number(form.takasa.value);
  const waru = Number(form.waru.value);

  console.log(form);
  console.log(teihen);
  console.log(takasa);
  console.log(waru);
});

これで無事に計算に使う数値をJavaScriptで受け取ることができました。

JavaScriptで計算式を作る

受け取った数値を使って、三角形の面積を求める計算式をJavaScriptで書いて行きましょう。

三角形の面積の求め方って今と昔と変わったんですか？

ひとまずそれは置いておいて、僕らが使っていた底辺✕高さ÷2という公式を使って求めて行きます。

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなる
  const teihen = Number(form.teihen.value);
  const takasa = Number(form.takasa.value);
  const waru = Number(form.waru.value);

  const menseki = (teihen * takasa) / waru;

  console.log(menseki);
});

const menseki = (teihen * takasa) / waru;で計算式は完成です。

mensekiという箱に計算結果を入れています。

まんまですね笑

先程と同じ用にコンソールを使って計算結果を確認してみましょう。

今回、計算結果はmensekiという箱に入れてあるので、console.logではmensekiの箱の中を見てみましょう。

うまくいきましたか？

あとはこの「割る2」というのは毎回変わらないので、入力の手間を省くために、いつも2が入るように変えて置きましょう。

HTMLではwaruのインプットタグを消します。

<form id="form">
  <p>底辺の長さ</p>
  <input type="text" id="teihen" />
  <p>高さ</p>
  <input type="text" id="takasa" />
  <input id="submit" type="submit" value="計算する" />
</form>
<div id="menseki"></div>

JavaScriptではwaruの値を2に書き換えます。

// フォームの値をJavaScriptの変数で受け取る
const form = document.getElementById("form");
const teihen = form.teihen;
const takasa = form.takasa;
const waru = 2;

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなる
  const teihen = Number(form.teihen.value);
  const takasa = Number(form.takasa.value);

  const menseki = (teihen * takasa) / waru;

  console.log(menseki);
});

const waruには受け取った値ではなく「2」を入れておきます。

この時ダブルクオーテーションマークなどがつかないようにしましょう。

先程のデータ型の話になりますが、ダブルクオーテーションマークなどがつくと文字列になってしまいます。

これで計算式は完成です。

JavaScriptからHTMLに計算結果を書き出す

それでは最後に計算結果をHTMLに書き出して仕上げていきましょう。

流れとしてはこの2つだけになります。

計算結果を書き出すだけではなく、一緒にHTMLのコードを書き加えることもできます。

// フォームの値をJavaScriptの変数で受け取る
const form = document.getElementById("form");
const teihen = form.teihen;
const takasa = form.takasa;
const waru = 2;
const mensekiResult = document.getElementById("menseki");

// 計算するボタンをクリックで実行
form.addEventListener("submit", function (event) {
  event.preventDefault(); //ブラウザのリロードかからなくなる
  const teihen = Number(form.teihen.value);
  const takasa = Number(form.takasa.value);

  const menseki = (teihen * takasa) / waru;
  mensekiResult.innerHTML = `三角形の面積は<strong> ${menseki}m2</strong>です`;
});

書き出し先のHTML要素をconst mensekiResult = document.getElementById("menseki");を使って、mensekiResultという箱に入れました。

mensekiResult.innerHTML = <strong> ${menseki}m2</strong>;で、その中身に<strong> ${menseki}m2</strong>を入れています。

.innerHTMLを使うことで、mensekiResultの中身を書き換えています。

これで完成です。

中身を少し変えるだけで、様々な計算フォームや判定フォームなどを作ることができる、汎用性の高い技術なので、ぜひ色々と試してみてください。