JavaScript入門講座｜if文・条件分岐について学ぼう　～プログラムの分かれ道を作る～

この記事で学べること

if 文について
if 文の使い方 / 条件の付け方
else 文の使い方 / 条件外の命令文
else if 文の使い方 / 複数の条件の作り方

プログラムの分かれ道・if文について学ぼう
1. if 文で分かれ道を作ってみよう
2. else文ってなに？

プログラムの分かれ道・if文について学ぼう

うさタブ

今回は、JavaScriptの if 文について勉強するッピ！

ユウキ

if 文って？？

うさタブ

if 文は、

ズバリ！　プログラムの分かれ道ッピね～

ユウキ

プログラムに分かれ道なんてあるんだ！

うさタブ

ムフフ、ただの分かれ道じゃないッピよ！

if 文は条件をつけて分かれ道を作ることができるッピ！

ユウキ

条件～！？

if 文で分かれ道を作ってみよう

うさタブ

必要なもの

メモ帳

が必要になるッピ！

うさタブ

さっそくif を使ってみるッピ！

てはじめに【メモ帳】を開くッピネ～。

下の文をコピーするッピよ～！

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>






</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

<script></script>の間に、下の命令文を書くッピヨ～！

	document.write("ユウキは小学生");

	let age = 10 ;
	if (age > 12){
		document.write("でした");
	}

最初のやつは　document.writeカッコの中を書き出して(“●●●”);　っていう意味ッピネ！

ユウキ

let age =10 ;

これは [ age年齢 ] という変数を [ let使う ] よ、

[ age年齢 ] = [ 10 ] だってコンピュータに教える命令文だな！

うさタブ

そのとおりッピ！

書けたら保存して、作ったホームページを確認するッピよ～

ユウキ

最初の文だけしか出てこないな～

うさタブ

ムフフ、それはこの部分・・・

[ age年齢 = 10 ; ]の部分が [ 10 ]だからッピ！

うさタブ

試しに、[ 10 ]を[ 15 ]にするッピよ～！

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

	document.write("ユウキは小学生");


	let age = 15 ;
	if (age > 12){
		document.write("でした");
	} 

</script>
<!-- ここまで！ -->

</body>
</html>

ユウキ

おおお！　「小学生でした」になった！

うさタブ

ふふふふ、これがプログラミングの魔法ッピ！

if (条件) { 命令文 } とすることで、結果を変えることができるッピ！

ユウキ

なるほど～

うさタブ

これは　 if (age > 12) { }もし　ageが　12　より大きければ　という命令文ッピ！

もちろん、この[ 12 ]とい数字も、[ age ]という変数も変更できるッピよ～！

うさタブ

不等号を [ > ] から [ < ]に変えれば

これは　 if (age < 12) { }もし　ageが　12　より小さければ　という命令文に変わるッピ！

ユウキ

[ ～以上 ] とか [ ●●以下 ]の場合はどうなるんだ？

うさタブ

良い質問ッピね～！

～以上なら [ >= ]、●●以下なら[ =< ]になるッピ！

うさタブ

if (age = 10 )もし　age　が　10　なら { 命令文これをして ; }

という命令文なら、[ age ] が [ 10 ]だったときのみ、プログラムが作動する・・・という命令が組み込めるッピ！

ユウキ

へ～　便利だなあ

学習のポイント

if 文を使ってプログラムの分かれ道を作ることができる。
不等号を使って分かれ道の条件をつけることが可能。
不等号は（＞大なり・＜小なり・＝イコール・ >=以上・ =<以下）が使用できる。

else文ってなに？

うさタブ

次は【else】文を使ってみるッピヨ～

ユウキ

else文？

うさタブ

先程の if 文では、「～が●●だったとき、こうしてね」というものだったッピ

うさタブ

else 文は、「それ以外のものは、こっちのプログラムを実行してね」というものッピネ～

うさタブ

モノは試しッピ！　さっそく使ってみるッピヨ～！

else文を使ってみよう

うさタブ

else 文は

else if { 命令文 ;}　で記述するッピ！

先程の文章に下の文に書き換えてみるッピヨ～　

