論理演算子について

みなさまどうもこんにちは。

続いて『論理演算子』(ろんりえんざんし)についてやっていきましょう。これももっぱら『if文』と併用されることが多い演算子となります。

考え方としては『～かつ～だった場合』や『～または～だった場合』といったような感じです。

では早速紹介して行きたいと思います。

まず論理演算子は『&&』、『||』、『!』の3つがあります。

『|』のタイピング方法はキーボードの右上あたりに『￥』がありますよね？『shift』キーを押しながら『￥』を押せば入力できます。

では最初に『&&』から確認していきましょう。

まず『&&』は『論理積演算子』(ろんりせきえんざんし)と呼ばれます。実際の現場では『論理積演算子』という単語はあまり使われません。単純に『アンドアンド』とか呼ばれていることが多い気がします。

さて、この『&&』の使い方ですが、『if文』と組み合わせるとこのような記述方法になります。

if(true && true){
    alert("実行されました！");
}

『if文』の『()』に注目ですね、『true && true』と記述されています。

『&&』は『両オペランド(両辺)がtrue』だったときにその式全体の評価が『true』となる、といった演算をします。

上記の場合は両オペランドが『true』となっていますね、なので『if文』の処理が実行されるといった感じです。

逆にこのように

if(true && false){
    alert("実行されました！");
}

片一方が『false』となっている場合は実行されません。『false && false』となっている場合も同じです。『&&』は解説書などでは『～かつ～』と解説されることが多いです。もし忘れてしまったら『if文　かつ』と検索してみると幸せになれるかもしれません。

さて続いて『||』の使い方です。『論理和演算子』(ろんりわえんざんし)と呼ばれます。これは『両オペランド(両辺）の片一方がtrue』だったときにその式全体の評価が『true』となる、といった演算をします。

if(true || false){
    alert("実行されました！");
}

上記は『true || false』となっていますね、これは片方のオペランドが『true』となっているので『if文』が実行されます。

if(false || false){
alert("実行されました！");
}

この場合は『false || false』となっており両方が『false』ですね、なので実行されません。ちなみに左右どちらが『true』でも実行されますので『false || true』となっていたり、『true || true』となっていても実行されます。間違いやすいので気をつけて下さい。

続いて『!』です。『!』は『論理否定演算子』(ろんりひていえんざんし)と呼ばれます。ちなみに『論理演算子』としての『!』が『論理否定演算子』と呼ばれる、という話なので単純に記号としての『!』は『ビックリマーク』とか『エクスクラメーション』とか『感嘆符』と呼んでしまってOKです。

これは以下のように使います。

if(!false){
    alert("実行されました！");
}

『!false』に注目です、どうやら『false』の頭に『!』がくっついていますね。

この『!』はちょっと独特で、まずオペランドは1つしかありません。『&&』と『||』は左右のオペランドを評価する、といった感じの演算でしたが、『!』のオペランドは1つだけです。

さてこの『!』ですが、そのオペランドの値を『真偽値』として評価したあとその値を反転させます。

先ほどの記事の『true』扱いされる値と『false』扱いされる値をちょっと思い出してみましょう。以下になりますね。

文字列	true
空の文字列	false
数値の『0』	false
『0』以外の整数	true
null	false
undefined	false

例えばJavaScriptにおいての『1』という数値は『true』扱いされますね。というわけで『!1』と記述すると『false』が返ってきます。

確認してみましょう。

alert(!1);

以下にサンプルを用意してみたのでクリックしてみてください。

ここをクリック

いかがでしょうか。『false』が返ってきたと思います。

では続いて『""』に『!』をくっつけて『!""』と書いてみます。『""』は空の文字列です。JavaScriptでは空の文字列は『false』扱いされます。

では実験です。

alert(!"");

ここをクリック

『true』とアラートダイアログが出てきたと思います。いかがでしょうか。このようにオペランドの『真偽値』としての評価を反転させた『真偽値』を返すのが『!』です。

ではよく使うパターンで『null』という値を反転させてみます。『null』は『false』扱いになるのでしたね。そして『document.getElementById()』関数で要素が見つからなければ『null』となるのでした。

ということはこういう演算を書くことができます。

<p>test</p>

<script>
var elem = document.getElementById("hoge");
if(!elem){
    alert("id名『hoge』という要素がみつからないです！");
}

</script>

まずid名『hoge』とついたHTML要素を探しますが、ご覧のとおり見つかりません。なので変数『elem』には『null』が入ります。

そして『if文』の『()』で『!elem』となっていますので『真偽値』として『false』と評価される『null』が反転して『true』となり、『if文』の処理が実行される、という流れになります。

というわけで『論理演算子』についての大まかな使い方は以上となります。

『論理演算子』の使い道の70%くらいは『if文』と組み合わせて使用されますので『if文』とセットで覚えてしまいましょう。

ちなみにJavaScriptではよく『document.getElementById()』関数などと一緒に併用されることが多いです。

var elem1 = document.getElementById("hoge1");
var elem2 = document.getElementById("hoge1");

if(elem1 && elem2){
    elem1.style.color = "#00f";
    elem2.style.color = "#00f";
}

上記はid名『hoge1』とid名『hoge2』の両方が見つかった場合にその要素の文字色を変える、という処理です。

その他にも色々なパターンがありますが、『論理演算子』はこれから先の記事でもいっぱい出てきますのでそこでまた新しい発見をしていって頂ければ幸いです。

というわけで今回の記事はここまでです。続いての記事では『switch文』をやっていきたいと思います。

引き続き頑張っていきましょうね。ではではー。