できる気になっているJSを改めてチュートリアルからやってみる 7日目

～～ 条件分岐 ～～

最近ちょっとずつまた学びなおす必要が出てきたなぁと思い、いろいろプログラムを勉強しなおしているところなんですが、実はもう今使っている知識は古いのかもと思って、アップデートしようとおもいやってみる会。

実施するのは、この記事

MDN - Javascript

完全な初心者向けと書かれたチュートリアルは全然初心者向けではないって話。アップデートしていきましょう。

JavaScriptの第一歩が終わり、次のステップに行きます。
JavaScript の構成要素がスタートします

コードでの意思決定

if(条件式){

} else {
   
}

細かい話だけどelseは閉じかっこと同じところに書くのが主流っぽい。

天気のフォーマット

<label for="weather">今日の天気を選択してください: </label>
<select id="weather">
 <option value="">--選択してください--</option>
 <option value="sunny">晴れ</option>
 <option value="rainy">雨</option>
 <option value="snowing">雪</option>
 <option value="overcast">曇り</option>
</select>

<p></p>

というHTMLがあって、

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
 const choice = select.value;

 if (choice === 'sunny') {
   para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
 } else if (choice === 'rainy') {
   para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。';
 } else if (choice === 'snowing') {
   para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
 } else if (choice === 'overcast') {
   para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
 } else {
   para.textContent = '';
 }
}

とかくと、いい感じでいけそう。
document.querySelectorなどで取ってくるDOMオブジェクトは const のほうがよいか。

真偽値の話

true / false を判定する場合には少しの配慮が必要です。

trueは、

- false
- undefined
- null
- 0
- NaN
- 空文字列（"",''）

以外はすべてTrueになります。（逆にいえば、これ以外はfalse）

だとすると上記を返してくるメソッドや関数は、条件式に直接入れても正しく判断できる？

let shoppingDone = false;

if (shoppingDone) { // '=== true' を明示的に指定する必要はありません
 let childsAllowance = 10;
} else {
 let childsAllowance = 5;
}

こんな感じで変数に入れるパターンとかね。

Switchステートメント

switch ( 式 ) {
 case 選択肢1:
   このコードを実行する
   break;

 case 選択肢2:
   代わりにこのコードを実行する
   break;
   
 // 以下に選択肢を好きなだけ並べる

 default:
   既定でこのコードを実行する
}

この書き方いつも忘れるので、ちょっとメモさせてください。defaultは省略可能。

三項演算子

( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する

これ、条件式かっこでくくれるのか。しらなかった。

以上