JavaScript入門講座|プログラムを繰り返してみよう ~while文・for文を勉強しよう~

JavaScript
うさタブ
うさタブ

今日はプログラム繰り返しについて勉強していくッピよ~!

ユウキ
ユウキ

繰り返し?

うさタブ
うさタブ

プログラミングでは、コンピュータに同じ処理繰り返させることができるッピ!

うさタブ
うさタブ

さらに変数を組み込むことによって、

ほぼ同じパターンの行動でありながら、行動に変化をつけて結果を変えることができるッピネ

ユウキ
ユウキ

へ~ そりゃすごいや。

さっそくやろうぜ!

この学習で学べること
  • プログラムの繰り返し処理(For文・while文)
  • プログラムのスキップ(continue)
  • 条件をつけて繰り返しのプログラムを中断させる

プログラムを繰り返してみよう

うさタブ
うさタブ

それではプログラムの繰り返しについて学んでいくッピよ~!

うさタブ
うさタブ
必要なもの
  • メモ帳

が必要になるッピ!

for文を使って繰り返そう

うさタブ
うさタブ

まずは【for】文について学んでいくッピ!

これを使ってプログラムに繰り返し処理を組み込むッピネ!

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

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






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

</body>
</html>
うさタブ
うさタブ

上の文を参考にプログラムを書いていくッピ!

<script></script> の間に、以下の文を入力していくッピ!

for (let n=0; n<10 ; n++) {

	document.write(n);

}

入力できたらインターネットをみる【ブラウザ】で確認してみるッピよ~

全体のコードの確認

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

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

	for (let n=0; n<10 ; n++) {

		document.write(n);

	}


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

</body>
</html>
ユウキ
ユウキ

おおおお! 数字がいっぱい書かれてる!!

うさタブ
うさタブ

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

この for 文について、詳しく解説していくッピ!

for 文による繰り返しのしくみを学ぼう

うさタブ
うさタブ

今回のコードの解説をするッピネ!

for繰り返してください ( let n = 0変数n を 0 からはじめて; n<10;10を超えるまで n++nに1増加するごとに)
document.write(n);ページに書き出して 【n】 を  

という意味ッピ!

うさタブ
うさタブ

n++ 】というのは、n に 1 を足す という意味ッピ!

逆に【 n- – 】なら、 n に 1 を引く 、という意味になるッピね~

ユウキ
ユウキ

n に 1 を追加するごとに・・・

つまり、1回、2回、3回・・・毎回 【 for 】 の中身を繰り返してくれ! っていうことだな?

うさタブ
うさタブ

そのとおりッピ!

ユウキくん、プログラミングのことをわかってきたッピね~!

breakを使ってプログラムを中断してみよう

うさタブ
うさタブ

次は【 break 】を使ってプログラムを中断してみるッピよ~

うさタブ
うさタブ

プログラムの分かれ道【 if 】【 break 】を使って、繰り返し文を中断してみるッピネ!

for { } の中に、以下の文を追加してみるッピ!

	if (n >= 3){
		document.write("end");
		break; }
<script>

	for (let n=0; n<10 ; n++) {

		if (n >= 3){
			document.write("end");
			break; }

		document.write(n);

		}


</script>
ユウキ
ユウキ

できた~! 確認するよ

ユウキ
ユウキ

お! 今度は 012 止まってる

うさタブ
うさタブ

解説すると、

ifもしも  (n >= 3n が 3 以上なら){
document.write(“end”);書き出してください ”end” という文字列を
break;繰り返しをキャンセルしてください
}

になるッピね~

うさタブ
うさタブ

【break】を使うことで、それ以降の文をキャンセルすることができるッピよ~!

ユウキ
ユウキ

プログラムでこんなこともできるんだなあ~

continueでプログラムをスキップしてみよう

うさタブ
うさタブ

次は【continue】命令文を使ってみるッピ!

ユウキ
ユウキ

continue命令文

