※当ブログ内容はPRを含みます

プログラミング入門1.まずは体験してみよう(Blockly Games編)その1

 

こんちゃっす、ダイブツです。

それじゃあ今回は、実際にプログラミングを体験してもらいます。

ここでプログラミングの感覚を掴んでいきましょう!
まさにゲーム感覚でプログラミングを体験することができますよ!

 

ブロックを組み合わせるだけ!簡単プログラミング

今回あなたに体験してもらうのは、あの誰もが知っているgoogleが提供しているプログラミング体験サイトです。

⇒Blockly Games

 

このサイトはプログラミング学習サイトといっても、一般的なプログラミングのようにカタカタ文字を打ったりすることはありません!

文字が書かれているブロックを組み合わせていくだけのプログラミングです。

なので、初心者にとってはもってこいの学習ツールなんですね。

今回はこれを使って学習を進めていきます。

 

学習するもの2つを厳選!

このBlockly Gamesには全部で7つのコンテンツがあるんですが、実はこのうち日本語に対応しているのはパズルと迷路、タートルの3つしかありません。(2017年7月現在)

この中からさらにプログラミング初心者が勉強を始めるのに良さそうなものとして、迷路とタートルを取りあげて学習を進めていきます。

他のコンテンツに取り組んでもらってもいいですが、英語になっていて分かりにくいのであえてやる程でもないんですよねぇ。

この記事を読みつつ、Blockly Gamesを実践していくという流れで学習していきましょう。
なかなかボリュームはありますが、プログラミングを学ぶ上でとても大事な部分なので、ここで考え方をしっかりと身に付けてください。

それでは始めていきますよ!

 

迷路編(10問)

それでは最初に実践してもらうのは、この迷路編です。

⇒Blockly Games(迷路編)

スタート位置に配置された人をプログラミングして、ゴールまで辿り着かせてあげましょう!

この迷路は、実際に迷路を進む人の視点になって考えてくださいね。

 

第1問

最初はまず、操作方法から覚えていきましょう。

操作といっても凄く簡単で、真ん中にあるブロックをドラッグしたまま右のブロックに繋げるだけです!

 

今回は2回分「まっすぐ進む」をすればいいので、「まっすぐ進む」ブロックを2つくっつけてみましょう。

こんな風にブロックをくっ付けて「プログラムを実行」ボタンを押すと、人が進んでゴールしてくれます。

 

 

ね?簡単でしょ?

これで操作方法は完璧ですね!

この調子で次からの問題もチャレンジしていきましょう!

 

第2問

第2問では、さっきと違って途中で曲がる必要があります。

迷路を進む人から見たら、どっちに曲がれば良いでしょうか?

 

はい、そうですね。

迷路を進む人は、最初に左に曲がり、次に右へ曲がればゴールに着くことができます。

そしてそれをブロックで繋げるとこうなります。

 

 

これでゴールに辿り着くことができました!

 

第3問

この第3問はプログラミングで重要な内容になるので、しっかり理解してくださいね!

 

この問題でポイントになるのが、左下に表示されている「残り1ブロックです」という文字。

つまり、単純に「まっすぐ進む」を5つ組み合わせてはいけないということです。

 

そこで今回初めて登場した、この繰り返しブロックを利用していくんです。

 

 

「まで繰り返す」という変な日本語訳になっていますが、これは「ゴールまで繰り返す」という意味です。

今回の問題だと、ゴールまで「まっすぐ進む」を繰り返せばいいですね。

なので、ブロックはこう組み合わせればいいんです。

 

 

これで1ブロック足すだけでゴールに辿り着くことができました!

このある処理を繰り返すという方法は、プログラミングでめちゃめちゃ使う内容なので忘れないでくださいね!

 

よく使う内容なので、JavaScriptというプログラミング言語で書く時の内容も一緒に覚えておきましょう。

この問題をクリアすると表示されるのが、作ったブロックをJavaScriptで書いた場合のプログラムなんです。

 

 

