変数・データ型・代入

指導者向けの公開補足

学習本文に加えて、指導の視点・背景・授業での確かめ方を示します。どなたでも読めます。

指導の焦点

代入を数学の等号と区別する。「右辺を現在の値で評価してから、左辺へ保存する」という順を追わせる。上書きした前の値が自動では残らないことも確認する。

一歩踏み込んだ背景

箱の比喩は導入に便利だが、配列などを参照で扱う場面まで一つの物理的な箱に押し込まない。スコープや型も、使う言語の仕様で異なる。

授業での確かめ方

値を交換する処理で、退避用の変数が必要な理由を記録表で説明させる。変数名だけを見て意味を決めず、いつ値が変わるかを追う。

制度・規格等は本文末尾の参考資料も確認してください。

JSFiddleでコードを試す

JSFiddleは、ブラウザーでHTML・CSS・JavaScriptを入力して実行できるサービスです。短い動作確認から始められます。

新しい編集画面を開きます。JavaScriptは通常のJavaScriptを選び、外部ライブラリは追加しません。
HTML欄にはページの本文、CSS欄には見た目、JavaScript欄には処理を書きます。HTML欄に<html>や<body>は不要です。JavaScript欄に<script>は付けません。
DOMを使う例では、JavaScriptの実行タイミングを「On Load」「On DOM Ready」または「No wrap - bottom of body」にします。
「Run」を押してResult欄を確認します。書き換えたら再びRunを押します。

console.logの結果は通常、ページではなく開発者ツールのコンソールに出ます。このサイトの計算例をResult欄で読みたいときは、HTML欄に次を入れます。

<pre id="output"></pre>

JavaScript欄には次を入れ、console.log(2 + 3);の行を、試したいコード一つに置き換えます。独立した例を複数まとめて貼らないでください。

{
  const output = document.getElementById("output");
  const console = {
    log(...values) {
      output.textContent += values.join(" ") + "\n";
    }
  };
  console.log(2 + 3);
}

Runを押すと「5」と表示されます。外側の波括弧の中だけで表示用のconsoleを用意しているため、ブラウザー本来のコンソールは変更しません。

HTMLとJavaScriptの両方を載せた実習例は、この表示用コードで囲まず、それぞれの欄へ分けて貼り付けます。保存・共有時は公開範囲を確認し、個人情報やパスワードを入力しないでください。コードは手元にも残しましょう。

NAS・GitHub・CodePenなど、作業環境の選び方

この単元でできるようになること

宣言、初期化、代入を区別して説明できる。
数値・文字列・真偽値に応じた演算を選べる。
代入前後の状態を追い、値の交換を説明できる。

値に名前を付ける理由

架空の園芸会で、苗の在庫を管理する。数字の24だけを置くより、stock という名前を付けると、何を数えているのかを読み取りやすい。変数はプログラム中で値を参照するための名前である。「箱」の比喩は入り口として便利だが、配列などでは複数の名前が同じ対象を参照することもあり、あらゆる動きを説明できるわけではない。

JavaScriptでは、let は後から別の値を代入できる宣言、const は同じ名前への再代入をしない宣言である。宣言で名前を使えるようにし、最初の値を設定することを初期化という。変化させる必要がない数量は const にすると、意図しない再代入に気付きやすい。

代入は右辺を先に評価する

stock = stock - sold は、まず現在の在庫と販売数から右辺を計算し、その結果を左辺の在庫へ設定する。「在庫と在庫から販売数を引いた値が等しい」と主張しているわけではない。代入後には、古い在庫の値はその変数から直接読めなくなる。

let stock = 24;
const sold = 7;
stock = stock - sold;
console.log(stock);
const received = 5;
stock = stock + received;
console.log(stock);

出力は 17、22。最初の更新は販売後、二回目は入荷後の状態を表す。販売前の在庫も必要なら、更新前に別の名前へ保存するか、履歴として記録する設計が必要だ。最終値だけを保存しても、途中に何が起きたかは復元できない場合がある。

時点	stockの値	次の計算に使う値
初期化後	24	販売前の在庫
販売後	17	入荷前の在庫
入荷後	22	最終の在庫

データ型で演算の意味が変わる

数値は数量の計算に、文字列は名前や番号の表記に、真偽値は条件が成り立つかどうかに使う。苗の品種番号が "007" なら、先頭の零に意味があるため、単なる数値7へ変えると情報が失われる。一方、個数を文字列のまま扱うと、意図した計算にならないことがある。

const typedCount = "12";
console.log(typedCount + 3);
console.log(Number(typedCount) + 3);
console.log(typeof typedCount, typeof Number(typedCount));

出力は 123、15、string number。文字列と + を組み合わせると、この例では文字の連結になる。数値へ変換する意図を明示してから加算すると、数量の計算として読める。typeof は、ここでは値の型を確認するために使っている。

数値へ変換できない文字列もある。Number を呼べば必ず有効な数量になるわけではない。空の文字列が零に変換される場合もあるため、入力が空かどうか、有限の数か、整数か、許される範囲かを目的に応じて確認する。型の変換と、入力内容の妥当性の確認は別の作業である。

二つの値を交換する

二つの苗置き場の札を入れ替えるとする。最初に左へ右の値を代入し、その後で右へ左を代入すると、元の左の値はすでに失われている。そこで一時的な名前を用意し、上書き前の値を保存する。

let left = "青札";
let right = "黄札";
const temporary = left;
left = right;
right = temporary;
console.log(left, right);

出力は 黄札青札。一時変数は結果に直接表示しなくても、情報を失わずに処理を進める役割を持つ。整列で要素を交換するときにも、同じ考え方が使われる。別の簡潔な書き方を使う場合でも、元の値がどこに保持されるかを理解しておこう。

名前と見える範囲を整える

a、b だけでは意味が伝わりにくいが、名前が長ければよいわけでもない。個数なのか金額なのか、単位が何かをそろえると読みやすい。同じ数量を場所によって枚、組、個と違う単位で扱うなら、変換する場所を明らかにする。

let と const で宣言した名前には、それを利用できる範囲がある。波括弧の内側で宣言した名前を外から使おうとすると、参照できない場合がある。このスコープを必要な範囲に絞ると、離れた処理が同じ値を意図せず変更することを防ぎやすい。

注意： const は「値に関わるすべてが絶対に変わらない」という意味ではない。配列を const で宣言しても、その要素を変更できる。名前への再代入と、参照する対象の変更を区別しよう。

用語

用語	意味
宣言	名前を利用できるようにする記述
初期化	最初の値を設定すること
代入	計算した値などを名前に設定すること
データ型	数値や文字列など、値の種類
スコープ	名前を参照できる範囲

確認問題

在庫の例で販売数を24に変えると、二つの出力はどうなるか。
先頭に零を含む整理番号を、数値より文字列で保持したい理由を説明しよう。
交換の例から temporary をなくし、left = right; right = left; とすると何が表示されるか。

問1の解答例を見る

0、5の順に表示される。在庫24から販売24を引いて0、その後5を入庫して5になる。

問2の解答例を見る

整理番号は計算する量ではなく識別子である。「0012」を数値にすると先頭の0が失われるため、表記を保つには文字列が適する。

問3の解答例を見る

黄札黄札と表示される。left = rightでleftの青札が失われ、その後right = leftでも黄札が代入されるため、交換にはならない。