Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript中級編 - nullとundefined

nullとundefined

みなさまどうも。

続きまして『null』と『undefined』についてやっていきましょう。『null』と『undefined』はこれまでの当サイトの記事でもちょいちょい出てきている言葉です。こちらを再確認していきたいと思います。

『null』は「ヌル」(ナル)って読みます。英語の発音的には「ナル」が近いのですが日本では「ヌル」が一般的な気がします。『undefined』は「アンディファインド」になりますね。

まず『null』から解説していきますが、『null』は『何のデータ(値)も存在していない状態』を表現している値になります。「何もないよ!」といった感じですね。

値が存在しないならば『0』とかでいいんじゃないかな、と思うかもしれませんがプログラミングでは『0』も意味を持つのでそれとは別に『null』という値が用意されているといったような考えでOKです。

では軽く記述してみましょう。JavaScriptでは『null』という値が用意されているので『"』や『'』で括る必要はありません。代入などさせたい場合はそのまま記述してしまってOKです。

var x = null; // 文字列ではないのでそのまま『null』と記述してしまってOKです。

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

JavaScriptでの『null』の使い道は主に『getElementById()』や『querySelector()』と組み合わせて使用されることが多いです。

『getElementById()』や『querySelector()』を実行させた時、要素が見つからないと『null』が返ってくるのでしたね。

『null』は『false』扱いになります。なのでそれを利用して処理を終了させる、といった処理はよく使われます。以下のような感じですね。

function changeColor(id, color){ // 要素の文字色を変更する処理です。
    var x = document.getElementById(id); // 要素を取得します。要素が取得できなかった場合『null』が返ってきます。
    if(x){ // 変数『x』が『null』だった場合はfalse扱いとなりますのでこのif文は実行されません。なので要素が見つからなかった場合でもエラーが起こらなくなります。
        x.style.color = color;
    }
}

『null』は他のプログラム言語でも同じような感じで実装されています。Rubyでは『nil』が該当しますね。使い方は大体同じなので特にこんがらがることもないかと思います。

では続いて『undefined』という値についてです。これは『未定義』を意味する値になり、『null』と同じく『undefined』も『false』扱いになります

『undefined』は他のプログラム言語では実装されていないJavaScript特有の値と思って頂いて問題ないです。なので他の言語と組み合わせて使用する場合、『undefined』という値をそのまま渡すことはできませんのでご注意ください。

JavaScriptでは『null』と同じく『undefined』という値も用意されていますので記述する際は『"』や『'』で括る必要はありません。

var x = undefined; // 文字列ではないのでそのまま『undefined』と記述してしまってOKです。

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

『undefined』の使い方は、変数などの定義に使用されることが多いです。

変数などを定義したあと、何も代入していない状態、つまり初期値を設定していない状態だと『undefined』が返されます。

なので以下のサンプルのように引数に何も代入されていない場合は処理をエスケープさせる、といった構築が可能です。以下は引数に何も渡さないと仮引数が『undefined』になるという挙動を利用した処理になります。

function hoge(text){
    if(text){// 引数に何も渡していない場合、このif文は実行されません。
        console.log(text);
    }
}
hoge(); // 引数に何も渡していないので処理はされません。

その他、前回の記事で解説した『return文』を書いていない関数などでも『undefined』が返ってきますね。

と、『null』と『undefined』についてはこんな感じになります。実装的な観点からみるとどちらも使い勝手は対して変わらないですね。あまり差を感じません。

『null』か『undefined』、どちらかを使用しなくてはならない場合はどちらが良いのか、というと参考書などでは『null』を使うように、とかいてあることが多いですが、正直どちらでも良い気がします。

どちらも『false』扱いになりますのであまり意識することなくif文などと組み合わせて使用できるかと思います。

というわけで以上となります。続いての記事では『ホイスティング』について解説していきたいと思います。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。