こんにちは、Yuiです。
今回x-hackさんのJavaScript道場でゲーム作りを勉強しました。
そこで、今回からJavaScriptでフルスクラッチのRPGを作っていく流れを連載形式で書いていきたいと思います。
x-hackさんのJavaScript道場への申込みはこちら
今回の連載の流れ
以下の流れで書いていきたいと思います。
１、なぜ設計は大事なのか
２、オブジェクト指向を理解しよう
３、thisとは？なぜthisを使う？
４、canvasとは？canvasを使って背景を描画、モンスターを配置する
５、モンスターを動かしてみる
６、メッセージ表示エリアを配置する
７、プレーヤーのHPを表示する
８、プレーヤーのコマンドを表示する
９コマンドをクリックしたら、敵に対してなにかの処理を行う
１０、敵が攻撃したら、プレーヤーのHPをへらす
１１、敵のHPか、プレーヤーのHPが0になったら戦闘終了
今回の記事では１、なぜ設計は大事なのかの部分について書きます。
なぜ設計は大事なのか
まずアプリ作りにおいて基本となるのが設計です。
「設計」とは何をすれば良いのかというのも後ほど解説しますが、それ以前に**「なぜ」**設計しないといけないのかを解説したいと思います。
はじめてプログラミングをする方などは考えるより先にコーディングしたほうが良い、大体の案が決まったのなら作りながら設計をしていったほうが効率的だ、そう考える人もいるのではないでしょうか？
実は私自身そのように考えて、大体の方向性だけ考えたら特に必要なDBとか何も考えずに先に進めていた時期がありました。
すると、何が起こるかというと、その後で上手くいかないことがあった場合に逆戻りしにくくなります。
どういうことかというと、途中で以下のことが起こります。
- 「ここまで書いたのに」という気持ちもあって元に戻せなくなる
- どこを完成にするかがわからなくて永遠に完成しない
- 理想と違う部分が出てくる
- そもそも何を目指していたかわからなくなる
人間誰しも自分が書いたコードには愛着がわきますよね？設計が甘かったら、その愛情持って育てた愛着のあるコードを全消し、なんてこともありえます。
そして恐ろしいのは、全消ししたところで完成するのか見通しが立たないので消すのも怖くなります。
また、設計が甘いということは、目標とする部分がないということなので、どこまでで完成かもわからなくなります。
そして結局最後まで完成できずに時間だけが無駄になったという負のスパイラルが起こります。
設計とは何か
それでは、設計の重要性がわかったところで、設計を進めていきたいのですが、設計とはそもそも何をすれば良いのでしょうか。
仕事レベルの設計という観点で考えると（内部設計、外部設計、それに伴う調査など色々とあるので）少し語弊があるのですが、個人開発の観点で言えば簡単に言うと以下の流れで組めれば十分だと思います。
- MVP（Minimum Viable Product）を決める
- ＋αで追加できると良い機能を決める
- 必要となるDBを設計する（今回は不要）
- ターゲット層を決める
- デザインを決める
- ゴールを決める
MVPとは
**MVPというのは「必要最低限の機能」**のことです。
これを決める必要がなぜあるのかというと、どんなプロダクトでも作れば作るほどつけたい機能がどんどん出てきます。そのすべてを実装しようと思うと、かなりの時間がかかりますね。
時間をかけることが悪だというわけでは無いのですが、もしかしたらその時間をかけている間に他の人が同じようなサービスをリリースするかもしれませんし、「旬」が終わってるかもしれません。
例えば絶対に売れると思ったサービスを時間をかけてリリースしたものの思った以上に伸びず、せっかくリリースしたのにすぐにサービス終了にする、なんてこともありえます。（私は一度経験しました。）
何でも美味しいものには旬があるようにサービスにも旬があります。
なので、一番良いのはとりあえず必要最低限の機能でリリースをして、随時バージョンアップなどで追加の機能をつけていくことが望ましいかと思います。
ただ、MVPとは言ってもサービスによりけりです。
なので、まずは目標となるサービスの大枠を考えて必要な機能を全て出します。
そしてその機能がMVPなのか、それとも＋αで追加できるとより良い機能なのかを見極めます。
例えば今回のPRG風ゲームだと、以下がMVPにあたります。
- モンスター/プレイヤーを表示
- ステータスバーを表示
- メッセージ表示エリアを表示
- プレイヤーを動かせるように
- 攻撃を受けたらステータスバーが減るように
- HPが0になったらゲームオーバーを表示
全体の設計はこちらを見てもらえればわかりやすいかと思います。
上記のMVPだけだと正直物足りないと感じることもあるでしょうが、とりあえず上記の実装ができれば最低限のゲームとしては問題ないかと思います。
デザインを組む
そして大体の機能の洗い出しが完了したらデザインを組みます。
デザインの組み方が人それぞれだと思うので、何でも良いのですが、大体のイメージをもっておくことは大事です。
私の場合はいつもターゲット層を決めてからそれに合わせてフォントやテーマカラーを選びます。
カラーの選定はMATERIAL DESIGNをいつも私は使っていますが、何でも大丈夫です。
デザインはPinterest等で色々参考になるものを見ることができます。
DB設計
今回DBは不要なので割愛しますが、必要であればDB設計をきちんと設計することも重要です。
DBが必要なアプリなのに必要なDBを洗い出していないと、後々になってカラムの追加に追われたり整合性がとれなくなるので、必ず最初にしておきましょう。
今回は割愛します。
そして設計が大体できたところで、実際に組んでいきたいと思います。
今回はオブジェクト指向で組みたいので、次回はオブジェクト指向についての解説をします。
もしもっと詳細に知りたい！勉強したい！という方はぜひJavaScript道場にお越し下さい。
それでは最後までお読みいただきありがとうございました。