JavaScript中級編総まとめ

JavaScriptでのオブジェクトとは独自の名前から識別するデータの集合体のこと。配列は連番のインデックス番号で識別するが、オブジェクトは独自の名前で識別するという違いがある。オブジェクトの値にアクセスするには『[]』を使用するか、『.』を使用する。多次元オブジェクトも生成可能。オブジェクトの記述方法は以下。『リテラル式』(オブジェクトリテラル)を使用すると良い。

var x = {}; // 定義したのみ。
x["hoge"] = 0; // 『x["hoge"]』に0を代入。

console.log(x["hoge"]); // 『0』と出力。

var y = { // 定義と代入処理。
    "hoge": 0,
    hoge1: "Hello World" // 空白や演算子がなければプロパティ名は『"』か『'』で括る必要はない。
};

console.log(y.hoge1); // 『Hello World』と出力。

詳細はこちらへ

『for...in文』はオブジェクトの数に合わせた繰り返し処理を行える構文。基本となる構文は以下。

for(var 変数 in オブジェクト){
	// ここに処理
}

変数にはオブジェクトのプロパティ名(キー)が代入される。値ではないので注意。処理の順番が担保されていないため、基本的には『for文』の方が使い勝手が良い。サンプルは以下。

var x = {
	"hoge": 0,
	"hoge1": 1,
	"hoge2": 2
};

for(var elem in x){
	console.log(elem); // 『hoge』、『hoge1』、『hoge2』と出力。
	console.log(x[elem]); // 『0』、『1』、『2』と出力。
}

詳細はこちらへ

『document.getElementsByTagName()』を使用すると要素のタグ名から、『document.getElementsByClassName()』を使用すると要素のclass名から、『document.getElementsByName()』を使用するとname属性から要素を取得できる。使い方はどれもあまり変わらない。その場合は配列オブジェクトとして取得されるのでインデックス番号の書き忘れに注意。『document.getElement~』系の関数(メソッド)を連続して使用することも可能。ただし、あまりに深い要素を取得したい場合は『document.querySelector()』を使用した方が楽。サンプルは以下。

<div id="test">
	<p>ここの要素を取得するよ！</p>
</div>

<p>ここは取得されないよ！</p>

<script>
var x = document.getElementById("test").getElementsByTagName("p");

for(var i = 0; i < x.length; ++i){
    x[i].innerHTML = "中身を変更するよ！";
}
</script>

詳細はこちらへ

CSSセレクタから要素を取得できる。『document.querySelector()』と『document.querySelectorAll()』が存在し、単一の要素を取得したい場合は『document.querySelector()』、複数の要素を取得したい場合は『document.querySelectorAll()』を使用する。『document.querySelector()』は最初の要素を取得した際にそれ以降の要素の検索は行われない。『document.querySelectorAll()』は配列として取得するので注意。使い勝手は非常に良いが処理が遅めなのが難点。深いHTML要素の特定処理に真価を発揮する関数(メソッド)。サンプルは以下。

<div class="test">ここはclass属性に『test』と指定しているよ！</div>
<p>ここはp要素だよ！</p>
<p>ここはp要素だよ！</p>

<script>
var x = document.querySelector(".test");
var y = document.querySelectorAll("p");

x.innerHTML = "中身を変更したよ！その1";

for(var i = 0; i < y.length; ++i){
    y[i].innerHTML = "中身を変更したよ！その2";
}
</script>

詳細はこちらへ

JavaScriptでは関数の中で定義された変数やオブジェクトは関数の外からアクセスすることができない。どこからでもアクセスできる変数は『グローバル変数』(グローバルオブジェクト)と呼ばれ、同じ関数の中からしかアクセスできない変数は『ローカル変数』(ローカルオブジェクト)と呼ばれる。JavaScriptでは関数スコープ以外のスコープは存在しない。スコープの範囲はプログラム言語によって大きく違うので注意。JavaScriptでは『var』を付けずに変数やオブジェクトを定義するとグローバルとして定義できる。

詳細はこちらへ

『setTimeout()』は時間差を設けて処理を実行させることができる関数(メソッド)、『setInterval()』は指定された時間ごとに処理を実行できる関数(メソッド)。時間指定はミリ秒となるので注意。『setTimeout()』の記述例は以下。

function hoge(){
    alert("3秒経ちました！");
}
setTimeout(hoge, 3000);