<script>

	document.write("ユウキは");


	let age = 10 ;

	if (age > 20){
		document.write("成人しています");
	} else {
		document.write("未成年です");
	}

	document.write("　今は、" + age + "才です");

</script>

うさタブ

今回は成人している２０歳以上か、未成年かで分かれ道を作ってみるッピ！

ユウキ

お、２０才未満だから、「ユウキは、未成年です」になったんだな？

うさタブ

そのとおりッピ！　これを２１才にしてみるッピよ～

let age = 21 ;変数　ageを使う　ageは21です

で書き換えられるッピ！

ユウキ

おおおお！　結果が違ってる！！

else if 文を使ってみよう

うさタブ

最初の条件以外にも、複数の条件をつけることができるッピ！

うさタブ

それが else if 文（命令文）ッピネ～！　さっそく使ってみるッピよ～。

ますは下のサンプルコードを参考に勉強するッピ！

<script>

	document.write("ユウキは");


	let age = 31 ;

	if (age > 30){
		document.write("３０才以上です");
	} else if(age > 20) {
		document.write("成人しています");
	} else if(age === 20) {
		document.write("ちょうど成人の年です");
	} else {
		document.write("未成年です");
	}

	document.write("　今は、" + age + "才です");

</script>

うさタブ

前回の if (繰り返し条件) { 命令文 ; }　と　else { 命令文 ; }に加えて

else if 文を使っているッピ！

うさタブ

else if(age > 20){ ;}もしも　上の条件以外で　age が 20 より大きければ

という意味ッピネ！　使い方は if 文と同じッピ！

ユウキ

30才になってる（笑）

うさタブ

これを３１から、

２１と１０に変えるとこうなるッピよ～

ユウキ

この画面は前回で見たな～

うさタブ

では最後。

age を 20 に変えてみるッピよ！

ユウキ

おおおおおおっ！　また新しい文章が追加されてる！！

うさタブ

ふふふふ、これがプログラミングのちからッピヨ！

if 文や else 文を使いこなして、様々な装置を作ることができるッピ！

AND(さらに)/ OR(または)で条件を絞る

うさタブ

【 if 】文　や 【else if】文には、さらに条件を付け加えることができるッピ！

うさタブ

以下のサンプルコードを参考にして勉強するッピよ～

<script>

	document.write("ユウキは");


	let age = 10 ;

	if (age === 15 || age === 18) {
		document.write("受験生です");
	} else if (age < 12 && age > 7) {
		document.write("小学生です");
	}

	document.write("　今は、" + age + "才です");

</script>

ユウキ

・・・いつもの画面だな

うさタブ

let age = 10; の数字を

１０→１５、１５→１８に変えてみるッピ！

ユウキ

２つとも結果が違う！！　しかも受験生になった！

うさタブ

ふふふふ、これは or 条件 というやつッピネ。

ifもしも ( age === 15age が 15 か ||もしくは age === 18age が 18 だったならば ) {命令文;}

という意味ッピ！

うさタブ

次は &&プラス条件ッピ！

この条件１に加えて、さらに条件２をクリアしたら動作するというプログラムを組めるッピよ～！　

うさタブ

ためしに age を ５、８ 、１１、２０、に変えてみるッピよ～！

ユウキ

お！　８と１１才は小学生になる！

うさタブ

これが＆＆条件のちからッピネ！

else if上の条件以外で (age < 12age が 12 より小さく &&さらに age > 7age が 7 より小さい場合) {命令文;}

という構文で、プログラムの条件を２重・３重に決めることができるッピ！

ユウキ

なるほどなぁ～

うさタブ

他にも【 !=】という不等号を使うことで、満たされない場合の条件を記述することもできるッピヨ～！

学習のポイント

else文は、if文の条件に当てはまらなかったものに命令を追加することができる
else if で、さらに条件を追加できる
if ( 分岐条件A || 分岐条件B ) { 命令文 ;}で A または B の条件を満たすときにプログラムを実行できる
if ( 分岐条件A && 分岐条件B) { 命令文 ;}で A と B の条件を両方満たすときにプログラムを実行できる
if(分岐条件A && 分岐条件B != 分岐条件C){ 命令文;}で A と B の条件を満たしながら、C の条件を満たさない場合、等の条件を絞ることができる