Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Learning JS in 30 Days - Day 4

2025年09月24日に「Dev.to」が公開したITニュース「Learning JS in 30 Days - Day 4」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

JavaScript学習のDay4は、プログラムが状況に応じて異なる処理をするための「条件分岐」を学ぶ。if/else文やswitch文を使って判断ロジックを実装し、Truthy/Falsy値、三項演算子、論理演算子の活用法とベストプラクティスを習得する。

出典: Learning JS in 30 Days - Day 4 | Dev.to公開日:

ITニュース解説

システムエンジニアを目指す初心者がプログラミングを学ぶ上で、プログラムの振る舞いを状況に応じて変える「条件分岐」と「論理制御」は非常に重要な概念だ。JavaScriptの学習4日目では、これらの基本を構成する「if/else文」と「switch文」を中心に、プログラムがどのようにして異なる状況に対応するのかを学ぶ。

まず、条件分岐の最も基本的な形である「if/else文」について解説する。プログラムは通常、上から順に処理を実行していくが、特定の条件が満たされた場合にのみ、異なる処理を実行させたいことがある。例えば、ユーザーの年齢が18歳以上の場合に「あなたは成人です!」と表示したい場合、「if (age >= 18)」のように条件式を記述する。この条件が真(true)であれば、波括弧{}内のコードが実行される。もし、条件が真の場合と偽(false)の場合でそれぞれ異なる処理を行いたい場合は「if/else文」を使う。例えば、温度が30度より高ければ「とても暑い!」と表示し、そうでなければ「過ごしやすい天気です!」と表示するといった具合だ。さらに、複数の条件を順番にチェックしたい場合は「if/else if/else文」を利用する。例えば、試験の点数に応じて「Excellent!」「Good!」「Average!」「Pass!」「Fail!」といった異なる評価を表示するような場合がこれに該当する。条件は上から順に評価され、最初に真となった条件に対応するコードブロックが実行される仕組みだ。

次に、条件式で使われる「Truthy(真とみなされる値)」と「Falsy(偽とみなされる値)」というJavaScript特有の概念を理解することは非常に重要だ。プログラミングにおいて条件式は真か偽かを判断するが、JavaScriptでは明確なtruefalseだけでなく、他の様々な値も真偽値として扱われる。Falsyな値としては、falseそのもの、数値の0、負の0、大きな整数の0n、空の文字列""nullundefined、そして「数値ではない」ことを示すNaNがある。これらの値は、条件式の中で評価されるとfalseとみなされる。これら以外の値、例えばtrue1-1、何らかの文字列(空でない)、空の配列[]、空のオブジェクト{}、関数などはすべてTruthyな値とみなされ、条件式の中でtrueとして評価される。この特性を理解することで、より柔軟な条件判断が可能となる。

条件判断を記述する上でのベストプラクティスも存在する。特に重要なのは、値の比較には「厳密な等価演算子===」を使用することを推奨する点だ。これは値と型の両方が一致する場合にのみtrueを返す。一方、「緩やかな等価演算子==」は、型の異なる値も型変換を行ってから比較するため、予期せぬ結果を引き起こす可能性があるため、特別な理由がない限り避けるべきだ。他にも、配列に要素があるかをチェックするにはfruits.length > 0のように配列の長さを使う方法や、オブジェクトに特定のプロパティが存在するかを確認するために論理AND演算子&&を利用する方法がある。さらに、オブジェクトの深い階層にあるプロパティに安全にアクセスするためには「オプショナルチェイニング?.」が役立つ。これは、途中のプロパティが存在しない場合でもエラーにならず、undefinedを返すため、プログラムの堅牢性を高めることができる。

