Skip to content

Instantly share code, notes, and snippets.

@Hayao0819
Last active November 9, 2021 07:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hayao0819/fca34e7e6fb671439c713221e6442dec to your computer and use it in GitHub Desktop.
Save Hayao0819/fca34e7e6fb671439c713221e6442dec to your computer and use it in GitHub Desktop.
台本
❶これから33班の発表を始めます。礼
❷さて皆さん、プログラミングってなんかよくわかんないけど、かっこよくないですか?
エリートって感じが満ち溢れてますよね。今回僕らは、プログラミングを学ぼうと奮闘しました。
❸今の世は皆さんご存知の通り、情報化社会です。小学校でプログラミング教育が始まるほどになっています。ただ、情報を扱う職業に需要があるのに、肝心の技術者が少なめなんです。収入は割とありますし、良い獲物じゃないですか。どうです皆さん、プログラミングやってみたくなりませんか?
❹ひとまずプログラミングの基礎を調べました。けど面倒くさかったです。そこで、どうせなら楽しく、あわよくば分かりやすくという野望のもと、ゲーム制作の過程でプログラミングを学ぶことにしました。しかし、今回の探究はあまり時間もなかったので、誰でも知っている簡単なゲームを再現してみました。
スマホやパソコンなど、どこでも動かせるように今回はウェブサイトでゲームを作りました。
❺そもそもプログラミングとは、コンピュータへの命令のことです。例えば、掃除機を動かすコンピュータに勝手に掃除しろ、と命令すればルンバとかができるわけです。
流れとしては、
①まず、コンピュータにしてほしいことを指示します。けれど、[たくさん]とか、[すごく]みたいに、フワフワした指示ではコンピュータは困っちゃいますから、そこは具体的にする必要があります。
②その指示をコンピュータが理解できる言語で書いてあげます。
終わりです。やっぱり難しいのはプログラミング言語のとこですよね。ゲームを通して見てみましょうか。
まず、ゲームを作る土台を作成します。タイトルや文字などが表示されている部分が該当します。これが「HTML」です。
しかし、まだ見た目が足りませんね。「CSS」というものを使って見た目を設定してあげます。
それでもまだ肝心なゲーム本体がありません。「JavaScript」という言語を使って
🟠❻では、実際にやってみましょう。わかりやすくて手軽そうなゲームとして、🟠❌ゲームを作ることにしました。仕組みとしてはこんな感じです。
<仕組み説明>❺をふまえて
🟠❼実際にやってみて、
プログラミングは案外単純。だけどすべてを指示しないといけないので面倒でもあります。
なのに色々できる→可能性凄い
❽まとめ 
どうでしたか皆さん。
とっつきにくいイメージの有りがちなプログラミングも少しは可愛く見えてきたのではないでしょうか。ただ、プログラミング基礎力の習得には目安200時間とか掛かるらしいので、今回だけでは流石の皆さんも辛かったと思います。僕らとしては、これで少しでも、皆さんを情報業界に引きずり込めたのなら満足です。これで終わります。
1.始め
これから発表を始めます。礼
[鳥羽]
2.動機
🟠さて皆さん、プログラミングってなんかよくわかんないけど、かっこよくないですか?
エリートって感じが満ち溢れてますよね。今回僕らは、🟠プログラミングを学ぼうと奮闘しました。
3.プログラミングについて
今の世は皆さんご存知の通り、情報化社会です。小学校でプログラミング教育が始まるほどになっています。ただ、情報を扱う職業に需要があるのに、肝心の技術者が少なめなんです。
収入は割とありますし、良い獲物じゃないですか。どうです皆さん、プログラミングやってみたくなりませんか?
最初にプログラミングの基礎を調べました。🟠けど面倒くさかったです。そこで、どうせなら楽しく、あわよくば分かりやすくという野望のもと、🟠ゲームを通じてプログラミングを学ぶことにしました。
🟠そもそもプログラミングとは、🟠コンピュータへの命令のことです。例えば、掃除機を動かすコンピュータに勝手に掃除しろ、と命令すればルンバとかができるわけです。
🟠まず、コンピュータに指示する具体的な内容を図に表します。「たくさん」とか「すごく」のようなふわふわした指示はできません。「クリックされたとき色を変える」など全てを細かく考えます。
次に、図に描いた指示をコンピュータが理解できる言語で書いてあげます。
ーーーーーーー交代ーーーーーーーーーーー
[高鳥]
4.ゲーム作り その1
🟠今回はわかりやすくて手軽そうなゲームとして、◯×ゲームを作ることにしました。
ウェブサイトは主に「土台」「見た目」「動き」で構成されています。
🟠[土台]では、画面上に表示されるボタンや文字、🟠[見た目]では、その文字の色や余白、大きさ、最後に🟠[動き]で具体的なゲームの処理を指示します。
5. ゲーム作り その2
🟠まず、ゲームのマス目、文字などを画面に表示します。
クリックされると、ゲームは「クリックされた座標」と「クリックしたプレーヤー」を記録し、次のプレーヤーへ交代します。
このタイミングで、状況を判定します。
勝利判定は、「座標とプレーヤー」の情報をもとに、[同じ人が同じ座標軸のマス目を全てクリックしたら、その人の勝ち]ということになってます。
6. 独自の機能
🟠更に私達はマス目とプレーヤーを増やせる機能を作りました。マス目を増やし、3人で遊ぶこともできます。
7. ゲーム作り その3
🟠🟠これが実際のゲームの中身です。
🟠専用のシステムを使って、「誰が、いつ、どこを変更したのか」が全て記録されるようになっていて、更新履歴を細かく見ることができます。
8.まとめ 
🟠実際にやってみて、プログラミングの構造は、🟠案外単純だと気付きました。それでも🟠様々なことを可能にしていますよね。🟠プログラミングの可能性は計り知れません。
🟠とっつきにくいイメージの有りがちなプログラミングも少しは可愛く見えてきたのではないでしょうか。
僕たちは今回、身近なアプリやサイトがどう作られているのかを垣間見ることができました。手元の資料から実際に遊べますので、ぜひ一度試してみてください。
9.これで終わります。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment