みなさんこんにちは！
本記事は次の記事の続きです。
【ぷよプロ】ぷよぷよでプログラミングを学習する方法
本日は「ぷよプロ」シリーズの第２回、環境構築をまず始めてみましょう！
目次
はじめに
環境構築ってなんですか？？
なんだか難しそうな気がしますが、プログラミングを学ぶ上で、そんなこと必要なんですか？？とにかく必要な知識だけ、学びたいのですが、、、
環境構築とはプログラミングをするための準備みたいなものだよ
環境構築は難しくはないんだけど、絶対にこれだけ覚えればよいというものではなくて、状況に応じて色々なやり方があるから、どれだけ環境構築をしてきたかという、経験が大事なんだ
だから、今回は環境構築についてもやっていこうと思っているけれど、「ぷよプロ」に関してはMonaca Educationというプログラミングの教育サービスを利用することで環境構築をしないで済むからMonacaを利用して学習する人は「ふーん」程度で眺めておいてね
必要なファイルを入手しよう
プログラミングを始める前にまずは、必要なファイル（画像ファイルなど）をダウンロードしてみましょう。
本記事では、実際に動いているところを確認するため、基礎コースをダウンロードして動作確認してみましょう。
Monaca Educationに登録しよう
次のサイトからMonaca Educationという、プログラミングの学習をサポートしている会社のサービスに登録しましょう。
アクセスしたらまず「アカウント作成」を押してください。
メールアドレスとパスワードを入力し、「アカウント新規作成」を押してください。
すると、仮登録が完了して、確認メールが送信されるので、送信されたメールから会員登録を完了させてください。
利用プランで「Freeプラン」を選択して、氏名を入力し、「次に進む」を押してください。
ダッシュボードが表示されれば、会員登録が完了です。
次に以下のサイトにアクセスしてください。
そして下の方にスクロールして、「基礎コースを始める」を押してください。
そして次は「インポート」を押してください。
すると「ぷよぷよプログラミング基礎」というプロジェクトがダッシュボードに表示されるはずです。この「ぷよぷよプログラミング基礎」をクリックしてください。
「クラウドIDEで開く」を押してください。
そうするとIDE（プログラミング開発をするための環境）が表示されるので、「プロジェクト」をおして、「エクスポート」を押してください。
「OK」を押してください。すると、上記ファイル(project.zip)がダウンロードできます。
そうしたら、ダウンロードしたファイルを解凍してください。
zipファイルとは、一般的にはたくさんあるファイルを1ファイルにまとめて圧縮したもののことを言います。
1ファイルにまとまっているので、普通のファイルとして扱うためには解凍という処理が必要になります。
zipファイルの解凍する方法はたくさんありますが、7zipやLhaplusというソフトが有名です。
7zipのダウンロードサイトを載せておくので、こちらからダウンロードして、ファイルを解凍してください。
解凍してこのようなファイルが表示できれば、OKです。
VisualStudioCodeをダウンロードしよう
ファイルがダウンロードできたら次はVisual Studio Codeをインストールしましょう。
次のサイトにアクセスしてください。
お使いのパソコンのOSにあったインストーラをダウンロードしてください。
ダウンロードが完了したら、インストーラを起動して、Visual Studio Codeを立ち上げてください。
するとこのような画面が表示されるかと思います。
Visual Studio Codeを日本語化しよう
まずは、Visual Studio Codeを日本語化しましょう。Ctrl + Shift + xを押して、その後japanese languageと入力してください。
そして１番上に出てくる（はず）の、Japanese Language Pack for Visual Studio Codeを選択し、installを押してください。インストールして、Visual Studio Codeを再起動すると日本語化されているはずです。
ダウンロードしたフォルダを読み込もう
先ほどダウンロードしたファイルを読み込みましょう。
ファイルを押して、その後「フォルダーを開く」を押してください。
先ほどダウンロードしたファイルを開いて、projectを開いた状態で「フォルダーの選択」を押してください。
このような画面が表示されればOKです。
Node.jsをダウンロードしよう
今回のアプリケーションでは、Node.jsというソフトを利用します。Node.jsについて深くは触れませんが、Node.jsを利用することで、サーバーサイド側でJavaScriptを利用することができます。
何はともあれ、Node.jsを次のサイトからインストールしてください。
そしてインストーラを起動して、Node.jsをインストールしてください。
Node.jsがダウンロードできたことを確認するため、Visual Studio Codeを立ち上げて、ctrl + @を押してください。するとターミナルが立ち上がるので、そこでnode -vと入力し、エンターキーを押してください。
そうして、nodeのバージョンが表示されれば、無事インストール完了です。
そして、ターミナルで次のコマンドを入力してください。sudo npm install -g npm
そして、次のコマンドを入力してnpmがインストールされていることを確認してください。
npmとは”node package manager”と呼ばれるソフトで、パッケージ管理ツールと呼ばれるソフトの１つです。
JavaScriptでアプリを開発する際に、いろいろなライブラリ（便利機能をまとめたもの）が必要となることがありますが、このライブラリを簡単にインストールしたりできるツールです。
npmは多くのアプリ開発の現場で利用されることが多く、JavaScriptを利用した開発では必須であることが多いので、少しずつなれていきましょう。
「ぷよプロ（基礎コース）」をやってみよう
ぷよプロでは次の４行をコードに追加する必要があるので、記載を追加していきましょう。
まずは、www > src > player.jsを開いて、189行目に次のコードを入力してください。
this.puyoStatus.top += Config.playerFallingSpeed;
続いて、同じplayer.jsのファイルの280行目に次のコードを入力してください。
this.moveDestination = (x + cx) * Config.puyoImgWidth;
続いて、同じplayer.jsのファイルの370行目に次のコードを入力してください。
return 'rotating';
最後に、www > src > stage.jsを開いて、183行目に次のコードを入力してください。
checkSequentialPuyo(dx, dy);
これで必要なコードは揃いました。
そうしたら、必要なライブラリをダウンロードしていきましょう。
ctrl + @を押してターミナルを立ち上げてください。そして、npm installと入力して、エンターキーを押してください。そうすると、アプリの実行に必要なライブラリのインストールが実施されます。（具体的にインストールされるライブラリはpackage.jsonに定義されています。）
インストールが完了するとnode_modulesというフォルダが新たに作成され、いろいろなライブラリがインストールされていることがわかると思います。
そして、ターミナルに次のコマンドを入力してください。npm run monaca:preview
すると、ブラウザが自動で開いてぷよぷよが勝手に動き出すはずです（お疲れ様です。）
以上が初めの環境構築の説明です。
おわりに
いかがでしたでしょうか？
環境構築は難しくはないものの、正しい手順や動かしている環境に合わせて準備しないと動かないこともあり、苦戦した人もいたかもしれません。
もし環境構築ができない、、、という人がいたら、monacaのIDE上で今後のぷよぷよプログラミングを学習しても問題ないので、その方向で進めていきましょう！
では、次回はぷよぷよプログラミング（上級）の解説①を書いていきますので、お楽しみに！