ここで表示されている「while」という単語が繰り返し処理の時に使うものです。

ほとんどのプログラミング言語で使う単語なので嫌でも覚えることになりますよw

 

第4問

この問題は、さっきの繰り返し問題の発展型ですね。

ゴールに到達するまでにどの部分を繰り返せば良いのか考えてみましょう。

 

まずは、繰り返し処理を使わないで考えてみるとわかりやすいですね。

今回の内容をただ単純にブロックを並べた場合、

 

まっすぐ進む
左を向く
まっすぐ進む
右を向く
まっすぐ進む
左を向く
まっすぐ進む
右を向く
まっすぐ進む
左を向く
まっすぐ進む
右を向く
まっすぐ進む
左を向く
まっすぐ進む

 

とすれば、ゴールまで辿り着けますよね?

そうした時に同じような処理を書いている部分があるはずです。

わかりましたか?

 

そうです、何回も同じ処理を繰り返しているのは、

 

まっすぐ進む
左を向く
まっすぐ進む
右を向く

 

の組み合わせです。

これをゴールに到達するまで繰り返せば良さそうですよね?

じゃあもう後は簡単です。

さっきのように繰り返しブロックと組み合わせて、こんなブロックができたら正解です。

 

 

第5問

この問題は・・・正直飛ばしてもいいかもしれませんw

何を学ばせたい問題か分からなかったw

 

用意されているブロックはゴールまで繰り返すという内容なので、最初からまっすぐ進む処理を繰り返してもゴールできないってことを伝えたいのかな?

まぁここは簡単にいきます。

 

さっきも書いたように、用意されている繰り返し処理はゴールまで繰り返すので最初から使うことはできません。

なので、最初の曲がり角までは繰り返し処理を使わずブロックを組み合わせて、最後に繰り返し処理をぶち込んでやればオッケーです。

答えはこんな内容になります。

 

 

第6問

ここでまた新しいブロックが登場します。

それがこの「もしもブロック」!ドラえもんの道具みたい!w

 

 

このブロックを使用すると、書かれている条件に合っている時だけブロック内の処理を実行することができます。

もし左に進めるなら左を向く、みたいな感じですね。

 

で、このもしもブロックを今まで使ってきた繰り返しブロックと組み合わせて使えばゴールに辿り着くことができるんです。

なので、答えはこんなブロックになるんですね。

 

 

で、このもしもブロックの内容も、プログラミングで必須の知識になります。

だからこの処理もJavaScriptで書いた時の書き方を覚えておきましょう!

書き方は「if」ですよ!

 

 

第7問

この辺りから段々見た目が迷路っぽくなってきます。

ただ、これは惑わされなければ簡単ですよ!

 

ここからの問題で重要なのは「どの道を通らせるか」です。

で、通らせる道を考える場合は「最短で、かつ簡単に進める道を考える」のが1番良いです。

簡単な方が頭の整理がしやすいですからね。

 

で、今回の場合だったらこのルートが一番最短になりますよね。

 

ここまできたら、さっきの第6問と見た目が似てることに気が付きませんか?

もうわかりましたよね!

答えはさっきと似たようなこんなブロックになりました。

 

 

第8問

さぁ残りの3問は今までの問題の応用編です。

今まではそのまま解説と答えをそのまま表示していましたが、ここからは一旦非表示にしていきます。

一度自分で最後まで考えてみてから、下の「答え」ボタンを押して自分の考えと合っていたか確認してください。

自分で考えないとただの時間の無駄ですから、ぜっっったいにこれは守ってくださいね。

 

 

第9問

ここのブロックでは、もしもブロックに「それ以外」という内容が含まれています。

 

 

このブロックは例えばこんな感じで使います。

まっすぐ進める時にはまっすぐ進む(実行側の内容)
まっすぐ進めない時には右に曲がる(それ以外の内容)

 

