【初心者向け】変数についてまとめてみた。

はじめに。

今回は 変数 について学習していきます。

変数 はプログラミングを行う上で、必須の知識となります。

難しい言葉に聞こえるかもしれませんが、仕組みはとても単純です。

変数 とは一言でいえば データを入れておくための箱 です。

「箱を作って、データを入れる」ただこれだけ。すごくシンプルですよね。

まずはこれから学ぶ 変数 のことを、

「データを入れておくための箱なんだなー」とふんわり理解して、
一つずつその特徴を知っていきましょう。

※ところどころ補足が出てきますが、後々解説するのでざっくりとした理解で構いません。

変数とは？　ズバリ「名札の付いた箱」

変数を一言でいうと、 データを入れておくための箱 のことです。

プログラミングでは、数字や文字などのデータをたくさん扱います。それらを散らかったままにせず、「これは点数」「これは名前」といったように、整理整頓して保存しておく場所が必要です。それが変数です。

具体例

JavaScript

// myNameが変数で田中がデータ
let myName;
myName = "田中";

// Tips
// //(ダブルスラッシュ)で書かれた箇所は「コメントアウト」と言ってプログラムに影響がないメモ書き

上の具体例をもとに流れをイメージしてみましょう：

1. 箱を用意する（変数を作る）
   1. 【補足】主にlet や constといった二種類の方法があります。
2. 箱に「myName」というシールを貼る（変数の名前を決める）
3. 箱の中に「田中」という文字を入れる（データを入れる)

こうしておけば、後で「myNameの箱の中身を見せて！」と命令するだけで、「田中」という文字を取り出すことができます。

変数の使い方の「3つのステップ」

プログラムで変数を扱うときは、主に3つの手順があります。

① 宣言（せんげん）＝「箱を用意する」

「これからこの名前の箱を使いますよ！」とコンピュータに伝えることです。

JavaScript

let myName;

• let （レット）： 「変数を作るよ」という合図。
• myName： 箱につける名前（好きな名前でOK）。
  • 【補足】基本的には英語で、データの中身が分かりやすい名前が好ましいです。
    • 例. favoriteFruitという変数名で、appleという文字を入れる

② 代入（だいにゅう）＝「箱に中身を入れる」

用意した箱に、データを入れることです。

JavaScript

myName = "スズキ"

• ここが重要！ プログラミングの =（イコール） は、算数の「等しい」という意味ではありません。「右のものを、左の箱に入れる」 という意味です。

③ 参照（さんしょう）＝「箱の中身を使う」

箱の名前を呼ぶことで、中身のデータを利用します。

JavaScript

console.log(myName); 
// 画面には「スズキ」と表示されます

「let」と「const」の違い

JavaScriptには、箱の種類が主に2つあります。

種類	キーワード	特徴	イメージ
再代入できる変数	let	中身を後から入れ替えられる。	ガムテープで閉じた段ボール箱（開け閉め自由）
再代入できない変数	const	一度入れたら二度と変更できない。	カギのかかった金庫（中身を変えられない）

使い分けのコツ：
基本的には const（定数といいます） を使います。「途中で中身が変わると困るもの（消費税率や、WebサイトのURLなど）」が多いからです。ゲームの得点やHP（ヒットポイント）のように、「どんどん中身が変わるもの」には let を使います。

箱に入れるデータの種類（データ型）

箱にはいろいろな種類のデータを入れることができます。

• 文字列 (String)
  • 文字のデータです。"（ダブルクォーテーション）か '（シングルクォーテーション）で囲みます。
  • 例：let message = "こんにちは";
• 数値 (Number)
  • 数字です。囲み文字はいりません。計算に使えます。
  • 例：let age = 14;
• 真偽値 (Boolean)
  • 「合っている(true)」か「間違っている(false)」かの2つだけです。スイッチのON/OFFのようなものです。
  • 例：let isStudent = true;

【補足】ほかにも配列やオブジェクトといったものもあります。

まとめ

• 変数は 名札がついた箱。
• = は「等しい」ではなく、**「右のものを左に入れる」**という意味。
• let は中身を変えられる箱、const は中身を変えられない箱。

この「箱」のイメージさえ持っていれば、
これから先のプログラミング学習がぐっと楽になりますよ！

---

やってみよう！！

今回はこちらを使って実際にコードを書いてみましょう。

変数を作ってみよう

ここからは、カーソルが点滅している場所にコードを打ち込んでみます。
さっきの「箱」のイメージを思い出してやってみましょう！

① 変数を用意する（宣言）

まず、変数を用意してみよう。

JavaScript

// 好きな変数名を付けてみよう
let message;

② 変数に文字を入れる（代入）

次に、作った箱に好きな言葉を入れてみましょう。

" "（ダブルクォーテーション）を忘れずに！

JavaScript

// 好きな変数名を付けてみよう
let message;

// 変数に値（データ）を入れる
message = "ヤッホー！";

• これで、message という箱に「ヤッホー！」が入りました。

③ 箱の中身を表示する（参照）

さあ、箱の中身を確認します。

JavaScript

// 好きな変数名を付けてみよう
let message;

// 変数に値（データ）を入れる
message = "ヤッホー！";

console.log(message);

下にある実行ボタンもしくは 「Ctrl ＋ Enter」で実行

• どうですか？ 左下に ヤッホー！ と表示されましたか？
• これであなたは、自分の命令でコンピュータに文字を表示させたことになります！

中身を入れ替えてみよう

let で作った変数は、中身を変えられるんでしたよね。やってみましょう。

// JavaScript

// 好きな変数名を付けてみよう
let message;

// 変数に値（データ）を入れる
message = "ヤッホー！";

console.log(message);

// message変数を再代入
message = "もしかして入れ替わってるー！？";

console.log(message);

今度は もしかして入れ替わってるー！？ と表示されたはずです。
同じ message という名前の箱ですが、中身が書き換わったことがわかりますね。

【補足】プログラムの原則として上から順番に実行されるため、一つ目のconsole.log(message); と二つ目は結果が異なります。

もっと遊んでみる（計算）

変数には数字も入ります。こんなこともできますよ。

// JavaScript

let apple = 100;
let orange = 50;

console.log(apple + orange);

// オマケ: 数値に文字列を付け加えて出力することもできる
console.log(apple + orange + "円");

これを入力すると…… 150 と計算結果が出てくるはずです。
プログラミングでは、こうやって変数同士を計算させることが非常によくあります。

---

おめでとうございます！

これであなたは、ただWebサイトを見るだけの「ユーザー」から、Webサイトを動かす側の「プログラマー」の入り口に立ちました。

画面に文字が出ただけに見えるかもしれませんが、これはTwitterやInstagramなどのアプリが動いている仕組みの基礎中の基礎なんです。

今日は変数を学びましたが、

次回はif文やfor文といった条件分岐について学んでいきましょう。

データの扱い方を覚えていけばプログラミングがもっと楽しくなっていくはずです。

お疲れさまでした！！