※注意点
当ブログではJavaScriptにおける、多少の基礎的な知識は前提で必要とします。
この記事ではReact.js入門をする前にJavaScript初学者様に向けた『比較演算子』と『論理演算子』『条件演算子』での学習となります。
他の記事では、分かりやすく用語を言い換えたりしてるかと思いますが当ブログでは少ないのでご了承下さい。
出てきた単語などは別途こちらで解説致します。
バニラJavaScriptでのコード説明となります
外部ライブラリ・フレームワークの使用およびTypeScriptでの学習の場合は他の記事を参考に下さい。
近いうちに余裕があれば初学者様向けのTypeScriptでの入門も書けていけたらと思っていますが、未定という事でお願い致します。
ステートメント
ステートメントはJavaScriptにおいて多くのステートメントを含みステートメントと式この２つの用語は非常に重要な用語となります。
コンピュータプログラムは、コンピュータによって『実行』される『命令』のリストです。
プログラミング言語では、これらのプログラミング命令はステートメントと呼ばれています。
つまりJavaScriptでのプログラムでも、プログラミングステートメントのリストであり
ステートメントは特定のアクション(動作)を実行させるための指示(命令)となります。
例えば『要素の配列でのループ』『コメント』『条件』『変数』・『関数』の作成これらはJavaScriptプログラムでは一連のステートメントとなっております。
JavaScriptプログラムフローの制御をするために活用します。
多くのJavaScriptプログラムではJavaScriptステートメントの事を『JavaScriptコード』と呼ぶ事があります。
JavaScriptでは現在は11のステートメントをサポートしています。
その中でも『ifステートメント』はReactコンポーネントでの条件付きレンダリングで非常に役立ちます。
JavaScriptでは様々な操作に演算子を必要とします
そしてJavaScriptには、8種類の演算子があります。
本日では主に『三項演算子』・『比較演算子』および『論理演算子』を使用した条件付きの論理の学習です。
代入演算子につきましては解説致しません。
そしてJavaScriptには7つのデータ型があります『null』『undefined』『boolean』『string』『number』『objectとsymbol』
演算子は、JavaScriptの『typeofデータ型』を決定するために使用されます。
これらの演算子の使用法は、次の3つのタイプに分けられます。
詳しい解説はまた別の記事で書きます。
まずはifステートメントでの条件式を扱えるようになるには『比較演算子』を覚えて下さい。
比較演算子
比較演算子は、論理ベースの別個でのケースとして理解しておいて下さい。
算術演算や代入演算などのさまざまな演算には、沢山の記号が使用されています。
数値の等式(たとえば、10 = 10)と不等式(2 ≥ 5)などで構成されています。
これらの演算子は2つのオペランド間の条件付き関係が成り立つかどうかにかかわらず、『true』または『false』と評価されます
オペランドとは演算子ではない、被演算子ですつまり値や変数などになります。
JavaScriptのコアメカニズムでは、真(true)の値と偽(false)の値を区別する機能です。
JavaScript標準では、true値とfalse値を、JavaScriptブール(boolean)値と呼ばれる一意のデータ型として定義しています。
JavaScriptブール値はプリミティブ型となってます。
オブジェクトとしてわざわざ明示的に作成する必要はありません。
予約済みのキーワードを使用する『true』か『false』を変数にブール値を割り当てます。
JSONでブール値を作成する場合でも、同じロジックが適用されます。
ifステートメントの構文で頻繁に使用されます
比較演算子の表はこちらです。
| 種類 | 比較式 | 概要 |
|---|---|---|
== |
x==y |
オペランドが等しい場合(true)を返すがチェックするのは値のみ |
=== |
x===y |
オペランドが厳密に等しく値と型が同じの場合(true)を返す |
!= |
x!=y |
オペランドが等しくない場合(true)を返す |
!== |
x!==y |
オペランドが厳密に等しくないか型が同じの場合(true)を返す |
> |
x > y |
左辺(左)オペランドが右辺(右)のオペランドより大きい場合(true)を返す |
< |
x < y |
左辺(左)オペランドが右辺(右)のオペランドより小さい場合(true)を返す |
>= |
x>=y |
左辺(左)オペランドが右辺(右)のオペランドより大きいまたは等しいかの場合(true)を返す |
<= |
x<=y |
左辺(左)オペランドより右辺(右)のオペランドの方が大きいまたは等しいかの場合(true)を返す |
※『(NOT) !』は論理演算子の『論理否定』となり、付け足す事により返ってくる結果が反転します。
論理否定は後ほどご紹介致します。
条件ifステートメント
JavaScriptには、if ... elseとswitchの2つの条件ステートメントがあります。
本日はifステートメントでの解説となります。
これは条件分岐となります。
if(オペランド > オペランド) { //条件式 //条件が成り立てば実行 } else if(オペランド < オペランド) { //新しい条件(複数の場合)式が成り立てば実行 }else{ //条件が成り立たなければ実行 }
- if
指定された条件が真(正)の場合に、コードのブロックを指定し使用します。
- else if
最初の条件でfalseになった場合にステートメントを使用し新しく条件を指定し使用します。
- else
最初の同じ(オペランド)条件かつ、『else if』がfalse(偽)の場合にコードのブロックを指定するために使用します。
簡単なif構文は次のとおりです。
let year = prompt('Hatenablogが正式にリリースされたのは何年ですか？', ''); if (year < 2013) { alert( '年が早いです' ); } else if (year > 2013) { alert( '年が遅いです' ); } else { alert( '正解です！' ); }
このコードではいたって単純となっております。
『year』をチェックし『year < 2013』でfalseの場合は次の条件式へ移動します。
つまり『if』での式はtrueの場合なら実行されますが 上記では『2013』以上の年であれば、次の条件式へ移動します。
さらにこの条件(else if)『year > 2013』でもfalseの場合は最後を表示して正解となります。
この3つの条件分岐からさらに条件が必要な場合は複雑なif条件式のネスト(入れ子)として使用する事も可能となります。
『文字と数値』を比較し条件式にする際は型に気をつけて下さい。
ifステートメントはまた記事に致します。
論理演算子
JavaScriptには3つの論理演算子があります
順番に学んでいきましょう。
論理和(OR)
『OR』演算子は、2つの縦線( || )記号で表し『論理和』と言います。
本来のプログラミングでは論理(OR)はブール値のみを操作することを目的としています。
引数のいずれかがtrueである場合はtrueを返し、そうでない場合はfalseを返します。
この(true)と(false)は比較演算子である２つのオペランドを比較した際の最終的な結果となります。
alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false
これらのような組み合わせが可能となっております。
両方のオペランドがtrueの場合を除いて、結果はfalseとなっております。
オペランドがブール値でない場合は、評価のためにブール値に変換されます。
このOR『 || 』演算子は『if』ステートメントで使用され、指定された条件のいずれかtrueであるかどうかを確認していきます。
おさらいをしますと
オペランドのAまたはBのどちらかが成立している必要性があります。
少なくとも1つがtrueの場合、trueを返します。
const a = true; const b = true; const c = false; const d = false; a || bは(true) a || c は(true) c || a は(true) c || d は(false) d || c は(false)
const a = true; const b = true; const c = false; const d = false; if (c >= a || a === b) { alert( 'true通知です' ); }
それではもう１つの論理演算子である『&&(AND)』も学んでいきましょう。
論理積(AND)
論理和(OR)ではオペランドが少なくともどちらかの式がtrueであれば trueとなりますが
&&演算子では両方のオペランドがtrue(および他のすべての場合)である場合にのみ返されます。
let x = 10; console.log(x > 20 && x < 40); //false
『x > 20 』が false となるので 『x < 40 』のチェックは行わず、式全体の評価として『 x > 20 』をチェックした値である 『false 』が返されます。
次のサンプルを確認下さい
let x = 20; console.log(x > 10 && x < 30); //true
こちらでは『x > 10 』が true となるので式全体の評価として 『x < 30 』をチェックした値である true が返されます。
もう一つ例を見てましょう。
let x = 20; console.log(x > 0 && 'yes');
これは『0』よりも『x』の値の方が大きいのでもちろん『x > 0』がtrueとなります。
ですので式全体の評価として『yes』を返します。
これらのように論理積を使用した式では 『true 』や 『false 』だけでなく沢山の値が返されます。
if 構文の条件式などは論理値を要求される場所では、返ってきた値はルールに従って true または false としてみなされるので、あまり気にされる必要はありません。
論理否定Not( ! )
論理Not演算子には、オペランドの前にありブール値に変換し値を否定する前に、オペランドをブール値に変換します。
このプログラムは、論理否定で出力を返す論理否定(！)で単項演算子となっております。
構文は非常に簡単です。
alert( !0 ); // true alert( !true ); // false
これは単一である引数を受け入れ、( !0 )逆の値を返します。
( !true )ではオペランドをブール型『true/false』に変換しています。
2つの論理not演算子を連続して使用することも可能です、二重否定( !! )と言います。
この二重否定をオペランドに適用すると、まずオペランドを評価しブール値に変換します。
そしてそのブール値を否定します。
その後オペランドの元の値に戻します。
alert( !!"string" ); // true alert( !!null ); // false
同じことを行うための別の方法があります組み込みBoolean関数です。
alert( Boolean("string") ); // true alert( Boolean(null) ); // false
返されるのは上記と変わりません。
すべての論理演算子の中でこの、NOTの優先順位は最も高いです。
これは、論理演算などの評価でブール値が必要な場合に使用するものとなります。
ここまでの学習でそれぞれのif構文での扱い方を理解してきたかと思いますが
ifステートメントでの書き方は現在では少し古いです つまり古典的な書き方でもあります。
JavaScriptでの拡張アルゴリズムである機能を使用します。
『三項演算子』となります。
三項演算子
三項演算子はしばらく前から存在していました。
三項演算子は通常、単純な条件の評価に使用されますが、複雑なステートメントを反映したステートメントなど、より複雑な条件ステートメントを作成するためにも使用されます。
ifステートメントの代わりとして使用すると言ってる方もいますが、どちらかと言えばそれは正しいとは言えません。
条件付き三項演算子は、ある条件に基づいて変数に値を割り当てます。
これは正しくは、『値を返す』if ・ else構文と同等という事になります。
つまり値を返す短縮バージョンとしてよく使用されます。
式は次のようにします。
const age = 30; const drink = (age >= 20) ? "I can drink beer!" : "No beer"; console.log(drink);
疑問符『?』条件がtrueの場合は(I can drink beer!)が返されます。
条件がfalseの場合、2番目の後の値(No beer)が返されます。
const age = 19; const drink = (age === 20) ? "I can drink beer!" : "No beer"; console.log(drink);
『疑問符』・『条件がtrueの場合に実行する式とその後に、コロンでfalseの場合に実行する別の式』を持ちます。
先程の!(NOT)を付け加えれば結果は反転します。
const age = 19; const drink = (age !== 20) ? "I can drink beer!" : "No beer"; console.log(drink);
本来であれば『No beer』ですが、否定論理を使用すれば『I can drink beer!』が返ってきます。
※お酒は２０歳から
基本的には次のコードと同じです
//ifステートメント let drink; let age = 30; if(age <= 20) { drink = "I can drink beer!"; } else { drink = "No beer"; } console.log(drink);
別のサンプルはこちら
const age = 30; age > 20 ? age > 60 ? console.log("あなたは老いた") : console.log("20歳以上または60歳未満の方") : console.log("20歳以下です");
複数での三項演算子ではif・elseステートメント同様に3項演算子を使用して、複数の条件チェックを実行することも可能となります。
しかしネストされた三項演算子は非常に複雑な式です。
三項演算子は、あまり複雑ではない評価に最適となっております。
短縮されたコードはコードの可読性を向上させ、他の開発者へのアクセス性を損なうことなくコードの行数を減らすことができるので非常に役立ちます。
JavaScriptコードでよく見かける一般的な書き方が三項演算子です、コードをよりクリーンに見やすくする利点がありますが適切に使用しなければ逆にコードが読めなくなる可能性もあります。
なるべく読みやすさを意識してそれを保つように書いていって下さい。
本日はこれで以上としておきます。
最後まで読んで頂きありがとうございました。