条件分岐／繰り返し処理をしてみよう

固定リンクがコピーされました

更新日：2023年02月01日

条件分岐とは

固定リンクがコピーされました

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

ifの使い方

固定リンクがコピーされました

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でカスタマイズをするとき、条件に応じて処理を分岐させたい場合も多いと思います。

たとえば、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回繰り返して処理しているだけです。
この場合、繰り返し処理を使えば、より簡潔に記述できます。

for文を使ってみよう

固定リンクがコピーされました

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文でどのように繰り返し処理を行っているか、詳しく見てみましょう。

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

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

補足

終わらない繰り返し

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

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

まとめ

固定リンクがコピーされました

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

はじめようJavaScript