第 4 回 JavaScriptの基本機能 条件分岐が書ける if 文 その1

著者名:村濱一樹(kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

確認ダイアログボックスを使って条件に応じた処理を書く

第 2 回 では、アラートダイアログを表示してみましたが、今度は確認ダイアログボックスを表示させてみましょう。
確認ダイアログボックスを使うと、「OK」「キャンセル」のボタンを表示させることができるので、押されたボタンに応じて処理を変更できます。
ダイアログは保存時の意思確認などに使えますし、条件分岐は JavaScript カスタマイズのあらゆるシーンで必要になってきます。

可能な方は以下のリンク先で、実際にご自身で入力しながら試してみてください。
https://jsfiddle.net/nvyrx5ht/1/ (External link)

記述ミスなどでうまく動作しないときのために、下の方にサンプルの実行環境も用意していますので必要に応じて利用してください。

確認ダイアログを表示する

確認ダイアログボックスは confirm('メッセージ') で表示させることができます。

1
confirm('確認ダイアログが表示されます');
サンプルの実行環境

https://jsfiddle.net/kintone/nj5x86ok/2/ (External link)

どちらのボタンを押したかを取得する

さらに、confirm 関数は OK を押したかキャンセルを押したかの結果を返してくれます。
結果を次のように受け取ることができます。

1
2
3
4
5
// はい・キャンセル どちらを押したかを result 変数に代入する
const result = confirm('確認ダイアログが表示されます');

// 結果をコンソールに表示
console.log(result);
サンプルの実行環境

https://jsfiddle.net/kintone/7mad35rz/4/ (External link)

コンソールには、「はい」を押すと true が、「キャンセル」を押すと false が表示されますので、試してください。

入力内容に応じて動作を変更する

前述のように truefalse のどちらかが返ってくるしくみなので「はい」「キャンセル」どちらを押したかに応じてその後の動作を変えてみましょう。
まず、「はい」が押された場合、「はいが押されました」とコンソールに結果を出してみます。

条件分岐の「if」

条件分岐は if 文というものを使います。
「条件が合致した場合(真)は A の処理、条件が合致しない場合(偽)は B の処理」ということが表現できます。
書き方は違いますが、Excel の IF 関数のようなことができるイメージです。

if 文の書き方

1
2
3
4
5
if (条件式) {
  条件がtrueの場合の処理をここに書く
} else {
  条件がfalseの場合の処理をここに書く
}

ちなみに false の場合の処理が不要なら、else は省略可能です。

はい・キャンセルをそれぞれ押して動作を試してみてください。

1
2
3
4
5
6
7
8
9
// はい・キャンセル どちらを押したかをresult変数に代入する
const result = confirm('確認ダイアログが表示されます');

// 押したボタンに応じて表示する内容を変更する
if (result) {
  console.log('はい が押されました。');
} else {
  console.log('キャンセル が押されました。');
}
サンプルの実行環境

実行環境 https://jsfiddle.net/kintone/9pmwqak3/4/ (External link)

サンプルでは、「はい」を押すと条件式の result 変数が true になるので、「はいが押されました」とコンソールに表示がされた、ということになります。

条件式について

扱える条件式はさまざまです。
上記サンプルのように直接 true または false のどちらかがはいるのが最も単純なパターンですが、次のように不等式を使うこともできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const score = 90;

// scoreが80より大きいかどうか
if (score > 80) {
  console.log('やったね、合格です');
} else {
  console.log('残念、不合格です');
}

// scoreが90と同じかどうか
if (score === 90) {
  console.log('ぴったり!');
}

上記のように扱える条件式はいくつかあり、不等式のような記号のことを「演算子」といいます。
次のサイトにどのような演算子をつかって比較ができるかがまとめられています。

次回は、実際にもう少し複雑な条件式を書いていきます。