ぷよぷよプログラミングの始め方・動かし方・遊び方と改造・実行方法解説

今回はそんな疑問をもっている人向けの記事です。

どうも！エンジニアの てぃかし です。

プログラミングはやったことがない人からすると難しいイメージがあります。

よくわからない文字列が何行にも渡って書いてあるのをみて、

「自分には到底わからない。自分には無縁のものだ。」

と思ってしまう人もいます。

そんな人は一度「ぷよぷよプログラミング」をやってみると良いでしょう。

ぷよぷよプログラミングをしてみれば、

• プログラミングはどのようなものなのか
• プログラミングでどんなことができるのか

がわかります。

今回は、ぷよぷよプログラミングの始め方や遊び方についてわかりやすく解説します。

ぷよぷよプログラミングに興味のある人、プログラミングを体験したい人、自由研究のテーマにしたい人などは、ぜひ参考にしてください。

ぷよぷよプログラミングとは？

ぷよぷよプログラミングとは、セガが展開するアクションパズルゲーム「ぷよぷよ」をプログラミング学習できる教材です。

ぷよぷよがどのようにプログラミングで動いているかが学べる内容になっています。

これからプログラミングを始める人や、小学4年生以上の学生にとって、プログラミングに触れるには良い教材です。

学習内容は、ぷよぷよを操作するために必要なソースコードを、一字一句、正確に写経（書き写す）をしていきます。

ぷよぷよプログラミングの目的と各コースについて

ぷよぷよプログラミングは、基礎、初級、中級、上級と分かれており、これらをこなすことで、以下のようなことが期待できます。

• パソコンの操作が覚えられる。
• コーディングのルール（基本の書き方）が学べる。
• ミスに気づいて、自分で修正できるようになる。

コースが上に進めば進むほど、写経する量が多くなります。

• 基礎コース（入力量4桁）
• 初級コース（入力量28行）
• 中級コース（入力量95行）
• 上級コース（入力量1015行）

となっています。

上級コースまでやれば、ぷよぷよの仕組みと制作手順は把握できるようになります。

大人には物足りない？

エンジニア歴5年以上の僕もやってみましたが、写経して、動かして、写経して、動かして、の繰り返しなので、大人はすぐに飽きるかと思います。

学生にとっては、パソコンに慣れたり、プログラムを初めて書く練習として、良い教材ですね。

プログラミングの学習サイトは色々ありますが、Progateよりも簡単です。ただ写すだけですから。

プログラムの書き方（半角を使うとか、コメントを入力するとか、インデントをつけるとか）が学べるって感じです。

オンライン上でプログラミングが学べる学習サイトについては下記にまとめているので、興味のある人はそちらもご覧ください。

【初心者おすすめ勉強法】オンラインのプログラミング学習サイトまとめ（無料&有料）

プログラミングの学習サイトってどんなものがあるのだろう？ オンライン完結で学習をしたい。 初心者向けの学習手順を知りたい。 今回はそんな疑問に答える記事となっています。 プログラミングを勉強しようと思 ...

続きを見る

ぷよぷよプログラミングの始め方

ぷよぷよプログラミングは、パソコン、メールアドレス、インターネット環境があればできます。

手順は、以下の通りです。

1. Monaca Educationに登録・サインイン
2. コースを選び、ソースコードをダウンロード
3. ガイド小冊子をダウンロードし、それに沿ってプログラムを写経していく

たったこれだけです。

ソースコード、ガイド小冊子はコチラのページでダウンロードできます。

スマホ上でぷよぷよプログラミングを動かしたい場合は、デバッガーアプリもインストールする必要があります。

プリンターはソースコード、小冊子を印刷したい人は必要ですが、Web上で閲覧できるので、なくても問題ないです。

ぷよぷよプログラミングの使う言語「JavaScript」とは

ぷよぷよプログラミングで扱う言語の範囲は、HTML、CSS、JavaScript です。

主にJavaScriptをいじっていきます。

JavaScriptとは、ウェブページ上で様々な機能を可能にするプログラミング言語です。いわば、ウェブページ内のあらゆるものを「動かす」ことのできるものです。

例えば、クリックするとメニューが開いたり、ポップアップ画面が出てきたり、サイト上でアニメーションが動いているのを見たことありませんか？

それらはJavaScriptを使って動いていることが多いです。

ぷよぷよプログラミングもJavaScriptを使って、ぷよぷよを動かしたり、消したりすることができます。

ある条件で動かしたり、消したりすることができれば、パズルゲームが作れることはイメージできるでしょう。

ぷよぷよプログラミングの動かし方・実行方法

では、ぷよぷよプログラミングの動かし方と実行方法を説明します。

基礎、初級、中級、上級用のソースコードをダウンロードします。

下記のようなページになるので、「インポート」をクリックします。（ログインした状態で行いましょう。）

そうすると、Monaca Educationのダッシュボードにプロジェクトとして、表示されます。

プロジェクトを選択して、「クラウドIDEで開く」をクリックします。

