JavaScriptの学習

JavaScript勉強中では、動きのあるページや動的にデータを読み込むページをつくるためにJavaScriptの勉強をしましょう。

目次

変数

変数の定義は var キーワードで指定します。代入文に渡す値にはJSON型をそのまま使えます。新しい仕様では、再代入ができない const と 再定義ができない let というキーワードが定義されており、こちらを使うことを推奨されていますが、const やlet の使えない古い実行環境などを想定して、ここではvarを使って解説していきます。

var 変数名;
var 変数名 = 値や式;
var x0; // 未定値(undefined)
var x1 = 1; // 整数
var x2 = 1.0; // 小数
var x3 = -1.2e+3; // 浮動小数
var x4 = true; // 論理型(正)
var x5 = false; // 論理型(誤)
var x6 = "文字列"; // 文字列型
var x7 = '文字列'; // 文字列型
var x8 = null; // 空文字
var x9 = []; // 空の配列
var x10 = [1,2,3]; // 整数の配列
var x11 = {}; // 空の連想配列
var x12 = {"name": "Taro", "age": 50}; // 連想配列

JSONに加えて、代入値には、関数や変数や演算子を用いることができます。

var x = 1.1;
var y = Math.sin(x) + Math.cos(x);

配列の要素や連想配列の要素へのアクセスは次のように[] 演算子を用いて記述します。

var array = [1,3,9,16];
var element0 = array[0]; // 1
var element1 = array[1]; // 3
var element2 = array[2]; // 9
var element3 = array[3]; // 16
var result = element0 + element1 + array[2]; // 1 + 3 + 9 = 13
array[0] = 2;
array[1] = 6;
array[2] = 18;
array[3] = 32;
var result2 = array[0] + array[1] + array[2]; // 2 + 6 + 18 = 26

また、JavaScriptでは連想配列の要素に対してドット演算子を用いてアクセスすることもできます。

var map = {
  aaa: "AAA",
  "bbb bbb": "BBB"
};
console.log(map.aaa); // AAA
console.log(map["aaa"]); // AAA
console.log(map["bbb bbb"]); // BBB

代入時に、整数、小数、論理値、文字列は物理的にコピーされます。一方、配列や連想配列といったオブジェクトは参照のみが渡されます。参照渡しの例を下に示します。

var array1 = [1,2,3,4];
var array2 = array1;
array2[0] = 10;
array1[0]; // 10

参照渡しでは array2 の実体は array1 となりますので、array2を書き換えると、array1の値も書き換わります。物理的にコピーされる場合にはこのようなことは起きません。

関数

あらかじめ定義されている関数が色々とあります。数学でおなじみの関数は、Math.~ という関数名で多数定義されています。

Math.cos(x);
Math.sin(x);
Math.tan(x);
Math.exp(x);
Math.log(x);
Math.pow(x, n);

自分で独自の関数を定義することもできます。return で指定した値が関数の返り値です。関数呼び出し元から受け取ることができます。

function plusVector2D(v1, v2){
  var result = [0, 0];
  result[0] = v1[0] + v2[0];
  result[1] = v1[1] + v2[1];
  return result;
}

JavaScriptでは関数定義も値のように扱うことができます。

var plusVector2D = function(v1, v2){
  var result = [0, 0];
  result[0] = v1[0] + v2[0];
  result[1] = v1[1] + v2[1];
  return result;
};

制御文

オブジェクトに対するループ処理は通常次のように書きます。

for(var k in cont){
  console.log(cont[k]);
}

配列に対するループ処理は通常次のように書きます。

for(var i = 0; i < cont.length; i++){
  console.log(cont[i]);
}

ループ処理は通常次のように書きます。

var i = 0;
while( i < 10){
  console.log(cont[i]);
  i++;
}

ループを途中で抜けるときは、break, return を使います。また、ループの先頭に戻るときは continue; を使います。continue は最近のプログラムではあまり推奨されない書き方ですが、有用な使い方もあります。

例外

プログラムにエラーがあったときには例外を受け取ります。

let obj = null;
try {
  console.log(obj.name); // obj.nameでnullにアクセスしようとして例外が発生する
} catch(err){
  console.error(err); // 例外を受信したらエラー処理をします。
}

また、例外を自分自身で投げるときには throw を用います。

try {
  throw new Error("例外です"); // 例外を発生させます
} catch(err){
  console.error(err); // 例外を受信したらエラー処理をします。
}

オブジェクト指向

Javascriptでは関数がオブジェクトであると同時にクラスのように機能させることも可能です。関数オブジェクトのフィイールド prototype にメソッドを定義して、thisキーワードを用いてフィールドにアクセスすることも可能です。

function ClassA(){
  this.field1 = 0;
  this.field2 = 0;
}
ClassA.prototype.methodA = function(arg){
   ...
}

現在はより簡単にオブジェクト指向が書けるよう、 class, constructor, extends, public, protected, private などのキーワードもサポートされています。