【ぷよプロ】ぷよぷよプログラミングを始めよう（開発編①）

みなさんこんにちは！

本記事は以下記事の続きです。

2021年6月14日Visual Studio Codeで本格開発！ぷよぷよプログラミングの始め方

本日は「ぷよプロ」シリーズの第３回、アプリ開発編①をやっていきましょう！

はじめに

アプリを開発するのはいいんですけど、今からやるのって１行１行コードを説明していく感じですか？？全部で1,000行くらいあったはずだから、とても大変そう。。。

ともとも

これから説明しようと思っているのは「アプリの全体感」についてだよ！プログラミング学習で陥りがちなのか「木を見て森を見ず」状態なんだ

たしかに1行1行が理解できないとしっかり理解する事はできないかもしれないけど、その逆は言えないんだ

つまり、1行1行の意味を追って行っても、結局意味がない、よくわからない状態になると言う事だよ

だから今回は細かいことは気にせず、アプリの全体感を見ていこうね

アプリのざっくりした作りの考え方

大規模なアプリを作るときに一番大事なのが実は、アプリの思想です。どのようなアプリなのか、どのように使われるのか、そう言った「思想」をしっかりと定義して、意識しながらアプリ開発ができるかによってアプリの品質が大きく変わってきます。

アプリは1ファイルで良い？

基本的にプログラミングのコードは上から下に順に処理されます。つまり、1ファイルに上からコードを書いていけばアプリが作れることになります。

ただ、アプリ開発で利用するコードは分割されることがほとんどです。さらに分割は意味のある単位で行われます。理由は次の通りです。

人間が理解しやすいから
ソースコードの保守性を保つことができるから
大人数での開発で分割しやすいから

例に漏れず、ぷよぷよのコードについてもファイル分割がされています。コードの構成についてまずは見ていきましょう。

ぷよぷよプログラミングのコード構成

projectフォルダの直下には以下のファイル・フォルダが配置されています。

.monaca（フォルダ）
resフォルダ（フォルダ）
★www（フォルダ）
.gitignore（ファイル）
.monacaignore（ファイル）
config.xml（ファイル）
LICENCE（ファイル）
package-lock.json（ファイル）
★package.json（ファイル）

色々配置されていますが、重要なのは★のついているファイル/フォルダです。（それ以外はMonaca IDEを利用する際に必要なファイルで、気にしなくてよいです。）

package.json

★package.json（ファイル）は前回軽く説明しましたが、ざっくりいうとこのぷよぷよプログラミングアプリを定義したファイルのことです。

package.json（一部抜粋）

{
    "name": "monaca-template-minimum",
    "version": "2.0.7",
    "displayName": "Monaca Template Minimum",

～～～～～～～～
    "scripts": {
        "monaca:preview": "npm run dev",
        "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
    },
～～～～～～～～
}

package.jsonはアプリの名前（name）・バージョン（version）、表示名（displayName）などの基本情報を定義しています。また、”scripts”には、前回の記事でインストールしたnpm(node package manager)で利用可能なコマンドが記載されています。

package.json の scriptsについて

pakage.jsonのscriptsには、npmで利用可能なコマンドとその処理を定義しています。

利用方法は次の通りです。

npm run （"scripts"に書かれたコマンド）
→ （"scripts"に書かれたコマンドに対応する処理を実施）

なので、今回のpackage.jsonを見ると次の２つのコマンドが利用可能です。

npm run monaca:previewまたはnpm run devが利用可能です。

その処理内容はどちらも同じで、ブラウザを自動で起動するように書かれています。

wwwフォルダ

アプリで重要なファイルはすべてここに配置されています。wwwフォルダの構成は次のようになっています。

components
css
- ★style.css
img
src
- ★config.js
- ★game.js
- ★player.js
- ★puyoimage.js
- ★score.js
- ★stage.js
★index.html
manifest.json
SEGA_Licence.txt

★がついているファイルが今回重要なファイルです。（今回、プログラミングしていくファイルです。）実際に開いてみるとすべてのファイルが空になっていることがわかると思います。（style.cssだけ記載が少しされています。）

今回のアプリもそうですが、皆さんが利用するブラウザ（ChromeやSafariなどのインターネットを使うときに利用するアプリのこと）で読み込むことができるのは、HTML、CSS、JavaScriptのみなんです。

そして、CSSとJavaScriptは直接読み込まれるわけではなく、HTMLから読み込まれます。

そのため、今回開発するアプリでは、次の流れで動いていきます。

ブラウザからindex.htmlを読み込む。
index.htmlからstyle.cssを読み込む。
index.htmlからconfig.jsなどのjavascriptファイルを読み込む。

どうでしょう？ざっくりイメージはついてきたでしょうか？

HTML、CSS、JavaScriptの役割は？

HTML：ブラウザから表示する全てのサイトが必ず保持している、Webサイトの構造を示す言語のこと

このHTMLだけでもWebページは作れます。Webページの基礎となるものと考えてください。

CSS：HTMLで表示したWebページにデザインをつけるための言語のこと

CSS自体はとても簡単ですが、実はしっかりと制御して利用するにはとても難しい言語です。

JavaScript：Webページに動きをつけるための言語のこと

ブラウザから利用できる唯一の変数などが利用できるプログラミング言語です。

srcフォルダ

最後に今回メインのJavaScriptファイルの細かい関係性や役割を見ていきましょう。

ファイル名	説明
`config.js`	設定を記載しているファイル
`game.js`	ほかのJavaScriptファイルを呼び出すファイル。最初にこのファイルから起動します。
`player.js`	プレイヤーからの操作（キーボード入力など）を定義するファイル。
`puyoimage.js`	ぷよの表示を調整するファイル。
`score.js`	ゲームのスコアを計算するファイル。
`stage.js`	ゲームのステージ全体を管理するファイル。