サマリ

ぷよぷよプログラミングをやってみました。

背景

プログラミングの学習サイトで有名だったので一度はやってみたいと思っていたのですが
知らぬ間に時はながれ2024年…というわけでリリースから4年も経ったのでこのままだと一生触らないかもと思い、やってみることにしました。
結局、何をするにせよ最初の一歩が重たいんですよね
（ちなみにぷよぷよはほぼやったことありません（おい））

ゴール

ぷよぷよプログラミングに必要なアカウント作成、
その後実際にコースを試してみる。

対象読者

ぷよぷよプログラミングが気になっている方

前提

必須：PC、インターネット環境

環境

ホストOS：Window10 Home
ブラウザ：Google Chromeバージョン: 126.0.6478.127（Official Build）（64 ビット）

手順

そもそも

ぷよぷよは言わずと知れたセガが開発したパズルゲームですね。

ぷよぷよプログラミングとは以下です。

プログラミング学習環境『Monaca Education』において、セガが展開するアクションパズルゲーム『ぷよぷよ』をプログラミング学習できる教材です。製品版と同じ画像素材を利用して、世界中で使われるコンピュータ言語を使い、プロが使う開発環境で本物のプログラミングをお楽しみください。本コンテンツは無料でご利用いただけます。

（公式ページより引用）

無料で提供されているなんてとんでもないですよね。
ありがたや…

上記で記載がある通り、Monaca Educationというアシアル株式会社が提供しているプログラミング学習環境の利用が必要なため、そのアカウント作成も事前に必要になるようです。

それではさっそくやってみます。

Monaca Educationのアカウント作成

ぷよぷよプログラミング公式サイトにアクセスします。

こんな感じのページです。

下の方にスクロールすると、スタートのボタンがあるのでクリックします。

するとMonaca Educationのページに遷移します。

右上、「アカウント作成」をクリックします。

必要な情報を入力します。

入力したメールアドレスにメールが届くので、
メールに張られた本登録用のURLをクリックすると、
登録が完了します。

ブラウザ上で画面が開きます。
利用規約の同意のポップアップが出るので、
確認の上同意をします。

余談

ちなみに、新しいプロジェクトをクリックするとこんな感じの画面、

インポートをクリックするとこんな感じの画面が出ます。

ぷよぷよ以外の教材もあってめちゃくちゃいいですね。
また別の機会に触ってみたいです。

プロジェクトのインポート

Monaca Educationのページに戻り、
試したいコースをクリックします。
（まずは基礎コースを選択しました。）

このような画面が出ます。

インポートをクリックすると、画面上にもプロジェクトとして追加されました。

プロジェクトをクリックすると、さらに右側にこのような画面が開きます。

ブラウザだけで簡単に取り組めそうなので、今回は「クラウドIDEで開く」を選択しました。
以下のキャプチャのような画面が出ます。おぉ～！

写経

ここから実際にやっていきます。

公式ページの真ん中ぐらいにあるファイルダウンロード、

もしくはMonaca Educationのファイルダウンロードのリンクから

小冊子をダウンロードします。

こちらに基本的なコーディングのルールとともに、
実際の写経箇所の記載があるので、順に追っていきます。
どのコースでも共通の冊子となっており、各コースのプロジェクトごとに該当の行が空欄になっているので
冊子に記載のコードを写していけば大丈夫です。
冊子上も以下のようにどのコースでどの行が欠落しているか記載があるのでわかりやすいです。
（基礎コースの場合は189行目だけ何も入っていません。）

冊子のコードを書き写すと…

右側の仮想画面上でぷよが自由落下し始めました！

以降は割愛しますが（おい
このような形で、
ぷよを左右に動かす、回転させる、消す、背景などの細かい設定を変える
という流れに沿って写経を進めます。

基礎コースはトータルで4行だけなのですごく気軽に楽しめました。

結果

ずっと気になっていたぷよぷよプログラミングを試すことが出来ました。

まとめ

ただ写経するだけでは身につかないとは承知しつつ、
穴あきになっていることでこのコードを描けばこのように動作するという理解や
ゲームという遠い世界のようなものでも、実際にJavaScriptやHTMLやCSSで実際に動いているんだ（そりゃそうだろ
というモチベーションにはなるかと思うので
今後も気張らず試していきたいと思います…！