そうすると、ソースコードが書かれたIDE（開発環境）がクラウド上で開かれます。

画面は、左、真ん中、右の3つに分かれていると思っていればOK。

左ではファイルを一覧で表示されています。

真ん中では、選択したファイルのソースコードが表示されます。

右では、ぷよぷよの動きを確認できます。

あとはガイド小冊子に沿って、写経のポイントを理解し、写経を実践していけば良いです。

このページでは、英数字半角を使うことや、ソースコードを読みやすくするためにインデントをすることを説明されています。

他にもコードを書くコツなどが書かれているので、写経しながらしっかりマスターすることができます。

例えば、このページでは、

基礎なら、「player.js」の189行目を写経することになります。

初級なら、「player.js」の189、190、192、193行目を写経することになります。

中級なら、「player.js」の189、190、192、193、197〜205、207〜209、211〜215、217、218行目を写経することになります。

上級は、全てのファイルを作成し、すべてのソースコードを写経します。

写経したら、保存（Windowsなら ctrl + S、Macなら cmmand + S）して、右の画面をクリックして、ぷよぷよを操作します。

保存をしたら、自動的に右の画面で実行されます。ぷよぷよ動かしたければ、矢印キーなどで動かしたりできます。

ちなみに「player.js」が最初どこにあるか迷う人もいると思います。「player.js」は「www」の「src」フォルダの中にあります。

ぷよぷよプログラミング上級の進め方

ぷよぷよプログラミング上級は、全てのコードを記述することになります。

初心者は何から手をつけていいかわからないと思います。

小冊子をよく読めば、わかることですが、手順としては

• index.html を作成
• games.js を作成
• puyoimage.js を作成
• player.jp を作成
• stage.js を作成
• 細かい設定を書くjsファイルに記述
• デバック（実際にプレイしてみて不具合があったら修正する。）

このようにプログラミングではどの順番でファイルを作成していくかを考えるのも重要なところです。

ぷよぷよプログラミングの遊び方（改造）

写経したら、自分で作ったぷよぷよで遊んでみるのがおすすめです。

遊び方としては、例えば、

• 普通にぷよぷよで高得点を目指す
• ステージの大きさを変えてみる
• ぷよぷよをりんごにしてみる
• 背景を変えてみる

などなど、ソースコードのあるところをいじると改造することができます。

ダウンロードした小冊子を見れば、やり方はわかるので、興味のある人はやってみましょう。

ちなみにぷよぷよをりんごを加えてみたらこんな感じになりました。

ぷよぷよプログラミングが動かない…と思ったら

ぷよぷよプログラミングが動かないって思ったら、以下のことをやってみましょう。

• インデントを揃えたり、コードを整えて、間違いを発見しやすくする
• 作業中のプロジェクトを削除して最初からやり直し
• 1つ前に戻して書き直す（Windowsなら ctrl + Z、Macなら command + Z で1つ前に戻ります。）

ということで、今回はぷよぷよプログラミングの始め方や動かし方などについて解説しました。

ぷよぷよプログラミングは、プログラミングに触れる良い機会．教材です。

プログラミングの最初の入り口として、触ってみたり、自分の子供に体験させてみるのも面白いと思います。

プログラミングもできるようになりたいけど、まずはタイピングを上手くなりたいって人は下記の記事もご参考ください。

タイピングの基本は寿司打では身につかない？キーボードと指の位置に慣れよう

タイピングをうまくなりたい。 キーボードと指の位置はどうするのがいい？ タイピングの基本を身につけたい。 とりあえず寿司打で練習しまくればいい？ 今回はこんなことを思っている人向けの記事です。 どうも ...

続きを見る

プログラミングを本格的に学びたい人は、教室に通うことをおすすめします。

子ども向けのプログラミング教室は下記の記事にまとめています。

小学生・中学生向けプログラミング教室まとめ！オンライン学習の料金相場と内容

小学生向けのプログラミング教室ってどんなところがある？ 子供はプログラミングスクールでどんな内容を学ぶ？ オンラインスクールの料金相場はいくら？ そもそも子どもにプログラミングを習わせることは必要？ ...

続きを見る

大人向けのプログラミングスクールは下記の記事にまとめています。

未経験エンジニアのためのプログラミング&デザインスクールまとめ一覧

プログラミング学習をしたい人 プログラミングの勉強を始めたい。 エンジニア転職もしたい。 色んなプログラミングスクールがあるけど、どのスクールが良いのかな？ 違いはなんだろう？ 今回の記事はそんな悩み ...

続きを見る

エンジニア転職をしたいと思っている人は、エンジニアになるためのロードマップもご参考ください。

【初心者必見】プログラミング学習前にやることは？【エンジニアロードマップ①】

エンジニアに興味のある人 将来、高収入でリモートもできそうな仕事をしたい。   IT系のエンジニアってどうなのかな？   エンジニアになるには何から始めたらいいのだろう？ &nbs ...

続きを見る