プログラミング初心者の学習日記

完全初心者がプログラミングとブログを少しずつ学習していきます。

10日目 Code.org コンピュータサイエンス入門 20時間コース

これまでは一時間以内に終わる短いコース

Hour of Code

を進めてきました。

 

今回は一通りHour of Codeを終えたので、本格的な20時間コースの

コンピュータサイエンス入門

を進めていこうと思います。

 

f:id:sinosinoen2:20171001233934p:plain

コースは1~4、上級コース、アンプラグド・レッスンに分かれています。

どれからやればよいのか悩みましたが、とりあえずコース1から進めてみました。

 

コース1は4~6歳向けと書いてある通り、

本当に4歳児でもできそうなつくりです。

スモールステップでしつこいくらい練習問題があります。

 

大人がやるとあまりにもしつこいので嫌になるくらいです。

f:id:sinosinoen2:20171001234422p:plain

 

今回はレッスン1~5までを進めました。

内容は矢印のブロックリーを組み合わせてキャラクターを導く迷路です。

 

一時間コースの古典的迷路編に似ていますが、

これのレッスン1~3くらいを繰り返している感じですね。

やはり大人は上級コースをやるべきだったろうか・・・

learn-programming.hateblo.jp

 

しかし、これまでのHour of Code に無かった良い点が一つあります。

youtu.be

 

子供向けのプログラムだけあって授業で使うことを想定しているのですが、

ペアでプログラミング学習をする際の心構えが書いてあります。

何についても使えそうなよい教育だと思います。

 

Do:Be respectful  敬意をもって

Do:Talk to one another about the work 課題についてお互い話し合おう

Do:Explain what you are doing いまやってることを説明しよう

Do:think ahead and make suggestions 前もって考えて、提案をしよう

Do:switch roles often 役割を交代しよう

 

Don't:be a bossy navigator 偉そうなナビゲーターにならないで

Don't grab the driver's mouse /keyboard 操作してる人のマウスやキーボードを握らない

 

4~6歳時を想定しているので喧嘩したり独占したり、偉そうにしたり

説明不足になったりするのでしょう。操作する側とアドバイスする側を交代させる

のも必要なのでしょう。

 

ただ、大人もこれを良く出来ていないのでこういう教育をプログラミングの中に

入れているのはいいことだと感じました。

 

次回はコース1の中盤くらいまで進めたいと思います。

 

 

 

 

 

 

 

 

9日目 Hour of Code スポーツゲームを作る

Hour of Code にはたくさんのコースが用意されています。

 

しかし、一部のコースはまだ日本語に翻訳されていないため、

英語にくらべてコースが少なくなっています。

 

Hour of Code Sports | Code.org

 

今回選んだ「スポーツゲームを作る」コースは

部分的に英語が残っています。ヒントが英語、ブロックリーが日本語という感じ。

全十章でとても簡単です。

これまでで一番簡単かもしれません。

 

f:id:sinosinoen2:20170923090251p:plain

 

 

また海外らしいコードもあります。

iphoneでも顔文字が人種対応されましたが、

手の色も気を使っているのでしょう。

発想が違いますね。

f:id:sinosinoen2:20170923090402p:plain

 

今回は動画のヒントもなく、本当に圧倒いう間に終わりました。

十分もかからなかったのではないでしょうか。

作り終えた作品はやはり公開、共有できます。

studio.code.org

 

また、今回のような一部翻訳されていないコンテンツもあるので

そのお手伝いを募集しているようです。

 

Help Translate | Code.org

 

 

 

 

8日目 Hour of Code アーティスト コードで図形を描く

8日目はHour of Code の残りのコース アーティスト を進めました。

 

アーティスト編のコンセプトは

関数で図形を描く

 

アナ雪編とコンセプトが似ています。

しかし、10章とコンパクトな内容になっており、説明動画もありません。

とてもシンプルなつくりで、説明も少ないので初回向きではなく、

アナ雪編をクリアした後にするのが良いと感じました。

 

基本はブロックリーで

動く距離と曲がる角度を細かく決めることができます。

下は正六角形をつくるコードです。

f:id:sinosinoen2:20170921121544p:plain

 

上のコードを繰り返しブロックで簡単にすることもできます。

Repeatブロックはほとんどのコースで登場する重要な要素だとわかります。

f:id:sinosinoen2:20170921121809p:plain

 

今回は正多角形や平行四辺形、三角形を繰り返し描くことで、

絵を描くことが目標になっています。

