みなさんこんにちは!おさかなです!
今回は「ぷよぷよプログラミング」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・ぷよぷよでプログラミングを学びたい方
・ゲーム感覚で学習したい方
・学校のプログラミング学習教材を探している方
「ぷよぷよプログラミング」って何?
「ぷよぷよプログラミング」とは、ソースコードを写経して「ぷよぷよ」を動かしながらプログラミングが学べるサービスのことです!小・中・高の学習教材として活用したり、e-sports大会も開催されたりと今大注目の教材です!(すごい!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/2be0a70c34206c9c59e18877f6a3d51f.jpg)
![](https://osakanav.com/wp-content/uploads/2021/06/switch-game-pg-top-160x90.jpg)
実際に使ってみよう!
事前準備
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg.png)
学べるコースは4種類あり、それぞれ入力行数が異なります。
- 基礎コース … 4行
- 初級コース … 28行
- 中級コース … 95行
- 上級コース … 1015行(全て)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-pg.png)
ページをスクロールして「START」ボタンをクリックしましょう!(ポチっと)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-pg-starts.png)
するとページが遷移するので、右上の「ログイン」または「アカウント作成」から、アカウントを用意します。(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-login.png)
ログインした状態で「ぷよぷよプログラミングに挑戦」という項目まで、ページをスクロールします。
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-play.png)
学習の進め方がまとめられている「ガイド小冊子」と、「ソースコード一式」があるので、事前にダウンロードしておきましょう!(はい!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-sample-code.png)
ガイド小冊子の中身は、こんな感じです!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-kaisetu.png)
アルル可愛い…!(アイスストーム❄)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-aruru.png)
ソースコード一式はこんな感じです!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-code.png)
![](https://osakanav.com/wp-content/uploads/2021/05/codemonkey-top-160x90.png)
(一旦休憩…🍮)
学習を開始しよう!
4つのコースの中から好きなものを選択して、学習を開始しましょう〜!(※今回は基礎コースです)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-starts.png)
このような画面が開くので「インポート」を押します。
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-import.png)
「ぷよぷよプログラミング基礎」というメニューが表示されるので、選択します!(エイ!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-select.png)
続いて「クラウドIDEで開く」を押します。
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-ida.png)
すると…?
こんな感じで、プログラムを記述する「エディタ」が起動しました!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-editor.png)
「ガイド小冊子」を参考に、SESSION1「ぷよぷよ」が落ちてくるを進めてみたいと思います…!(わくわく!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-session1.png)
まずは、左側のツリービューから「src」>「player.js」ファイルを開きます。
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-js.png)
今回は基礎コースのため、入力が必要なのは「189行目」のコードのみになります!(なるほど!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo189.png)
ソースコードを実際に入力して…。
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-step1.png)
ショートカットキー「Ctrl」+「S」または「保存」ボタンで、セーブします!(ゴー!!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-save.png)
すると…?
右側の「出力画面」にぷよぷよが落ちてきました!(すごい!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg.gif)
しかし…!
このままでは落ちてくるだけで、すぐにゲームオーバーになってしまいます。(困った💦)
![](https://osakanav.com/wp-content/uploads/2022/04/puyopg-end.png)
そこで、次のSESSION2「ぷよ」を左右に動かすを進めます!(よし!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-idou.png)
基礎コースは「280行目」のコードが必要になります!(ぐっぐぐー♪)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo280.png)
同じようにソースコードを記述すると…?
![](https://osakanav.com/wp-content/uploads/2022/04/puyo280-code-1.png)
こんな感じで!ぷよを左右に移動できるようになりました!(いい感じ!)
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-width.gif)
…といった感じで、学習を進めていきます!(楽しい!)
このままだと「ぷよを揃えても消えない」ので、気になる方は実際に遊んでみてください🌸
![](https://osakanav.com/wp-content/uploads/2022/04/puyo-tumi.png)
↓日経ソフトウエア 2021年3月号でも「ぷよぷよプログラミング」が特集されています。
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
遂にぷよぷよもプログラミング時代に突入したのか…。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
子供も楽しく学べそう!!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/04/gather-top-160x90.png)