Aikの技術的な進捗部屋

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

以前作ったレガシーWebシステムのリファクタリングへの道 その1

はじめに

最近お仕事でコードを書いているのですが、業務でコード書いてると昔書いたクソコードをリファクタリングしたい欲がふつふつと湧き上がり…。
こちらのクソコードをリファクタリングしようと思い立ちました。 github.com

本ブログではそのリファクタリングまでの軌跡をつらつらと書いていきたいと思います。
リファクタリングをするにあたり、参考になったサイトへのリンクもメモ書き程度に置いていきます…。

なお、こちらのクソコードでは「GoogleスプレッドシートをDB代わりにしたWebシステム」を構成しております。
リファクタリング前でももちろん動きはします…が…:

  • jQuery使ってる
  • npmやyarnでパッケージ管理してない
  • async/awaitを使わず関数をネストし非同期処理に対応
  • JSON形式でのデータ取得にfetchではなくjQuery.Ajaxを使用

…などなどかなりレガシーな仕上がりに。
ひとまずの目標としては、上記点を解消すべくリファクタリングしていこうと思います。

リファクタリング1回目

本クソコードはGitで管理していたので、まずブランチを切るところからリファクタリングを始めました。
masterリポジトリからブランチを切り、feature/refactoringというブランチに。
リファクタリング作業はこのブランチ内で行なっていきました。
(ぶっちゃけチーム開発でもないんでmasterブランチへ直コミットでもいいんですけどね)

今回はリファクタリング1回目という事で、大きな変更点は:

  • npmyarnへのビルド対応
    • package.jsonwebpack.config.jsの作成
  • GoogleスプレッドシートからのJSONデータ読み込み機能をjQuery.Ajaxasync/awaitfetchで実装

…程度に収めました。
本当は脱jQueryまで行いたかったですが、想像以上にWebシステム構成がjQuery依存してたので今回では諦め…。
本当にがっつりやるなら、クラス構造を考えガチガチに分離した方が美しくもなりますし学びにもなりそうです。

変更後のソースコードは下記に。だーいぶ様変わりしました…。 github.com

今回のリファクタリングにおいて参考にした記事

今回のリファクタリングにおいては様々な記事を参考にさせていただきました。
以下にその参考記事のリンクをのっけておきます。

今回のリファクタリングの感想

今回のリファクタリングを行なった結果、localhostでのビルド方法がyarnコマンド一発で出来る様になり非常に楽になりました!
localhostの立ち上げが非常に楽になったのもあいまって、開発効率がこれだけでかなり上がったかなと感じます。

また、過去に作成したコードを読んでみて改めて「自分のソースコードのわかりにくさが浮き彫りになった」と思います。
クラス構造やアーキテクチャ構造などを考えていなかった時代に作ったコードですので「JS1ファイルになんでも処理を詰め込んでいて」…非常にわかりにくいコードとなっていました。
それこそ、以前は考えていなかったこれらの概念を加えて処理を階層化してもいいかもしれないですね。
これと合わせて、脱jQueryできたらな!と…。

また、リファクタリングとは関係ないですが…。
Googleスプレッドシートのデータ取得に利用している、3年くらい前に書いたGASのスクリプト今もなおそのまま稼働していることにも驚きました…。
Googleさんはこういったツール系はどんどん革新されていくイメージなので、かなり意外です。

合わせて以前作ったWebシステムを改めて見つめることで「Googleスプレッドシートを使ったWebアプリ作成」に改めて興味が出てきました!
やはり、業務で作る様な手堅くDB使う様なものではなく、Googleスプレッドシートを使って手軽に出来るっていうのが非常に魅力的ですね…。
他にも色々やりたいことはあるのでいつ手をつけるかは決めてませんが、いずれやってみようかなとは思います!

おわりに

今回の1回目リファクタリングでは、ひとまずある程度満足いくまではできたと思います。
とはいえ、babel対応や外部JSモジュールの読み出し、webpackでJSをひとまとめにするなどは中途半端にしかできておらず…。
また、JSファイルの構造化や脱jQueryなんかもできてないので、これらは2回目リファクタリング似て行なっていければと思います。

2回目リファクタリングでは下記を目標に、頑張ってみることにします!

  • webpackでJSをひとまとめにする
  • import/exportで外部JSモジュールを読み出せる様にする
  • babel対応
  • JSファイルの構造化
  • jQuery

また、今回のリファクタリングでは下記の領域に初めて触れましたが…。
まだ「使える様になった」だけなので、「使いこなせる様に」もしくは「真髄まで分かる様に」別記事にてこれら項目をまとめてみたいと思います。

  • webpack
  • npm(とyarn)

それではまた|д゚)