『setInterval()』の記述例は以下。『clearInterval()』を使用すると『setInterval()』を停止することができるが、その場合は『setInterval()』の戻り値が必要になるので注意。戻り値を取らなかった場合の『setInterval()』は停止することができない。

function hoge(){
    console.log("3秒経ちました！");
}

var setIV = setInterval(hoge, 3000);

function stop_hoge(){
    clearInterval(setIV);
    console.log("停止しました！");
}

setTimeout(stop_hoge, 5000);

詳細はこちらへ

『return文』を使用すると関数(メソッド)が実行されたときにどの値を返すか指定することができ、それと同時にその関数の処理も終了となる。オブジェクトや演算式で演算された結果を返すことも可能。関数を実行させ返ってきた値のことを『戻り値』(返り値)と呼ぶ。『return;』とだけ記述すると『undefined』を返し、『return文』を省略しても『undefined』が返される。『return文』は関数(メソッド)の中でしか書くことができないので注意。『return文』は続く演算式との間に改行を入れることはできない。サンプルは以下。

function hoge(){
    return; // 空の『return文』。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『undefined』が代入される。

console.log(x); // 『undefined』と出力。

詳細はこちらへ

『null』はデータが存在していない状態を意味する値、『undefined』は未定義を意味する値。どちらも『false』扱いになる。

var x = null;

console.log(x); // 『null』と出力されます。

var y = undefined;

console.log(y); // 『undefined』と出力されます。

詳細はこちらへ

JavaScriptでは宣言処理の巻き上げが行われ、それを『ホイスティング』と呼ぶ。例えば以下のサンプルは

var x = 0; // ここはグローバル変数

function hoge(){
    console.log(x);
    // ここに処理が沢山書いてあるとします。
    // ...
    // ...
    // ...
    // ...
    // ...
    var x = 1;
}
hoge();

以下と同様になる。思わぬミスの原因になるので注意。

var x = 0; // ここはグローバル変数

function hoge(){
    var x; // 宣言のみが巻き上げされる。グローバル変数ではなくローカル変数『x』の定義となるので『undefined』となる。
    console.log(x); // ローカル変数『x』の『undefined』を出力。
    // ここに処理が沢山書いてあるとします。
    // ...
    // ...
    // ...
    // ...
    // ...
    x = 1; // ローカル変数『x』に『1』が代入されます。
}
hoge();

詳細はこちらへ

『function(){}』は『無名関数』と呼ばれる。JavaScriptではホイスティングが行われないため、『無名関数』を利用した関数式での関数の定義が一般的。

var hoge = function(x, y){
    console.log(x, y);
};

一度しか使用しない関数は『無名関数』を使用すると良い。サンプルは以下。

setTimeout(function(){
    alert("3秒経ちました！");
}, 3000);

JavaScriptでは文頭に『function』と書くと関数定義の文だと判断されてしまい、以下のような構文は文法エラーとなるので注意。『無名関数』を即時実行させたい場合は『即時関数』を利用すること。

function(){
    // これはダメです。
}

詳細はこちらへ

『即時関数』とは即時実行される『無名関数』のこと。JavaScriptでは冒頭に『function』と書かなければ関数定義文として判断されない。それを利用し『無名関数』を『()』で包むことで『即時関数』を生成することができる。サンプルは以下。

(function(){
    // ここに処理
})();

『無名関数』に引数を渡したい場合は以下のようにする。

var x = 0; // これはグローバル変数『x』

(function(x){ // グローバル変数『x』の値『0』を仮引数『x』で受け取る。
    ++x; // 仮引数『x』に『1』を加算。
    console.log(x); // 『1』と出力。
})(x); // グローバル変数『x』を渡す。この時点の『x』は『0』。

console.log(x); // 即時関数で加算された『x』は仮引数『x』なのでグローバル変数『x』の値は変化しない。『0』と出力されます。

詳細はこちらへ

JavaScriptではプリミティブの代入処理は『値渡し』となるが、オブジェクトの代入処理は『参照渡し』となる。なので配列やオブジェクトの代入処理を行う際は裏側の見えない処理に注意。純粋な多次元配列ならば複製することが可能だが、オブジェクトの完全なる複製処理はJavaScriptでは不可能。なのでJavaScriptでのオブジェクトは基本的に複製できないもの、と考えておくと良い。

詳細はこちらへ