JavaScriptの条件分岐を学ぶ【初級編③】

はじめに

今回は、JavaScriptの条件分岐について学んでいきます。条件分岐は、Webデザインのインタラクティブな要素を作る際に重要な役割を担います。例えば、特定の画面サイズで異なるレイアウトを表示したり、ユーザーのアクションに応じた処理を実行したりします。

WebデザイナーがJavaScriptの条件分岐を使うことで、以下のようなインタラクティブな機能やデザインの工夫が可能になります。

条件分岐の基本

if文

if (条件) {
  // 条件がtrueのときに実行される処理
}

// 具体例
let age = 20;
if (age >= 18) {
  console.log("成人です");
}

• JavaScriptの基本文法【入門編②】でも書いた通り、条件がtrueのときにのみ実行されるブロックを定義します。

if～else文

if (条件) {
  // 条件がtrueのときに実行される処理
} else {
  // 条件がfalseのときに実行される処理
}

// 具体例
let age = 16;
if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

• ifの条件がfalseの場合、elseブロックが実行されます。

else if文

if (条件1) {
  // 条件1がtrueのときに実行される処理
} else if (条件2) {
  // 条件2がtrueのときに実行される処理
} else {
  // 全ての条件がfalseのときに実行される処理
}

// 具体例
let score = 75;
if (score >= 90) {
  console.log("Aランク");
} else if (score >= 70) {
  console.log("Bランク");
} else {
  console.log("Cランク");
}

• 複数の条件をチェックする場合、else ifを使います。

三項演算子（条件演算子）

条件 ? 真の処理 : 偽の処理;

// 具体例
let age = 20;
let message = (age >= 18) ? "成人です" : "未成年です";
console.log(message);

• 簡単な条件分岐には、三項演算子を使うこともできます。

switch文

switch (値) {
  case 値1:
    // 値1の場合の処理
    break;
  case 値2:
    // 値2の場合の処理
    break;
  default:
    // どれにも当てはまらない場合の処理
}

// 具体例
let day = 3;
switch (day) {
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  case 3:
    console.log("水曜日");
    break;
  default:
    console.log("その他の日");
}

• 複数の値に基づいて処理を分岐する場合に便利です。

Webデザイナーが条件分岐を学んで何ができるか？

WebデザイナーがJavaScriptを使って、何ができるかを下記にまとめました。これらを参考に、できることの幅を広げていきます。

①レスポンシブデザインの制御

条件分岐を使って、画面サイズに応じたレイアウトを切り替えることができます。メディアクエリと組み合わせて、JavaScriptで柔軟なデザイン変更を行うことが可能です。

②ユーザーのアクションに応じた動的なUI変更

ユーザーが特定のボタンをクリックしたり、特定のフォームに入力した場合に条件分岐を使って表示内容やデザインを動的に変更できます。

③特定のブラウザやデバイスに対応したカスタムデザイン

ブラウザやデバイスによって表示や機能が異なる場合に、JavaScriptの条件分岐で特定のスタイルやスクリプトを適用できます。

④フォームのバリデーション

ユーザーがフォームに入力した内容に応じてエラーメッセージを表示したり、送信を制御することができます。

まとめ

今回は、JavaScriptの条件分岐についてまとめました。次回は、これらを参考にお問い合わせフォームを作っていきます！