目次


JavaScript 言語入門, 第 5 回

条件文

Comments

コンテンツシリーズ

このコンテンツは全7シリーズのパート#です: JavaScript 言語入門, 第 5 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:JavaScript 言語入門, 第 5 回

このシリーズの続きに乞うご期待。

Interactive code: When you see Run at the top of a code sample, you can run the code, check the results, make changes, and run it again.

編集者による注記: このシリーズは、対話式コーディング機能を追加して更新されています。コード・リストに「実行」ボタンがある場合、そのコードを実行して結果を確認し、コードを変更してから再度実行して、その成果を確認できることを意味します。

条件文は、スクリプトやプログラミング言語であらゆるタイプのロジックを作成する上での骨格となります。それは、JavaScript 言語の場合も例外ではありません。条件文は、作成された条件に基づいて実行するアクションを判断します。JavaScript 言語で条件文を作成するには、以下の 4 つの方法があります。

  • if: 特定の条件が true であれば、スクリプトを実行します。
  • if...else: 特定の条件が true であれば、ある特定のスクリプトを実行し、false であれば別のスクリプトを実行します。
  • if...else if...else: 複数の条件のうちの 1 つが true であれば、その条件に応じたスクリプトを実行し、すべての条件が false であれば、また別のスクリプトを実行します。
  • switch: 複数のスクリプトのうちの 1 つを実行します。

条件文 1: if

ある特定の条件が true の場合にだけスクリプトを実行するには、if 文を使用します。以下に一例を記載します。このスクリプトが実行される条件は、num の値が 5 と等しいことです。10 が 5 と等しいとすれば、「10 is equal to 5」という結果が出力されますが、10 と 5 は等しくありません。したがって、この条件は true ではないため、このスクリプトは実行されません。

挑戦!

挑戦アイコンまず、「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確かめます。次に、変数を 5 に変更して条件が true になるようにしてから「実行」をクリックし、結果を確認してください。

Show result

条件文 2: if...else

条件が true であれば一方のスクリプトを実行し、false であればもう一方のスクリプトを実行する場合には、if...else 文を使用します。以下に記載している例では、最初の if 文で、num が 5 であることを条件としています。この条件が true でなければ、2 番目の else 文が実行されます。

挑戦!

挑戦アイコンこの if...else 文を試してください。まず、「実行」をクリックして、このコードの実行結果を確かめます。次に、変数を変更してから、もう一度「実行」をクリックして、その結果を確認してください。使用する数値によって、if 文または else 文のどちらかが実行されるはずです。

Show result

条件文 3 if...else if...else

複数の条件のうちの 1 つが true であれば、その条件に応じたスクリプトを実行し、すべての条件が false であれば、また別のスクリプトを実行する場合は、if...else if...else を使用します。以下のリストに、x の値が正の数値であるか、負の数値であるか、またはゼロであるかを判断する条件文の例を記載します。

挑戦!

挑戦アイコンまず、「実行」をクリックして、このままの状態の条件文を実行した場合の結果を確認します。次に、コードに手を加えて、その変更がどのように反映されるかを確認してください。

Show result

学んだ知識をテストしてください

挑戦アイコン以上の説明のまとめとして、if...else if...else 文について学んだ知識をテストしてください。今回は、2 つの数値を比較する場合の条件文の変数およびロジックを自分で選択します。スクリプトを完成させたら、「実行」をクリックして、その結果を確認してください。

Show result

条件文 4: switch

Switch 文は、変数の値が別の変数より大きいか、小さいかを判断するためには使用できないという点で、if 文とは異なります。以下に、switch 文を使って実行対象のスクリプトを判断するのが適切な例を示しています。

以下のリストでは、case 節、break 文、default 節が使用されていることにお気づきかと思います。switch 文には、これらの節と文が欠かせません。それぞれが果たす役割は以下のとおりです。

  • case 節は、switch の値が case 節で使用されているデータの値と等しいかどうかを判断します。
  • break 文は、switch 文の実行を打ち切って、残りの文が実行されないようにします。
  • default 節には、case 文のいずれも実行されない場合、または実行された case 文に break 文がない場合にデフォルトで実行するスクリプトが記述されます。

挑戦!

挑戦アイコン以下のスクリプトのうち、実行されるのはどのスクリプトだと思いますか?「実行」をクリックして、自分の答えが正しいかどうかを確かめてください。次に、コードに手を加えて、どのようにすると default 節または別の case が実行されるのかを調べてください。

Show result

次に記載する例は、実行された case 文に break 文が使用されていなければ、複数の case 文と default 文を実行できることを示しています。この例では、break を排除することで、実質的に複数のコード行を実行することになります。

このスクリプトを実行すると、「num is equal to 10」に続いて「num is: 10」が出力されます。この動作は、switch 文のフォールスルーと呼ばれることもあります。

挑戦!

挑戦アイコン「実行」をクリックして、break 文を使用しないとどのような結果になるのかを確かめてください。その後、コードにいろいろと手を加えて switch 文の仕組みを詳しく調べてください。

Show result

まとめと次のステップ

このチュートリアルでは、JavaScript での条件文を紹介し、条件文を作成する 4 つの方法を説明しました。条件文は、あらゆるスクリプトまたはプログラミング言語でのすべてのロジックの骨格ですが、関数を使用しなければ、複雑に込み入ったコードになってしまいます。そこで、次回は関数について学びます。関数をトピックにした次回のチュートリアルで、このとりわけよく使われているプログラミング言語の学習を続けてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=1049331
ArticleTitle=JavaScript 言語入門, 第 5 回: 条件文
publish-date=09072017