JavaScriptの勉強08【条件文if・switch文・三項演算子】
javascriptの基礎を学ぶシリーズ第８弾。
条件分岐の方法をいろいろと学んでみました。
前回の記事 micche-labo.hatenablog.com
初めて条件分岐を学んだ記事 micche-labo.hatenablog.com
はじめに
このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。
ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。
なにか間違い・助言あれば、ご教授おねがいします。
条件文if...else
基本の形。
if (条件式) { //trueの場合の処理 } else { //falseの場合の処理 }
else{}はなくても問題なし。
if (条件式) { //trueの場合の処理 } //trueでもfalseでも関係なく実行されるコード
例
const food = 'ご飯大盛り！'; if (food === 'ご飯大盛り！'){ console.log('おなかいっぱい！'); } else { console.log('おなかすいた'); } //コンソール出力=>おなかいっぱい！
if(food === 'ご飯大盛り！')は、以下のように記述しても可。
if (food){ console.log('おなかいっぱい！'); } else { console.log('おなかすいた'); } //コンソール出力=>おなかいっぱい！
else if
条件付きのelse。
式はelse if(条件){処理;}となる。
1.trueとなる場合
let food = 'ぶどう'; if (food === 'ぶどう'){ console.log('ぶどうです。'); } else if (food === 'りんご'){ console.log('りんごです。'); } else { console.log('ぶどうでもりんごでもありません。'); } //=>ぶどうです。
2.else ifが適応される場合
let food = 'りんご'; if (food === 'ぶどう'){ console.log('ぶどうです。'); } else if (food === 'りんご'){ console.log('りんごです。'); } else { console.log('ぶどうでもりんごでもありません。'); } //=>りんごです。
3.どちらの条件にも合わなかった場合
let food = 'すいか'; if (food === 'ぶどう'){ console.log('ぶどうです。'); } else if (food === 'りんご'){ console.log('りんごです。'); } else { console.log('ぶどうでもりんごでもありません。'); } //=>ぶどうでもりんごでもありません。
AND &&・OR ||・NOT ! 論理演算子
if文を入れ子にして書きたかったら論理演算子の出番って聞いた。
例えば、
- 今日
という条件のもとで、
- 朝食をたべた
- 朝食をたべなかった
といった条件で処理をわけたいとき。
choice = 'today'; if (choice === 'today'){ //'today'だったら console.log('今日がはじまりました。'); //入れ子のif...else文 const eat = true; if (eat){ console.log('今日はごはんを食べました'); //trueなら }else{ console.log('今日はごはんを食べませんでした。'); //falseなら } } //console.log=>今日がはじまりました。 //console.log=>今日はごはんを食べました
のように、入れ子にして入れてもいいけど、見辛い。わかりづらい。カッコ忘れたりしてややこしい。
&&（かつ）使った例
二つの条件をまとめる。
todayかつeat === true（ごはんをたべた）なら
if(choice === 'today' && eat === true)と記述できる。todayかつeat !== true(ごはんをたべなかった)なら
if(choice === 'today' && eat !== true)と記述できる。
const choice = 'today'; const eat = true; if (choice === 'today' && eat === true){ //'today'かつ'eat'だったら console.log('今日は朝ごはんを食べたので調子が良いです。'); }else if (choice === 'today' && eat !== true){ //'today'かつ'eat'じゃなかったら console.log('今日はごはんを食べなかったのでお腹が空きました。'); } //consol.log=>今日は朝ごはんを食べたので調子が良いです。
&&、|| 、!の使用例
いい例が思いつかなかったです。
こちらの参考にさせてもらったサイト様の方がわかりやすいです。 JavaScriptの論理演算子「&&」「||」「!」の使い方を現役エンジニアが解説【初心者向け】
//3通りのデータ。連想配列としてつくる。 //条件A:食べ物、条件B:赤色とし、真偽でリストを分ける。 let list_a = { food : true , red : true }; //食べ物であり赤色 let list_b = { food : true , red : false }; //食べ物であり赤でない let list_c = { food : false , red : false }; //食べ物でもなく赤でもない //条件式。 function redFood( list ){ if( list.food && list.red ){ console.log('食べ物であり赤色なのはりんごです。'); } else if ( list.food || list.food ){ console.log('食べ物、または赤色なのは、りんごや、ポストです'); } else if (!list.food && !list.red ){ console.log('食べ物でもなく赤色でもないのは、キリンです'); } } //関数実行 redFood (list_a); redFood (list_b); redFood (list_c); //実行結果。 //console.log=>食べ物であり赤色なのはりんごです。 //console.log=>食べ物、または赤色なのは、りんごや、ポストです //console.log=>食べ物でもなく赤色でもないのは、キリンです
またはって条件考えるの難しいです。
cssだと.markまたはuなら下線つける…とかで使いますね。
.mark ,.u { border-bottom:2px solid pink; }
みたいな。ちょっと考え方違うのかなあ。
これだと.markと.uって意味だしな。
switch文
if文が長くなりそう&複雑化しそうならこっちおすすめって書いてあった。
式は
switch(式・もしくは変数){ case '値': //処理。trueなら実行。 break; //合致したらここで処理終了。 case '値2': //処理。trueなら実行。 break; //以下繰り返し }
のような感じ。
我が家のかわいい同居ウサギに餌をどの程度あげるかっていうのをif文で書いてみるとこうなりました。
const select = document.querySelector('select[name="gin_select"]'); const para = document.querySelector('#result-para'); const submitBtn = document.querySelector('input[type="submit"]'); submitBtn.addEventListener('click', setGin); function setGin(e) { e.preventDefault(); //ボタンクリックの規定値削除 const choice = select.value; //selectのvalueの値を取得 //ここからswitch文 switch (choice) { case 'yes': para.textContent = '銀ちゃんはとても嬉しそうです！'; break; case 'little': para.textContent = '銀ちゃんはおなかがすいています。'; break; case 'full': para.textContent = '銀ちゃんはおなかがいっぱいです。'; break; case 'no': para.textContent = '銀ちゃんは怒っています。'; break; default: para.textContent = '銀ちゃんがまっています。'; alert('選択は必須です'); } }
html部分はこんな感じ。
<!--銀ちゃんにごはんをあげよう！のコーナー--> <div id="choice-food"> <h2>銀ちゃんにごはんをあげよう！</h2> <form> <label class="required">必須</label> <select name="gin_select"> <option value="">選んでください</option> <option value="full">たくさんあげる</option> <option value="yes">あげる</option> <option value="little">すこしだけあげる</option> <option value="no">あげない</option> </select> <input type="submit" value="決定"> </form> <!--銀ちゃんのコメントがでてくる--> <div id="gin_comment"> <p id="result-para"></p> </div> <!--ここまで--> </div>
inputのvalueの値をとってきて、その値でswitchさせてます。
OKボタン押したらコメントが出てくるようになっています。
switch文の完成形
See the Pen by Micche (@micche) on CodePen.
if文を使ったverもコメントアウト/*〜*/で書いてあるので、気になったらswitch文のところをコメントアウトして無効化してから、if文のコメントアウトを消去して、動作を確認してみてください。
if文とswitch文で、書き方は違いますが、やってることは同じです。
三項演算子
1行で書ける条件式。
trueorfalseのような単純な分岐であれば、1行で済むこちらの方がおすすめ。
式
( 条件式 ) ? trueのコード : falseのコード
使用例
1.条件：朝である
const morning = true; function greeting (){ (morning === true) ? console.log('朝です！カーテンを開けて朝日を浴びましょう') : console.log('朝ではありません。もう少し寝ていましょう'); } greeting(); //console.log=>朝です！カーテンを開けて朝日を浴びましょう
(morning === true)は(morning)でもOK。
const morning = true; function greeting (){ (morning) ? console.log('朝です！カーテンを開けて朝日を浴びましょう') : console.log('朝ではありません。もう少し寝ていましょう'); } //この書き方でもmorning===trueと同じ greeting(); //console.log=>朝です！カーテンを開けて朝日を浴びましょう
morning===trueとなるので、朝です！の方のコメントが表示される。
2.条件：朝である、にマッチしない時（falseの時）
function greeting (){ (morning !== true) ? console.log('朝です！カーテンを開けて朝日を浴びましょう') : console.log('朝ではありません。もう少し寝ていましょう'); //(morning !== true)は否定の形。 } greeting(); //console.log=>朝ではありません。もう少し寝ていましょう
!==は否定形なので、falseとなり、朝ではありません。のコメントが表示される。
まとめ
とりあえず今日はここまで。 また明日以降がんばります。
