The if Statement: Conditional Execution - Japanese Only

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

続いて先ほどの『比較演算子』や『真偽値』を使って、『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文』はいっぱい出てきますのでそこでまた新しい使い方を掴んで頂ければ幸いです。

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

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

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする