第1章 JavaScript導入ガイド

変数

2009年8月4日

変数の基礎知識

変数は値を保存したり、あとからその値を参照することができます。ここでいう値とは、文字列や数字のことです。値を変数に保存することは、代入と呼びます。

x = 1;

上記では左辺の x が変数で、その変数xに右辺の値が代入されます。右辺の値が代入された結果、変数 x の値は1となります。この変数xは他の値を代入しない限り値を持ち続け、あとでいつでも参照できます。

Graphics by: Vecteezy.com

変数の値には数値以外にも、文字列や論理値などいくつかのデータ型が用意されています。

変数の宣言

変数は使う前に var キーワードを使ってあらかじめ宣言することができます。JavaScript では変数の宣言をしなくてもエラーになりませんが、どこから使われるようになったのかを明示するためにも、変数の宣言を習慣づけたほうが良いでしょう。

変数の宣言
var x;

上記では変数xを宣言しています。初期値なしで宣言された変数は未定義を表す undefined という値になります。

JavaScript では変数の宣言時に値を代入しておくことができます。

変数に初期値を設定
//文字型
var a= "ABCDE";
//数値型
var b = 3.1415;
//論理型
var c = false;
//null型
var d = null;

また、演算子のカンマ (,) を利用して、同時に複数の変数を宣言することも可能です。たとえば、以下のように複数の変数を同時に宣言を行うこともできます。

var a , b, c;

変数へ値の代入

変数への値の代入には、代入演算子 ( = ) を使います。

変数に値を代入
var x = 5;

上記は変数 x に 5 を代入しています。この状態の x は数値の 5 と同じに扱うことができ、後から参照することができます。ここでは変数 x に数値を格納しましたが、文字列や真偽値、オブジェクトなど様々なタイプの値を格納することができます。

// 変数に文字列を代入
var x = "Hello";

式は、値または変数、関数と演算子の組み合わせによって表現されます。JavaScriptでは、あらゆる表現は値を持ちます。

var a = 12; 

上記の「 a = 12 」が式で、この表現は a に 12 を代入するという演算だけではなく、12 という値も表現しています。試しに Google Chrome のコンソールに上記の行を入力して[Enter]を押してみましょう。結果として 12 が返されるはずです。

次の式では、x に 5 を代入し、次に 100 に x を足して、その合計を y に代入しています。

x = 5;
y = 100 + x;

105

x には 5 が代入されているので、 y には 100 + 5 の結果の値 105 が代入されます。

次のような表現も可能です。

a = ((b = 12) == 10); 

false

まず一番内側の代入 (b = 12) が評価され、変数 b に 12 が代入されます。次に外側の論理式 ((b = 12) == 10) が評価され、false が返されます。これで右辺の値は false となり、変数 a に代入されます。

どちらの例でも変数宣言の var を使っていないことに注意してください。コンソールは最後の行が返す値を出力しますが、var 宣言と同時に式を代入すると、式が返す値ではなく var 自体が返す値を出力します。今回は式が値を返すことを実証したかったので、あえて var を使いませんでした。

型の自動変換

JavaScriptには文字列や数値といったデータ型がいくつか用意されていますが、変数には種類がなく、どのデータ型でも代入することができます。このとき、数値を代入されれば変数のデータ型は数値、文字列を代入されればデータ型は文字列に自動的に変換されます。値のデータ型を返す typeof() を使って、変数がどのように変換されるかみてみましょう。

変数 x を定義しただけで値を代入していません。この状態は型がまだ決まっていないので、データ型は undefined です。

var x;
typeof( x );

undefined

文字列を代入しているので、変数 x は文字列になります。

x = "ABCDE";
typeof( x );

string

変数 x に数値を代入すると、データ型は文字列から数値に変化します。

x = 1;
typeof( x );

number

数値と文字の演算の結果は文字列になります。文字列の連結なので変数 x の値は「A1」です。

x = "A" + 1;
typeof( x );

string

変数の表記

変数名は英数字字とアンダースコア( _ )を自由に組み合わせて命名できます。ただし、変数名の先頭に数字を使うことは出来ないのでご注意ください。

