WEBVTT

00:00:00.020 --> 00:00:03.345
この動画では「forループ」についてお話しします

00:00:05.494 --> 00:00:07.134
「whileループ」については勉強しましたね

00:00:07.200 --> 00:00:09.113
なんならこの動画を飛ばしてもらってもいいんです

00:00:09.214 --> 00:00:10.824
forループなんて必要ないんですよ

00:00:10.856 --> 00:00:13.766
単にwhileループを短く書くだけなんですから

00:00:13.920 --> 00:00:18.670
何度も何度も書きたくなるようなwhileループもあるわけです

00:00:19.218 --> 00:00:23.218
でもProcessingの作例を見たり、いろいろやっていくうえで

00:00:23.509 --> 00:00:25.298
forループを使った方が便利な場面も出てくるでしょう

00:00:25.449 --> 00:00:28.149
ですからforループに触れてみて、使ってみたほうが良いと思います

00:00:28.283 --> 00:00:31.963
ただし言っておきたいのは、新しい機能など何も付け加えず

00:00:32.140 --> 00:00:36.270
ただwhileループを短く書くための方法を学ぶだけということです

00:00:36.351 --> 00:00:40.721
forループの方がやや難しく感じるかもしれませんが

00:00:40.885 --> 00:00:42.123
まあそれはこれから見ていきましょう

00:00:42.290 --> 00:00:45.930
この動画ではまずwhileループをみて

00:00:46.162 --> 00:00:47.220
次にforループをみて

00:00:47.385 --> 00:00:49.565
whileループをforループに書き換える方法を学んで

00:00:49.714 --> 00:00:51.214
そして実際にProcessingコードとして実行してみます

00:00:51.329 --> 00:00:54.129
さて、これはこの間の練習問題の答えです

00:00:54.320 --> 00:00:57.590
動きのないプログラムに書き換えておきました

00:00:57.707 --> 00:01:00.167
steup()もdraw()もなく、実行されるのは

00:01:00.292 --> 00:01:04.292
「x=0から始めて画面の端までリピートしましょう」

00:01:04.427 --> 00:01:08.427
「y=0から始めて画面の下までリピートしましょう」

00:01:08.569 --> 00:01:09.439
こういう内容です

00:01:09.599 --> 00:01:12.159
この動画では水平の線と垂直の線を使って

00:01:12.212 --> 00:01:13.952
こういったグリッドパターンを描いていきます

00:01:14.118 --> 00:01:19.498
そのためにはまず「x=0」から始めて

00:01:22.492 --> 00:01:27.702
xの値がウィンドウの幅より小さい間は

00:01:28.320 --> 00:01:30.680
描画して、値を増やして...

00:01:30.821 --> 00:01:33.185
つまり線になるものを描いていきます

00:01:33.355 --> 00:01:34.976
あ〜 「線」ね

00:01:35.314 --> 00:01:40.304
線は(x, 0, x, 高さ)の点からスタートして

00:01:41.861 --> 00:01:44.141
ある値でxを増加させていきます

00:01:44.265 --> 00:01:46.968
任意の値ですから20ピクセルとしておきます

00:01:47.210 --> 00:01:52.140
今書いているwhileループはひたすら端まで線を描いていくものです

00:01:52.379 --> 00:01:55.609
さてこのループの構成要素はなんでしょう？

00:01:55.879 --> 00:02:01.479
3つありますが一つは初期条件です

00:02:03.590 --> 00:02:09.350
ループが開始した直後に初期値となるものをここで設定します

00:02:09.565 --> 00:02:11.750
ここではx=0となりますね

00:02:11.416 --> 00:02:13.396
他の要素はなんでしょう？

00:02:13.901 --> 00:02:16.271
ブール式です

00:02:18.287 --> 00:02:23.270
この式をチェックして結果がtrueであれば、ループが続いていきます

00:02:23.228 --> 00:02:24.878
falseであればループは終了します

