シェアする
About Logical Operators - Japanese Only
みなさまどうもこんにちは。
続いて『論理演算子』(ろんりえんざんし)についてやっていきましょう。これももっぱら『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』の両方が見つかった場合にその要素の文字色を変える、という処理です。
その他にも色々なパターンがありますが、『論理演算子』はこれから先の記事でもいっぱい出てきますのでそこでまた新しい発見をしていって頂ければ幸いです。
今回の記事では入門編、というところで『両方がtrue』とか『片一方がtrue』とかざっくばらんな解説をしておりますが、JavaScriptでの論理演算子の実態はかなりややこしいところがあります。
『&&』の実態は、左オペランド(左辺)をまず『評価』し、もし左オペランドが『false』になった場合は左オペランドの演算結果を返します。その際、右オペランドは演算すら行われません。左オペランドが『true』だった場合は問答無用で右オペランドの演算結果を返し、式全体の評価は右オペランドの結果に依存する、といった感じです。
『||』や『!』も同じようにかなりややこしいです。
JavaScript以外の言語では単純に『真偽値を返す』、といったものであることが多いのですが上記のようにJavaScriptでの論理演算子は『演算結果を返す』、と言った挙動をみせるのでかなり複雑です。なので『論理演算子の実態』については入門編では割愛し、先の記事で解説していきたいと思います。
このややこしい『論理演算子』ですが、なんだかんだで慣れてしまうととっても便利な記述なので、長年やっているJavaScriptプログラマーさんは多用することが多いです。私も良く使用してます。なのでいつか覚える必要が出てくるかもしれません。そこは気合で頑張っていきましょう。
というわけで今回の記事はここまでです。続いての記事では『switch文』をやっていきたいと思います。
引き続き頑張っていきましょうね。ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA 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.
