【JavaScript】if文とOR演算子を初心者向けにわかりやすく解説
はじめに
JavaScriptを使ううえで欠かせないのが、さまざまな条件に応じてプログラムの処理を変化させる条件分岐です。
その代表的な例として挙げられるのが、if文と OR演算子 ( || )の組み合わせになります。
条件分岐がしっかりと理解できると、ユーザーが入力した情報やAPIのレスポンスなどに応じて、動作を柔軟に切り替えられるようになります。
実務の場でも幅広く使われる技術なので、最初のうちに正しく習得しておくと、今後の開発が格段にスムーズになるでしょう。
また、javascript if orというキーワードで調べられるように、if文とOR演算子の組み合わせは初心者が混乱しやすいテーマです。
本記事では、実際のコード例やよくある利用シーンに触れながら、丁寧に解説していきます。
この記事を読むとわかること
- JavaScriptのif文の基本構造と使い方
- OR演算子 (
||)の概念と動作の仕組み - if文とOR演算子を組み合わせるメリット
- 実務で役立つ具体的なコード例
- よくある初学者の疑問点やエラーを防ぐポイント
ここまでを押さえておくと、シンプルなWebサイトやちょっとした業務ツールでも、柔軟に条件分岐を行うことができるようになります。
ぜひじっくりと読み進めて、日々の学習や開発に役立ててみてください。
JavaScriptにおける条件分岐の基本
JavaScriptでの条件分岐は、コードの流れを変えるために使われます。
ブラウザ上でもサーバーサイドでも動作するため、さまざまな場面で活用可能です。
if文とは
if文は、指定した条件が真（true）であれば特定の処理を行う仕組みです。
この条件判定には、比較演算子（< や === など）や論理演算子（&&、|| など）を組み合わせて使います。
シンプルな構文は次のとおりです。
if (条件式) { // 条件がtrueのとき実行したい処理 }
例えば、ユーザーが入力した数値が10より大きい場合だけメッセージを出すケースを考えてみましょう。
次のように記述すると、10より大きいときのみ console.log("10より大きい数値です") が実行されます。
const inputNumber = 12; if (inputNumber > 10) { console.log("10より大きい数値です"); }
このif文の仕組みを理解することが、条件分岐全体の大きな第一歩です。
今後、OR演算子を組み合わせるときも、この基本形から出発することになります。
else if文とelse文の使い分け
if文は、条件式が増えるほどコードが複雑になりがちです。
そこで使い分けたいのがelse if文とelse文です。
- else if文: 「別の条件」を次々と追加できる
- else文: 「いずれの条件にも当てはまらない場合」に実行される
具体的な例として、ユーザーが入力した数値によってメッセージを変更するケースを考えます。
数値が10より大きいのか、10と等しいのか、それともそれ以下なのかを判定したい場合、次のように書けます。
const num = 10; if (num > 10) { console.log("10より大きいです"); } else if (num === 10) { console.log("10と等しいです"); } else { console.log("10より小さいです"); }
このように条件分岐を段階的にチェックすることで、複数の状態に応じて処理を切り替えられます。
if文と合わせて理解しておくと、あとでOR演算子を絡めたときにもスムーズに組み合わせられるでしょう。
JavaScriptのOR演算子( || )
OR演算子 ( || )は、論理演算子の一種です。
ふたつ以上の条件のうち、いずれかが真（true）であれば全体がtrueと評価されるため、条件の幅を広げたいときに役立ちます。
OR演算子の意味と特性
OR演算子( || )は、論理和を表す演算子です。
具体的には、次のようなルールで値を評価します。
true || true // => true true || false // => true false || true // => true false || false // => false
簡単に言うと、ふたつの条件のうち少なくともひとつがtrueであれば、結果はtrueとなります。
逆に両方ともfalseである場合だけ、結果がfalseになります。
例えば、ユーザーが入力した文字列が「apple」もしくは「orange」のどちらかだった場合にメッセージを出したいときには、次のように書くことが多いです。
const fruit = "apple"; if (fruit === "apple" || fruit === "orange") { console.log("りんごかオレンジが入力されました"); }
このようにOR演算子を使うと、複数の条件をまとめてチェックできるので、コードがスッキリと書きやすくなるのです。
ショートサーキット評価
OR演算子には、ショートサーキット評価という特性があります。
これは、左側のオペランドがtrueだった場合、それ以降の評価を行わずに結果をtrueと判断する仕組みです。
例えば、以下のようなコードで考えてみます。
function checkFirst() { console.log("checkFirstが呼ばれました"); return true; } function checkSecond() { console.log("checkSecondが呼ばれました"); return true; } if (checkFirst() || checkSecond()) { console.log("どちらかがtrueなので処理を実行します"); }
ここでは、checkFirst() がtrueを返した時点で checkSecond() は呼ばれません。
つまり、条件式の左側がtrueならば、右側の処理をスキップするのです。
この性質を利用して、不要な関数呼び出しを省略したり、デフォルト値の割り当てに使ったりすることも可能です。
たとえば「値が設定されていればそちらを使い、なければ別の値を使う」というロジックを、OR演算子によって簡潔に書くことができます。
if文とOR演算子を組み合わせるメリット
JavaScriptでif文とOR演算子をうまく組み合わせると、コードの可読性や保守性が向上します。
実務でもしばしば用いられる書き方なので、慣れておくと便利です。
簡潔かつ読みやすいコード
条件分岐を実装するとき、複数の条件をチェックしなければならない場面は多いでしょう。
そんなときに、if文のなかでOR演算子を使うことで「または」のパターンをまとめて判定できます。
例えば、下記のように書くことが可能です。
if ( userRole === "admin" || userRole === "editor" || userRole === "viewer" ) { console.log("このユーザーにはアクセス権があります"); }
これをif文を連続で書いたり、else ifの入れ子を増やしたりすると、冗長になってしまいがちです。
OR演算子を使うことで論理を一本化できるので、パッと見たときにも「どの条件でtrueになるのか」がすぐにわかります。
条件分岐の柔軟性
JavaScriptでは、if文を使っていても、条件式自体を変数や関数の結果に置き換えられます。
そこにOR演算子を入れることで、より複雑な条件を簡単に表現できるのもメリットです。
例えば、以下のようなケースを考えます。
function isLoggedIn() { // ユーザーがログインしていればtrueを返す // していなければfalseを返す return true; } function hasGuestAccess() { // ゲストアクセス可能であればtrue // 不可ならfalse return false; } if (isLoggedIn() || hasGuestAccess()) { console.log("サイトにアクセス可能です"); }
ここで isLoggedIn() がtrueを返せばすぐに条件分岐がtrueとなり、ゲストアクセスをチェックする必要がなくなります。
反対にログインしていなかった場合は、ゲストアクセス可否の結果がチェックされるわけです。
このように「どちらか片方でも通ればいい」という条件をif文に直感的に書けるのが、OR演算子の強みと言えます。
よくある実務での活用例
ここでは、実務や学習でよく目にするOR演算子の使い方を、具体的なパターンに分けて紹介します。
実際に開発プロジェクトで書かれる場面をイメージしながら、コード例を眺めてみてください。
ユーザー入力が空の場合の処理
Webフォームなどで入力が空だったときに、デフォルトのメッセージやエラーを表示したい場合があります。
そんなときにOR演算子を使うと、次のように簡潔に書けます。
const username = ""; // 実際にはユーザーが入力した値とする // usernameが空なら代わりに "ゲスト" を使う const displayName = username || "ゲスト"; console.log(displayName); // => "ゲスト"
ここでは、username が空の文字列の場合、その評価はfalse相当となるため、OR演算子の右側である "ゲスト" が代わりに返ります。
これにより、条件分岐を明示的に書かなくても、簡単にデフォルト値が割り当てられるのです。
設定値のデフォルト割り当て
アプリケーションの設定オブジェクトなどで、ユーザーがカスタマイズした値がなければデフォルトを使いたいケースも多いでしょう。
たとえば、次のようなコードが書けます。
const config = { theme: "", pageSize: 10 }; const theme = config.theme || "light"; const pageSize = config.pageSize || 20; console.log(theme); // => "light" console.log(pageSize); // => 10
ここではthemeが空文字列であるため、OR演算子を介して "light" が適用されます。
一方、pageSize は 10 という数値が設定されているので、そのまま採用されるのがポイントです。
フロントエンドでのバリデーション
フロントエンドでは、入力内容が想定された形式かどうかをチェックすることがよくあります。
メールアドレスか電話番号か、どちらかであればOKというような場合には、OR演算子を活用できます。
function isEmail(input) { // 簡易的な判定とする return input.includes("@"); } function isPhoneNumber(input) { // 数字だけで10桁以上なら電話番号と見なす return /^\d{10,}$/.test(input); } const userInput = "example@email.com"; if (isEmail(userInput) || isPhoneNumber(userInput)) { console.log("入力内容に問題はありません"); } else { console.log("メールアドレスか電話番号を入力してください"); }
この例のように「どちらかがtrueならOK」といったパターンは、OR演算子で実装が単純化できます。
複数の入力チェックを組み合わせる際に覚えておくと便利です。
具体的なコード例
ここからは、if文とOR演算子を絡めたやや実践的なコード例を紹介していきます。
それぞれの例では、実務でありがちなシチュエーションを想定しています。
フォームバリデーションを実装する
Webアプリケーションでフォームバリデーションを行う場合、「必須項目が空のときはエラー」「または、形式が正しくないときはエラー」といった処理が入ります。
下記では、メールアドレスの必須チェックと簡易的な形式チェックをOR演算子でまとめた例を見てみましょう。
function validateEmail(email) { // 仮の形式チェック: 「@」を含むかどうか if (!email || !email.includes("@")) { return false; } return true; } function handleFormSubmit() { const emailInput = document.getElementById("email").value; if (!validateEmail(emailInput)) { console.log("メールアドレスが未入力、または形式が不正です"); return; } console.log("フォームの送信を続行します"); } // フォームの送信ボタン押下時などに handleFormSubmit() を呼び出す
ここでは「未入力」の判定と「形式が不正」という判定がOR演算子で繋がっているイメージです。
ただし実装の仕方によっては if (email === "" || !email.includes("@")) といったように直接OR演算子を使う手もあるので、使いやすい形に合わせて応用できます。
OR演算子を使ったもう少し短い書き方
上記のように関数にまとめるのもひとつのやり方ですが、条件が少なければif文の中に直接OR演算子で書いてもいいでしょう。
const email = document.getElementById("email").value; if (email === "" || !email.includes("@")) { console.log("メールアドレスが未入力、または形式が不正です"); return; } console.log("メールアドレスが正しいのでフォーム送信を続行します");
このようにOR演算子を直接使えば、コードの読みやすさと実装コストを両立できます。
シンプルなバリデーションはこれだけでも十分に書くことが可能です。
APIレスポンスの判定処理
サーバーからのレスポンスデータを扱うとき、「レスポンスがnullの場合」や「期待したプロパティが見つからない場合」に備えたいことがよくあります。
OR演算子を使うと、そういった状況でも比較的スッキリとしたコードにできます。
function fetchUserData(userId) { // 実際にはfetchやaxiosなどでデータ取得すると仮定 const mockApiResponse = { userId: userId, name: "John Doe", email: "" }; return mockApiResponse; } function handleUserData(userId) { const data = fetchUserData(userId); // dataがnullか、data.nameが空の場合は代替テキストを使用 const userName = (data && data.name) || "匿名ユーザー"; console.log("ユーザー名:", userName); } handleUserData(101);
この例では data && data.name が評価されます。
もし data がnullやundefinedであれば data.nameを取得しようとするとエラーになるため、まずdataをチェックし、真なら data.name を参照しています。
さらに、data.name が空文字であればfalse相当となるため、OR演算子でつないだ "匿名ユーザー" が返されるわけです。
こうした書き方はReactなどのフロントエンドフレームワークでもよく使われるパターンなので、ぜひ覚えておきましょう。
OR演算子によるデフォルト値の設定方法は、簡便である一方、0やfalseといった値を排除してしまうケースに注意が必要です。
場合によってはnull合体演算子( ?? )の利用を検討することもあります。
まとめ
ここまで、javascript if or というテーマを軸に、JavaScriptにおけるif文と OR演算子 ( || )の基本から実務レベルの活用シーンまでを広く解説してきました。
初心者の皆さんでも、実際にコードを書いて動きを確かめながら理解していけば、自然と使いこなせるようになるはずです。
条件分岐はアプリの挙動をきめ細かくコントロールするための重要な仕組みです。
複数の条件式をOR演算子でまとめることでコードの可読性を高めたり、デフォルト値を割り当てたりといった便利な書き方も覚えておくと、実務での開発がスムーズになるでしょう。
もし途中で躓くようなことがあれば、一度実際に小さなコードを書いてコンソールで動作を確認してみるのがおすすめです。
手を動かすことで、if文やOR演算子の評価がどのように行われているか、より直感的に理解できるようになります。
余裕が出てきたら、他の論理演算子（&& や !）との組み合わせや、条件式自体を関数化する手法などにも挑戦してみてください。
そうすることで、さらに高度なロジックも読みやすく整理できるようになります。
最後までお読みいただきありがとうございました。
ぜひ本記事を参考にしながら、いろいろな条件分岐のパターンに触れ、オリジナルのコードを書いてみてください。