次はひし形を繰り返すことでダイアモンドを作るコードです。

f:id:sinosinoen2:20170921122204p:plain

完成図はこちら

f:id:sinosinoen2:20170921122228p:plain

そして、8章からは

関数 が登場します。

関数をデザインして、ブロックにすることができます。

f:id:sinosinoen2:20170921122428p:plain

できる図形がコチラです。

f:id:sinosinoen2:20170921122501p:plain

アナ雪編で、前に1ピクセル、右に1度曲がるを360回リピートすると円になった様に

前に進む距離と曲がる角度、リピート回数を調整するだけで、さらに複雑な図形を

描くことができます。

 

角度、多角形などを習った小学生などには面白いコースですが、少しヒントが少ない

気がします。

自分で作った関数はダイアモンドに少し手を加えたものです。

f:id:sinosinoen2:20170921124524p:plain

f:id:sinosinoen2:20170921124543p:plain

簡単な図形を描いて終了。

出来上がりはやはり共有することができます。

皆さんもよろしければ↓からremixしてみてください。

studio.code.org

 

7日目 Hour of Code Flappyで横スクロールゲームをデザインする

Hour of Code 七日目はFlappyという簡単な横スクロールゲーム。

クリックするとパタパタして少し浮きます。

重力で落ちていくのに抵抗してパタパタさせつつ、障害物をかわしていくゲームです。

 

youtu.be

 

ブロックリー形式はどのコースも同じです。

ブロックと実際のコードを確認できるモードもあります。

 

 

f:id:sinosinoen2:20170920010056p:plain

 

フラッピー編の特徴は、イベントハンドラーをより詳しく設定できることです。

 

f:id:sinosinoen2:20170920010251p:plain

障害物の間隔から配置、背景、プレイヤーや速度、羽ばたく大きさなど

イベントごとに変化させることができます。

 

全十章しかないため、早ければ10分程度で終わってしまうでしょう。

他のコースにくらべると考える要素も少なく、ややもの足りない印象を受けました。

フラッピーバードというゲームを知らないのもやはり影響があるでしょうか。

 

とはいえ、ほかのコース同様、作ったゲームを公開することができます。

 

今回作ったのは障害物を通るたびに、プレイヤーの姿と背景が変わる

フラッピーバードです。地面に落ちるとゲームオーバー。

障害物にあたると0点に戻ってしまいます。

studio.code.org

 

Hour of Code もそろそろ終わりかな。

次はCode org の詳しいコースに入るか、

それとも他のサービスを見てみるか、少し悩みどころです。

 

ではまた

6日目 Hour of Code PlayLab で物語を作る。

ここまでHour of Code の代表的なコース4つをこなしてきました。

 

マインクラフト編、スターウォーズ編、古典的迷路編、そしてアナ雪編。

 

今回はPlayLab 登場するのはディズニーのキャラクター5人

アナ、エルサ、ラプンツェルベイマックス、ヒロ。

(ヒロって誰だろ?)

 

今回はゲームのデザイン、シナリオ、コンセプトを考えるらしい。


Disney Infinity Play Lab - Intro

 

全十章でとても短い。

ブロックリーの基本は変わらない。

ブロックをつなげてコードを作る簡単なつくりだ。

 

習うコードも

if もし~~

Repeat forever ずっとくりかえす

の二つだけ。

f:id:sinosinoen2:20170919001625p:plain

 

重要なのは自分でイベントを考えることだという。

もしキャラに触ったら、どういうイベントが起こるのかを決めることを学んだ。

 

f:id:sinosinoen2:20170919002207p:plain

キャラ2のアナにさわると鍋で打たれてポイントが減るといった具合に

イベントを作ってみた。

他にも背景を変えたり、動かしたりすることもできる。

 

コードというよりは、作る内容を考えるのがPlayLab編の醍醐味のようだ。

 

個人的には想像力が働かず、ろくなものがつくれなかった。

しかしいつものように作品を公開することができる。

子供の夏休みや冬休みの自由研究にはよさそうな気がする。

studio.code.org

 

Hour of Code で残るコースはあと何個だろう。

f:id:sinosinoen2:20170919002827p:plain

次回はFlappy Code などをやってみようと思う。

 

5日目 Hour of Code アナ雪のコードで美しい図形を描こう

5日目の今日は、Hour of Code 第4作目

アナと雪の女王(Frozen)編です

 

 

f:id:sinosinoen2:20170917010640p:plain

全20章でキレイな図形を描くコードを作っていきます。