何でこんなブロックがあるかというと、普通のもしもブロックだけで「それ以外」を書こうとするとめちゃめちゃめんどくさくなっちゃうからです。

あと「それ以外」で書いた方が分かりやすい。

 

例えば、さっきの「それ以外」の部分をもしもブロックで書こうとするとこんな感じになります。

 

右に進める時には右に曲がる
左に進める時には右に曲がる
右斜めに進める時には右に曲がる
左斜めに進める時には右に曲がる


 

こうやって書くとキリがないですよね。

「全部右に曲がるならまとめてくれや!」ってなるじゃないですか。

その要望を叶えたのが「それ以外」付きもしもブロックなんです。

 

日常生活でも使うような言葉なので、すぐに使い方には慣れますよ!

で、このもしもブロックを使ってゴールに辿り着くには・・・?

 

 

もう予想はついていたかもしれませんが、今回の「それ以外」の部分もJavascriptで書けます!

もしもブロックで使われていた「if」と組み合わせて「else」と書きます。

この「else」を使う時は必ず「if」とセットでしか使えません。

「if~else~」でまとめて覚えておくといいですよ。

 

 

第10問

この問題はプログラマーの僕でも悩みました。

つまりこれが解ければプログラマーにとても近い実力がついたってことになります。

時間をかけてでもいいのでじっくりと考えて答えを導き出してみましょう!

なんとなく作った段階でとりあえず実行すると、どこがダメなのかイメージが付きやすいですよ!

 

 

 

 

お疲れ様でした!

なかなか長くなってしまいましたが、これで迷路編は終了です。

今回の内容は基本的なことですが、めっちゃくちゃ使うので嫌でも覚えることになりますよ!

 

また、本当はタートル編も続けて書こうと思ったんですが、迷路編だけで結構長くなっちゃったので別の記事に分けます。

タートル編ではもう少し踏み込んだプログラミングを体験してもらうので、また一緒に学んでいきましょう!

 ⇒よりプログラミングに慣れるタートル編はこちら

 ⇒講座一覧へ戻る

15 Comments

アバター TCC

はじめまして。プログラミングの勉強をしたくて色々調べていたところこちらのダイブツさんのサイトにたどり着きました。
第10問について質問させてください。
僕が書いたプログラムだと10行のJavaScriptになり、ダイブツさんの答えだと18行のJavaScriptになります。
プログラムの行数だと僕が書いたものの方が行数が少ないですが、迷路を最短距離で移動するのはダイブツさんの答えの方です。
プログラミングの観点からするとどちらの方が良いのでしょうか?

返信する
ダイブツ ダイブツ

>TCCさん

コメントありがとうございます!

>プログラムの行数だと僕が書いたものの方が行数が少ないですが、迷路を最短距離で移動するのはダイブツさんの答えの方です。

TCCさんのプログラムでは、最短距離で移動しないということでしょうか?
もしそうであれば、最短で移動するプログラムの方が良いという考えです。
想定していない余分な移動等があると、不具合の原因にもなりやすいので避けた方がいいですよ。

また、プログラムの行数は短くできるなら短くした方が良いです。
ただ、それ以上に他の人がプログラムを読んでも分かりやすい内容にすることが大事ですね。
会社だと分かりやすくプログラムを書くように徹底的に言われますよ~。

返信する
アバター TCC

ダイブツさん
早速の返信ありがとうございます。
まだ、プログラムの文章自体はよくわかりませんが、第10問で僕が並べたブロックだと以下の様なプログラムになっていました。
while (notDone()) {
if (isPathLeft()) {
turnLeft();
}
if (isPathForward()) {
moveForward();
} else {
turnRight();
}
}
左の壁に沿って人物を動かすプログラムなので、ダイブツさんの回答の様に最短距離を移動せず、かなり遠回りをしていました。
ダイブツさんのプログラムは、直進できる場所では右折→左折→曲がらないの優先順で選択実行し、直進できない場所では左折→右折→曲がらないの優先順で選択実行してから進むというプログラムですよね。
書いた人の意図が見えて面白いです。

