第 4 回 JavaScriptの基本機能 条件分岐が書ける if 文 その1
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
確認ダイアログボックスを使って条件に応じた処理を書く
第 2 回 では、アラートダイアログを表示してみましたが、今度は確認ダイアログボックスを表示させてみましょう。
確認ダイアログボックスを使うと、「OK」「キャンセル」のボタンを表示させることができるので、押されたボタンに応じて処理を変更できます。
ダイアログは保存時の意思確認などに使えますし、条件分岐は JavaScript カスタマイズのあらゆるシーンで必要になってきます。
可能な方は以下のリンク先で、実際にご自身で入力しながら試してみてください。
https://jsfiddle.net/nvyrx5ht/1/
記述ミスなどでうまく動作しないときのために、下の方にサンプルの実行環境も用意していますので必要に応じて利用してください。
確認ダイアログを表示する
確認ダイアログボックスは confirm('メッセージ')
で表示させることができます。
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/nj5x86ok/2/
どちらのボタンを押したかを取得する
さらに、confirm
関数は OK を押したかキャンセルを押したかの結果を返してくれます。
結果を次のように受け取ることができます。
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/7mad35rz/4/
コンソールには、「はい」を押すと true
が、「キャンセル」を押すと false
が表示されますので、試してください。
入力内容に応じて動作を変更する
前述のように true
か false
のどちらかが返ってくるしくみなので「はい」「キャンセル」どちらを押したかに応じてその後の動作を変えてみましょう。
まず、「はい」が押された場合、「はいが押されました」とコンソールに結果を出してみます。
条件分岐の「if」
条件分岐は if 文というものを使います。
「条件が合致した場合(真)は A の処理、条件が合致しない場合(偽)は B の処理」ということが表現できます。
書き方は違いますが、Excel の IF 関数のようなことができるイメージです。
if 文の書き方
|
|
ちなみに false
の場合の処理が不要なら、else
は省略可能です。
はい・キャンセルをそれぞれ押して動作を試してみてください。
|
|
サンプルの実行環境
実行環境 https://jsfiddle.net/kintone/9pmwqak3/4/
サンプルでは、「はい」を押すと条件式の result
変数が true
になるので、「はいが押されました」とコンソールに表示がされた、ということになります。
条件式について
扱える条件式はさまざまです。
上記サンプルのように直接 true
または false
のどちらかがはいるのが最も単純なパターンですが、次のように不等式を使うこともできます。
|
|
上記のように扱える条件式はいくつかあり、不等式のような記号のことを「演算子」といいます。
次のサイトにどのような演算子をつかって比較ができるかがまとめられています。
次回は、実際にもう少し複雑な条件式を書いていきます。