毎度おなじみ、ブロックリーでコードを作ります。

 

これまでと違う点の一つ動く距離、動く方向を細かく決めることができるところ。

f:id:sinosinoen2:20170917011532p:plain

f:id:sinosinoen2:20170917011619p:plain

90回repeatを平気でこなすエルサ


コンピューターはくりかえしが得意

わずか4度の方向転換と前後の移動をなんと90回もこなすことでキレイな線からなる円をつくることができました。

 

 

そして、もう一つは関数です。

これはHour of Code を続けてきてはじめての要素です。

f:id:sinosinoen2:20170917012239p:plain

これが円を書くときのコード。

正360角形を作ると人間の目には円に見えるということですね。

これを一つのブロックにまとめてしまう。

そして関数(円を描く)として新しく定義してしまう。

f:id:sinosinoen2:20170917012648p:plain という短いブロックにまとめることができてしまいます。

 

関数の説明は再びNBAのクリスボッシュがやってくれます。

バスケに例えるところが、アメリカ人には受けるのでしょうか。

 


Frozen - Hour of Code: FUNCTIONS

 

関数をマスターしたら、繰り返しと関数を使って自分の好きな図形を描きます。

私の作品は

f:id:sinosinoen2:20170917013942p:plain

上が書いたコード。下ができた図形。正十二角形と円で模様を描きました。

f:id:sinosinoen2:20170917013453p:plainそしてできた図形がこれ。

 

十二角形の中心までの距離を計算しなければならなかったのが一手間でしたが、

三角比を覚えていたことにとりあえず満足です。

 

まとめ

アナ雪では以下の2点を学習しました。

①コンピューターはくりかえしが得意。 Repeatブロックを使う。

②何度も使うコードは関数にしてしまう。 今回は円ブロック。

 

Hour of Code ではどのプログラムも①の基本は守りつつ、

少しずつ違う要素を入れているのがわかります。

 

 

これで5日目は終了。次回はCode Combat編をやろうと思います。

4日目 Hour of Code 古典的迷路 アングリーバードとザッカーバーグ

 

今回は、古典的な迷路でコンピュータサイエンスの基本にチャレンジしました。

動画にはザッカーバーグが出てくるのですが、サバンナの高橋さんに似ていて

とても親しみやすい印象を受けます。

 

f:id:sinosinoen2:20170916234019p:plain

 

基本はブロックリー(ブロック形式)でコードを作っていきます。

動画は字幕を日本語にして見ています。

 


Hour of Code - Introduction

 

すでにマインクラフト編、スターウォーズ編をクリアしているので

全20章あってもサクサク進みます。

とはいえ、初見でも難しいと思うようなところはありません。

そしてどのシナリオでも出てくるのが

コンピューターは繰り返しが得意です

RepeatブロックでLoopsを作る。

ゲストはザッカーバーグで、説得力があります。

 


Hour of Code - Mark Zuckerburg teaches Repeat Loops

 

そして今回の古典的迷路編10章ではじめて登場するのが

~~するまで繰り返す Repeat until ~~ のブロックです。

f:id:sinosinoen2:20170916235115p:plain

コードでは while (notFinished())

が使われていましたが、これはシリーズはじめてのブロックです。

ゲストはNBAのクリスボッシュ。10回連続フリースローが入るまで帰らない男。

 

youtu.be

 

そして15章にはマインクラフト編でも出てきた、

もし~ならば if statement が登場します。

if を説明するのはあのビルゲイツです。(ゲストが豪華!)

 


Hour of Code - Bill Gates explains If statements

 

f:id:sinosinoen2:20170917000631p:plain

繰り返しと組み合わせて使うことでかなり上達した気分になれます。

 

最後は if-else statementです。

もし~ならば、そうでなければ~と、条件分岐をつけることができます。

これも今回のこれまでのマインクラフト、スターウォーズ編にはなかった要素です。

 

f:id:sinosinoen2:20170917001007p:plain

このコマンドで

f:id:sinosinoen2:20170917001111p:plain

リスをドングリまで動かすことができました。

 

今日のまとめ

①コンピューターはくりかえしが得意。

②コンピューターは条件が得意。

 

 

Hour of Code これまでのまとめ

マインクラフト編、スターウォーズ編のいいところは

最後に作り上げたゲームを形にして公開することができるところ。

古典的迷路編は他の二つよりも章が多いこと、ゲストが有名人であること、

そしてブロックリーの種類が多彩なことでしょうか。