返信する
アバター

始めまして!プログラミングの勉強で拝読させて頂いています。
早速ですが、第6問ついて教えて下さい。”もし左に勧めるなら左を向く”→”まっすぐ進む”の順で繰り返しをしてもゴールに辿り着く事が出来ましたが、プログラミング経験者の方からみるとおかしいのでしょうか?

返信する
ダイブツ ダイブツ

>毛さん

コメントありがとうございます!

第6問の場合だと、”もし左に勧めるなら左を向く”と”まっすぐ進む”の処理を交互に実行していければ良いので、”もし左に勧めるなら左を向く”→”まっすぐ進む”の順で繰り返しをしてもおかしくありません。

ただ、プログラミングの際には、処理の順番を意識しないと思った通りに動いてくれないことはよくあります。

なので、処理を実行する順番は気にしつつプログラミングするようにした方が良いですよ。

返信する
アバター

こちらこそありがとうございます。“処理を実行する順番”ですね!今後コードを書いて行く上で意識してみます(^^)
追伸:本当にコメント下さるとは…感謝しかありません。お忙しい中とは思いますが、今後もよろしくお願いします。SNS等のリンクはブログ内にありますか?授業料のお礼ではないですが、必要としている人に拡散するなど、僅かばかりのお礼が出来る仕組みがあるといいなぁと思います。

返信する
ダイブツ ダイブツ

はい、順番を意識してみてください!

いえいえ、戴いたコメントには誠心誠意返信させてもらいますよ。また分からない点があったらコメント下さい。

はぁあぁ!拡散なんてホントにありがたいです( ´Д`)その分、次にコメント戴いた時にはもっと丁寧に説明させてもらいますね♪

返信する
アバター 匿名

こんにちは。最近プログラミングを独学し始め、こちらのサイトを拝見させていただいております。
第10問についてですが、「まっすぐ進む」処理は「もしまっすぐ進めるなら」の条件にあった処理を終えたあと、またはどの条件にも満たない場合、つまり確実に行われるという解釈でよろしいのでしょうか?
お忙しい中失礼いたします。

返信する
ダイブツ ダイブツ

その通りです!

「まっすぐ進む」処理はもしもブロックに囲まれていない為、必ず実行します。
なので、もしもブロックの中の処理を実行するかしないかは全然関係ないってことですね。

コメントありがとうございます。
また何か質問があったら気軽に聞いてください!

返信する
アバター 匿名

このような初歩的な質問に対し、ご回答いただきありがとうございました!

返信する
アバター 阿部

はじめまして。エンジニアへの転職を目指してプログラミングの勉強をしていたところ、こちらのサイトを見つけました。まだ少ししか読んでおりませんが、非常に為になり助かっております。

さて、本記事の第9問の答えですが、
まっすぐ進めない場合の処理は「左を向く」でなく「右を向く」ではないでしょうか?

返信する
ダイブツ ダイブツ

>阿部さん

コメントありがとうございます!
第9問の答えですが、まっすぐ進めない場合の処理は「左を向く」のままで合っています。
実際に自分で動かしてみるとどう動くかが目に見えて分かるので、是非試してみてくださいね!

返信する
アバター 阿部

早速のご返信ありがとうございます。
すみません、スタート地点とゴールを逆に見ておりました。
きちんと自分で手を動かさずに本記事を見ながら頭の中だけで考えておりました。勘違いコメントをしてしまい申し訳ございません。

ただいま実際に自分で手を動かしながらタートルに挑戦しています。
このゲーム面白いですね。紹介してくださってありがとうございます。

返信する
ダイブツ ダイブツ

いえいえ!

また何かありましたらお気軽にコメントくださいね!

返信する

気軽にコメントどうぞ!

内容を確認してから、下記の「コメントを送信する」ボタンを押してください。