無料でぷよぷよを通してプログラミング学習できる「ぷよぷよプログラミング」が登場したので体験してみた

プログラミング学習環境のMonaca Educationで、セガの人気パズルゲームである「ぷよぷよ」を使ってプログラミング学習できる教材「ぷよぷよプログラミング」が登場しています。「ぷよぷよプログラミング」は無料で利用できるとのことなので、プログラミング初心者が早速チャレンジしてみました。

【公式】ぷよぷよeスポーツ×プログラミング
http://puyo.sega.jp/program_2020/

「ぷよぷよプログラミング」サポートページ | Monaca Education
https://edu.monaca.io/puyo

「ぷよぷよプログラミング」に挑戦するには、Monaca Educationにサインインする必要があります。というわけで、まずはMonaca Educationのアカウント作成ページにアクセスして、メールアドレスとパスワードを入力し、「アカウント新規作成」をクリック。

入力したメールアドレス宛にMonaca Educationからメールが送られてくるので、「本登録はこちら」をクリック。

利用プランを選択し、名前を入力したら「次に進む」をクリック。Monaca Educationは無料でも利用可能なので、今回は利用プランとして「Freeプラン」を選択しました。

利用規約に同意したら「OK」をクリック。

「ダッシュボードに進む」をクリック。

「同意する」をクリック。

これでアカウントの本登録が完了。Firefoxだと一部のボタンが表示されなかったので、ChromeでMonaca Educationを利用するのがオススメ。画面上には「新しいプロジェクトを作る」や「インポート」といったボタンが用意されていますが、記事作成時点ではここからぷよぷよプログラミングを見つけることはできませんでした。

そこで、「ぷよぷよプログラミング」サポートページを開き、初級・中級・上級の中から好きなコースを選択します。今回はずぶの素人ということで「初級コースを始める」をクリック。

「インポート」をクリック。

すると、Monaca Educationのマイページ上に「ぷよぷよプログラミング初級」が出現します。

実際にプログラミング学習をスタートするには、「ぷよぷよプログラミング初級」→「クラウドIDEで開く」の順番にクリック。

これがクラウド上で開かれる開発画面。画面左にはファイル構成、画面中央の赤枠部分にはプログラミングのソースコード、右には開発中の成果物が配置されています。画面中央のソースコードに手打ちでコードを入力していくことで、画面右に表示されていた開発成果物(ぷよぷよのイラスト)が、ゲーム画面へと進化していくはずです。

開発画面を開くだけではプログラミングの学習にならないので、ぷよぷよプログラミングの公式サイトへアクセスして、「『ぷよぷよ プログラミング』ソースコード一式」および「(PDF)『ぷよぷよ プログラミング』小冊子」をそれぞれダウンロード。この小冊子には開発画面の使い方や学習工程がまとめられているので、これに従って学習を進めていけばOK。なお、ぷよぷよプログラミングはソースコードを書き写ししてプログラミングに慣れていくことを目的とした教材であるため、基本的なJavaScriptの入力ルールなどの難しいことは考える必要はありません。というわけで、受講者はサンプルコードを正確にコーディングしていくだけでOKなので、さっそくチャレンジしてみます。

初級の場合、ステップは以下のように分かれており、すべてをクリアしたら上級コースに挑戦することが推奨されています。なお、初級の場合は入力量がわずか「28行」ですが、上級コースの場合は「1015行」です。

SESSION 1：「ぷよぷよ」が落ちてくる
SESSION 2：「ぷよ」を左右に動かす
SESSION 3：「ぷよ」を回してみよう
SESSION 4：「ぷよ」を消してみよう
SESSION 5：「ぷよ」を変えてみよう

例えば「SESSION 1：『ぷよぷよ』が落ちてくる」の場合、入力が必要なコードは全部で4行のみ。入力が必要な部分は「player.js」の189行目、190行目、192行目、193行目です。

ダウンロードしたソースコード一式を参考に4行分のコードを入力したら、「Ctrl」＋「S」キーを押してソースコードを保存。

すると、画面右の開発成果物が表示されるエリアに、ぷよぷよが出現。こんな感じで自分の入力したコードが正しいかは、ゲームが正しく機能しているかどうかで判断できるわけです。

あとはひたすら小冊子で指示される行のコードを書き写していけばOK。「SESSION 2：『ぷよ』を左右に動かす」が完了すると画面上部から落ちてくるぷよを左右に動かすことが可能になり、「SESSION 3：『ぷよ』を回してみよう」ではぷよの回転、「SESSION 4：『ぷよ』を消してみよう」では同じぷよを4つ並べると消すことができるようになります。なお、「SESSION 5：『ぷよ』を変えてみよう」では、ソースコードを書き写すのではなく、ここまで書いたソースコードの一部を変更することで、ステージの大きさを変更したり背景の色を変えたり、落ちてくるぷよの色の数を変えたり、ぷよの落下スピードを変更したりすることで、どのコードがゲームのどの要素と関連しているのかを学ぶことができます。

実際に「ぷよぷよプログラミング」をやってみると、プログラミング初心者でもとにかくソースコードを書き写すだけで「見知ったぷよぷよを自分の手で完成させる」ことができるため、手っ取り早く成功体験を味わうことができるというのが最大のポイントと感じました。初心者でもコードを完成させたという自信を得ることができ、さらにコードの書き写し作業を通して小さなミスを自分で発見するというプログラミングにとって必須のスキルを磨くことにもつながるのが良さげ。

ただし、ぷよぷよプログラミングを提供するMonaca Educationもこれだけでプログラミングを完璧にこなせるようになるとは思っていないようで、同時にMonacaで学ぶはじめてのプログラミングなどを使ってプログラミングの基礎を学んでいくことを推奨しています。