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

掲載日：2026年9月12日

職場に、ものすごく速い新人が来た

ある日、数人さんの職場に、新しい助手がやってきました。

名前は「JavaScriptくん」。

この助手、とにかく計算が速い。商品が100個あっても、同じ手順の計算を延々と続けられます。

ただし、仕事を頼むにはコツがあります。

数人さんが言いました。

「洗剤、そろそろ少ないから、いい感じにしておいて」

JavaScriptくんは動きません。

さぼっているのでしょうか。

いいえ。「そろそろ」「少ない」「いい感じ」の具体的な意味が、プログラムに書かれていないからです。

そこで、指示を変えます。

「洗剤の在庫が2本以下だったら、画面に『発注してください』と表示して」

これなら、動く仕組みを作れます。

const 在庫 = 1;

if (在庫 <= 2) {
  alert("洗剤を発注してください");
}

今は記号を覚えなくても大丈夫です。書いてあることは、次の3つです。

1. 在庫は1本。
2. 2本以下かどうか確かめる。
3. 当てはまったら、お知らせを出す。

プログラミングの第一歩は、曖昧なお願いを、実行できる手順に変えることです。

これは、職場の引き継ぎにも似ています。

「いつものようにお願いします」では、初めて担当する人には伝わりません。

「食事が終わったら食器を下げて、テーブルを拭いてください」なら、行動に移しやすくなります。

数人さんが発注システムについて決めた、

「最低在庫数に達したら、発注が必要と分かるようにする」

というルール。それは、まさにプログラムに必要な指示です。

コードを書き始める前から、設計は始まっています。

ただし、JavaScriptくんには棚を見る目はありません。

棚から洗剤を1本使っても、それだけでは画面の数字は変わりません。人が使用数を入力するなど、現実の変化を伝える仕組みが必要です。

計算を任せることと、現実の情報を集めることは、別々の仕事なのです。

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

掲載日：2026年9月12日

画面の裏には、3人の担当者がいる

今度は、発注画面を一つ作ることにします。

登場するのは、3人の担当者です。

HTMLさんが「発注する」というボタンを置きました。

CSSさんが、ボタンを見やすい緑色にしました。

立派な画面になりました。

ところが、押しても発注処理が始まりません。

そこでJavaScriptくんの出番です。

「このボタンが押されたら、この処理をする」という指示をつなぎます。

まずは、押すと文字が変わる小さな例を見てみましょう。

<button onclick="返事する()">呼び出す</button>

<p id="伝言">待機中です</p>

<script>
function 返事する() {
  document.getElementById("伝言").textContent =
    "はい、何を計算しましょう？";
}
</script>

画面には、最初に次のものが出ます。

「呼び出す」ボタンと、「待機中です」という文字です。

ボタンを押すと、文字が変わります。

はい、何を計算しましょう？

このとき、裏側では3つのことが起きています。

1. ボタンが押された。
2. 「返事する」という名前の処理が呼ばれた。
3. 「伝言」という目印の場所の文字を書き換えた。

functionは、ひとまとまりの仕事に名前を付けるための書き方です。

ここでは、その仕事を「返事する」と名付けました。

id="伝言"は、画面の部品に付けた目印です。

職場で「そこの書類を取って」と言われても、書類が何枚もあれば迷いますよね。

「発注書と書かれたファイルを取って」なら、探す対象が分かります。

JavaScriptも同じです。画面のどの場所を変えるか、目印を使って指定できます。

ここまで分かると、以前の「ボタンが反応しない」という問題の見方が変わります。

見た目が完成していても、呼び出す処理の名前が違っていたり、途中でエラーが起きていたりすると、目的の動作にはつながりません。

画面があることと、仕事の流れがつながっていることは、それぞれ確認が必要です。

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

掲載日：2026年9月12日

小さな判断を、一つ任せてみる

では、JavaScriptくんに発注の判断を一つ任せましょう。

今回は、次のルールです。

洗剤の在庫が2本以下なら、「発注が必要です」。3本以上なら、「在庫は足りています」。

コードにすると、こうなります。

const 在庫 = 1;
const 最低在庫 = 2;

if (在庫 <= 最低在庫) {
  alert("発注が必要です");
} else {
  alert("在庫は足りています");
}

急に難しそうに見えるかもしれませんが、順番に読むと単純です。

const 在庫 = 1;

「在庫」という名前を付けて、数字の1を扱います。

こうして情報に名前を付けると、数字だけを並べるより意味が分かりやすくなります。こうした名前付きの情報を扱う仕組みが「変数」です。なお、constで作った名前には、後から別の値を代入できません。

if (在庫 <= 最低在庫)

「もし、在庫が最低在庫以下なら」という意味です。

<=は「以下」。今回なら、2本ちょうども含みます。

else

「そうでなければ」という意味です。

今回は、在庫が2本以下ではない場合に「在庫は足りています」と表示します。

これで、在庫数によって返事が変わるようになりました。

動作を確かめてみましょう。

ここで、数人さんがわざと記号を変えたとします。

if (在庫 >= 最低在庫)

>=は「以上」です。

すると、10本あるのに「発注が必要です」と言い、0本なのに「在庫は足りています」と言ってしまいます。

JavaScriptくんは、胸を張って報告します。

「指示どおりに実行しました！」

たしかに、書かれた指示には従っています。でも、頼みたかった仕事とは逆です。

これが、動いてはいるけれど、結果が間違っている不具合です。

だから確認するときは、「何か表示された」で終わりにせず、「この数字なら、この結果になるはず」と比べます。

特に今回は、境目の2本と3本を確かめると、ルールの間違いを見つけやすくなります。

なお、この例は学習用です。本物の入力画面では、空欄やマイナスの数字が入った場合も考えます。それは、基本の動きを理解してから追加していきましょう。

今日の持ち帰りは、3つです。

• JavaScriptは、画面の動作や計算を担当する。
• 人が決めたルールを、具体的な指示にする。
• 動いた後は、期待どおりの結果か確かめる。

次回は、この助手に「商品名」「単価」「数量」を渡します。

いよいよJavaScriptくん、電卓係に就任です。