以前作ったレガシー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.jsonとwebpack.config.jsの作成
• GoogleスプレッドシートからのJSONデータ読み込み機能をjQuery.Ajax→async/awaitやfetchで実装

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

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

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

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

• 言わずと知れた恐竜JS記事、今回のリファクタリングの方針付けに大いに参考にさせていただきました
  • 恐竜でもわかるJavaScript #JavaScript - Qiita
• package.jsonのまとめ
  • package.jsonの中身を理解する #JavaScript - Qiita
• npm→yarnへの移行
  • https://qiita.com/pypanman/items/ab786402ed3cdf626ce9https://qiita.com/pypanman/items/ab786402ed3cdf626ce9
  • yarnをnpmではなくHomebrewでインストールしようとしたら詰まってしまったため… もう一度yarnを入れ直す際に参考になりました
    • https://yuta-yamamoto.hatenablog.com/entry/2018/11/12/222001#Motivationhttps://yuta-yamamoto.hatenablog.com/entry/2018/11/12/222001#Motivation
    • MacにNode.jsをインストール #Node.js - Qiita
    • yarn自体のアップグレードをする #YARN - Qiita
    • https://yarnpkg.com/lang/ja/docs/migrating-from-npm/https://yarnpkg.com/lang/ja/docs/migrating-from-npm/
• webpackにおいて複数のエントリから複数のファイルを出力させたい
  • Webpackで複数のファイルをそのままバンドルする - はらへり日記
• webpackにおけるデフォルトエントリとアウトプットについて
  • webpackの基本だけどハマりやすいentryの設定と[name] #JavaScript - Qiita

• jQueryをnpmインストールする方法

  • もう、jQueryはnpmで管理しようぜ #JavaScript - Qiita

• 別ファイルのJavascriptに記載されている関数を使用したい

  • export - JavaScript | MDN
  • ES6のexportについて詳しく調べた #JavaScript - Qiita
• async/await
  • async await の使い方 #JavaScript - Qiita
  • async/await 入門（JavaScript） #JavaScript - Qiita
• JSONデータ取得: jQueryのAjax→fetch関数へ変更
  • フェッチ API の使用 - Web API | MDN
  • fetch,async/awaitでAjax通信 #JavaScript - Qiita

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

今回のリファクタリングを行なった結果、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)

それではまた|дﾟ)