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(条件)を使うことで、命令文を繰り返すことができる
うさタブ
うさタブ

今日はここまでッピ。

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました