JavaScriptの基本構文

JavaScript （ECMAScript5）の基本構文を紹介します。この記事は、2017 年 3 月に調べたものを紹介しています。

記述方法

HTML に埋め込む方法

<script type="text/javascript">
    // JavaScript
</script>

script タグは、header や body に埋め込み可能です。かつては、

<script language="JavaScript">

としていたようですが、最近のブラウザであれば type で大丈夫ではないでしょうか。また、コメントで囲む必要もないようです。

イベントハンドラに埋め込む方法

HTML のイベントハンドラに直接 JavaScript を書くことができます。

<a onclick="alert('Hello!!')">Ckick</a>

外部のソースファイルを読み込む方法

<script type="text/javascript" charset="utf-8" src="test.js"></script>

script タグの src 属性にファイル名を指定します。また、読み込むファイルの文字コードを明示しておくと良さそうです。また、特に問題がなければ「</body>」の直前に記述するのが良いようです。

エントリポイント

特にエントリポイントの指定は必要ありません。上から順に実行されていきます。また、HTML 側で、body の onload 時に関数を呼び出すことで、擬似的にエントリポイントを指定できます。

インクルード（他ソースファイルの読み込み）

JavaScript に該当する仕様はありません。ただし、HTML 側から複数のファイルを読み込ませることができます。

一方、RequireJS のように、モジュール化を支援するライブラリがいくらかあります。

変数宣言

変数宣言には、「var」を用います。型指定はありません。

var 変数名: 型名;
//  例
var n1 = 0;

関数

関数定義

関数定義は以下の通りです。

function 関数名(引数1, 引数2, ...){
 //  処理...;
 return;
};

//または

関数名 = function(引数1, 引数2, ...){
 //  処理...;
 return;
};

なお、JavaScript の関数は、関数のオブジェクトです。そのため、変数に代入できます。

関数呼び出し

関数の呼び出し方法は以下の通りです。

関数名( 引数1, 引数2, ...);

関数呼び出しの際に、引数が足りない場合、その引数には null が渡されます。

可変長引数

可変長引数に該当するような構文はありませんが、関数内で「arguments」オブジェクトを使うと似たようなことができます。

function argTest(first) {
   var sum = first;
   // 2つ目以降を足し込む
   for (var i = 0; i < arguments.length; i++) {
      sum += arguments[i];
   }
   return sum;
}

参考 : arguments オブジェクトの使用

無名関数

無名関数もサポートされています。無名関数は、変数に代入可能です。

function(引数リスト){}

で定義できます（関数名を省略した形です）。

var hello = function(name)
{
    return name;
};

クラス

クラス定義に対応する構文はありません。ただし、「prototype chain」と呼ばれる仕様を利用することで、クラスのような振る舞いを記述できます。

// クラスとコンストラクタの定義
var Vector2D = function(x, y) {
  // this は生成されたオブジェクト。
  this.x = x;
  this.y = y;
};

// メソッドはコンストラクタ関数のprototypeプロパティに設定します
Vector2D.prototype.getX = function() {
  return this.x;
};
Vector2D.prototype.getY = function() {
  return this.y;
};

メソッド定義は以下のように書くことも出来ます。

// クラスとコンストラクタの定義
var Vector2D = function(x, y) {
  this.x = x;
  this.y = y;
};

Vector2D.prototype =
    {
        getX: function () {
            return this.x;
        },
        getY: function () {
            return this.y;
        }
    };

JavaScript は、this 必須です。また、Java や C++ の this とは仕様が異なるため、注意が必要です。JavaScript の this の仕様は、「ある関数が呼び出された際にその関数を格納していたオブジェクト」を指します。普段はあまり意識することはないかもしれませんが、コールバック関数として登録した場合などには注意が必要です。コールバック関数としてメンバ関数を登録し、this を固定するには「bind」を使います。

メソッドのオーバーロード

対応していません。

静的メンバ