00:02:25.200 --> 00:02:26.530
もう一つの要素は？

00:02:26.948 --> 00:02:29.868
増加の設定です

00:02:33.600 --> 00:02:37.600
ループが終わるまで毎回変数を増加させていくんです

00:02:37.259 --> 00:02:40.564
最終的には終了条件を満たすことになります

00:02:41.207 --> 00:02:44.327
さて、forループには基本的に3つの要素が必要となります

00:02:44.587 --> 00:02:47.611
初期設定、テストされるブール式、

00:02:47.707 --> 00:02:49.617
そしてループの最後に行われる内容です

00:02:49.888 --> 00:02:52.438
forループではこれらを1つの文で書くことができます

00:02:52.784 --> 00:02:53.644
こんな感じ

00:02:54.279 --> 00:02:55.358
「for」

00:02:56.494 --> 00:02:59.984
int x = 0; (セミコロン)

00:03:00.353 --> 00:03:03.813
x < 0; (セミコロン)

00:03:03.832 --> 00:03:07.572
x = x + 20、カッコ閉じる

00:03:07.887 --> 00:03:10.337
波カッコ、波カッコ閉じる

00:03:10.840 --> 00:03:12.790
ちょっとカメラを確認しなきゃ

00:03:12.832 --> 00:03:14.682
よし、ちゃんと波カッコが映ってる

00:03:14.871 --> 00:03:16.181
見えますね、素晴らしい

00:03:16.382 --> 00:03:18.602
近づいて「ハロー」なんて言ってみたりして

00:03:19.460 --> 00:03:23.000
やれって言われたんだよ、バカらしくて恥ずかしいね

00:03:23.280 --> 00:03:25.130
まあここはカットすればいいや

00:03:25.192 --> 00:03:29.520
ここに要素その1

00:03:29.119 --> 00:03:31.489
ここに要素その2

00:03:31.611 --> 00:03:33.651
そして要素その3

00:03:33.766 --> 00:03:38.686
要素その4はループの中で実行する内容です

00:03:38.873 --> 00:03:41.343
ここでは「線を描く」こと

00:03:44.867 --> 00:03:49.847
2つのループは100%一致していることがわかります

00:03:50.179 --> 00:03:51.569
違いといえば...

00:03:52.195 --> 00:03:56.195
forループは3行あったコードを並べて1行にできること

00:03:56.431 --> 00:03:58.810
コードを短くすることができますね

00:03:58.347 --> 00:04:00.267
言いたいことは「ループはx = 0から始まって

00:04:00.307 --> 00:04:01.618
x < 幅を毎回確認して

00:04:01.701 --> 00:04:03.831
ループの終わりで値を20増やす」

00:04:04.300 --> 00:04:08.300
これを最初に学ぶあなたのような人にとっては

00:04:08.565 --> 00:04:10.775
こっちの方が複雑にみえますよね

00:04:11.350 --> 00:04:14.137
whileループでは上から順番に実行されるわけですから

00:04:14.153 --> 00:04:15.543
まずこれを実行して、式をチェックして

00:04:15.682 --> 00:04:17.417
線を描いて、それから値を増加する

00:04:17.597 --> 00:04:20.137
式をチェック、描画、増加

00:04:20.447 --> 00:04:22.987
式をチェック、falseならループを終了

00:04:23.306 --> 00:04:26.786
でもforループでは順番通りじゃありません

00:04:26.846 --> 00:04:29.636
1番を実行、2番を実行、描画を実行、

00:04:29.931 --> 00:04:34.931
3番がtrueならまた2番を実行... ちょっと不規則なのです

00:04:35.154 --> 00:04:37.614
だんだん理解できるようになるのですが

00:04:37.761 --> 00:04:40.791
練習問題として

00:04:40.880 --> 00:04:43.457
今まで書いたコードの中でwhileループを含むものを探して

00:04:43.529 --> 00:04:46.449
forループに書き直して同じ結果が得られるかみてみると良いでしょう

