脱jQuery .size() と 諸注意

.size()

jQuery

$(".menu").size()

書き換え JavaScript

document.getElementsByClassName("menu").length

.size() は要素の個数を取得するメソッドです。これは結構有名なので知ってる方も多いと思うのですが、.size() = .length となります。

$(".menu").length と .length は jQuery でも使うことが出来ます。.size() 自体内部的には .length を使っており、 全く同じものと考えてもらって構いません。

以上で jQuery の命令についての書き換えは終了です。続いて諸注意。

ネイティブは存在しないとエラーになり止まる

まずは「ネイティブは存在しないとエラーになり止まる」ですが次のコードを見てみてください。

jQuery

$("#ex1").css("color","red");

//#ex1 が HTML 上存在していなくても #ex2 の文字色が青くなる
$("#ex2").css("color","blue");

JavaScript

document.getElementById("ex1").style.color = "red";

//#ex1 が HTML 上にないとエラーが出てコードが止まり、これ以降のコードが実行されない
document.getElementById("ex2").style.color = "blue";

jQuery はその要素があっても無くてもエラーは起きませんが、ネイティブ JavaScript は要素がないものに何らかの命令を加えるとエラーになります。

存在するかしないかわからないものに関しては、基本以下の様な形で対応します。

var myEx1;
if (myEx1 = document.getElementById("ex1")) {
    myEx1.style.color = "red";
}

// #ex1 が HTML 上にないと if で飛ばされるためコードが止まらない
document.getElementById("ex2").style.color = "blue";

いろんな書き方がありますが自分がよくやる書き方で。

まず変数を宣言しておき、if 内で存在するかどうかわからない要素とイコールします。 その後、if 内でその変数を使い命令をします。

これで存在しない要素だったとしてもエラーにならずコードが止まりません。

body の一番下にコードを書く

これは有名ですので知ってる方も多いかもしれません。

ちょっと前までは JavaScript は head に書くのが一般的でしたが、今は body の一番下に書くのが一般的です。最下部にした方がページを高速に表示できますし、Google なども推奨しています。

・・・
        <script>
            //JavaScriptコード
        </script>
    </body> //bodyの閉じタグの直上
</html>

関数

グローバル変数、ローカル変数などの話が絡んできますので、ここでは詳しくは書きません。

ネイティブ JavaScript では関数化が非常に大事です。基本関数を作り、それに代入のような形でグローバル汚染を封じます。jQuery だけやっていると出てこない概念ですね。

関数化の話は長くなってしまうので、ここではものすごく雑ですがその「グローバル汚染」というのを防ぐ方法を書きます。

<script>
(function() {
        var myEx1; //var で変数宣言
        if(myEx1 = document.getElementById("ex1")) {
            myEx1.style.color = "red";
        }
})()
</script>

即時関数と呼ばれるものを使います。(function(){})() という形の関数となります。そして、この中にネイティブ JavaScript コードを書きます。(function(){ と })() で囲んでください。

変数は必ずこの即時関数の中で var を付けて宣言します。

グローバル汚染が何かを全く説明していないのですが、知りたい方は検索してもらえればたくさん記事が出てきますので調べてみてください。