クラスの仕様がないため、該当する仕様はありません。ただし、JavaScript のオブジェクトは連想配列であり、関数をプロパティとして持つことができるため、その仕様を利用すると、静的メンバ変数や関数相当の機能を実現できます。

オブジェクト生成（new）・メンバへのアクセス

new を使用します。new のあとには、コンストラクタ用の関数を指定します。

var v = new Vector2D(10, 10);

メンバへのアクセス方法

var obj = new MyClass();

//メンバ変数
obj.member;

//メンバメソッドの呼び出し
obj.Hello();

オブジェクトのメンバにアクセスするためには、ドット演算子「.」を使用します。

アクセス修飾子

ありません。すべてのメンバが、外部からアクセス可能です。

継承

prototype chain を利用することで、継承に近い記述が可能です。（Google 流 JavaScript におけるクラス定義の実現方法より引用）

var inherits = function(childCtor, parentCtor) {
  // 子クラスの prototype のプロトタイプとして 親クラスの
  // prototype を指定することで継承が実現される
  Object.setPrototypeOf(childCtor.prototype, parentCtor.prototype);
};

// 子クラスのコンストラクタ
var Employee = function(name, age, salary) {
  // 親クラスのコンストラクタの呼び出しには call を使用
  Person.call(this, name, age);
  this.salary = salary;
};

// inherits を使って親子関係を明示する
inherits(Employee, Person);

// 子クラスのメソッド
Employee.prototype.getSalary = function() {
  return this.salary;
};

// 同じ名前のメソッドを子クラスで定義すればオーバーライドになる。
Employee.prototype.sayHello = function() {
  // 親クラスのメソッドを呼び出す場合は親クラスの prototype に
  // 定義されているメソッドを call を使って呼び出す。
  Person.prototype.sayHello.call(this);
  console.log('Salary is ' + this.salary);
};

コンストラクタ・デストラクタ

クラスの定義方法で紹介したように、コンストラクタ関数の定義は可能です。

インタフェース定義

該当する仕様はありません。

演算子

表1: 算術演算子

四則演算	+ – * /
剰余	%

表2: 代入演算子

代入

表3: 論理演算子

論理積	&&
論理和	\|\|
否定	!

表4: 比較演算子

大小比較	> < >= <=
等しい（型変換後に比較）	==
等しくない（型変換後に比較）	!= <>
等しい（型が等しく、値も等しい）	===
等しくない（型もしくは値が等しくない）	!==
３項演算子	( 条件 ) ? (true) : (false)

表5: 型演算子

キャスト	なし
型を調べる	変数 instanceof コンストラクタ関数名	例 ) a instanceof MyClass
型を調べる	typeof 変数	例 ) typeof n

instanceof は、指定したオブジェクトがどのコンストラクタから生成されたかを判別します。一方、typeof はその変数の（JavaScript における本当の）型名を文字列で返します。

表6: ビット演算子

ビット積	&
ビット和	\|
否定	^
排他的論理和	~
左シフト	<<
右シフト	>>

表7: 文字列演算子

文字列結合

コメントは、以下の形式がサポートされています。

// 行末まで

/* 閉じる
　 まで　 */

条件分岐構文

if 文と switch 文がサポートされています。

if 文

if (条件1) {
    // 条件1がtrueの時
} else if (条件2) {
    // 条件1がfalseで条件2がtrueの時
} else {
    // 条件1・条件2がfalseの時
}

switch 文

switch (比較対象) {
    case 条件1:
        //...
        break;
    case 条件2:
        //...
        break;
    default: //それ以外
        //...
}

ループ構文

for 文

for (var i = 1; $i <= array.length; i++) {
    array[i];
}

while 文

var num = 0;
while (num < array.length ){
    num++;
}

foreach 文（配列の列挙）

該当するような言語仕様はありません。（似たような構文に「for … in」がありますが、これは、オブジェクトのプロパティ名を列挙していく構文です）

break, continue

break 、continue ともにサポートされています。

演算子のオーバーロード