うさタブ
うさタブ

処理をスキップ・・・実行するプログラムを飛び越えて、次のプログラムを実行する命令文のことッピ!

うさタブ
うさタブ

JavaScriptプログラムはだいたい、

  1. 上から順にプログラムを実行
  2. プログラムの分かれ道を作って実行する
  3. 繰り返しプログラムを実行する
  4. 事前にプログラムのセットを作って、好きな場所で呼び出す
  5. DOM( 命令文 )でホームページを書き換える

で成り立ってるッピね~!

うさタブ
うさタブ

【continue】を使うことで、プログラムのスキップができるッピヨ~!

うさタブ
うさタブ

さっそくチャレンジしてみるッピ!

下の文を使って学習してみるッピヨ~!

<script></script>の間に以下の文を追加してみるッピ!

<script>

	for (let n=0; n<10 ; n++) {

		if (n == 3){
			continue; }
		if (n == 8){
			continue; }

		document.write(n + " / ");

		}

</script>
ユウキ
ユウキ

ん? ちょっと変わった?

うさタブ
うさタブ

ムフフ、ここを見るッピ!

ユウキ
ユウキ

スゲエエ! 3と8が消えてる!

うさタブ
うさタブ

これが【continue】のちからッピネ!

を飛び越えて、次の数字を表示することに成功したッピヨ~!

うさタブ
うさタブ

ifもしも ( n == 3n が 3 だったら ) { continue; プログラムを飛ばして下さい}

ifもしも ( n == 8n が 8 だったら ) { continue; プログラムを飛ばして下さい}

という意味ッピネ! 覚えておくッピよ~!

全体のコードの確認

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

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

	for (let n=0; n<10 ; n++) {

		if (n == 3){
			continue; }
		if (n == 8){
			continue; }

		document.write(n + " / ");

		}

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

</body>
</html>

while文でプログラムを繰り返そう

うさタブ
うさタブ

最後に勉強するのはwhile文ッピ!

【while】文【for】文と一緒で、プログラムを繰り返す命令文ッピネ!

ユウキ
ユウキ

なんで同じ効果のものが2つもあるんだ??

うさタブ
うさタブ

良い質問ッピネ~。

基本的に for文 は【 n 回繰り返す・・・繰り返す回数が決まっていることが多いッピ

うさタブ
うさタブ

それに比べて、while文無限ループ・・・

いわゆる環境を作ることに近い感じッピネ~

ユウキ
ユウキ

全くわからん・・・

うさタブ
うさタブ

例えるなら、ポケ○ンで戦闘がはじまったとき、

数回攻撃する技for文

ずーっとフィールドで雨や砂嵐が続くのがwhile文ッピ!

ユウキ
ユウキ

お、おう・・・(全くわからん)

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

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

	let n = 0;
	while (n < 10){
		 document.write(n);
		 n++;
		}


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

</body>
</html>
うさタブ
うさタブ

サンプルコードはこんな感じッピね~。

さっそくホームページが見れるブラウザを開いて確認していくッピ!

ユウキ
ユウキ

for文と全く一緒だなあ

うさタブ
うさタブ

使い方はほぼ一緒ッピからネ・・・

うさタブ
うさタブ

解説すると

let nnという変数を使います = 0;n は 0 です

while繰り返してください ( n<10n が 10 より小さいとき ){

document.write(n);書き出してください nを

n++;n に 1 を加算してください

}

という意味になるッピネ!

ユウキ
ユウキ

なるほどね~

学習のポイント
  • for ( 変数の初期値; 継続条件; 変数++) { }命令文を繰り返すことができる
  • if 文 と break 文を使うことで、プログラムを中断できる
  • if 文 と continue 文を使うことで、プログラムをスキップできる
  • while(条件)を使うことで、命令文を繰り返すことができる
うさタブ
うさタブ

今日はここまでッピ。

次回を楽しみにしてるッピよ~!

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
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をコピーしました