JavaScript講座・全10回 / 第2回 / 1ページ目（全3ページ）

掲載日：2026年9月13日

JavaScriptくん、電卓係に配属される

第1回で、「在庫が2本以下なら知らせる」という仕事を任されたJavaScriptくん。

翌日、KAZUはもう一つ仕事を頼むことにしました。

さすがに、このくらいの計算なら人でもできます。

でも、商品が10種類、20種類、100種類になったらどうでしょう。

単価が違い、数量も違い、最後に全部の合計を出す。人が電卓で一つずつ計算すれば、時間もかかりますし、入力ミスも起きます。

KAZUは考えました。

そこで、最初の仕事を渡します。

const 商品名 = "洗剤";
const 単価 = 300;
const 数量 = 2;
const 金額 = 単価 * 数量;

JavaScriptくんの返事は、こうです。

ここで大事なのは、単に「300 × 2」と書いていないことです。

商品名、単価、数量、金額。

数字に意味のある名前を付けています。

数字だけでは、あとで分からなくなる

たとえば、次のコードでも計算はできます。

const a = 300;
const b = 2;
const c = a * b;

でも、数日後に見たとき、aが何で、bが何だったのか思い出せるでしょうか。

仕事でも、「あれ」「それ」「いつものやつ」では、新しく入った人には伝わりません。

プログラムも同じです。

「単価」「数量」のように意味が分かる名前を付けておけば、人が読み直したときにも分かりやすくなります。

今回のポイント：JavaScriptに仕事を頼むときは、数字だけでなく「何の数字なのか」まで名前を付ける。

ところが、ここでKAZUは一つ気づきました。

そうです。

JavaScriptくんが頭の中で600円と計算しても、画面に出さなければ、使う人には分かりません。

次は、計算結果を画面へ出してもらいます。

JavaScript講座・全10回 / 第2回 / 2ページ目（全3ページ）

掲載日：2026年9月13日

計算結果を、ちゃんと画面に出してもらう

KAZUは、JavaScriptくんにもう一度頼みました。

ここで、HTMLさんの出番です。

HTMLさんは、結果を表示する場所を用意します。

<p id="結果">ここに金額が出ます</p>

「結果」という目印を付けました。

するとJavaScriptくんは、その場所を探して文字を書き換えます。

document.getElementById("結果").textContent =
  商品名 + "：" + 金額 + "円";

画面には、

洗剤：600円

と表示されます。

HTMLさんとJavaScriptくんの役割

ここで、前回の第1回と同じ考え方が出てきます。

画面の部品があることと、その部品が動くことは別です。

HTMLで表示場所を作り、JavaScriptでそこに結果を入れる。

この役割分担がつながって、初めて利用者に結果が伝わります。

入力 → 計算 → 表示

ここまでの仕事を、3つに分けるとこうなります。

1. 入力：商品名、単価、数量を受け取る。
2. 計算：単価 × 数量で金額を出す。
3. 表示：計算した結果を画面に出す。

KAZUは、発注システムの画面を思い出しました。

ここで、また一つ問題が出ます。

利用者が数量に「2」ではなく、空欄や文字を入れたらどうなるのでしょう。

JavaScriptくんは、指示されたとおり計算しようとします。

でも、正しく計算できない入力なら、こちらで止める仕組みが必要です。

次は、動く機能を「使える機能」に近づけます。

JavaScript講座・全10回 / 第2回 / 3ページ目（全3ページ）

掲載日：2026年9月13日

正しい数字だけ来るとは限らない

KAZUは、数量入力欄を作りました。

1、2、3……と数字を入れれば、計算できます。

ところが、試しに空欄のままボタンを押してみました。

今度は文字を入れてみます。

ここで分かるのは、正しい入力だけで動作確認してはいけないということです。

実際の利用者は、こちらが想定したとおりに入力してくれるとは限りません。

空欄かもしれない。0かもしれない。マイナスの数字かもしれない。文字かもしれない。

そこで、計算する前に確認します。

const 数量 = Number(入力欄.value);

if (!Number.isFinite(数量) || 数量 < 0) {
  結果.textContent = "数量を正しく入力してください";
} else {
  結果.textContent = "合計：" + (単価 * 数量) + "円";
}

今は細かい記号を全部覚えなくても大丈夫です。

やっていることは、

1. 入力された値を数字として読む。
2. 数字として使えない、またはマイナスならエラーを出す。
3. 問題なければ計算する。

という3段階です。

動作確認は「普通」と「変な入力」の両方

KAZUは、ここで少し考え方が変わりました。

これが、実際に使うプログラムを作るときの大切な確認です。

第2回まとめ：JavaScriptくんは計算が速い。ただし「何を入力として受け取るか」「間違った入力をどう扱うか」は、人が決めてあげる必要があります。

次回は、JavaScriptの中で何度も登場する「変数」にもう少し踏み込みます。

JavaScriptくんの机の上には、名前の付いた箱が並び始めます。