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

JavaScript
この記事で学べること
  • if 文について
  • if 文の使い方 / 条件の付け方
  • else 文の使い方 / 条件外の命令文
  • else if 文の使い方 / 複数の条件の作り方

プログラムの分かれ道・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>
うさタブ
うさタブ

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

ユウキ
ユウキ

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

うさタブ
うさタブ

そのとおりッピ! これを21才にしてみるッピよ~

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

で書き換えられるッピ!

ユウキ
ユウキ

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

else if 文を使ってみよう

うさタブ
うさタブ

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

うさタブ
うさタブ

それが else if 命令文) ッピネ~! さっそく使ってみるッピよ~。

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

<script>

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


	let age = 31 ;

	if (age > 30){
		document.write("30才以上です");
	} 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才になってる(笑)

うさタブ
うさタブ

これを31から、

21と10に変えるとこうなるッピよ~

ユウキ
ユウキ

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

うさタブ
うさタブ

では最後。

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; の数字を

10→1515→18に変えてみるッピ!

ユウキ
ユウキ

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

うさタブ
うさタブ

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

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

という意味ッピ!

うさタブ
うさタブ

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

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

うさタブ
うさタブ

ためしに age5 、81120、に変えてみるッピよ~!

ユウキ
ユウキ

お! 11才は小学生になる!

うさタブ
うさタブ

これが&&条件のちからッピネ!

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

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

ユウキ
ユウキ

なるほどなぁ~

うさタブ
うさタブ

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

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

うさタブ
うさタブ

今回はこの辺にするッピネ! 次回を楽しみにするッピよ~

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました