100日後に完成するゲームシステム 40日目「Javascriptリファクタリングポイント」

2021年2月26日

テクノロジー 特集

プログラミングスキルは、リファクタリングで向上することを理解している、弓削田です。 ぼちぼち、作っているゲームプログラムのボリュームも大きくなってきて、 今後は、追加機能などの事を考えると、リファクタリング作業をして、プログラムコードを整えておく必要があるので、 今回は、javascriptにおけるリファクタリングで、個人的に有効なポイントを1つだけ行ってみました。

リファクタリングで重要なこと

とりあえず、僕が個人的にリファクタリング作業で行うポイントは、次の3点です。
・膨大化した関数を機能分解する。 ・書かれているコードを効率よくシェイプアップする。 ・全体構造を見直して、構造体を整える。
リファクタリング作業をする場合に、今現在のバージョンが不具合などが解消されているstableの時に行うようにしましょう。 その後、不具合を見つけた時に、リファクタリングのよる影響かどうかが見極められなくなるので、 ちゃんと、見極められるようにしておくことも重要なポイントですね。

for文のリファクタリング

for ~ *.length の配列のloop処理は、 for ~ of にすることで、見た目もスッキリ、扱いも便利になります。 let arr = [1,2,3,4,5] for(let i=0; i<arr.length; i++){ console.log(arr[i]); } 例えば、上記のような、配列を順番にデータを評価する場合に、次のようにすると良いでしょう。 let arr = [1,2,3,4,5]; for(let num of arr){ console.log(num); } どうでしょう? 見た目も扱いもスッキリしていることが分かるでしょう。 ただし、この方法の欠点は、i変数のような、ナンバリング値が受け取れなくなるので、 i値が欲しい場合は、上記の方法のままで使うのが良いでしょう。

関数の最適化

設計がちゃんとしていない状態で、プログラミングをしてしまうと、 関数内が、数十行に及ぶ処理進行になる場合があります。 そのままうまく動作しているのであれば、「それでもいい」という考え方もありますが、 内部処理が再利用価値があるかどうかを考えて、ある場合は、処理を分散化して、関数に分けて登録して、 それらの組み合わせをちゃんと設計し直すことで、 プログラムのスッキリ度合いと、見直しコストがかなり安定化してくるでしょう。 ケースバイケースの内容ですが、この辺を経験を元に、行うために、リファクタリングを都度行うのは、 開発全体にとっても、非常に有意義ですよね。

整え作業

構造体を整えるっていうのは、class構造体で考えた時に、複数のクラスにまたがる処理を、どのクラスに実装するかまよってしまうケースのような場合、 commonクラスのような、共通処理として、まとめてしまうという手もあります。 いろんなクラスから呼び出せるライブラリ的な処理と、部分的な処理をキチンと分割することで、処理の整理ができ、 プログラムの機能追加の時に、使用する関数が迷子になるケースも防ぐことができるので、 関数名なども、全体を見渡して、統一性のある名称に整えるという事も重要なリファクタリングですね。

最後に

大きくなってきた段階で、プログラムの仕様リファレンスを作っておくというのは、非常に有意義です。 プログラムのそれぞれのファイルの内容や、関数、変数のグランドルール、 データの持ち方や、データ構造など、をテキストで簡単にでもいいので、まとめておくことで、 後から自分で行う作業も楽になることは間違いありません。 仕事でチーム作業をしている場合などは、こうしたドキュメンテーションが、その後の開発進行に大きく影響することは、 誰が考えても分かるポイントなので、一人開発であっても、こうしたクセを付けておくことは重要なんですね。 そんなわけで、今回は、こうしたリファクタリングをしたという、話でした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。