【JavaScript超入門コース】06.変数 ｜変数は、例えるなら「箱」のこと。箱にデータを入れておくことができます【プログラミング初心者向け入門講座】

この記事の執筆・監修

キノコード    

テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。

はじめに

こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#06 変数」について説明します。

変数とは？

まず、変数について説明します。
変数は、例えるなら、「箱」のことです
変数があることで、文字や数字などのデータを変数に入れておくことができます
また、変数を必要な時に取り出すことができます。
変数にデータを入れることを「代入」といい、取り出すことを「参照」といいます。
変数には名前をつけることができ、変数名といいます。
変数を作ることを「変数を宣言する」といいます。
初めて変数にデータを入れることを「変数の初期化」といいます。

JavaScriptの変数の宣言方法

JavaScriptのコードを書いていきましょう。

    var num;
    num = 1;
    console.log(num);

このコードは、変数numに整数の1を代入して、その変数の中身を表示させるプログラムです。
変数を宣言するときは、varを使います。varのあとに変数名を記述します。
変数の宣言はこれで終わりです。
変数numに1という整数を代入してみましょう。
変数へ代入するときは、イコールを使います。
これで変数に1を代入できます。
変数に1が代入されているか、変数を表示させてみましょう。
前のレッスンでも使いましたが、文字列や変数の中を参照するには、console.log(コンソールログ)を使います。
前のレッスンではダブルクォテーションで文字列を囲いましたが、今回は変数の中を表示したいので、変数をそのまま記述します。
実行してみましょう。
「1」という整数が表示されました
numに「1」が代入されていることがわかります。

    var num = 1;
    console.log(num);    

変数の宣言と同時に代入することもできます。
実行してみましょう。
「1」が表示されました。

JavaScriptの変数名のルール

変数名に使える文字には、ルールがあります。
変数名には、アルファベット、数字、アンダースコア( _ )、ドルマーク( $ )が使えます。
ルールに従い、変数名がつけられるか、あるいは、エラーになるか試してみましょう。

    var num = 1;
    var num01 = 2;
    var num_01 = 3;
    var num$01 = 4;

    console.log(num);
    console.log(num01);
    console.log(num_01);
    console.log(num$01);    

numのあとに01の数字をつける変数を作ってみます。この変数には2を代入します。
表示もしてみます。
numのあとにアンダーバー、そのあとに01の数字をつけてみましょう。この変数には3を代入します。
こちらも表示もしてみます。
numのあとにドルマーク、そのあとに01の数字をつけてみましょう。この変数には4を代入します。
こちらも表示もしてみます。
それぞれの変数を表示してみましょう。
エラーにならず、「1、2、3、4」が表示されました。
変数名は、数字から始めることができません。また、アンダーバーやドルマーク以外に記号を使うことができません。
JavaScriptのコードを書いて試してみましょう。

    var num = 1;
    var num01 = 2;
    var num_01 = 3;
    var num$01 = 4;
    var num-01 = 5;
    var 01num = 6;

    console.log(num);
    console.log(num01);
    console.log(num_01);
    console.log(num$01);    
    console.log(num-01);
    console.log(01num);

numのあとにハイフンをつけてみましょう。
また、変数名の前に数字をつけてみましょう。
赤い波線が表示されました。エラーです。
念の為、実行をしてみます。
エラーになりました。

var num = 1;
var num01 = 2;
var num_01 = 3;
var num$01 = 4;
// var num-01 = 5;
// int 01num = 6;

console.log(num);
console.log(num01);
console.log(num_01);
console.log(num$01);    
// console.log(num-01);
// console.log(01num); 

こちらはエラーになるので、コメントアウトしておきましょう。
コメントアウトとは、記述したプログラムを処理させないようにすることです。
macの場合だと「command + /（スラッシュ）」でできます。windowsだと「Ctrl＋/」です。
この状態で実行してみます。
エラーの部分はコメントアウトしたため、エラーにならず実行されました。
大文字と小文字は区別されます。
すべて大文字のNUM、最初だけ大文字のNumを作って変数に代入させてみましょう。
JavaScriptのコードを書いて試してみます。

    var NUM = 1;
    var Num = 2;

    console.log(NUM);
    console.log(Num);

それぞれ1と2を代入してみます。
もし仮に、大文字と小文字が区別されないのであれば、両方ともに同じ数字が代入されているはずです。
実行みましょう。
別々の数字が表示されました。
予約語は変数名にすることができません。
予約語とは、「return」「class」「for 」「while」など、プログラミング言語ですでに役割が決まっている単語のことをいいます。

    var return = 10;
    var class = 10;

「return」「class」という変数を作ってみます。
赤い波線が表示されています。エラーです。