以前作ったレガシーWebシステムのリファクタリングへの道 その1
はじめに
最近お仕事でコードを書いているのですが、業務でコード書いてると昔書いたクソコードをリファクタリングしたい欲がふつふつと湧き上がり…。
こちらのクソコードをリファクタリングしようと思い立ちました。
github.com
本ブログではそのリファクタリングまでの軌跡をつらつらと書いていきたいと思います。
リファクタリングをするにあたり、参考になったサイトへのリンクもメモ書き程度に置いていきます…。
なお、こちらのクソコードでは「GoogleスプレッドシートをDB代わりにしたWebシステム」を構成しております。
リファクタリング前でももちろん動きはします…が…:
- jQuery使ってる
- npmやyarnでパッケージ管理してない
async/await
を使わず関数をネストし非同期処理に対応- JSON形式でのデータ取得に
fetch
ではなくjQuery.Ajax
を使用
…などなどかなりレガシーな仕上がりに。
ひとまずの目標としては、上記点を解消すべくリファクタリングしていこうと思います。
リファクタリング1回目
本クソコードはGitで管理していたので、まずブランチを切るところからリファクタリングを始めました。
master
リポジトリからブランチを切り、feature/refactoring
というブランチに。
リファクタリング作業はこのブランチ内で行なっていきました。
(ぶっちゃけチーム開発でもないんでmaster
ブランチへ直コミットでもいいんですけどね)
今回はリファクタリング1回目という事で、大きな変更点は:
npm
yarn
へのビルド対応package.json
とwebpack.config.js
の作成
- GoogleスプレッドシートからのJSONデータ読み込み機能を
jQuery.Ajax
→async/await
やfetch
で実装
…程度に収めました。
本当は脱jQueryまで行いたかったですが、想像以上にWebシステム構成がjQuery依存してたので今回では諦め…。
本当にがっつりやるなら、クラス構造を考えガチガチに分離した方が美しくもなりますし学びにもなりそうです。
変更後のソースコードは下記に。だーいぶ様変わりしました…。 github.com
今回のリファクタリングにおいて参考にした記事
今回のリファクタリングにおいては様々な記事を参考にさせていただきました。
以下にその参考記事のリンクをのっけておきます。
- 言わずと知れた恐竜JS記事、今回のリファクタリングの方針付けに大いに参考にさせていただきました
- package.jsonのまとめ
- npm→yarnへの移行
- npmでyarnをインストールしてはいけない - Qiita
- yarnをnpmではなくHomebrewでインストールしようとしたら詰まってしまったため… もう一度yarnを入れ直す際に参考になりました
- webpackにおいて複数のエントリから複数のファイルを出力させたい
- webpackにおけるデフォルトエントリとアウトプットについて
jQueryをnpmインストールする方法
別ファイルのJavascriptに記載されている関数を使用したい
- async/await
- JSONデータ取得: jQueryのAjax→fetch関数へ変更
今回のリファクタリングの感想
今回のリファクタリングを行なった結果、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
)
それではまた|д゚)