オリジナルReact.jsの関連用語まとめ画像

※注意点

当ブログではJavaScriptにおける、多少の基礎的な知識は前提で必要とします。

この記事ではReact.js入門をする前にJavaScript初学者様に向けた『比較演算子』と『論理演算子』『条件演算子』での学習となります。

出てきた単語などは別途こちらで解説致します。

バニラJavaScriptでのコード説明となります

外部ライブラリ・フレームワークの使用およびTypeScriptでの学習の場合は他の記事を参考に下さい。

ステートメント
- 演算子

ステートメント

ステートメントはJavaScriptにおいて多くのステートメントを含みステートメントと式この２つの用語は非常に重要な用語となります。

コンピュータプログラムは、コンピュータによって実行される命令のリストです。

プログラミング言語では、これらのプログラミング命令はステートメントと呼ばれています。

つまりJavaScriptでのプログラムでも、プログラミングステートメントのリストであり

ステートメントは特定の動作を実行させるための指示命令となります。

例えば『要素の配列でのループ』『コメント』『条件』『変数』・『関数』の作成これらはJavaScriptプログラムでは一連のステートメントとなっております。

JavaScriptプログラムフローの制御をするために活用します。

多くのJavaScriptプログラムではJavaScript ステートメントの事を『JavaScriptコード』と呼ぶ事があります。

JavaScriptでは現在は11のステートメントをサポートしています。

その中でも、ifステートメントはReactコンポーネントでの条件付きレンダリングで非常に役立ちます。

ステートメントは基本的に『文』と言います。

ですので、ifステートメントはif文です。

前述の言い換えますと、if文はReactコンポーネントでの条件付きレンダリングで非常に役立ちます。

演算子

JavaScriptでは様々な操作に演算子を必要とします

そしてJavaScriptには、8種類の演算子があります。

算術演算子
代入演算子
文字列演算子
比較演算子
論理演算子
条件演算子
ビット演算子
演算子のタイプ

本日では主に三項演算子・比較演算子および論理演算子を使用した条件付きの論理の学習です。

代入演算子につきましては解説致しません。

そしてJavaScriptには7つのデータ型があります。

・ null ・ undefined ・ boolean ・ string ・ number ・ objectとsymbol

演算子は、JavaScriptの『typeofデータ型』を決定するために使用されます。

これらの演算子の使用法は、次の3つのタイプに分けられます。

詳しい解説はまた別の記事で書きます。

まずは、if文での条件式を扱えるようになるには比較演算子を覚えて下さい。

比較演算子

比較演算子は関係演算子とも呼ばれる事もあります。

比較演算子は、論理ベースの別個でのケースとして理解しておいて下さい。

算術演算子や代入演算子などのさまざまな演算には、沢山の演算子記号が使用されています。

数値の等式、たとえば(10 = 10)と不等式(2 > 5)または(5 <= 10)などで構成されています。

これらの演算子は2つのオペランド間の条件付き関係が成り立つかどうかにかかわらず、trueまたはfalseと評価されます

オペランド(operand)とは演算子ではない、被演算子ですつまり値や変数などになります。

IT用語の一つです、オペランド用語のまま解説していきたいですが分かりづらいかと思います。

ここから先は、値や変数として言い換えていきます。

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…else文

JavaScriptには、if ... elseとswitch…caseの2つの条件構文があります。

本日はif文での解説となります。

これは条件分岐となります。

if(オペランド(値) > オペランド(値)) { //条件式

//条件が成り立てば実行

} else if(値 < 値) { //条件式

//新しい条件(複数の場合)式が成り立てば実行

}else{

//条件が成り立たなければ実行

}

指定された条件が真(true)の場合に、コードのブロックを指定し使用します。

else if

最初の条件で偽(false)になった場合に、新しく条件を指定し使用します。

else

最初の同じ(オペランド)条件かつ、else ifが偽(false)の場合にコードのブロックを指定するために使用します。

簡単なif構文の条件は次のとおりです。

let year = prompt('Hatenablogが正式にリリースされたのは何年ですか？', '');

if (year < 2013) {

  alert( '年が早いです' );

} else if (year > 2013) {

  alert( '年が遅いです' );

} else {

  alert( '正解です！' );
}

下記で実際に書いて、試してみて下さい。

https://codepen.io/enjinia_f/pen/abYvVBW/?editors=1011

このコードではいたって単純となっております。

『year』をチェックし『year < 2013』でfalseの場合は次の条件式へ移動します。

つまりif文での式はtrueの場合なら実行されますが上記では『2013』以上の年であれば、次の条件式へ移動します。

さらに、この条件がelse if『year > 2013』でもfalseの場合は最後を表示して正解となります。

この3つの条件分岐からさらに条件が必要な場合は複雑なif条件式のネスト(入れ子)として使用する事も可能となります。

『文字と数値』を比較し条件式にする際は型に気をつけて下さい。

if文の深い解説はまた記事に致します。

論理演算子

JavaScriptには3つの論理演算子があります

|| (OR)論理和
&&(AND)論理積
! (NOT)論理否定

順番に学んでいきましょう。

論理和(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)

AND演算子は論理積と呼びます。

論理和(OR)では値または変数が少なくともどちらかの式がtrueであればtrueとなりますが

&&演算子では両方の値がtrue(および他のすべての場合)である場合にのみ返されます。

let x = 10;

console.log(x > 20 && x < 40); //false

xの変数を定義し、xに10を割り当てます。

左辺と右辺でどちらの数値が高いのか低いのかを、評価します。

『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

すべての論理演算子の中でこの、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の場合に実行する別の式を持ちます。

この3つの値で三項演算子と呼ばれます。

先程の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歳以下です");

https://codepen.io/enjinia_f/pen/MWVaOpy/?editors=1011

最後に

複数での三項演算子ではif構文と同様に三項演算子を使用して、複数の条件チェックを実行することも可能となります。

しかしネストされた三項演算子は非常に複雑な式です。

三項演算子は、あまり複雑ではない評価に最適となっております。

短縮されたコードはコードの可読性を向上させ、他の開発者へのアクセス性を損なうことなくコードの行数を減らすことができるので非常に役立ちます。

JavaScriptコードでよく見かける一般的な書き方が三項演算子です、コードをよりクリーンに見やすくする利点がありますが適切に使用しなければ逆にコードが読めなくなる可能性もあります。

なるべく読みやすさ重視し、意識してそれを保つように書いていって下さい。

本日は以上となります。

最後まで読んで頂きありがとうございます。

deve.K

エンジニアが未来を切り開く。

React.jsを学ぶ前のJSでの演算子・条件分岐　基礎