コンソールログと向き合うだけのプログラミング学習に飽きた人へ
ええの出ましたよ＾＾
その名も
「ぷよぷよプログラミング」
これは私あきらお兄さんも気になりますね～
今回はぷよぷよプログラミングについて記事を書いていこうと思います。
こんな時ありませんか？
でも
普段のプログラミングの勉強ってログ見たり、
レイアウト変わるだけでなんかつまらんなー。。。
あのぷよぷよがプログラミングの教材出したらしいでー♫
あのぷよぷよがプログラミング教材だしたって？
ただのキャラの画像だけ使いまわしただけで、
どうせログとか出してログに名前が出てくるだけの教材でしょ？
プログラミング学びながらぷよぷよ動かせるらしいねん☆
ということで、
ぷよぷよプログラミングというのが出たらしいので
やってみようかなーと思います。
こんな人におすすめ
・プログラミングの勉強してるけど、コンソールログで正解確認するだけの問題に飽きた人
・最近ぷよぷよプログラミング出たけど実際どうやって遊べばいいかわからない人
・息抜きしたいけどプログラミングの基礎を勉強したい人
・楽しみながらプログラミングの基礎を勉強したい人
などなど
この記事を書いた目的
・ぷよぷよプログラミングやってみたいけど一人で調べながら実行するの難しい人もいるかな？と思って、あきらお兄さんが分かりやすくやり方を説明してみようかなと思いました。
・あと、実際にゲームを動かしながらとか
自分で作ったもので自分で遊びながらプログラミングを勉強できる仕組みはまだ日本に少なく
貴重なプログラミング教材だと思い、ぜひ広がってほしいと思ってます
・また、本来、プログラミングは苦しんで勉強するものではなく、楽しみながら試行錯誤して成長するものなんだ。ということも伝えやすいと思いました。
・しかも、ぷよぷよをプログラミング教材に起用したのが絶妙に素晴らしいですね。
シンプルかつ楽しいかつとっつきやすい、このプロジェクトを考えて遂行したSEGAさんMonacaさんのプロジェクトメンバーの方々を尊敬します。
そんなこんなで、
「このぷよぷよプログラミングという【楽しんで学べるプログラミング教材】を
より多くのプログラミング興味ある人にわかりやすく使い方を紹介したい」
と思います。
ぜひご覧ください。
ぷよぷよってなに？
世代違う方もいるかもしれないので、
念のため、ぷよぷよってなに？という説明をしておきます。
『ぷよぷよ』（Puyo Puyo）は、株式会社コンパイルが発売した落ち物パズルゲームのシリーズ。また、このシリーズにブロックとして登場するスライムタイプのモンスターの名前でもある。どちらも縮めて「ぷよ」と呼ばれる。
ぷよぷよというゲームは
横6マス縦12マスのフィールドに
2個1セットで落ちてくる様々な色のぷよぷよ(以下ぷよ)を積んでいき
「同じ色のぷよを縦横4つ以上にくっつけて消す」
というのがシリーズ共通の基本ルールである。
また、4つくっついたぷよが消えることでその上に乗っていたぷよが下に落ち、
再度4つくっついて消えることで起こる連鎖という現象がシステムの根幹を成しており、
ぷよの消した数や連鎖した回数に応じて相手のフィールドにおじゃまぷよという4つくっついても消えないぷよを対戦相手のフィールドに降らすことができる。
（おじゃまぷよは隣接した色ぷよが消える際にあわせて消滅する）
最終的にぷよが落下してくる個所（左3列目）が上まで埋まってしまうとゲームオーバーとなる。
といった感じのゲームです。
文字にするより動画の方が分かりやすいと思うので、
ぷよぷよしてる動画をこちらに貼っておきます。
このぷよぷよプログラミングで学べる内容
学べる内容はこんな感じ。
- Javascriptの文法
- インデントの入れ方
- コメントアウトの方法
- Javascript,HTMLのファイルの作成方法
- HTMLの動き
- デバッグしながら開発する体験
- 成果物を意識しながらプログラミングを進める体験
など、
実装したソースコードがどう動くのかを
デバッグしながら学べるのはとてもいいですね＾＾
用意するもの
用意するものは以下です。
公式サイト：http://puyo.sega.jp/program_2020/
- パソコン：デスクトップでも、ノートでも、ipadとかタブレットでもOK
- インターネット：有線でもwifiでももちろんOK
- メールアドレス：アカウント作成するのに必要なので、メール受信できればOK
- プリンター：紙で小冊子見たい人は必要かもだけど、ブラウザで見る人はなくてもOK
- 気合：そんなに気張らなくてもOK
それぞれ用意してからぷよっちゃってください。
さあ、やってみよう！
概要紹介
公式サイトはこちら
【公式】ぷよぷよeスポーツ×プログラミング
http://puyo.sega.jp/program_2020/
学習を始める時は、こちらのサポートページを見ながら進めてみよう。
「ぷよぷよプログラミング」サポートページ | Monaca Education
https://edu.monaca.io/puyo
このサポートページから、
- アカウント作成
- ログイン
- プロジェクトのインポート
- ガイド小冊子のダウンロード
など行うので、ブックマークしておくといいですね。
まずはmonaca アカウント登録
まずは画面右上の緑色のボタンを押してアカウント作成しましょう。
すると、アカウント作成画面に移動します。
アカウント作成画面で
- メールアドレス：メール受信できればなんでもOK
- パスワード：半角英数字7文字以上でOK
を入力して、緑の「アカウント新規作成」ボタンをクリック！
そうすると、以下の画面が出て確認メールを送ったとのこと。
自分のメールアドレスのメール受信ボックスを見てみると、本登録ボタン付きメールが届いてますね。
届いてない人は、メールアドレスの打ち間違いか、自分のメールボックスで迷惑メールフォルダに入っているなどの可能性が高いので各自確認してみてください。
メールを確認したら、真ん中の「本登録はこちら」ボタンをクリックします。
すると、「Monacaをはじめる」画面が表示されるので
Freeプランを選択し、お名前を入力して、「次に進む」ボタンを押します。
（学校名はなくてもOK）
規約に同意するウィンドウが出てきます。OKをクリック。
これで新規登録完了ですね。
ダッシュボードに進むとこんな感じの画面が出てきますので、
このページをブックマークしていつでもアクセスできるようにしておきましょう。
【ダッシュボード画面】
これでアカウント作成は完了です。
※ ちなみに、パソコンのwebブラウザですが、Internet Explorerでは表示されません、Google ChromeかMicrosoft Edgeをご利用下さい。
※ サポートページでは、「デバッガーアプリのインストール」が準備ステップには書いてありますが、今回はぷよぷよを早く動かしたいので飛ばします。
monacaに初級編をインポート
それでは次に、ぷよぷよ初級編のプロジェクトをインポートしていきましょう。
先ほど概要紹介したサポートページを開いてください。
「ぷよぷよプログラミング」サポートページ | Monaca Education
https://edu.monaca.io/puyo
このサポートページ下部に以下のような「ぷよぷよプログラミングに挑戦」セクションがあるので、そちらの「初級コースを始める」ボタンをクリックしてください。
そうすると、Monacaサービスのインポート画面へ移動します。
ここで、「インポート」ボタンを押してください。
押したらこのように、先ほどのダッシュボード画面に、「ぷよぷよプログラミング初級」というプロジェクトが表示されています。
これで、プロジェクトのインポートが完了しました。
初級編のコードを打っていきましょう
サポートページで紹介されている
ガイド小冊子（PDF） を見ながらIDEで初級編をやってみましょう。
まず先ほどのMonacaのダッシュボード画面にいき、
インポートした「ぷよぷよプログラミング初級」をクリックし、
「クラウドIDEで開く」ボタンをクリックします。
すると、このような開発環境が表示されます。
この開発環境の操作方法は以下のようにガイド小冊子に載っているので、そちらを見てみてください。
今回ぷよぷよ プログラミングのセッションは５つあります。
- SESSION 1：「ぷよぷよ」が落ちてくる
- SESSION 2：「ぷよ」を左右に動かす
- SESSION 3：「ぷよ」を回してみよう
- SESSION 4：「ぷよ」を消してみよう
- SESSION 5：「ぷよ」を変えてみよう
それぞれガイド小冊子に載っているソースコードをそのまま開発環境に書いていく、という内容になっています。
それではいきますよー＾０＾
SESSION 1：「ぷよぷよ」が落ちてくる
小冊子のSESSION1を見ると、
ぷよぷよまずは落として！ってことが書いてますね。
おそらく開発環境の右側にぷよぷよが落ちてきて欲しいんでしょうね。
小冊子をよく読むと、Javascriptで書いて、文字の打ち方やインデントの基本を抑えながら実際のソースコードをコピペではなく、自分の手で書いていきましょう！
という感じのことが書いていますね。
まずは「自分で書いて動かす！」の体験をしましょう！ということですね。
それでは早速実際に開発環境の中のJavascriptファイルにプログラムを書いてみます。
まずは、player.jsをにソースコードを書いていくので、
真ん中のエディタにplayers.jsを表示します。
フォルダ階層は「www/src/」直下にあります。ダブルクリックでエディタで開けます。
そして小冊子の指示を見ると、
初級編は189,190,192,193行目を書いていくみたいですね。
実際にソースコードに書いていきましょう。
ソースコードを書いて「保存」すると、
なんと！！！
右側のプレビュー画面でぷよぷよが落ちてきました！
はい、ぷよぷよが動きました！！！
このように、IDEにソースコードを写経することによって、
ぷよぷよが実際に動きました。
このように、
ガイド小冊子に従って、
IDEにソースを打ち込んで進めていきます。
- SESSION 2：「ぷよ」を左右に動かす
が出来たらこんな感じで横に動かせる。
- SESSION 3：「ぷよ」を回してみよう
が出来たらこんな感じで落ちてくるぷよぷよを回転できる。
- SESSION 4：「ぷよ」を消してみよう
でぷよが同じ色が４つ以上つながると消える。
- SESSION 5：「ぷよ」を変えてみよう
が完成する頃には、毎回落ちてくるぷよぷよの色が変わり
本当のぷよぷよが完成されるという訳です。
こんな風にね＾＾
以上の通り、
実際にソースコードを打ちながら、
ぷよぷよを動かすことができることを体験しました。
中級編、上級編について
初級編が終わりましたが、
中級編や上級編も
今回は解説は抜粋しますが、実際にやってみる価値は大いにあります。
プログラミングの初級編ではわからなかった変数や関数の定義がしれますし、
０から作成するとまた達成感も上がってきます。
今回のぷよぷよプログラミングという教材を通して
Javascriptの書き方だけではなく、
ゲームの流れ、キー入力によるキャラの制御、デバック方法、
自分でエラーを直す力を学べるなーと感じました。
最後にメッセージ
プログラミングの勉強ってしんどいですよね。
私自身も最初大変しんどかったです。
一生懸命コード書いて、
エラー出て、
やっとエラー解決したと思ったらまたエラー出て、
結果、解決してもログしか出ないから
あんまりプログラミングやってる実感がわからなくて、
「で、これできたからどうなん？」感があって、
プログラマとして成長してるのかわからない。
「あれ、俺なにやってんだっけ？」って最初勉強してるときはよく思いました。
でも、こうやって、
「ぷよぷよという面白いゲームを作るためのプログラムを今私は作っているんだ」という実感の中で、
一つ一つのプログラミング文法を学んでいくと
「あーなるほど、だからif文が必要なんだ」
「おお～配列って便利やな～」
という感じで、文法の価値を体感しながら学べるので、かなり効率よく楽しくプログラミングを学べるかと思います。
英語を学ぶ時も
「テストで良い点をとるために英語の教科書を見る」よりも
「目の前のアメリカ人の友人を笑顔にするために英語の教科書を見る」方が勉強になったりしますもんね笑
「自分たちが作ったサービスで人々が笑顔になる」
これは
プログラマにとって最高の喜びであり、
プログラミングの醍醐味だと私は思います。
ぷよぷよは、既にこれまでたくさんの人々を楽しませ続けてきました。
このぷよぷよプログラミングという教材は
プログラミングの醍醐味を疑似体験しながら
プログラミングを学習できる貴重な教材だと思います。
ぜひこちらの記事を読んでいただいた方々も
ぷよぷよプログラミングで
楽しくプログラミングを学んでみてください。
プログラミングを学習するという点だけでなく、
プログラミングの醍醐味を疑似体験できるという点でも
かなりやる価値あり！と
私あきらお兄さんは感じました。
最後に、
プログラミングは手段です。
プログラミングができることで、
人を笑顔にすることもできるし、
人を悲しませることだってできる。
人を守ることもできるし、
人を傷つけることもできるし、
人が傷つかないように守ることだってできたはず。
大事なのは、
「プログラミング技術を手に入れた後に
その技術をなんのために使うか？」
です。
あなたはプログラミングができるようになったら、
どんな価値を生み出したいですか？
この記事が、
見てくれた方にとって、
より優しくなるために
より強くなるために
プログラミング学習を続けるきっかけ
になれたら幸いです。
ありがとうございました。
よいしょ！！！
舟越 彬
・プログラミング教える３児のパパ
・現役エンジニア（7年くらい）
・エンジニア育成の企業研修講師リピート多数
・焼肉とJavascriptとお酒とアジャイルが大好物
…etc
【SNS】
・twitter
日々、情報収集しているサイトをシェアしたり、僕の考えを軽くつぶやいてます。
ID： ＠akira_papa_IT
・Facebookページ
自分に関連する重要な出来事（ITや生活など）を書いたり、Youtubeやブログの告知を投稿しています。
ページ名： @あきらパパ【プログラミング教えるパパ】
・Line@
プログラマならではの悩みや相談を受けたり、プログラミングの知識をシェアしています。
公式アカウント名： @あきらパパのIT時短学習部屋
・tiktok
tiktok試しにプログラミング系の話をめちゃ短く軽く喋ってます。
ユーザー名： @akira_papa_it
ぜひフォローお願いしますー♫
