ダレカン和泉Web制作・開発基礎カリキュラム

Step 3 プログラミング導入 » 授業2

STEP 3 | 授業 2/6

変数 ― 値に名前をつける

点数、名前、残り時間…。プログラムは「値」をあつかう仕事です。値に名前をつけて覚えさせるのが「変数」。今日の内容は、この先のすべての土台になります。

この授業のゴール 変数を作って、計算して、結果をコンソールに出せるようになる。
この授業のためし方 (共通): コードは、VS Code で開いた HTMLファイル (例: hensuu.html) の <script> と </script> のあいだ (= 授業1で決めた「script の中」) に書きます。書いたら Ctrl + S で保存 → Go Live でブラウザに表示 → 結果は F12 →「コンソール (Console)」タブで確かめます。

1. 変数は「名前つきの箱」

変数(へんすう)は、値をしまっておく名前つきの箱です。作り方はこうです。

let tensuu = 80;
  • let … 「新しい箱を作ります」の合図
  • tensuu … 箱につける名前(自分で決めます。半角英数字で)
  • = … 「右の値を左の箱に入れる」という意味。算数の「等しい」とは違うので注意!
  • 80 … 箱に入れる値

一度作った箱は、名前で呼び出せます。

let tensuu = 80;
console.log(tensuu);        // → 80
console.log(tensuu + 5);    // → 85

2. 数値と文字列 ― 2種類の値

箱に入れる値には、よく使う2つの種類があります。

let kazu = 100;            // 数値 … そのまま書く
let namae = "山田";       // 文字列 … "で囲む

この2つ、見た目は似ていても性格が違います。今度はファイルに書かず、コンソールで直接実験してみましょう。やり方: F12 で開発者ツールを開く →「コンソール (Console)」タブをクリック → 入力欄 (> の印のところ) をクリックして、次の式を1行ずつ打ち、Enter で実行します。

10 + 10        // → 20 (数値の + は足し算)
"10" + "10"    // → "1010" (文字列の + はつなげる)
"おはよう、" + "山田さん"   // → "おはよう、山田さん"

文字列の + は「のり付け」です。これを使うと、あいさつ文が組み立てられます。

let namae = "山田";
console.log("こんにちは、" + namae + "さん!");
// → こんにちは、山田さん!

3. 箱の中身は入れかえられる

「変数」という名前の通り、中身はあとから変えられます。2回目からは let をつけません。

let tensuu = 80;
console.log(tensuu);   // → 80
tensuu = 95;           // 中身を入れかえ
console.log(tensuu);   // → 95
tensuu = tensuu + 5;   // 「今の中身に5たして、入れ直す」
console.log(tensuu);   // → 100

3つ目の tensuu = tensuu + 5; は最初は不思議に見えますが、「右側を先に計算して、結果を左の箱に入れる」と読めば納得できます。ゲームのスコア加算は、まさにこの形で動いています。

ヒント: 変えたくない値には let のかわりに const(コンスタント = 不変)を使います。「うっかり変えてしまう事故」を防げるので、プロは const を基本にしています。

4. やってみよう ― 自己紹介プログラム

やってみよう

web-renshu フォルダに hensuu.html を作り (ひな形 ! + Tab → </body> の直前に <script></script> を書く)、その script の中に、変数だけの自己紹介プログラムを書きます。確認は 保存 → Go Live → F12 のコンソールです。

  1. namae(ニックネーム)、suki(好きなもの)、kingaku(好きなものの値段、数値)の3つの変数を作る。
  2. console.log と文字列の「のり付け」で、「わたしは○○です。好きなものは○○です。」と出す。
  3. 「2つ買うと○○円です。」を、kingaku * 2 の計算で出す。(かけ算は *、わり算は / です)
  4. 変数の中身を入れかえて、出力が変わることを確かめる。
  5. コンソールの結果をスタッフに見せる。
答え (写してOK): 
let namae = "山田";
let suki = "メロンパン";
let kingaku = 180;
console.log("わたしは " + namae + " です。好きなものは " + suki + " です。");
console.log("2つ買うと " + kingaku * 2 + " 円です。");
行きづまったら、これと自分のコードを見比べて、ちがう場所を探しましょう。写してから、中身を自分のものに変えてもOKです。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • テンプレートリテラルを調べてみましょう。`こんにちは、${namae}さん` のように、バッククォート(`)と ${ } を使うと、のり付けより読みやすく書けます。
  • 変数名のつけ方のルール(キャメルケース: userName のように2語目から大文字)を調べて、自分のコードの変数名をつけ直してみましょう。読みやすい名前をつける力は、プロの世界でとても大事にされています。
  • let と const と、古い書き方の var の違いを調べてみましょう。なぜ今は var を使わないのか、が分かれば上級者の入り口です。

できたチェック