- プログラミングに触れてみたい。
- ぷよぷよプログラミングってなんだ？
- どうやって始めるの？
- ぷよぷよプログラミングの遊び方は？
今回はそんな疑問をもっている人向けの記事です。
どうも！プログラミング経験者の てぃかし です。
プログラミングはやったことがない人からすると難しいイメージがあります。
よくわからない文字列が何行にも渡って書いてあるのをみて、
「自分には到底わからない。自分には無縁のものだ。」
と思ってしまう人もいます。
そんな人は一度「ぷよぷよプログラミング」をやってみると良いでしょう。
ぷよぷよプログラミングをしてみれば、
- プログラミングはどのようなものなのか
- プログラミングでどんなことができるのか
がわかります。
今回は、ぷよぷよプログラミングの始め方や遊び方についてわかりやすく解説します。
ぷよぷよプログラミングに興味のある人、プログラミングを体験したい人、自由研究のテーマにしたい人などは、ぜひ参考にしてください。
Monacaのぷよぷよプログラミングとは？
ぷよぷよプログラミングとは、セガが展開するアクションパズルゲーム「ぷよぷよ」をプログラミング学習できる教材です。
ぷよぷよがどのようにプログラミングで動いているかが学べる内容になっています。
これからプログラミングを始める人や、小学4年生以上の学生にとって、プログラミングに触れるには良い教材です。
学習内容は、ぷよぷよを操作するために必要なソースコードを、一字一句、正確に写経（書き写す）をしていきます。
そもそも「プログラミング」とは何なのか？を知りたい人は下記の記事をご参考ください。
-
プログラミングとは？仕事と小学校での違いをわかりやすく簡単に解説
広告 もしかして今、この記事を読んでいる人はこんなこと考えていませんか？ 今回の記事は、冒頭の疑問を解決するような内容となっています。 プログラミングについて具体的に知りたい、子供にわかりやすく簡単に ...
続きを見る
ぷよぷよプログラミングとeスポーツの関係
セガはゲーム事業や『ぷよぷよ』というジャパン・e スポーツ・プロライセンス認定ゲームのeスポーツ展開の経験をもとに、プログラミング教育のカリキュラム提供やその運営のサポートを行っています。
「eスポーツ×プログラミング体験」というイベントが具体的に行われており、これには全国から39社のケーブルテレビ会社が参加しました。
43のロケーションで、午前中に「親子でぷよぷよプログラミング体験教室」を実施し、午後には「ニッポン全国 家族対抗ぷよ合戦」というぷよぷよeスポーツのイベントが開かれました。
引用元：https://www.aicom-koka.jp/news/『ニッポン全国-家族対抗ぷよ合戦！』開催決定！/
ぷよぷよプログラミングは小学校向け？
教育目的としてぷよぷよプログラミングは、小学校、中学校、高校で教材として使用されることが想定されています。
先生用、生徒用の教材は、下記のページで申請することで無料閲覧ができます。
ぷよぷよプログラミングの学習目的と各コースについて
ぷよぷよプログラミングは、プログラミングの学習教材として、活用されています。
基礎、初級、中級、上級と分かれており、これらをこなすことで、以下のようなことが期待できます。
- パソコンの操作が覚えられる。
- コーディングのルール（基本の書き方）が学べる。
- ミスに気づいて、自分で修正できるようになる。
コースが上に進めば進むほど、写経する量が多くなります。
- 基礎コース（入力量4桁）
- 初級コース（入力量28行）
- 中級コース（入力量95行）
- 上級コース（入力量1015行）
となっています。
上級コースまでやれば、ぷよぷよの仕組みと制作手順は把握できるようになります。
ぷよぷよプログラミングは大人には物足りない？
エンジニア歴5年以上の僕もやってみましたが、写経して、動かして、写経して、動かして、の繰り返しなので、大人はすぐに飽きるかと思います。
学生にとっては、パソコンに慣れたり、プログラムを初めて書く練習として、良い教材ですね。
プログラミングの学習サイトは色々ありますが、Progateよりも簡単です。ただ写すだけですから。
プログラムの書き方（半角を使うとか、コメントを入力するとか、インデントをつけるとか）が学べるって感じです。
オンライン上でプログラミングが学べる学習サイトについては下記にまとめているので、興味のある人はそちらもご覧ください。
-
【初心者おすすめ勉強法】オンラインのプログラミング学習サイトまとめ（無料&有料）
広告 今回はそんな疑問に答える記事となっています。 プログラミングを勉強しようと思った時、学習サイトを利用することが多いと思います。 今回は、おすすめの学習サイトはもちろん、学習サイトを使ってどのよう ...
続きを見る
ぷよぷよプログラミングの始め方
ぷよぷよプログラミングは、パソコン、メールアドレス、インターネット環境があればできます。
手順は、以下の通りです。
たったこれだけです。
ソースコード、ガイド小冊子はコチラのページでダウンロードできます。
スマホ上でぷよぷよプログラミングを動かしたい場合は、デバッガーアプリもインストールする必要があります。
プリンターはソースコード、小冊子を印刷したい人は必要ですが、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つ前に戻ります。）
ということで、今回はぷよぷよプログラミングの始め方や動かし方などについて解説しました。
ぷよぷよプログラミングは、プログラミングに触れる良い機会．教材です。
プログラミングの最初の入り口として、触ってみたり、自分の子供に体験させてみるのも面白いと思います。
プログラミングもできるようになりたいけど、まずはタイピングを上手くなりたいって人は下記の記事もご参考ください。
-
危険！タイピングの基本は寿司打では身につかない？キーボードと指の位置に慣れよう
広告 今回はこんなことを思っている人向けの記事です。 タイピングは練習をしなければ、うまくなりません。 かといって、闇雲に練習をしても、なかなか上達しません。 タイピングの基本を学んでから、練習をすべ ...
続きを見る
プログラミングを本格的に学びたい人は、教室に通うことをおすすめします。
子ども向けのプログラミング教室は下記の記事にまとめています。
-
小学生・中学生向けプログラミング教室まとめ！オンライン学習の料金相場と内容
広告 今回はそんな疑問を持っている人向けの記事です。 プログラミングは、2020年から文部科学省の学習指導要領の改定の一環として、小学校で必修化されています。 プログラミングを学習して、プログラミング ...
続きを見る
大人向けのプログラミングスクールは下記の記事にまとめています。
-
未経験エンジニアのためのプログラミング&デザインスクールまとめ一覧
今回の記事はそんな悩みを持っている人に向けた記事です。 2019年に実は、プログラミングスクールをまとめた記事を書きましたが、あくまで2019年に存在していたプログラミングスクールで僕が調べることがで ...
続きを見る
エンジニア転職をしたいと思っている人は、エンジニアになるためのロードマップもご参考ください。
-
【初心者必見】プログラミング学習前にやることは？【エンジニアロードマップ①】
今回はこのような疑問をお持ちの方に向けた記事です。 僕は、新卒で塾講師をしていた過去があり、当時、肉体的にも負担のある講師の仕事を続けていくことに不安を感じていました。 また、塾業界自体、勤務時間の割 ...
続きを見る
