第1章 JavaScript導入ガイド

変数

2009年8月4日

変数の基礎知識

変数は、値を保存しておくために使用します。ここでいう値とは、例えばウインドウ内に表示する文字列や、計算に使われる数字のことです。

x = 1;

上記では左辺のxが変数で、その変数xに右辺の値が代入されます。右辺の値が代入された結果、変数xの値は1となります。
変数の値には数値以外にも文字列や論理値などのデータ型がありますが、JavaScriptはデータ型を意識せずに使うことができます。詳しくは後述します。

変数の宣言

変数は使う前に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;

変数へ値の代入

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

変数に値を代入
x = 5;

変数 x に 5 を代入しています。この状態の x は数値の 5 とまったく同じに扱うことができ、後から利用することができます。ここでは変数 x に数値が格納されていますが、その他に文字列や様々なタイプの値を格納することができます。

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

a = 12; 

という表現は、aに12という値を代入するという演算だけではなく、12という値をも表現しています。

次の式では、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に代入されます。

型の自動変換

JavaScriptの変数は、代入された値によって自動的に型が変換されます。次のように処理が続いていたら、変数 x はコメントに書かれているように変化します。

// 変数xを定義。型は決まっていません。
var x;
// 文字列を代入しているので、変数xは文字列になります。
x = "ABCDE";
// 数値を代入すると、変数xは文字列から数値に変化します。
x = 1;

数値と文字の演算の結果は文字列になります。

// 変数 x の値は A1
x = "A" + 1;

変数の表記

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

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

また、大文字と小文字は区別されます。a と A は違う変数として扱われます。

変数名の大文字と小文字
a = 1; // a に 1 を代入
A = 2; // A に 2 を代入。a の値に影響はない

リテラル

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

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

変数の有効範囲

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

関数内で宣言した変数はローカル変数となり、関数内が有効範囲となります。関数はfunctionキーワードを使って定義します。

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

関数以外のブロックでは例外なくすべてグローバル変数になります。

var x = 0;
{
var x = 1;
}
// 1 が出力されます
x;

1

予約語

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

  • 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!