.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptのifについて初歩から解説!if文の基本的な使い方から応用について紹介

JavaScriptのifについて初歩から解説!if文の基本的な使い方から応用について紹介

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
JavaScriptのifについて初歩から解説!if文の基本的な使い方から応用について紹介
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    システム
    エンジニア
    JavaScriptのif文について、基本的なことをもういちど教えてください。
    プロジェクト
    マネージャー
    JavaScriptのif文はプログラミングの基本中の基本と言えます。JavaScriptのif文について、基本的な使い方についてご紹介しましょう。

    JavaScriptのifとは?


    JavaScriptのif文はプログラミングの基本です。JavaScript以外のほとんどのプログラミング言語にもif文はあるので、if文を知ることがプログラミングの第一歩と言えるでしょう。

    if文には「条件分岐処理」という機能があります。具体的に言うと「もし条件がAならば、Bの処理をする」といった機能です。それをJavaScriptで書くと以下のようになります。

    簡単なif文の例

    以下はJavaScriptのif文のシンプルな例です。htmlファイルに記述してブラウザで開いてみて下さい。

    条件式で使う演算子

    上のJavaScriptサンプルを実行すると、「aは1です。」と言うポップアップウィンドウが出ます。変数aの中身が1だったので、ポップアップを出すalertが実行されたということです。このようにif文は()の中の条件式が成立する場合、{}の中の処理を実行します。

    今回の条件式には「a == b」を使いました。これはaとbが等しいという意味です。==は演算子と言いますが、他に以下のような演算子があります。

    a > b aはbより大きい
    a < b aはbより小さい
    a >= b aはb以上
    a <= b aはb以下
    a == b aとbは等しい
    a != b aとbは等しくない

    演算子を使わないif文

    JavaScriptのif文の条件式は以下のように演算子を使わない場合もあります。

    trueとfalseはBoolean型と言います。実行すると2回ポップアップがでます。演算子無しの場合条件式がtrueならば成立、!のみを付けた場合、条件式がfalseなら成立します。

    演算子の無い条件式の詳細

    演算子の無い条件式の変数の中身がtrueやfalseではない場合、数値なら1以上、文字列なら1文字以上で成立します。

    このサンプルを実行するとポップアップが2回出ます。上のサンプルでif文が成立しないケースは、aの値が以下のどれかの場合になります。

    var a = 0; // 0

    var a = 0/0; // 0除算などでNaNになる

    var a = ”; // 空の文字列

    var a = null; // 値無しのnull

    var a; // 値が代入されていない

    論理演算子について

    ここまで条件式は1つの変数についてのみ判断していましたが、論理演算子を使えば、以下のJavaScriptサンプルのように複数の変数について判断することも可能です。

    実行すると2回ポップアップが出ます。「a && b」は「aかつb」、「a || b」は「aまたはb」という意味になります。&&はAND(アンド)、||はOR(オア)と読みます。

    論理演算子の優先度について

    &&と||の優先度はどうなっているのでしょうか。以下のJavaScriptサンプルを見てください。

     

    実行すると2回ポップアップが出ます。1つ目のifは「aが0かつbが1、または、cが3」、2つ目のifは「aが1、または、bが0かつcが2」と判断されています。

    論理演算子の優先度を変えるには?

    つまり||より&&の方が優先度が上で、&&が後ろにあっても先に判定されるということです。左から順ではないということですね。しかしサンプルの2つ目のif文を本当は「aが1またはbが0で、かつ、cが2」としたかったとしたら、そうするにはどうすれば良いのでしょうか。

    その場合は以下のように「a || b」の方に()をつければ優先度を上げられます。これで「かつ、cが2」が成り立たないため、ポップアップが出なくなります。

    「そうでなければ」という意味のelse

    if文には「そうでなければ」という意味のelseというキーワードが使えます。以下が例です。

    実行すると「aは0ではありません。」と表示されます。elseはその前のif文の条件式が成り立たない場合に、elseの次の処理が実行されるということです。

    「そうでなければ、もし」という意味のelse if

    elseの他にelse ifというキーワードもあります。

    このJavaScriptサンプルを実行すると「aは0でも1でもありません。」と表示されます。else ifは「そうでなければ、もし」とif文を連ねるを続けることができるのです。

    else ifを使う場合と、ifを連ねた場合の違い

    else ifでif文を続けた場合と、普通にif文を続けた場合はどう変わるでしょうか。

    上のJavaScriptサンプルを実行すると、「aは0です。」「aは0です。」「bは1です。」と3回ポップアップが出ます。else ifだと最初のif文が実行されたら次のelse ifが成立する条件でも実行されず、ifをつなげた場合は両方とも実行されるということです。

    そんなの当り前じゃないかと思うでしょうが、実際にプログラミングしていると使い分けを間違えることもあるのです。気を付けましょう。

    ==と===の違い

    JavaScript以外のプログラム言語を知っている人は、ここまで読んで他と同じだと思うでしょう。ところがJavaScriptには===という他ではあまり無い演算子があります。使い方は以下の通りです。

    実行すると「aとbは同じです。」だけ表示されます。JavaScriptは数値型変数と文字列型変数を比較しても数が同じなら等しいと判定するのですが、型が違う場合は違うと判定したい場合は、===を使用します。サンプルのbを0にすれば===の方も成立するということです。

    !==も使える

    演算子の!=に対応する!==もあります。以下がサンプルです。

    実行すると「aとbは型も含めて違います。」だけが出ます。数が同じ0でも、数値型と文字列型の違いがあるので!==が成立するということです。

    システム
    エンジニア
    if文はプログラミングの基本なので、もういちどしっかりと復習します。
    プロジェクト
    マネージャー
    そうですね。基本をしっかりと理解して、プログラミングに活かしてください。

    if文はJavaScriptプログラミングの基本

    JavaScriptのif文を解説しましたが、ご理解頂けましたでしょうか。JavaScriptに限らずif文はプログラミングの基本なので、必ずマスターしましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    JavaScript新着案件New Job