ダメージ計算機を自作してみて
ダメージ計算アプリを0から自作してみたので、何を勉強してどんな作業をしたのかを覚えている範囲で記録に残しておこうと思いまして。
作業時間で100〜150時間ほど、勉強時間を合わせたら200時間くらいになると思います。効率が悪い。
ダメ計アプリの成果物としては、Javascriptコード2000行、アプリページ用PHP500行、CSS500行、ポスト受け取り用PHP120行、ポケモンのCSVデータ140KBって感じでした。拡張しやすいように組んだ影響もありますが、もうすこしコンパクトに組めたんじゃないかと反省しています……
それでは、時系列順に作業の記録を、
●7月末 決心
昨年の3月あたりから作成していたウェブアプリですが、集大成？としてダメージ計算機を作ろうと決心したのが7月末でした。特に成果物もなく過ぎていく大学生活に焦りを感じたことからの決断だったと思います。
他にも頑張りたいことが色々あったので、実際に始めるのはもう少し後です。
●8/17- 計画開始
全体像の計画を立てながら、必要な知識・情報などをこのタイミングからまとめ始めました。
・使用する言語
もともとC言語とPython以外のプログラミング言語にあまり触れてこなかったので、そんな自分でもバリバリ使用できるプログラミング言語があるのか、また手持ちのWebサーバで使用するプログラミング言語が動作するのかなどを調べました。
結果としてサーバ側はサーバで標準実装されているPHPで、フロントエンド側は引き続きJavascriptで動作させることにしました。
・使用するデータベース
データベースは手持ちのサーバに標準搭載されていました。サーバのデータベースを用いる上でSQL（データベースで処理を行うプログラミング言語？）の再勉強が必要なのではないかと懸念していましたが、サーバが優秀で簡単にデータの登録が行えました。データの引き出し方については、PHPと一緒にここから勉強します。
・ページの作り方
アプリ用にブログとは切り離された別デザインのページを作成したかったので、実現可能かどうかを色々調べました。結果、WordPressの固定ページのテンプレート機能を用いてオリジナルのhtmlを適用させる方法が良さげです。アイキャッチ画像などのヘッダ情報はWordPressからPHPで関数？を引っ張ってきて無理やり動的に確保しました。
●8/20-8/22 データ作成
・データ
データベースに登録するための、ポケモンや技・特性のデータ作成に取り掛かりました。これらのデータは全てアプリ内に盛り込むととんでもないサイズになってしまうため、必要になるたびにデータベースに問い合わせて引き出してくる形式にする必要があります。
ダメージ計算に関する色々な情報をデータとしてまとめるために、Pythonを使ってエクセルシートの編集なんかも行いました。
・実装方法の計画
データを作る過程で、ダメージ計算の仕様なども勉強しながらプログラムの細部をどのように実装するか計画していきます。
●8/23-9/12
少しずつ勉強しながら休憩していた期間、主にポケモンやマリカに興じていました。
●9/13-9/22 計算部分のコーディング
データの作成と並行して、ダメージ計算を行う部分のコーディングを行いました。始めに立てた全体像の計画に添いつつ、問題点が見つかればその都度修正していきます。
ポケモンは世代を経ると新しいポケモンや技が追加されるので、その関係で今後新しい処理が必要になっても追加が容易になるように意識して組みました。
●9/21 テストの実施
計算部分のコードにミスがないかテストを行い、結果に応じてコードを修正します。特性や技の組み合わせパターンでテストケースを作り、テストを実行しました。
●9/23-9/27 PPカウンターの作成
ここからの実装はかなり複雑だったため、一度試験的に構造が単純なPPカウンターを作成してみることにしました。PPカウンターを作成する中で書いたコードを、後ほどダメ計アプリに転用します。
・入力補助機能の実装
ポケモンの技名などを入力する時、完全に技名が一致した時しか受け付けないような堅い仕様にしてしまうと使い勝手が非常に悪くなるため、入力補助を行う必要があります。
色々試行錯誤してみて、技名の入力から候補を表示するような入力補助機能に落ち着きました。
・HttpPOST
入力を受けて、技などのデータをデータベースに問い合わせるのにHttpPOSTを使用します。そのために、POSTを送って返ってくるデータを受け取るJavascript側のコードと、POSTを受け取ってデータベースを参照してデータを送り返すPHPコードが必要になります。
また、それに伴ってPHP側ではSQLインジェクションというSQLの実行コードを含んだデータをPOSTで送りつけてデータベースに対して不正な操作をする攻撃への対応が必要なのですが、今回は技やポケモンのidを数字としてPOSTし、PHP側では数字しか受け取らないことでこれを解決してみました。
●9/28-12/28 長期休暇
PPカウンターを完成させて疲れてしまい、この期間は他の活動をしていました。ダメ計アプリのインタフェースデザインだけはこのタイミングで決めたんですが、それ以外の作業は何もやってないです。
●12/29- ダメ計作成開始
冬休みでダメ計アプリ作成を再開します。方法などはPPカウンターを作成する過程で全て勉強済みなので、あとはそれを組み合わせて完成させるだけです。まずはhtml/cssで見た目を組み上げ、PPカウンターで作成した入力補助コードをダメ計アプリ用に書き直して適用していきます。
当初この作業は年内に終わらせられると思っていたのですが、PPカウンターと違い多岐に渡る入力内容に適用させるのが思っていたよりも難しく、かなり時間がかかってしまいました。
●12/31- サーバ側の作業
引き続き入力補助系のコードを書きつつ、データベースに問い合わせるHttpPOST用のPHPコードを作成します。技やポケモンのデータ自体は夏に既に作成済みだったので、データベース用に少し調整するだけで済みました。
●1/3- 結合
入力補助のコードが概ね完成したので、ダメ計部分のコードとの結合を行います。ここで実際にデータをPOSTして問い合わせを行う処理も調整したのですが、同期処理（データベースに問い合わせたデータが返ってくるまで、他の処理を待機させておくための処理）を実現するのに少し苦労しました……
●1/4 動作確認テスト
苦労しながらもアプリを概ね完成させられたので、ここで動作テストをしながら細かい部分のコード修正を行います。ここまで丁寧にコードを書いていたおかげで直すのに苦労するような致命的なバグもなく、テストはすんなり終わらせられました。
●1/5-1/6 仕上げ・完成
バグがないかしらみつぶしに運用テストをしつつ、メモリリークがないかをひたすら確認していました。
メモリリークとは、アプリで使用したメモリがアプリページを離れても解放されずに残り続け、端末のメモリを圧迫し続けてしまう現象のことなのですが、発生が簡単に検知できるものではないみたいで判断にかなり困りました。メモリリーク関係の情報をかなり調べて、色々調査もして、念のためメモリリーク防止の処理も挟んで、9割9分ないだろうという結論に至ってはいるのですが、まだ1%メモリリークを見逃していないか少し心配です……
●反省
・コードが煩雑
始めに全体像の計画は立てたものの細部までは計画を立てきれず、結果必要なタイミングで必要な関数を追加していったため汚く大きいコードになってしまいました。もっと綺麗に、短くかけたはずだと反省しています…
また、Javascriptの勉強不足で全体的に古い書き方になってしまったり、場所によって書き方がまちまちなのも良くないです。Javascript自体は近年で進化しているようなのですが、ネットで調べると古い情報と新しい情報が混ざっているせいで取捨選択が難しくて……。今度書くときはもう少し基礎から勉強し直して書きます。
・入力候補の表示方法が良くない
入力候補を表示するために2000行弱のhtmlを挿入しているんですが、めちゃくちゃ重いので多分良くないです。このデータを変数として保持するのが嫌だったのでこの形式にしてるんですが、メモリ使用量はこっちの方が多分多いのでなんとも言えません。
●所感
作るのは大変でしたが、良い経験になりました。特にJavascriptについてかなり勉強できたのは良かったです。
ただ、勉強すればするほどより深い問題が見えて来て、ただ動くのではなくバグのない実装にするにはどうするべきなのか、実務レベルの実装ではどうするのが正解なのか、など疑問点は増えるばかりで、自身の未熟さを改めて実感しました。
今後も引き続き勉強を続けながら、今度何かを作る時・今まで作ったものを改善する時はさらに完成度の高いものにできるようにしたいです。
ということで、備忘録は以上になります。
最後まで読んでいただきありがとうございました
この記事が気に入ったらサポートをしてみませんか？