条件分岐とは、プログラミングで処理を行っている中で、条件や値によって処理を分岐させることです。
具体的には、「条件が合致した場合（真）は A の処理、条件が合致しない場合（偽）は B の処理」のように、処理を分岐させることができます。

JavaScript で条件分岐の処理を記述するには、if 文を使います。
ここからは、if 文を使った条件分岐処理の基本的な書き方を紹介します。

if 文の基本形は、次のように条件式で分岐し、条件が成立する場合は if 文の {} 内の処理を実行します。

1
2
3

if (条件式) {
  条件式が成立した場合に処理を実行
}

ブラウザーの開発者ツールを開き、コンソールに次のサンプルコードを入力してみましょう。

1
2
3
4

const x = 6;
if (x > 5) {
  console.log('xは5より大きいです。');
}

この例では、x = 6 なので、条件式の x > 5 が成立します。
そのため、コンソールでコードを実行すると、コンソールに xは5より大きいです。 が出力されます。

2分岐のif文を使ってみよう

条件に成立しない処理も指定したい場合、次のサンプルコードのように if...else を使います。
指定された条件が成立する場合は、1 番目の if 文の {} 内の処理を実行します。
条件が成立しない場合は、else の {} 内の処理を実行することになります。

1
2
3
4
5
6

const x = 2;
if (x > 5) {
  console.log('xは5より大きいです。');
} else {
  console.log('xは5より小さいです。');
}

この例では、x = 2 なので、x > 5 の条件と一致しないため、2 番目の if 文の処理が実行され、コンソールに xは5より小さいです。 が出力されます。

3分岐以上のif文を使ってみよう

if 文で処理を 3 分岐以上に分けたい場合は、次のサンプルコードのように else if を付け加えて、追加したい条件文を記述します。

1
2
3
4
5
6
7
8

const x = 4;
if (x > 5) {
  console.log('xは5より大きいです。');
} else if (x >= 3) {
  console.log('xは3~5の間です。');
} else {
  console.log('xは3より小さいです。');
}

この例では、x = 4 なので、1 番目の x > 5 の条件は成立しませんが、その次に追加された条件 x >= 3 は成立します。
そのため、2 番目の if 文の処理が実行され、コンソールに "xは3~5の間です。" が出力されます。

kintone でカスタマイズをするとき、条件に応じて処理を分岐させたい場合も多いと思います。

たとえば、kintone 上で、確認ダイアログボックスの【OK】または【キャンセル】のクリックに応じて、処理を分岐することを考えてみましょう。

• OK を押したらレコードを保存する。
• キャンセルを押したらエラーを出す。

コードは、次のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

(() => {
  kintone.events.on('app.record.edit.submit', (event) => {
    const resp = confirm('この内容を適用しますか');
    if (resp === false) {
    // if (!resp) {
    // と書くこともできます。
      event.error = 'キャンセルしました';
    }
    return event;
  });
})();

補足

switch文

複数の分岐条件も if 文で指定できますが、多くの条件を指定したい場合、if 文よりも簡潔に記述できる switch 文がおすすめです。
次のように、条件分岐が 4 パターン以上になる複雑な分岐をする場合は、switch 文を使いましょう。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

switch (式){ case 値A: /* 処理A */ break; case 値B: /* 処理A */ break; case 値C: /* 処理C */ break; case 値D: /* 処理D */ break; default: /* 式の値がいずれのcaseとも一致しない場合に実行する処理; */ }

さきほどの例には、x > 5 のようなシンプルな条件式がありました。
しかし、実際のカスタマイズでは、「x > 5 または x < 3」のように、条件を組み合わせて使いたい場合もあります。

「条件 X または条件 Y」のような条件判定をするには、条件式に論理演算子を利用します。

よく使われる論理演算子

• AND 演算：&&
  例：条件X && 条件Y「X と Y が両方成立する場合に、真と判定される」
• OR 演算：||
  例：条件X || Y「X または Y のどちらかが成立する場合に、真と判定される」
• NOT 演算：!
  例：!X「X 以外の条件の場合に、真と判定される」

繰り返し処理とは、同じような処理をコンピュータにさせることを指します。
たとえば、「コンソールログに、'Hello, world!'を 5 回表示させたい」場合、次のように記述できます。

1
2
3
4
5

console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');

これは、同じ console.log('Hello, world!'); を 5 回繰り返して処理しているだけです。
この場合、繰り返し処理を使えば、より簡潔に記述できます。

JavaScript で繰り返し処理を記述するときは、for 文を使います。
for 文を使うと、指定した回数を繰り返し処理できます。

1
2
3
4

for (初期化; 繰り返し条件; 繰り返す際の処理) {
  処理内容;
  // for 文の先頭に戻る
}

たとえば、さきほどの「コンソールログに、'Hello, world!'を 5 回表示させたい」の例は、for 文を使うと次のように記述できます。

1
2
3

for (let i = 1; i <= 5; i++) {
  console.log('Hello, world!');
}

for 文でどのように繰り返し処理を行っているか、詳しく見てみましょう。

1. 初期化：let i = 1 と書かれている部分です。スタート時の変数 i は「1」に定義されています。
2. 繰り返し条件：i <= 5 と書かれている部分です。この条件を満たすまで、繰り返しの処理を実行します。
3. 繰り返す際の処理：i++ と書かれている部分です。サンプルでは「i に 1 を足す」と定義されています。繰り返し処理が行われるたびに実行されます。
4. 実行する処理：for 文の {} 内で定義された処理 console.log(Hello, world!); を実行します。
5. 2 へ戻る：for 文の先頭に戻ります。再度「繰り返し条件」を確認し、繰り返しを継続するかどうかを判別します。

「先頭に戻る」際には「初期化」はされず、「繰り返す際の処理」が行われます。
また、「繰り返し条件」で設定された条件を満たした場合だけ、繰り返し処理をします。

補足

終わらない繰り返し

大量の処理を一括で行える便利な繰り返し処理には、注意点があります。
「『繰り返し条件』で設定された条件を満たした場合だけ、繰り返し処理をします」と解説しました。
つまり、「繰り返し条件」で設定された条件が常に満たされていると、ループは永遠に終了しません。これを無限ループといいます。

特に、API へのリクエストで無限ループが起こると、API サーバーに過度な負荷をかけることがあります。
繰り返し処理を使って API リクエストを行う際は、繰り返し条件の記述ミスなどで、無限ループが起こらないように気を付けてください。

条件分岐や繰り返し処理を正しく使うことで、処理を簡潔に書くことができます。
無限ループなどに陥らないように注意しつつ、利用しましょう。
次回は 配列操作／オブジェクト操作 について学習しましょう。