00:13
はい、SBC.オープンマイク ナンバー60始まりました。今回はですね、SIDE BEACH CITYのプログラミングについての講座のデモということで、プログラミングを始めよう、プログラミングを学ぼうということで、こちらのコーナーを始めていきたいと思います。
今回の内容は、今後、プログラミングの講座を9月、10月、11月とやることになっていますので、こちらのデモ、こんな感じにやりますよということをやっていければいいかなと思います。
まずは前提条件ということで、前提条件、こんな感じのことをやりますよということを確認をしていきたいと思います。
まずは今回の講座というのが、全5回の連続講座を依頼されておりまして、9月に1回、10月に1回、11月に3回というちょっと変則的なスケジュールの内容になってます。
今回、1回が2時間半ですね、というような内容になってます。
なので、一応1日目、2日目は大きく空いてしまうんですね。まるまるほぼ1ヶ月ぐらい経ってしまいます。
なので独立した内容をやって、3、4日に自由制作して、5日目に発表会でもやったほうがいいんじゃないのということで、代表の方に言われています。
それがそもそもどんな方から依頼を受けているのかっていうと、今回授業をする相手の方は中学生の1年から3年の方です。20人程度ということになってます。
今回、選択授業みたいな形になってるので、その中で特にやりたいと思っている方だけがこの講座を受けるっていうような感じになるみたいです。
どんなことをやっているお子さんかという話ですけれども、プレゼミというDNAが作っているプログラミングの学習環境。
ブロックをいろいろ組み合わせてプログラムを作るっていうようなことをできるようなパズルみたいな環境ですね。
以前こちらのほうでも紹介をしたcode.orgとかに近い環境ですかね。
こちらが大体皆さんやってるらしいよという話を聞いています。
大体やってるとは言ったけど、全員やってるわけではないらしいです。
ここもまたややこしいところですね。
で、スクラッチも利用したことがあるっていう方は何人かいらっしゃるっていうことだそうです。
これもまた全員ではないんです。
割合ってどれぐらいになるんでしょうね。
03:02
割合どうなんでしょうね。
割合も正直聞いてないんですよ。
本当にそのほかの情報を含めて今のところ全然なしっていう状態で。
一応打ち合わせが近く予定されてるんで、詳しくは聞いていくかなっていうふうには思うんですけれども、
今のところはそれだけ。
ただ中学生の声としては、今どきの中学生どういうこと考えてんのぐらいはじいちょう知ってるよぐらいな感じです。
ただあくまで全く違う県の話なので、
たぶん参考程度にしかならないのかなっていうふうに自分は思ってます。
というようなぐらいの知識しかありません。
たぶんなので、1日目に相当様子を見ていくっていう感じになるのかなというふうに思って、
自分はやってます。
なので1日目にはプログラミングの入門編ということで、スクラッチを。
スクラッチをといってもたぶん、よくある猫が走りますよみたいな、
最初に表示されるキャラクターの猫が走りますよみたいなプログラムを作るだけだと、
たぶんやったことある方はやったことあるだろうなと思うので、
ちょっとそんな単純な内容はせずに、
もうちょっと応用の内容でやっていこうかなというふうに思ってます。
これを、まずこれで生徒さんの理解度どのぐらいわかってんのかなっていうのを、
ちょっと把握していければいいかなというふうに思ってます。
その上で2日目以降ですが、ちょっと分岐を考えていて、
ついていけそうだなというふうな感覚であればJavaScriptを。
ちょっと難しそうだなっていうのであれば、
スクラッチを継続してやっていこうということで考えています。
なので実はというと、もう2日目以降の予定は全然考えてません。
資料は買い抜かれてません。
一応どんなもんやろうかなぐらいのデモはあるので、
今日はちょっとだけそれもお示ししようかなというふうに思いますけれども、
基本的には本日分、1日目だけの内容っていう感じでやっていければいいかなというふうに思います。
というわけで、今回ここから資料の話をやっていきたいと思います。
資料なのでちゃんと自己紹介もあります。
こちらの内容だと割と飛ばしてもいいかなと思いますが、
一応読んでいきましょう。
まちどクリエイジェントSIDE BEACH CITY.というNPOGの議事をやってます。
高道英です。
SBCASTとかSBCオープンマイクという地域活動を紹介する番組の放送、
オンライン番組の放送をやってます。
その他、今回のITのものの使い方を説明する、支援するということで、
こういうような講座を開いたりしています。
その他、地域のオンラインイベント、
何か地域の取り組みを発信したい、発表したいというような方のお手伝いをやっています。
06:04
その他、いわゆるフリーランスという、
平たく言ってしまえば予編みたいなことをやって、
プログラマーということで活動をしています。
その他、書籍なんかもいろいろと作ったりはしています。
ということで話をしていきたいと思います。
まずは1日目。
スクラッチというのはまず何なのか。
皆さんご存じの方もいらっしゃるかなというふうに思いますけれども、
ブロックのプログラミング環境というものになります。
ブロックを組み合わせて、こういう積み木みたいな形ですね。
パズルを組み合わせて、画面上のキャラクターを動かしていくというようなものになります。
楽しみながらプログラミングの基本点をわかりますよということで、
結構いろんなところで学習用の環境ということで紹介されています。
ブロックのプログラミング環境っていったって何のことになってしまうかと思いますが、
これもどういうふうに説明すればわかりやすいかなというふうに色々探してみたんですけど、
結局これぐらいしか思いつかなかったということでやっています。
多分これでいいのかなというふうに思います。
もっといい例えがあれば教えてもらえればとは思うんですけれども、
こんな感じでやっております。
他のやつだと、いわゆる普通のプログラミングってコード書いて、
そのコードが普通にテキストでってやつなんでちょっととっつきにくいよとか、
そういう比較があるとまたいいのかななんて思いましたけど。
一応最後のほうに、1日目最後にそれ出そうかなと思ってはいたんですけども。
ちょっと先にもその話をほしいですかね。
最初にやるんだったら、
例えばHello Worldって最初に見せてみて、数行書いてこういうことできるんですよねって文字を出してこうなんですけど、
そういうのをやるんですけど、あるけどもうちょいやりやすいやつ。
キーボードを打たなくてもこうやってパーツ組み合わせると、
Hello Worldよりも派手なことがすぐできる。
こっちのほうでまずはプログラミングの基本をやってみようみたいなふうに持っていくっていうのもありかなと。
そうですね。
じゃあこの一つ前に、そもそもプログラミングでやっていきましょうって。
プログラミングっていうとこんな感じになりますっていうことで、
とりあえずJavaScriptでHello Worldを1個書いてみるとかぐらいやってみようかなっていうところですかね。
中学生ですね、今回対象が。
09:02
前回ではだいぶ昔にスケットレートの小学生向けなんで座学パートすごい退屈そうだったじゃないですか。
中学生だったらもう少し耐えられるというか、周辺の話してもいけるんじゃないかなという淡い期待があります。
補足ということで、こちらの小学生向けに実は自分たちもプログラミングのワークショップをちょっとやったことがあって、
こちらについては確かサイドビッチのブログレポートのほうも書いてたかなというふうに思いますけれども、
プログラミングの講座をスクラッチをベースに、今回1時間でしたかね、やりました。
ただそれとはちょっと違って、たぶん今回やりたい子が来ているっていうこともあるので、前回もそうだったんですけども、
プログラミング、例えばJavaScriptだとこうなりますよっていうのをまずは簡単に見せてみるっていうような感じですかね。
そうですね。
それを一個やっていくという感じでいきます。
じゃあそれをちょっと後で付け加えます。
ありがとうございます。
こちらの後は実際にプログラミングの例を見てみましょうということで、実際のものをちょっと作ってみていきたいと思います。
こちらは実際に作ってもらう必要はないと思っていて、実際には見てもらうだけのプログラムになります。
ちょっと緑の旗を押すっていうので、スクラッチの場合はこの旗を押すことですべて始まるのでこれを押してみましょう。
こういうふうに色を少しずつ色を変えながら丸を描いていくっていうようなプログラムになります。
最後にぐるーっと丸を描いてて丸ができあがるというような仕組みです。
こういうようなプログラムを描いていくことができます。
これはどういうふうな感じなのかっていうと、ちょっと文章にして少しずつだけ読んでみましょう。
一番最初、ここの一番上にペンを置いて、そこから下に向かって少しずつ角度をずらしながらペンを描いていく。
ここに360度を動かすっていうふうに書いてありますけれども、360回少しずつ角度を改善させながらペンを描いていきますよっていうようなプログラムも書いてあります。
そして書き終わったらここでペンを上げる。このペンを上げるという命令で書き終わりを示します。
12:01
こんな形をすると丸が描けますよ。というようなものになります。
こういうようなプログラムを書いていくことができます。
先ほどのプログラムの書き方に比べると、どういうふうにやってるのかっていうのはある程度わかりやすいのかなっていうふうに思います。
そうですね。なのでハローワールドを書くというよりたぶん円を書くプログラムを書いていったほうがわかりやすいかな、最初。
同じもので比較できるといいですね。
たぶん次の作例が実は高き絵を描こうっていうやつなんですけども、高き絵を描くっていうのだと実はすごく大変なんですよね、JavaScriptでそれやると。
丸だったらそこまで難しくないので、とりあえずそれでやろうかなっていうふうに思います。
ちょっとその方向でJavaScriptで一個付け足します。
こういうのがプログラミングですよ、実際のプログラム例ですよっていうような話でした。
今回作るものはこれほどのものではなくて、正多角形っていうものを作っていきます。
一応確認したけどたぶんこれ中学1年生は普通に伝わると思う。
なので正多角形を作っていきます。
例えば4っていうふうに言えば正方形ですね、書いていきます。
5って言えば五角形書いていきます。
6って言えば六角形を書いていきます。
さっきの丸を書いていたように360って言うと円ができますっていうような、そんな感じのプログラムですね。
を書いてみようというふうに思います。
なのでこちらのほうでまずはスクラッチの画面を開いてやってみましょう。
まずはその前に四角形ってそもそもどうやって書くんだっけっていう話をします。
図形を書くっていうときには猫の絵だとあんまり適切ではありません。
猫がペンを下ろすって言ったときにどこを書くかっていうと、
だいたいこのあたりになるんですよね。猫の足のあたりになっちゃうので、
ペンの中心がどこになるのかってのがぱっと見すごくわかりづらいということで、
新しいキャラクターを呼び出します。
ボールです。
ボールの中心がペンを書くところになるのですごくわかりやすいということで、
たぶんペンを書くのはこっちのほうがいいかなというふうに思います。
15:00
ペンの部品も呼び出しておきましょう。
ペンの部品は拡張機能というところからペンを選ぶことでこれ追加ができます。
ではペンを外させて、まずはこのボールに四角形を書くようにさせることから始めてみましょう。
まず、緑の旗を押したときっていうブロックから始めていきます。
最初は最初に書いていたとおり、始める場所を決めるところからにしましょう。
これは何をやっているんだろうと思ったら、
とりあえずこういうものが最初にあるんだよぐらいに思ってもらえればと思います。
たぶん本番は、例えばこれ後で外してみて、
あ、おかしくなるねっていうことを確認して見てもらうようなのを付け足してもいいのかなというふうに思います。
初期化処理外すとどんどん四角が下のほうに飛んでくるとか、そんなのを書いていくかなというふうに思います。
で、まずは今まで書いてきたものがあれば全部消して、ペンを下ろしてここから書き始めますよっていうことにして、
四角形って、そもそも四角はどういうものかっていうと、線を引いたあと90度回転をさせます。
そして、とりあえず今回は振り返しをなしでやりますね。
10だと何を書いてるのかわからない。
これを緑の旗を押してみると、こういうふうに四角が書けます。
これは90、線を移動して、ボールの角度を90度変えて、90進んで、ボールの角度を90度変えてっていうのを4回やったから、四角が書いてました。
ただ、ここの部分に動かすと90度回すっていうのが重なっちゃって少しめんどくさいですよね。
そのためにプログラミングでは繰り返しというブロックがあります。
これを使ってみましょう。
18:00
この辺を全部外して、これを繰り返しの回数4回っていうふうに設定します。
そうすると、これでも四角形を書くことができます。
これがまずはプログラミングのすごく簡単な形ですね。
こういうふうに4回繰り返すっていうことに書くことによって、ブロックをいちいち全部4個置かなくてもよくなりました。
これでループの概念がわかるわけですね。
じゃあこれを四角形じゃなくて五角形を作る方法に変えていきましょう。
五角形を書く場合、90書いて90書いた後に回転する角度が今まで90だったんですけども少しずつ減っていきます。
これはたぶん授業でやってるんじゃないかなと思うんですけども角度を変えます。
全部足したら360度になればいいんですよね。
なので360÷5っていうふうになります。
なのでここに360÷5を計算してこの中に答え書いちゃってもいいんですけれども、
プログラムでは、たとえば後で変えることを考えてあんまりこういうことはしないほうがいいのかなというふうに思ってます。
たぶんこれは好みに変わりそうなんで、違うよっていう人もいそうなんですけども、
たとえば360÷5をこの場で計算するということもできますね。
そうすると、たとえばこれで五角形が書けます。
ここまででなんとなくパッとわかったところもあると思います。
ここの何回繰り返すという数字と、ここの÷の数字って実は同じなんですよね。
なのでここを6に変えて、ここも6に変えれば六角形ができます。
じゃあこれを応用すれば、多角形を作るっていうのができそうですよね。
というところまで来て、これで多角形を作るっていうふうに進んでいくわけですね。
じゃあ多角形を作るときにはどうすればいいか。
まずは自分がこのボールに指示をするプログラムを書きましょう。
一旦このネコに戻します。
21:02
ネコに戻して、こちらのほうに緑の旗が押されたときっていうのを変えます。
そして緑の旗が押されたら聞くようにしましょう。
何回っけ書きますか。
何回っけ書きますかって質問するブロックは、
あれ?青だよね。
質問するブロックはどこだっけ。
あ、これだ。
なんとかかんとかと聞いて待つというブロックがあるので、
こういうふうに聞きましょう。
そしてその後ですね、このボールにボール円を書いてくださいという命令を送ります。
これは実はメッセージというものがあるので、こちらを今回使います。
メッセージ1を送るはこれだ。
メッセージ1を送る。
ボールは緑の旗が押されたときに書き始めるのではなくて、
メッセージが送られたときに書きますという形になります。
先ほどの何回っけを書きますかっていうふうに聞いたときの質問の答えは、
この答えっていうブロックが持ってます。
なのでこの答えっていうブロックを、
この繰り返す数のところと何回回すっていうところにはめてみます。
そうするとどうなるでしょうか。
まず何回かん書きますかって聞かれますね。
ごかっけって入れてみましょう。
そうするとごかっけが書けるという感じになります。
同じ要領で7って入れてみましょう。
7かっけ、7個回転カードがある図形が描けました。
同じです。
今回8かっけっていうふうに選んでも8って書けますし、
逆に数を減らして三角形って書いても三角形が書けますという形になります。
24:01
こういうふうにプログラムを書くことで、
少ないコース、少ない数で入力した値を反映した図形を、
いろんな図形を書くことができるようになります。
ということでここの例は大体このぐらいかな、
両方に思います。
出てくる可能性がありそうな質問としては、
ここで360って書いたらちゃんと円になりますかっていうのも
出てきそうな気がするんですけども、
なるんですけれどもちょっとやってみましょうか。
丸が変なとこ行っちゃいましたね。
これどういうことかっていうと、
今回360度回すたびにここに90歩動かすっていうプログラムを書いてましたけども、
この画面サイズって90も書けないんですね。
360度にすべてに対して90歩動かすみたいな大きな図形は書けないぐらいのものになってしまうので、
キャンバスからはみ出てしまう。
はみ出てしまうとこうやって少し動作がおかしくなっちゃうんですね。
なのでもしそういうことをしたい場合は、
もうちょっとひと工夫してあげます。
例えばここも計算を入れてあげるようにして、
ここはあらかじめ計算してたんですけど600って入れてあげますね。
そういうふうにしてあげると、
360って書いてもだいたいちょうどいい感じに図形が描けるようになります。
これはどういうふうなことをやっているのかっていうと、
今回600÷360っていうふうにすることで、
今回だいたい1.6ぐらい。
一つの辺、360分の1では1.6ぐらいしか線を描かないことによって、
この白いキャンバス内のはみ出ないような円が描けるようになったっていう感じなんですね。
この辺については多分環境によってこの600っていう数字が変わってくると思います。
もうちょっと大きな図面で描いても大丈夫っていう場合もあるかもしれないし、
逆にもうちょっと小さく描きたいっていう場合もあると思います。
この辺は環境によって変わると思います。
なるほど。
こんな感じで割り算とか掛け算を使うことによって、
いろんな図形を描くことをすごい短い手順で描けるようになりましたよね。
こういうのがプログラミングっていうものになります。
ここまででだいたい一つの単元が終わりで、
ひょっとしたら休み時間、たぶんどこかで入れると思うんだよね。
27:02
2時間半分続けなんてこともないと思うので、
たぶんどこかの辺で昼休みとか休憩時間とか入るんじゃないかなというふうに思います。
そうそう。休憩時間どこで入れるのっていうのも聞いてないんですよね、実は。
一コマ普段の授業はどれぐらいなんでしょうね。
60から90分ぐらいだとすると、
この辺の前にもう一回休憩が入ってるのかなぐらいの。
最近の中学生は一コマ何分なのかが全くわからない。
この辺がわりと謎だったりします。
この辺も聞ければ聞きたいですよね。
そうですね。
たぶんどちらにしてもこれで2時間半使い切りましたってことはないと思うので、
もう一個一応用意をしています。
最初音楽を鳴らそうかなと思ったんですけども、
多少でもプログラミングに関わる、現場に関わるものに近いほうがいいかな、
面白いかなっていうふうに思ったんでちょっと追加をしました。
フィズバズというものです。
プログラミングの会社ではたまに出てきますと言いたいのですけれども、
正直なところ出てくるのを自分は見たことないんですよね。
どうなんですかね、これ。
これ昔は出たけど、昔は出してたらしいんですけど、
みんなこれ書き方もう覚えちゃって。
さすがにそうか。
これ最初に解くんだったらみんなこううんうんってやるじゃないですか。
ただ出るよって言われてみんな試験対策しちゃう。
今は出なくなったって話聞きます。
代わりに今だとアットコーダーとか。
いきなりアットコーダー行きますか。
だからアットコーダーとかああいうプログラミングコンテスト系のやつのスコアか、
あれに似たような感じの試験問題出すんですよ。
行動に関しては。
そっち行っちゃうみたいですね。
それも調べた感じアットコーダーの攻略本みたいな感じで、
いくつか解き方ブログとかがあるみたいなんで、
それ見てる感じで対策済みってパターンはありそうっていう立場ですね。
もともとフィズバズって何で出てきたのかっていうと、
ここに書いてある通りフィズバズって何なのかっていうと、
数字を1から大体100ぐらいまで数えていきます。
100まで数えていく間に、
もしその数字が3の倍数だったらフィズって言います。
5の倍数だったらバズって言います。
5倍数、すなわち15の倍数だったらフィズバズって言います。
そうでなければ数字だけを表示しますっていうようなプログラムなんですね。
30:04
なんでこんなことをやるのかっていうと、
繰り返ししますよね。1から100まで数えるって言ったので。
繰り返しをするし、3の倍数とか5の倍数とか15の倍数とか、
そういうようなときに判断もします。
いわゆるif文っていうやつですけど、この判断もします。
なので、上から順番に実行していく動作もするし、
もし何かだったらっていうのを処理もするし、
最後に繰り返しっていうのもやるしということで、
いろんな側面のプログラム、いろんな側面が出てくるので、
これでやれば、大抵プログラミングのこと分かってるか分かってないかぐらい
分かるでしょうというようなプログラムっていうことでよく使われてるんですかね。
なので、今はどうなるか分かんないけどっていうような感じのものになります。
じゃあ、せっかくなのでこちらもプログラムで書いていきましょう。
この時点で皆さんの様子を見て立ち向かえそうだっていう感じであれば、
Fizzbuzz1から組んでもらいます。
ちょっと厳しいかなという感じであれば、例題を書くので見てねっていう感じでいきます。
実際にこの、今高速にカウントしてますけれども、
実際にFizzbuzzをこのプログラムを書くっていうのはちょっと難しいのかなというふうに思います。
っていうのはなぜかというと、これ3の倍数と5の倍数のときにしか書いてないんですよ。
15の倍数のときには3の倍数も5の倍数も通って、
ここを通らないからFizzbuzzって書かれるっていうちょっと複雑な書き方をしているので、
たぶんこんな書き方はさせないと思います。
素直にFizzのときとBuzzのときとFizzbuzzのときっていうのに書いて、
それの全部でもないときっていうようなプログラムを書く感じになると思いますが、
こんな感じでプログラムを書いていって、1から100まで数えて、
3の倍数と5の倍数のときにFizzとBuzzになるよねっていうのを確認するような
プログラムを書いていこうかというふうに思います。
たぶんここで1からワークショップで作っていってると、
たぶんJavaScriptを紹介する暇がなくなってしまうので、
今回は見せるだけになります。
だいたいFizzbuzz、たぶん音楽を鳴らすとかそういうのに比べれば、
本番の大人の現場で使われてるものに近いプログラムにはなると思うので、
これがあることで、なんとなくプログラミングの仕事場ってこんなものなんだっていうのを、
33:03
なんとなくでも感じてもらえればいいかなっていうふうに思っています。
っていうところですかね。
たぶんこの辺で1日目は2時間か2時間20分くらいまで行くという想定でいます。
それではこれから先へということでちょっとまとめの話もしていきます。
これから先、今後もっとプログラミングを続けていきたいっていうような方の場合、
たぶんこれから実際にアプリを作るためには大抵の場合、他の言語を使います。
全く違う言語というものです。
で、今画面ちょっと見づらくて何書いてるかわからないですけども、
こういうような形でいろんな文章が羅列されたプログラム言語というものを書いていきます。
で、なんで言語っていうものを使うかっていうと、
言語って言えばたぶん日本語とか英語とかそういう普通の言葉がありますけども、こういう言葉は使えません。
なんでかというとこういう言葉、いわゆる自然言語っていうふうに言われますけれども、
この自然言語ってすごく曖昧なんですよね。
例えば、自分の手元に、私はペンを持っていますっていうふうな言葉を使ったとします。
これって実はいろんな意味の取り方ができると思うんです。
私はペンを持っています。そのペンは自分の手元にあるかもしれないし、
自分が持っているけれども、今手元にはないものを私はペンを持っていますっていうかもしれない。
いろんな取り方ができちゃうんですね。
でもプログラミングの中では、そういうふうにいろんな解釈の仕方、意味の取り方ができちゃうようなものだとよくはないですよね。
必ず一つの言葉には一つの意味しかないというようなプログラムじゃないといけない、言葉じゃないといけない。
ということで専用の言語っていうものが存在します。
もちろん英語に若干似てはいるんですけれども、同じような単語を使ったりもするんですけれども、英語じゃない別の言語です。
C言語とかC++とかPythonとかRubyとかJavaScriptとかいろんな言語があります。
これは用途によって、こういう分野だったら便利だよとか、こういう分野だったらちょっと不利だよということで、
いろんな得意不得意があるのでいろんな言語っていうものが存在します。
ただ基本的な仕組みってそんなに変わらないんですね。
上から順番に実行していきます。上からプログラムの一番上の方から順番に実行していきます。
で判断。他の言語だとif文っていうふうに言われます。
36:02
if文があります。あるいは繰り返し、for文とかrepeat文とかいろいろ言われますけれども、そういうふうな文章、繰り返し文があります。
そして先ほどの通り上から順番に実行しつつプログラムの流れていきますという流れ。
この流れは基本的に大きくは変わりません。もちろん若干違うものがあったりするんですけども。
だからこそ基本的なプログラムの仕組みだけはまずこのスクラッチで覚えるのがいいんじゃないかなっていうふうに思っています。
なので今回はスクラッチを例題として最初使いました。
っていうのもやっぱり新しいものがプログラミングの世界だとすごくどんどん出てくるんです。
プログラミングの世界って本当に新しいものっていうのがいっぱいあります。
言語もそうですし新しい言語っていうのも出てきます。
自分が39歳なんですけども、C++っていう言語がこれが自分と同い年で39年前にできました。
でもその後にも本当にいろんな言語が出てきています。
ここは詳しくはこれから調べるんですけども、
例えばPythonとかRubyとかあとはRustとかGoとかいろんな言語が出てきています。
こういうような言語もっともっとC++新しいです。
こういうような言語が今いっぱい出てきています。
だからここで今プログラミングの言語っていうものを覚えたとしても、
皆さんが大人になる頃にその言語使われてないかもしれないんですね。
今、C++って本当に39年前の言語っていうふうに言いましたけれども、
この言語も昔ほどには実は使われてません。
今もまだもちろんC++使う人もいっぱいいます。
それじゃないと作れないっていう環境もあるんですけれども、
ただそういうような分野も徐々に他の言語に変えていけましょうねということで置き換わっています。
なのでこういうふうにいろんな言語を覚えても、
その場で大人になった頃には使わないかもしれない、なんてことは結構あります。
だからこそ仕組みとか考え方とか、
そういうあんまり変わらないものをまず覚えておきましょう。
っていうふうに思うので、今回こういうようなマイキングをやりました。
次回からではありますけれども、というところでここから次、分岐します。
ここまでの2時間20分で、
これはいけそうだっていうふうな感じがあれば分岐1。
そうでなければ分岐2に移動します。
まずは分岐1の話からしていきます。
これたぶんスライドを先に全部作っておいて、
39:03
話の流れでどっちに飛ぶかを決めるっていう感じにすると思います。
来月10月ですね。
10月のプログラムはJavaScriptという言語を作っていきます。
このJavaScriptというのは先ほど言ったプログラム言語の一つです。
プログラム言語大人になった頃にはみんな大体別の言語を使ってますよというふうに言いましたけれども、
実はプログラム言語って別にいつから始めても構わないんですよね。
何歳でプログラミングやってても全然構いません。
実際、今最年少のプログラマーの方は6歳11ヶ月だそうです。
今7歳ですね、の方です。
そういうようなプログラムももちろんいます。
だって別に仕事のあるプログラムを作るのだけがプログラミングではないので、
こういうような環境を使って何かを作るっていう方もいます。
だから今ある言語をとりあえずやってみましょうっていうのが今回ですね、おみくじとプログラムを作っていきます。
こちらも早速お見せしますか。
多分紹介をする余裕はあまりないと思うので。
おみくじのサンプル。
クリックするたびにここの小吉とか中吉とかが出るようになってます。
多分生徒さんがやる環境だと4つの結果が均等に出てくる感じにするかと思います。
これは実はちょっと均等に出ないようになってるんですけどね。
小吉がすごい出やすくて次に中吉が出やすくて、大吉と今日は同じぐらいに少ないっていう感じになるんですけども。
これは多分均等にして、もしオプションでできるようだったら小吉が出やすくしてみましょうとかそういうのを言うかもしれませんぐらいの感じです。
分岐にのほうに移ります。
分岐の場合はちょっとスクラッチをもっと深く、スクラッチでもっとプログラムをいろんなプログラムを書いてみましょうっていうような感じでいきます。
個人的には実はこっちには来てほしくないです。
というのはスクラッチのネタ全然考えてないからです。
こっちに来られると、全部一から考え直さなきゃいけないんで、できれば分岐一に進んでほしいなっていうふうに自分も願っています。
42:07
そういうふうになるんじゃないのかなと、今までのお話を聞いてと思っているので、今度どうな感じになってくれるといいなっていうふうに思ってます。
ここについてはやってみないとわからないよね。なんとも言えないです。
JavaScriptだと、例えば調べ方とか、まだ全然書いてないですけど、どうやって調べればプログラムってわかりやすいのかなとか、
どういうふうにやればプログラミングのいろんな情報を調べられるのかなとか、そういうような情報を教えることもしやすくなるので。
スクラッチだと、例えばこういうことがわかんないときはどういう調べ方をしますよとか、そういうふうな検索の仕方ってたぶんやらないと思うので。
たぶんそういうのが出てこないと思うんですけど、JavaScriptだと、例えばリファレンスのサイト、MDNとかを引っ張って単語で調べるとか、そういうような勉強もできると思うので。
たぶんその辺も含めて分岐位置いってほしいなっていうのは個人的な思いです。
とりあえずここまでで1日目は終わり。
2日目にも内容を考えているのでそちらだけお話をしていきましょう。
おみくじのプログラムも先ほどお見せしましたね。
ランダムな基地9、小基地、中基地、大基地が出るっていうようなものです。
ただこれをいきなりやってしまうと、そもそもキャンバスはつかないんですけども、テキストをどうやって表示するのかとかそういうような基本的な内容も全部ここでやっちゃうことになるので、
先ほど四角形を書くとか五角形を書くとか、これって共通点ありますよねみたいな質問をしたとおり、もうちょっと簡単な課題を作ろうとも思っています。
例えばテキストボックスに何か文字を表示するだけとか、そういうようなすごく簡単なプログラムをいくつか書いてみて、
中間的な内容でおみくじプログラムを作ってみましょうかっていうふうな形で書いていこうかなというふうに思ってます。
その次ですね。こんなこともプログラミングではできるよということで、音楽を鳴らすプログラムっていうのをちょっとお見せしようかなというふうに思ってます。
これはたぶん見せるだけになるんじゃないかなというふうに思います。
ちょっとこれを見てみましょうか。せっかくなのでこれもあります。
45:01
これは音流れているかな。
はい、聞こえます。
こんな感じで音を流すプログラムというのがあります。
たぶんこれは全文は説明しないんですけれども、Tone.jsというライブラリを使ってゴリラをやっていますよってことと、
Tone.jsはこういうふうに書くと、ToDestinationまではお決まりの文句なんですけれども、
この文句を書いた後に、音を鳴らす。Cの4番とか、Cってドですね。ドの4番目。4オクターブ目のドを鳴らしなさい。
鳴らす時間は何秒ぐらいですよっていうふうな時間の指定をして音を鳴らすっていうふうにやってます。
ただ、プログラムってここがすごく面白いところで、例えばドリミファソラシドを鳴らしますっていうふうになると、
CDEFGABを鳴らしますっていうふうになるんですが、これを全文一個一個書いていくのってちょっとめんどくさいですよね。
そういうようなときに少し楽な書き方ができるっていうのがプログラミングです。
今回はForEachという繰り返しの文章を使って、Cを鳴らして、Dを鳴らして、Eを鳴らしてっていうのを、
最後までCDEFGAB、最後Cまで鳴らしていくっていうプログラムをForEachっていうプログラム。
1行だけで実現をするようにしています。
ここはあんまり詳しく説明しません。多分そこまで説明されてもForEachまで全部わかってない方には大変だと思うので、
こんなことできますよ、程度で。紹介して終わりにしようと思います。
だいたいこんな感じでプログラムの紹介をしていって、
2日目もここぐらいで2時間かそこらにはなると思う。
プラス、多分3、4日に向けたお話、どういうような感じでやりますよっていうような形を紹介して、
2日目はおしまいっていう感じになると思います。
3、4日目の内容とかもその辺も含めて、とりあえず1日目が終わった後に決めていこうかなというふうに思っていますので、
今のところ資料はこれぐらいです。
できればこっち側の方面に来てほしいなっていうのはありますけどね。
これは行ってみないとわからないですね。
1日目と2日目の間のブランクが1回ぐらいあるっていうのが気になりますね。
どう使うのがいいんでしょうね。
それに2日目の後の1ヶ月っていうのは、
例えば3日目、4日目はちょっと実際に何かアプリを作ってみてもらおうかなというふうに思っています。
48:07
そして最後に発表会をちょっとやっていきたいなと思います。
なので、どういうふうなものを作っていきたいのかっていうのを考えてみてくださいで締めるっていうことができるんですけども、
1日目ってすることができないので、だからどうなるかなって思うですよね。
続きのときは宿題を出せないですからね。
2日目の宿題は何作るか考えておいてになるんですけどね。
1日目の宿題は納得ないなって感じになっちゃうので、そこがわかんないですよね。
気持ちが高まってくれればね。
あ、ちなみに言うのを忘れていましたが、今回の生徒さんみなさんはChromebookを持ってるそうです。
HPのChromebookで普通に性能が良くて、むしろ私にそれくださいって言うぐらいの性能でした。
そういうやつです。
もし1日目で面白いと思ってくれればいいやってくれる可能性は十分にあるんですけどね。
たぶんスクラッチって仮にオフラインでも動くはずなので、ある程度自分の家で作っていろいろ遊んでってことはできると思います。
たぶんそこで何かやってみたいものが見つかるっていうケースもあるでしょう。
そのChromebookをみなさんがどういうふうに使ってるのかってのは正直よくわからないので、
本当に学校でしか使ってないのか、家でも使ってるのか、家の環境もわからないですからね。
自分たちが想定をするような家の環境だと、普通に無線LANがあって、インターネットがつながって、
あるいはスクラッチのアカウントとかを持ってて、個人で。
一応学校のほうでは使わないでねって言われてるんですけども、
個人が持ってるってことだったらわからないですからね。
なので、スクラッチのアカウントとか持ってて、
あるいは2日目には一応JavaScript、コードペンを使って今回やりましたけれども、
実際は、一瞬チラッと出ました。このWebMakerというものを使おうと思っています。
これは実はコードペンとほとんど同じで、JavaScriptとHTMLとCSSを使って描く環境なんですけれども、
51:03
アカウント作んなくても情報が保存できるってとこは違うんですよね。
例えばこれ、セーブってやると、普通にセーブできちゃうんですけども、
オープンって言うとこうやってMyLibraryってのが開くんですね。
このLibraryの中から好きなものを読み込んで書き込むことができる。
なので、全くこれアカウント作ってなくても、ファイルの保存と読み込みしたり新しく書いたり
っていうようなことができるんですよっていうような感じになります。
スタートして、これで空っぽにしてもオープンで復元をすることができちゃうっていうような環境なんですね。
これはいわゆるローカルストレージという仕組みを使っているので、
これはパソコンの中にこの書いた情報を保存しています。
なので、皆さんがChromebook持ってきてるので、
Chromebookの中にデータが保存されますよっていう感じになります。
なるほど。Chromebookだったら別ブラウザー使ってどうこうって心配もないですね。
だからとりあえず5日間データを持っててもらう分だったら全然問題ないよぐらいな使い方ができるかなっていうふうに思ってます。
これを使ってプログラムを書いてってもらうっていうことぐらいはできると思うし、
ひょっとしたらこれぐらいできるよっていう方もいらっしゃるかもしれないというふうにちょっと思ったりはしています。
これもまたわからないですよね。
もう本当に1日目でどれだけ皆さんの雰囲気を把握できるかっていうのが勝負になってくるかなという感じになりますが、
とりあえず大体こんな感じでやっていこうと思います。
そんなところでとりあえず今回のオープナーデモとしてはこのぐらいでおしまいという感じになりますが、
最後にこのSIDE BEACH CITY.としてそもそもなんでこんなことをやるのかっていう話もちょっとお話をしていきましょう。
SIDE BEACH CITY.としての今後ですね。
SIDE BEACH CITY.としてのというより自分としてSIDE BEACH CITY.でこういうことをやっていきますよという感じになってくるんですけれども、
やっぱり自分としてはプログラミングってプログラマーだけのものでは今後なくなっていくだろうなっていうふうに思ってはいるんですね。
例えば料理を例にとってみましょう。
自分は料理をプログラミングと料理を結構ひも付けて言うこと多いですけれども、料理の場合ってプロの方もちろんいらっしゃいます。
レストランでプロとしてシェフでいろんな料理を作ってそれでお金を稼いで成形立てていらっしゃる方いらっしゃいます。
54:05
一方家庭料理を作る人もいるし自炊する人だっています。
もちろんその中では味に全然違うとか違いとかあるかもしれませんけれども、どちらも料理をするという点で言えば変わりありませんよね。
大工さんも多分結構同じところがあります。
今の時代だと家具を作るぐらいだったら個人でもやるっていう方いらっしゃると思います。
椅子ぐらいなら自分で作るよ。歯磨きの歯ブラ次第ぐらいだったら自分で作るよっていう方いらっしゃるかもしれません。
木工材とか陶芸とか今だと3Dプリンターとかもありましたよね。
そういうようなものを使って自分が必要なものは自分で作るよっていう人もいると思います。
一方はもちろんプロもいます。
家を建てるとかいうレベルのこともできる人もいますし、あとは本当にDIYと同じで椅子を作ったりテーブル作ったりとか家具を作る方もいらっしゃると思います。
そしてプロっていうのの違いはやっぱり教授もので安全な作り方を知っているとか、そういうところになってくるのかなというふうに思います。
だから基本的に作れることは作れるんですけども、やっぱりそこででもプロとそうでない人の変化は生まれてくるよね、差は生まれてくるよねっていうのが、
それぞれ大工さんだったり料理だったりのところになってくるんじゃないかなというふうに思います。
プログラミングも同じことが言えるのかなっていうふうに個人的に思っていて、
例えばより長持ちで拡張性のあるプログラム。
要するに何か変更がありましたよ、こういうようなところ変更してくださいねって言われても、
その変更に応えやすいプログラムっていうのはやっぱりプログラマーじゃないと書きづらいっていうところはあります。
ここは長年の経験が物を言うので、例えばここを変えてこういうふうにしておくと変更に耐えやすくなりますよとか、
ここをこういうふうにしておくと変更したときにその内容がわかりやすくなりますよとか、
そういうノウハウを持っているのはやっぱりプロとして長年やってきた経験がある方になってくるかなと思います。
一方、単機能だけでも自分に最適なプログラムっていうのは個人が作れるようになってくるっていうのはあると思います。
今だとせっかくプログラミングの開発環境って結構無償で手に入るものも多いので、
簡単なものだったら個人で自分で作るっていうことも多くあると思います。
今回学生さん相手なのでっていうこともあるので、
多分聞かれる質問としてYouTuberやりたいってこともいらっしゃるんじゃないかなと思ってたりするんですけども、
そこで言っておきたいのは、例えば自分音声配信を結構したりしてるんですけども、
そのとき自分でBGMをつけるっていうプログラムを自分で作ってるんですね。
57:02
例えば音声で喋った言葉に何かのプログラムを通すと、
その音声にBGMをくっつけて適当にこれでアップロードしてOKですよっていう状態にしたものを作ってくれるっていうようなプログラムを作ってあります。
毎週、例えば曜日ごとにつけるBGMを変えたりとかいうようなことも、
そのプログラムを作ってあるおかげで簡単にできるわけですけれども、
個人が自分がやっていること、例えばYouTube配信だったり音声配信だったり、
そういうようなものを簡略化する、簡単にするための補助プログラムって個人で作れるようになっておいたほうが便利じゃないかなというふうに思います。
たぶんYouTuberとプログラムってすごく相性はいいんじゃないかなと思いますということもちょっと後で説明しようと思います。
こんな感じで個人でやるようなプログラムは個人で作れるようになるのが理想の一つじゃないのかなというふうに個人的には思っています。
というところで、こんな形でプログラミングをもっと身近にすべく、
プログラミングってあるんだよってことをみんなに知ってほしいので、
やっぱりこういうようなプログラミングの講座ですとか、プログラミングをより多くの人ができるようになるための仕組みですとか、
いうようなことを教えていけるようなことをやっていければいいかなというふうに思っています。
なのでこういうような講座も受けています。
もしこういうような講座とかこういうような相談とかしたいよというような方いらっしゃいましたら、
サイダービーチのほうにお問い合わせいただけるとうれしいなと思います。
ということで、今回の内容はだいたいこのぐらいで締めていきたいと思います。
こんな感じでプログラミングの講座も、あとはそのほかアプリケーションの使い方の講座説明も
サイダービーチシティでは行っていきたいと思います。
お気軽に皆さんもこういうようなところで絡んでみたい、関わってみたい、
自分に何か教える側になってみたい、講座を作ってみる側になりたいという方もお待ちをしております。
自分たちサイダービーチシティのほうにお問い合わせいただければと思います。
というところで、どうでしょう、何かこれは言っておきたいとかありますか、フィーネさん。
プログラミングプログラマーのものだけじゃないといけない。
最近DXのデジタルトランスフォーメーションの流れって本当それで、
従来のやり方に乗っかっていくんだったら仕事の話ですけど、
社内の情報システム部門とか詳しい人にこのツール作ってくれって依頼するっていうのが今までのやり方なんですけど、
デジタルトランスフォーメーションはあれはユーザーが実際に作る。
そのシステムを使う人が作るみたいな動きがあるので、
1:00:04
簡単なやつだったら自分たちですぐ書いちゃうっていうのがあって、
本当はプログラマーだけのプログラミングは誰がやってもいい。
というか誰でもやれるほうが望ましいって思う。
シフトシステムあるんでいい流れだなと思います。
そうですね。やっぱりSBCastでプログラマーの方にお話を伺ったときも結構共闘したキーワードで出てくることが多いのが、
プログラマーじゃない人もある程度プログラミングをしてたほうがいいよねっていうようなことだったりします。
例えばくじろい飛行図形さんのときなんか、
そういうふうにプログラミングを多くの人が知ってれば知ってるほど、
逆にプログラマーの立場ってよくなるよねっていうふうに思っているっていう話もありましたし、
やっぱり自分も個人的にそういうふうに思いますので、
やっぱりそういうようなプログラミングをもっとより多くの人に、
多少でもいいので知っててほしいなっていうふうに思いますというところですよね。
はい。
というところで、
今日のサイドビッチのSBCオープンマイクNo.60、
プログラミングを学ぼうについてはこれにて終了とさせていただければと思います。
こちらの内容ですね、
本当にサイドプログラミングの講座については、
あちらの方の意向次第ではなりますけれども、
あとで、
例えばこんなことをやりましたよということで、
ブログレポートとかにも書いていければいいなというふうに思っていますので、
今後の活動報告等をお楽しみにしていただければと思いますというところで、
今回のSBCオープンマイク以上で終了とさせていただければと思います。
どうもありがとうございました。
はい。ありがとうございました。
