こんにちは。Webエンジニアの雅です。
JavaScriptやjQueryでプログラムを組んでいると、状況によっては変数や配列の値が空かどうかによって処理を変えたい時などがありますよね。
でもphpにはempty関数などがありますが、
と思ったことが一度はあると思います。
結論からいうと、JavaScriptやjQueryには直接変数が空かどうかを判定する関数はありません！！
これらの言語では「変数に値がある」ということの解釈を変えてプログラムを組むことによって、空かどうかを判定することが一般的です。
ではどう解釈を変えたらいいのでしょうか？今回はjQueryにフォーカスして空かどうかの判定方法を解説していきます！
【初心者向け】JavaScriptで空白をチェックする方法は？メソッドの使い方や実践コード例について解説！
nullとundefinedの違い
まず空かどうかの判定方法についてお話する前に、空かどうかの判定で必要となる null と undefined の違いについてを抑えておきましょう。
これらはJavaScriptやjQueryで良く出てくる単語なのですが、初学者の方はこれらの違いをあまり良く知らずに通過してきている人もいるのではないでしょうか？
これらの違いを端的にいうと、
・undefined はそもそも変数などが未定義であるということ
を表します。
サンプルコードをみてみましょう。
|
1 2 3 4 5 6 7 8 |
$(function(){ let text = null; if ( text == null ){ console.log(text); } }); // コンソールには null と出力される |
変数を定義する際に、初めは何も入れずに空の変数を定義したい時ってありますよね。
null はこのような場合に先に変数に代入することによって、空の変数を定義することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ let text = ''; if ( text === null ){ console.log("true"); }else { console.log("false"); } // コンソールには false と出力される console.log(typeof text); // string console.log(typeof null); // object }); |
初学者の中で混同しがちなものが ‘ ‘ と null の違いです。上のサンプルコードのように ‘ ‘ と null を比較すると、同等ではない(false)と出力されます。これはなぜかというと、 ‘ ‘ は空の文字列を表すのに対し、null は空のオブジェクトを定義しているからなんです！
ですので、変数が空かどうかをチェックするためにnull と比較することは正しくないので気をつけましょう。
|
1 2 3 4 5 6 7 |
$(function(){ let arr = [1,2]; console.log(arr[2]); // コンソールには undefined と出力される。 }); |
次に、undefined についてですが、改めて説明すると、未定義であることを意味します。
上の配列arr を出力する際に、arr[2]はそもそも空以前にキーが存在しないため、コンソールには undefined が出力されます。
このように、変数などが未定義の際にJavaScriptないしjQueryでは undefined と判定されます。
この違いを理解しながら次の項目の判定方法をみていきましょう。
文字数で空かどうかを判定する
それでは、jQueryではどのように変数の中身が空か否かを判定するかというと、変数の中身が0文字か否かを基準に、空かどうかを判定します。
0文字であればその変数の中身が空であることと同等ですし、0文字でなければその変数に何かしらが格納されていることになります。
jQueryではこの考え方を使って、変数の中身が空かどうかを判定します。今回はJavaScriptのプロパティを使って変数の文字数を判定する方法と、HTMLからDOMを取得して判定する方法を解説します。
lengthプロパティを使用した判定方法
JavaScriptには、lengthプロパティという要素の数を数えるプロパティが存在します。
jQueryでも同様に使用できるため、このlengthプロパティで変数が空かどうかを判定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ let text_1 = 'こんにちは'; if (!text_1.length){ // text_1の中身が空だったら... console.log("isEmpty"); }else { // text_1の中身が空ではなかったら... console.log("isFilled"); } // コンソールには isFilled と出力される。 }); |
上のサンプルコードの条件文は text_1.length == 0 でもよいのですが、!変数名.lengthとすることによって簡単に空かどうかを判定することができます。lengthプロパティを等式で結ばない場合、text_1.length というコードは文字が0文字でない場合は Boolean型でいう true と同等の働きをします。
そこで、!text_1.length とすることによって、text_1の中身が空(false)の場合は isEmpty と出力するよう命令している形になります。
このように、jQueryでは文字数が0かそうでないかを判定することによって、変数が空かどうかを判定します。
DOMを取得してから判定する方法
続いて、HTMLのDOM(Document Object Model)を取得して、そのオブジェクトの中身が空かどうかを判定する方法を説明していきます。
jQueryをいじっていると、HTMLの要素に対してアニメーションをつけたり動的に内容を変更したりすることってありますよね。
このような場合も先ほどと同様に文字数を判定することによって、オブジェクトの中身が空かどうかを判定します。
|
1 2 |
<!-- HTML --> <div class="text">テキスト</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ if ($('.text').length){ console.log('true'); // trueが出力される。 }else { console.log('false'); } if ($('.title').length){ console.log('true'); }else { console.log('false'); // falseが出力される。 } }); |
DOMを取得してその中身が空かどうかを判定するには、クエリを取得してそこにlengthプロパティを指定するだけで判定できます。
上のコードの場合、HTMLに.textというオブジェクトが存在するため、1番上のif文ではtrueが、.titleというオブジェクトは存在しないため、2番目のif文ではfalseが出力されます。
【DOM入門】JavaScriptのgetElementByIdとは？HTMLをJavaScriptで操作しよう
まとめ
いかがでしたか？
今回はjQueryにフォーカスして、変数の中身が空かどうかを判定する方法を解説しました。
プログラムを組む際にはこのような状況はたくさんあるので、必須で覚えておきましょう！！