変数名のルール
var name_01;   // OK
var _name_01;  // OK
var 0name;   // NG。数字で始まる変数名は許されていません

大文字と小文字は区別されるため、たとえば a と A という名前は、それぞれ別の変数として扱われます。

変数名の大文字と小文字
var a = 1;	// a に 1 を代入
var A = 2;	// A に 2 を代入
// a の値に影響はない
console.log( "a:" + a);
console.log( "A:" + A );
a:1
A:2

リテラル

リテラルとは、変数や定数以外の、数値や文字列など表記どおりの値の総称です。256、"Hello"、2019-03-17といった数値や文字列、日付がリテラルにあたります。

// 整数
3;
// 実数
3.141;
// 指数表記
1.0e+2;
// 16進数
0xffff;
// 文字列
"abcdefg";
// 論理値
true
// オブジェクトの値が存在しない
null

ハードコーディング

消費税、パスワード、URL、ファイル名、これらをソースコード内に直接書くことをハードコーディングといいます。ハードコーディングされたコードは完成時では問題なくても、完成後に問題が顕在化します。
たとえば税率やファイル名など変更される可能性のある値をコードの中で何箇所も使っていた場合、大きなプロジェクトになればなるほど変更にかかる手間、不具合のリスクは高くなります。将来変更があり得る値は定数(値を後から変更できない変数)や変数にして、なるべく一括で変更できるようにすべきです。ただ、全ての値でハードコーディングを避けるのも手間がかかる作業で、変更が容易な小さなプログラムや、短期間しか使わないプログラム、あとで置換しやすい値などはハードコーディングを無理に避けなくても良いケースがあります。条件を吟味して使い分けると良いでしょう。

ハードコーディングに近い用語に、マジックナンバーがあります。マジックナンバーもソースコード内に直接埋め込まれた値ですが、こちらは主に数値を意味します。
作成時はその値の意味がわかっていても、時が経って忘れていたり、他の人が改修をかけた際に、数字の意味がわからないが、正常にプログラムが動く、といったときに皮肉を含めてマジックナンバー(魔法の数字)と呼んでいます。

変数の有効範囲

変数には参照可能な有効範囲があり、その有効範囲をスコープと呼びます。スコープ外からは変数を参照することができません。 JavaScript ではスコープが関数内(後の章で解説します)に限定されるものをローカル変数、プログラム全体から参照できるものをグローバル変数と呼びます。

それでは、function キーワードを使って関数を作成し、変数 x のスコープを確認してみましょう。

var x = 0;
(function(){
var x = 1;
})();
// 関数ブロック内で宣言したxは参照できない
x;

0

関数の実行部はブレイス( {} )で囲った範囲内で、このまとまりをブロックと呼びます。C言語などの言語の多くはこのブロックが変数の有効範囲となりますが、JavaScript では変数の有効範囲にブロックは影響されません。ブロック内で変数を宣言しても、ブロック外からその変数を参照することができます。

{
// ブロックで区切られているが、JavaScriptではここでの x はグローバル変数
x= 1;
}
x;

1

ただし、関数だけは、var 宣言をしなければブロックの範囲が変数の有効範囲となります。関数内で変数を宣言する際は必ず var 宣言をするようにしたほうが良いでしょう。

var x = 0;
(function(){
// var宣言していないのでグローバル変数になる
x = 1;
})();
x;

1

予約語

予約語は、変数名、関数名、メソッド名、プロパティ名、オブジェクト名などには使用できません。これらの言葉のいくつかは、JavaScript で実際に使われているか、将来使用のためにキープされています。

予約語として指定されている class を変数名に使うと、エラーになります。

class = 12;

Uncaught SyntaxError: Unexpected token =

予約語一覧
  • break
  • case
  • catch
  • class
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • enum
  • export
  • extends
  • finally
  • for
  • function
  • if
  • implements
  • import
  • in
  • instanceof
  • interface
  • let
  • new
  • package
  • private
  • protected
  • public
  • return
  • static
  • super
  • switch
  • this
  • throw
  • try
  • typeof
  • var
  • void
  • while
  • with
  • yield

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!