複数の選択肢から一つを選んで処理を実行する場合、「switch文」が非常に便利だ。これは、一つの変数の値が複数の固定値のどれと一致するかを判断するのに適している。例えば、曜日の数値に応じて「Monday」「Tuesday」といった曜日名を設定するような場合に利用できる。switch (day)のように変数dayの値を指定し、case 1: case 2: のように特定の値を記述して、その値に一致した場合の処理を波括弧内に書く。各caseブロックの最後にはbreak;を記述することを忘れてはならない。break;がないと、一致したcase以降のcaseブロックの処理も実行されてしまう(フォールスルーと呼ばれる現象)。もし、どのcaseにも一致しなかった場合はdefault:ブロックの処理が実行される。また、複数のcaseが同じ処理を共有する場合、case 12: case 1: case 2: season = "Winter"; break;のように、break;を記述せずに複数のcaseを続けて書くことで、簡潔に同じ処理を適用できる。if/else if/else文switch文の使い分けとしては、特定の範囲(例:90点以上)を条件とする場合はif/else if/else文が適しており、厳密な値(例:「pending」という文字列)に基づいて処理を分岐させる場合はswitch文がコードの可読性を高めるため推奨される。

プログラムが複雑になると、「ネストされた条件文」、つまりif文の中にさらにif文を書くような構造が必要になることがある。例えば、運転の可否を判断する際に、まず年齢が18歳以上であるか、次に運転免許を持っているか、さらに保険に加入しているか、といった複数の条件を段階的にチェックする場合だ。しかし、このようなネストが深くなりすぎると、コードの可読性が低下し、論理が複雑になりがちだ。このような場合は、論理演算子である&&(AND)や||(OR)を使うことで、条件式を簡潔にまとめることができる。例えば、「年齢が18歳以上で、かつ免許を持ち、かつ保険にも加入している」という条件は、if (age >= 18 && hasLicense && hasInsurance)のように一行で表現でき、ネストを減らしてコードを分かりやすくする効果がある。

さらに高度な条件判断のテクニックとして、「三項演算子」がある。これは条件 ? 真の場合の式 : 偽の場合の式という形式で、if/else文を一行で簡潔に記述する際に役立つ。例えば、年齢が18歳以上なら「Adult」、そうでなければ「Minor」といった単純な分岐に使うとコードがすっきりする。複数の条件をネストした三項演算子も可能だが、複雑すぎると可読性が落ちるため注意が必要だ。また、論理演算子には「短絡評価(ショートサーキット)」という特性がある。&&演算子の場合、左側の式がfalseなら右側の式は評価されずにfalseを返すため、user.isAdmin && console.log("Admin operation");のように、左の条件が真の場合にのみ右の処理を実行するといった使い方ができる。||演算子の場合、左側の式がtrueなら右側の式は評価されずにtrueを返すため、userName || "Anonymous User"のように、userNameがFalsy(空文字列など)であれば右側の「Anonymous User」をデフォルト値として使う、といった応用が可能だ。ES2020で導入された「null合体演算子??」は、||と似ているが、左側の値がnullまたはundefinedの場合にのみ右側の値を返すため、より厳密にデフォルト値を設定できる。特定の状況に応じて異なる処理を返す「条件関数」を作成することも、複雑なビジネスロジックを整理し、コードをモジュール化する上で非常に有効な手段となる。例えば、ユーザーオブジェクトの様々な状態(存在しない、非アクティブ、ブロックされている、プレミアムユーザー、通常ユーザー)に応じて、そのユーザーのステータスを返す関数を定義することで、関数の呼び出し元で条件判断のロジックを簡略化できる。

これらの条件分岐と論理制御の概念を習得することは、どんなシステムエンジニアにとっても不可欠だ。特に、JavaScriptのTruthy/Falsyの特性を理解し、厳密な等価演算子===を積極的に使うこと、深いネストを避け論理演算子で条件を簡潔にすること、そしてif/elseswitchを状況に応じて適切に使い分けることが、読みやすく保守しやすいコードを書くための重要な学習ポイントだ。明日からは、プログラムで繰り返し処理を行う「ループ文」についてさらに詳しく学んでいく。

関連コンテンツ

関連IT用語