この動画では、JavaScriptの繰り返しについて説明します。文字の書き起こし、ソースコードも完全無料です。サイトでの登録なども一切不要です。概要欄の下部にサイトURLあります。
▼目次
00:31 繰り返しとは
00:59 for文
03:39 break
04:13 continue
04:50 for文のネスト
05:58 for文を使った配列の表示
06:49 確認問題
▼関連動画
【JavaScript超入門コース】01.コース紹介( • 【JavaScript超入門コース】01.コース紹介|初心者にわかりやすい... )
【JavaScript超入門コース】02.JavaScriptとは ( • 【JavaScript超入門コース】02.JavaScriptとは?|Ja... )
【JavaScript超入門コース】03.環境構築(for Mac) ( • 【JavaScript超入門コース】03.環境構築 for Mac|プログ... )
【JavaScript超入門コース】03.環境構築(for Windows) ( • 【JavaScript超入門コース】03.環境構築 for Windows... )
【JavaScript超入門コース】04.プログラムの基本構造 ( • 【JavaScript超入門コース】04.プログラムの3つの基本構造|プロ... )
【JavaScript超入門コース】05.実行 ( • 【JavaScript超入門コース】05.プログラム実行方法 |プログラム... )
【JavaScript超入門コース】06.変数 ( • 【JavaScript超入門コース】06.変数 |変数は、例えるなら「箱」... )
【JavaScript超入門コース】07.データ型 ( • 【JavaScript超入門コース】07.データ型 |変数に入れるデータの... )
【JavaScript超入門コース】08.配列 ( • 【JavaScript超入門コース】08.配列|変数を箱。配列をロッカーに... )
【JavaScript超入門コース】09.演算子 ( • 【JavaScript 超入門コース】09.演算子|足し算や引き算、2つの... )
【JavaScript超入門コース】10.条件分岐 ( • 【JavaScript超入門コース】10.条件分岐|条件にあてはまればAと... )
【JavaScript超入門コース】11.繰り返し ( • 【JavaScript超入門コース】11.繰り返し|同じ処理を何度も実行で... )
【JavaScript超入門コース】12.関数 ( • 【JavaScript超入門コース】12.関数 |関数を料理ロボットに例え... )
【JavaScript超入門コース】13.クラス ( • 【JavaScript超入門コース】13.クラス|クラスとは、「データ」と... )
【JavaScript超入門コース】14.実践 ( • 【JavaScript超入門コース】14.実践|すべて理解できればJava... )
【JavaScript超入門コース】15.総集編( • JavaScript超入門コース 合併版【JavaScriptの超基本的な... )
▼各超入門コース 合併版(約1時間)
【Python超入門コース】( • Python超入門コース 合併版|Pythonの超基本的な部分をたった1時... )
【JavaScript超入門コース】( • JavaScript超入門コース 合併版【JavaScriptの超基本的な... )
【Java超入門コース】( • Java超入門コース 合併版【Javaの超基本的な部分をたった1時間で学べ... )
【PHP超入門コース】( • PHPのプログラミング初心者向けの超入門講座|たった1時間で学べる【文字書... )
【Go超入門コース】( • 【たった1時間で学べる】Go言語のプログラミング初心者向けの超入門講座【文... )
【Ruby超入門コース】( • 【たった1時間で学べる】Rubyのプログラミング初心者向けの超入門講座【文... )
【Kotlin超入門コース】( • 【たった1時間で学べる】Kotlinのプログラミング初心者向けの超入門講座... )
▼自己紹介
現在:フリーランス(マーケティング関連の人工知能開発、データ分析や業務自動化など)
前職:リクルート
▼SNS
Twitter : https://twitter.com/kino_code/likes
Facebook : https://www.facebook.com/%E3%82%AD%E3%83%8E%E3%82%B3%E3%83%BC%E3%83%89-105693727500005/
Website : https://kino-code.com/
▼文字書き起こし
繰り返しとは?
レッスン4「プログラムの基本構造」で説明しましたが、プログラムの基本的な動きは「順次」「分岐」「繰り返し」の3つです。
繰り返しとは、決まった回数や条件を満たしてれば、同じ処理を実行するプログラム構造です。
for文
繰り返しの代表例がfor文です。
for文は、条件を満たしていれば、同じ処理をぐるぐる繰り返します。
そして、条件を満たさなくなったタイミングで、繰り返しがおわります。
例えば、for文で同じ処理を5回繰り返したい場合で考えてみます。
どうやったら5回をカウントできるでしょうか。
例えば、「1」からスタートして、1ずつ増やしていき「5」で終われば、5回です。
例えば、「0」からスタートして、1ずつ増やしていき「4」で終われば、これも5回です。
そういった処理をJavaScriptのfor文で書いていきます。
JavaScript でのfor文のきまりをみていきましょう。
for (スタート値; 継続条件; 増減式){
繰り返し中に実行する処理;
}
まず、forと書き、変数を書きます。
ここで定義した変数のことをカウンタ変数といいます。
カウンタ変数は、英語の「index」「integer」の頭文字「 i 」が使われることが多いです。
カウンタ変数の後に、「in」を書いて繰り返しの「範囲」または「配列」を記述します。
配列を使ったfor文は、このレッスンの最後の方で説明するので、今は「範囲」を使った書き方を説明します。
繰り返しの範囲を指定する場合は、スタートさせる値を書き、ドットを2つ、そして、終わらせる値を記述します。
スタートさせる値とは、0から1ずつ増やして4で終わる例でいうと、0です。
スタート値に0を書きましょう。
終わらせる値とは、例えば、0から1ずつ増やして4で終わる例でいうと、4です。
したがって、終わらせる値のところに、4を書きます。
次に、doを記述します。ちなみに、doは省略することができます。このレッスンでは省略していきます。
次の行に、繰り返し実行したい処理を記述して、その次の行に、endを記述します。
for文では、endまでの処理が終わったら、一番上に戻り、次の処理を実行するか判定します。
判定の結果、OKであれば、次のループをします。対して判定の結果、NGであればループが終了します。
break
次に、break文についてです。
break文は、ある条件にあてはまったとき、繰り返し処理を終了させることができます。
例えば、「0」からスタートさせて、1ずつ増やしていき、「3」になったら繰り返しを終了するといったときです。
contine
次に、contine文についてです。
contine文は、繰り返し処理で、ある条件にあてはまったときにその処理をスキップしたい場合に使います。
例えば、「0」からスタートさせて、1ずつ増やしていったとき、「3」になったら「3」をスキップさせるという場合です。
for文のネスト
for文の中にfor文を入れることもできます。
あるものの中に、それと同じ種類のものが入っている構造のことをネストといいます。
for文の中にfor文が入っている構造のことをfor文のネストといいます。
外側の繰り返しのカウンタ変数は「i」で、0から2まで回し、内側の繰り返しのカウンタ変数は「j」で、0から2まで回すという例で考えてみます。
外側のループの1周目の時に、内側のループが0から2までまわります。内側のループがまわりきったら、外側のループが2周目に入ります。
for文で配列内を参照
最後にfor文を使って配列の中身を表示させてみましょう。
これまで繰り返しの範囲を書いていましたが、今回は配列をそのまま書きましょう。
そうすると、配列の値が最初から1つずつが変数に格納されていきます。
確認問題
それでは確認問題です。
for文で1から10まで1ずつ増やしていく繰り返しを記述します。
そして、if文を使い、3になったらスキップ、7になったらfor文がおわる記述をしましょう。
※続きは、文字書き起こしブログで
▼文字書き起こし&ソースコードは下記ブログ
https://kino-code.com/course-javascript11-repetition/
▼タグ
#JavaScript初心者 #プログラミング入門 #繰り返し