条件分岐で処理を切り替えよう

条件分岐を使うと、値や状態に応じて実行する処理を変えられます。今回は、判定結果を画面へ表示します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

ifで条件を判定する

const score = 80;

if (score >= 70) {
  console.log('合格です');
}

丸括弧内の条件がtrueの場合だけ、波括弧内の処理が実行されます。

elseで成立しない場合を扱う

const score = 60;

if (score >= 70) {
  console.log('合格です');
} else {
  console.log('もう一度確認しましょう');
}

elseは、ifの条件がfalseだった場合に実行されます。

else ifで条件を増やす

const score = 85;

if (score >= 90) {
  console.log('とてもよくできました');
} else if (score >= 70) {
  console.log('合格です');
} else {
  console.log('もう一度確認しましょう');
}

上から順番に判定され、最初に成立した処理だけが実行されます。

条件に応じてHTMLを変更する

index.htmlへ表示先を用意します。

<p id="result"></p>

script.jsで判定結果を表示します。

const score = 85;
const result = document.querySelector('#result');

if (score >= 70) {
  result.textContent = '合格です';
  result.classList.add('success');
} else {
  result.textContent = 'もう一度確認しましょう';
  result.classList.add('warning');
}

HTML/CSSで作った.successと.warningをJavaScriptから追加すれば、文章と見た目を一緒に切り替えられます。

まとめ

ifは条件が成立した場合、elseは成立しなかった場合、else ifは追加条件の処理を担当します。

次の記事では、繰り返し使う判定や表示処理を関数へまとめます。