JOURNAL

【JS超入門 第2回】変数は『名前のついた箱』!おみくじの結果をまとめて並べる配列の魔法

前回は、ブラウザとメモ帳を使って画面にボタンを置き、「大吉が出たよ!」とメッセージを出す基本を体験しました。

「おみくじを引く」というボタンを押したところ
▲ 「おみくじを引く」ボタンを押したところ

でも、本物のおみくじなら「中吉」や「小吉」「凶」など、いろんな結果が入っていないと面白くありませんよね。今回は、パソコンに文字や数字を覚えておいてもらうための超重要アイテム、『変数(へんすう)』『配列(はいれつ)』について学んでいきましょう!

変数は「名前シールを貼ったダンボール箱」

プログラミングを始めると、必ず最初に出てくるのが「変数」という言葉です。なんだか難しそうな名前ですが、イメージはとっても簡単。

「好きなものを1つ入れておける、名前シール付きのダンボール箱」だと思ってください!

let unsei = "大吉";

この1行は、パソコンにこう伝えています:

  1. let(レット):「今から新しい箱を用意するよ!」の合図。
  2. unsei(ウンセイ):箱に貼る名前シール。自分で好きな名前をつけられます。
  3. = "大吉":箱の中に「大吉」という文字をポイッと入れる。

※プログラミングの = は、算数の「イコール(同じ)」ではなく、「右のものを左の箱に入れる!」という意味になります。

こうして箱に入れておけば、あとから alert(unsei); と呼ぶだけで、箱の中に入っている「大吉」を取り出して画面に見せてくれます。

変数のイメージ
▲ 変数のイメージ

たくさんの結果をまとめたい!それが「配列(リスト)」

箱が1つだけだと、「大吉」しか入りません。「大吉」「中吉」「吉」「凶」と、おみくじの紙を何枚も用意したいときはどうすればいいでしょうか?

箱を何個も作ってもいいのですが、散らかって大変ですよね。そこで登場するのが『配列(はいれつ)』です!

配列とは、「仕切りがたくさんついていて、順番にものがしまえる長い引き出し箱」です。JavaScriptでは、カギかっこ [ ] を使って書きます。

let kuji = ["大吉", "中吉", "吉", "凶"];

これで、kuji という1つの引き出しの中に、4つの運勢が順番に並んで綺麗に片付きました!

配列のイメージ
▲ 配列のイメージ

超重要!パソコンは「0番目」から数えるルール

ここで、プログラミングの世界で一番おもしろくて、みんなが最初にびっくりするルールがあります。

人間は「1番目、2番目、3番目……」と1から数えますが、パソコンは必ず「0番目」から数え始めます!

kuji[0] = "大吉" (0番目の引き出し)
kuji[1] = "中吉" (1番目の引き出し)
kuji[2] = "吉"   (2番目の引き出し)
kuji[3] = "凶"   (3番目の引き出し)

ですから、もし「凶」を取り出したいときは、4番目ではなく kuji[3] と番号(インデックス)を指定します。

実際に動かして試してみよう!

前回の omikuji.html をメモ帳で開いて、以下のように書き換えて上書き保存してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのプログラミング 第2回</title>
</head>
<body>
  <h1>おみくじガチャの部屋</h1>
  <p>下のボタンを押すと、1番目の引き出しの中身が出るよ!</p>
  <button onclick="drawKuji()">おみくじを引く</button>

  <script>
    let kuji = ["大吉", "中吉", "吉", "凶"];

    function drawKuji() {
      // 1番目の引き出し(中吉)を取り出して表示!
      alert(kuji[1]);
    }
  </script>
</body>
</html>

保存してブラウザを更新(F5キー)し、ボタンを押してみてください。「中吉」とポップアップが出たら大成功です!

「おみくじを引く」ボタンを押したところ
▲ 「おみくじを引く」ボタンを押したところ

第2回のまとめ

  • 変数(let 箱の名前:ものを1つ入れておく名前シール付きのダンボール箱。
  • 配列([ "A", "B", "C" ]:たくさんのデータを順番に入れておく仕切り付き引き出し。
  • パソコンの番号は 0番目からスタート する!

でも、毎回 kuji[1](中吉)が決まって出るのでは、まだガチャになりませんよね。サイコロのようにランダムに番号を選んでもらうにはどうすればいいでしょうか?

次回は、プログラミングの世界で最もワクワクする『関数』の秘密と、最初から用意されている最強の便利道具『組み込み関数』の威力に迫ります!お楽しみに!