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 の条件を満たさない場合、等の条件を絞ることができる

うさタブ
うさタブ

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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