もし～ならばという処理のif文

みなさまどうも。いかがお過ごしでしょうか。

続いて先ほどの『比較演算子』や『真偽値』を使って、『if文』(いふぶん)というものを書いてみましょう。

『if文』とは『もし～ならば』という処理です。

というわけで以下のサンプルをみてみましょう。

if(true){
    console.log("実行されました！");
}

これが『if文』です。

まず『if』と書き、その後に『()』を記述します。続いて『{}』の中に実行させたい処理を書きます。

『()』の中が『true』ならば『{}』の中身が実行され、『false』ならば実行されない、といった処理を構築できるのが『if文』です。

上記の場合は『()』の中が『true』となっていますね。なので『{}』の中に記述してある『console.log("実行されました！");』が実行されるといった感じです。

さらに『else文』(えるすぶん)というのを続けて記述することができます。こんな感じです。

if(false){
    console.log("実行されました！");
}
else{
    console.log("実行されました！その2");
}

これは最初の『if文』の『()』の中が『false』となった場合に問答無用で『else文』の『{}』の中身が実行されます。

上記の場合は最初の『if文』が『false』なので『console.log("実行されました！その2");』が実行されます。

さらにもういっちょ、『else if文』(えるすいふぶん)というのがあります。

if(false){
    console.log("実行されました！");
}
else if(true){
    console.log("実行されました！その2");
}

これは『if文』で処理を分岐させたあと、さらに別の『if文』をかませることができる処理となります。

上記の場合は最初の『if文』で『false』となっているため、次の『else if文』に処理が移り、そこで『true』となっているので『console.log("実行されました！その2");』が実行されます。『else文』ではその前の『if文』が『false』ならば問答無用で実行されますが、『else if文』だとそのあとに更に処理を分岐させることができるといった違いです。

そして『else if文』と『else文』を複数組み合わせることができます。

if(false){
    console.log("実行されました！");
}
else if(false){
    console.log("実行されました！その2");
}
else{
    console.log("実行されました！その3");
}

上記の場合はまず『if文』で条件分岐、その後に『else if文』で条件分岐、その後全てが『false』ならば『else文』の処理が実行される、といったところです。

ちなみに『else文』を記述する場合は必ず最後に記述しなくてはなりません。

if(false){ // これはエラーです。
    console.log("実行されました！");
}
else{
    console.log("実行されました！その3");
}
else if(false){
    console.log("実行されました！その2");
}

上記は『else文』の後に『else if文』を書いてます。これはエラーになりますので注意しましょう。さらに『else if文』を最初に書いちゃダメです。最初は必ず『if文』です。これも要注意ですね。

というわけでちょっとややこしくなってきましたので『if文』を複数書いた場合との違いを確認してみましょう。

if(true){
    console.log("実行されました！");
}

if(true){
    console.log("実行されました！その2");
}

これは2つの『if文』が記述されていますね。この2つの『if文』は全く別の処理として実行されます。上記の場合は両方『true』なので『console.log("実行されました！");』と『console.log("実行されました！その2");』が両方実行されます。

『else if文』では最初の『if文』が『false』となった時に続けて条件分岐が行われるので、複数『if文』を組み合わせた時との挙動に違いがありますね。ちょっとややこしいのですが基本的な考え方は大丈夫そうでしょうか。

さて、では『if文』の『()』に先ほど勉強した『比較演算子』を入れてみましょう。

if(1 < 2){
    console.log("実行されました！");
}

『()』の中に注目してみてください、『1 < 2』と記述されてみます。これは『true』なので『console.log("実行されました！");』が実行されます。

ではちょっと応用編です。

実はJavaScriptでの『if文』等の『()』の中には『true』と『false』以外の値を入れることができます。

以下の例をみてください。

if("hoge"){
    console.log("実行されました！");
}

これは『if文』の『()』に文字列『"hoge"』が入っています。普通に考えると『真』か『偽』という『真偽値』が入るべきところに『文字列』が入っちゃっているので全くさっぱりわけがわかりませんね。

ところがこれ、『true』扱いになって普通に『if文』の中身が実行されちゃいます。エラーはおこりません。なんだか不思議です。

じゃあ続いて『空の文字列』をいれてみましょう。

if(""){
    console.log("実行されました！");
}

これは『false』扱いになって実行されません。

一体どういう事でしょうか。

種明かしすると、JavaScriptでは『true』扱いされる値と『false』扱いされる値が明確に分かれています。

以下を確認してください。

これは全てではないのですが、このような扱いになります。この『true』と『false』の扱いは、他の言語でも同じような概念となりますが、言語によってかなりの違いがあるので上記の挙動はJavaScript専用、という感じで覚えておくと良いです。

注目すべきは『0』と『1』や『null』、『undefined』あたりですね。

まずプログラミングにおいての『0』と『1』は数値の中で特に使用される事が多い値です。『0』は『false』扱いになるということをしっかり覚えておきましょう。

続いて『null』という値に注目したいと思います。この『null』は『false』扱いになります。

そんでもって『document.getElementById()』関数を思い出してみましょう。これは引数に記述されたid名で検索して、もし要素が見つからなければ『null』が返ってくるのでした。

以下を確認してみましょう。以下は『document.getElementById("hoge");』と記述しているにも関わらず、id名『hoge』と付いているHTML要素は存在していません。

<p>アラートを実行するよ！</p>

<script>
var elem = document.getElementById("hoge");

elem.addEventListener("click", function(){
    alert('hoge1');
}, false);

</script>

これをそのまま実行すると、変数『elem』に『null』が代入されてしまい、以下のように

null.addEventListener("click", function(){
    alert('hoge1');
}, false);

『null』にイベント登録をするというわけのわからない構文となりエラーとなってしまします。

ではこれに『if文』を組み合わせてみましょう。以下のようになります。

<p>アラートを実行するよ！</p>

<script>
var elem = document.getElementById("hoge");

if(elem){
    elem.addEventListener("click", function(){
        alert('hoge1');
    }, false);
}
</script>

『if文』で『elem』が『null』かどうかチェックできるようになりましたね。もしid名『hoge』となっている要素が見つからなくてもエラーとならずに済みます。

このように『document.getElementById()』関数を使用する場合はほぼ『if文』と組み合わせて使用されます。

ではもういっちょ、記述してみましょう。

ちょっと前の記事で記述した以下を思い出して下さい。

<p id="test">test</p>

<script>
function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}

</script>

はい、文字の色を変更できる関数です。これは『if文』を使用していませんね、ということは実行させる際の引数に『HTML要素に存在しないid名』を渡してしまうとエラーになってしまいます。

<p id="test">test</p>

<script>
function changeColor(id, font_color){
    document.getElementById(id).style.color = font_color;
}
changeColor("hoge", "#0ff"); // これはid名『hoge』が見つからないのでエラーとなってしまう。
</script>

これも『if文』を使用すれば『処理をさせない』という条件分岐をさせることができます。

というわけでちょっと書き加えましょう。

<p id="test">test</p>

<script>
function changeColor(id, font_color){
    var elem = document.getElementById(id);
    if(elem){
        elem.style.color = font_color;
    }
}
changeColor("hoge", "#0ff");
</script>

これで大分使いやすくなりましたね。正当なアップデートってやつです。

尚、上記は一旦変数に代入していますが以下のように

<p id="test">test</p>

<script>
function changeColor(id, font_color){
    if(document.getElementById(id)){
        document.getElementById(id).style.color = font_color;
    }
}
changeColor("hoge", "#0ff");
</script>

『if文』の『()』の中に『document.getElementById(id)』と記載してもOKです。少しトリッキーな文法になりますがこれも覚えておきましょう。面倒くさいときとか私も良く書きます。あんまり好まれる構文じゃないので真似しないほうがいいかもしれません。

if(true) console.log("hoge"); // これもOKです。
else if(false) console.log("hoge2");
else console.log("hoge3");

というわけで『if文』とかの解説は以上となります。

当記事では基本的なことまでの解説とさせていただきます。これからも『if文』はいっぱい出てきますのでそこでまた新しい使い方を掴んで頂ければ幸いです。

続いての記事では『論理演算子』というものをやっていきましょう。

引き続き頑張ってくださいね、ではー。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア