ywork2020.com

Title

条件が満たされている間は同じ処理を繰り返す制御文

目次 (INDEX)

while制御文の概要

まず、while という単語についての説明です。
while
読み: ホワイル
意味: ~の間 , 期間 ...

この制御文は引数である条件式(コンディションともいう)の戻り値がtrueの場合に{ブロック実行処理}を繰り返すことができます。 指定した条件が不一致になるとfalseが戻り、繰り返し制御を抜けます。

類似した制御文としてfor制御文が引き合いにだされることもありますが、for制御文は繰り返す回数が特定できる場合に 繰り返し回数を指定してループを行う場合に利用されます。

前述をまとめると、実際には繰り返し回数を特定できない場合に、このwhile制御文を使うということになるのですが、繰り返し回数が特定できない ことは、ほぼ無いと言えますので、for文を使うことが多いかもしれません。

ただ、while制御文のブロックにif文やfor文を使うことにより、何らかの条件にマッチする場合にbreak文を使ってループを抜けるなどの 処理を行えば、制御のバリエーションを増やすことが可能となる場合もあります。

while文を使う場合の注意点としては、この制御文のコンディションでの真偽判定を間違えると無限ループに陥る可能性があるところです。 なので、真偽判定をよく検討することと他の制御文での補足的なループ脱出処理やエラーの発生も考慮したtry制御文の利用も検討する余地があると思われます。

目次に戻る

実機サンプル

このサンプルでは5つのli要素と1つのb要素を用意して、そのclass属性値に「clsExample」を設定しています。
  1. List 1 (class="clsExample")
  2. List 2 (class="clsExample")
  3. List 3 (class="clsExample")
  4. List 4 (class="clsExample")
  5. List 5 (class="clsExample")
  6. That's all. (class="clsExample")

実行: Element.innerHTML !== "That's all." の条件でループ

目次に戻る

サンプルコード

<ol>
	<li class="clsExample">List 1</li>
	<li class="clsExample">List 2</li>
	<li class="clsExample">List 3</li>
	<li class="clsExample">List 4</li>
	<li class="clsExample">List 5</li>
	<b class="clsExample">That's all.</b>
</ol>
<input type="button" value="実行ボタン" onclick="evtName()">
<script>
	document.open();
	function evtName(){
		let numIndex = 0;
		let objHtmlCollection = document.getElementsByClassName("clsExample");
		while(objHtmlCollection[numIndex].innerHTML !== "That's all."){
			objHtmlCollection[numIndex].innerHTML = "Rewrite";
			numIndex++;
		}
	}
	document.close();
</script>
目次に戻る

サンプルコードの要点

  1. 5つのli要素と1つのb要素を用意して、そのclass属性値に「clsExample」を設定しました。
  2. b要素のinnerHTMLプロパティに「That's all.」(以上です)というテキストを設定しました。
  3. カウンター変数として「numIndex」を宣言しました。
  4. getElementsByClassNameメソッドで「clsExample」に該当する要素をHtmlCollectionとして取得しました。
  5. while文のループ条件に先ほどのHtmlCollection[インデックス番号].innerHTMLが「"That's all."」ではない間、という条件でループ制御を行いました。
  6. while文のブロックにはHTMLコレクションから.innerHTMLプロパティに「"Rewrite"」のテキストを代入しています。
  7. while文のブロックの最後に「カウンター変数++」で変数を1ずつプラスしています。
目次に戻る

補足説明

制御文を使うにあたっては比較演算子は切り離せないものです。比較演算子のページを関連リンクに貼っておきますので参考にしてください。

目次に戻る