00:04:46.572 --> 00:04:49.412
いったん動画を止めて、やってみてもよいです

00:04:49.540 --> 00:04:53.540
先程のグリッドの例を使って、これをコードに入れて、実行する

00:04:53.768 --> 00:04:56.378
待った、もう僕がやってたじゃないか

00:04:56.439 --> 00:04:58.349
まあでも何か違うものでやってみればいい

00:04:58.550 --> 00:04:59.800
考えておきます

00:05:00.720 --> 00:05:00.957
えっと何分経ったかな...

00:05:01.147 --> 00:05:02.847
5分しか経ってない！素晴らしい動画だね

00:05:03.730 --> 00:05:06.793
とりあえずこれをコードに入れて、ちゃんと動くことを確かめましょう

00:05:06.959 --> 00:05:10.349
ここではxとyそれぞれにループがあって

00:05:10.639 --> 00:05:13.389
どちらもwhileループなのでわかりやすくなっています

00:05:13.421 --> 00:05:18.207
これはデモンストレーションなので実際には使わないような書き方をしますが

00:05:18.321 --> 00:05:20.741
xの方はwhileループのままにしておいて

00:05:20.863 --> 00:05:23.320
yの方をforループにしてみます

00:05:24.719 --> 00:05:33.590
forループでまず必要なのは、初期条件でした

00:05:33.592 --> 00:05:36.242
次にブール式、y < 高さ

00:05:36.637 --> 00:05:38.307
増加の式

00:05:40.400 --> 00:05:44.380
それからループの中で行う内容です

00:05:44.591 --> 00:05:45.981
線を描くこと

00:05:46.362 --> 00:05:54.542
2つのループは考え方としては同じなわけです

00:05:54.603 --> 00:05:58.830
一つは水平方向の値、もう一つは垂直方向の値に関わっています

00:05:58.393 --> 00:06:00.623
でもforループではギュッと縮まったのがわかりますね

00:06:00.749 --> 00:06:02.519
whileループでは5行あるわけですが

00:06:02.717 --> 00:06:06.477
こういうループを何度も実行するなら短い書き方があった方が良いでしょう

00:06:06.759 --> 00:06:09.900
さあ実行してみましょう、結果が同じになることを確認してください

00:06:09.207 --> 00:06:10.267
同じになりました

00:06:10.449 --> 00:06:13.319
シンプルで簡単な練習問題としては

00:06:14.230 --> 00:06:16.830
このxの方をforループに書き換えてみるのが良いでしょう

00:06:17.211 --> 00:06:18.341
実際そんなに簡単な話でもないですけどね

00:06:18.558 --> 00:06:19.738
妙な書き方ですよね

00:06:19.859 --> 00:06:22.490
セミコロンだのいろんなカッコだの、順番がどうだとか

00:06:22.179 --> 00:06:23.879
慣れるにはちょっと時間がかかリますけど

00:06:24.300 --> 00:06:27.130
これでwhileループとforループの役割がどんなふうに理解されているか

00:06:27.257 --> 00:06:28.987
つかんでもらえたらと思っています

00:06:29.324 --> 00:06:33.324
要するにforループはwhileループの短い書き方

00:06:33.538 --> 00:06:36.368
とはいえwhileループの方がフレキシブルです

00:06:36.688 --> 00:06:40.349
変なコードを何行も並べて

00:06:40.449 --> 00:06:43.309
一方forループはとても限定的で選択肢は3つです

00:06:43.792 --> 00:06:46.482
かなり短い動画になったんじゃないかな

00:06:46.781 --> 00:06:47.891
廊下で誰か笑ってるよ

00:06:48.206 --> 00:06:50.786
きっと僕が一人で喋ってるのを聞いて笑ってるんだろう

00:06:51.800 --> 00:06:54.310
たしかに笑えるよね

00:06:54.727 --> 00:06:57.237
OK、今回はここまで

00:06:57.270 --> 00:06:59.690
次の動画でお会いしましょう