こんにちは、ぱーぽーです。この記事はEC事業部ブログリレーの11日目の記事で、10日目はyamotoさんによるGitHub Actionsを用いてRails Engineの更新をホストアプリケーションに適用しやすくするでした。
私は今、グーペというホームページ作成サービスの開発に携わっています。グーペは提供開始から11年が経つ歴史あるサービスで、これまで少人数の開発チームでPHPのバージョンアップやMySQLのバージョンアップのような継続的な改善を行ってきました。今回はその続きとして、約1年半ほど前から行っているグーペユーザー向け管理画面の漸進的なフロントエンド改善について紹介します。
歴史あるサービスのフロントエンド改善を小さく始めたいと考えている方へのヒントになれば幸いです。
グーペの開発環境（改善前）
まず、改善を始める約1年半ほど前の開発環境について、フロントエンドに関係ある部分のみ軽く触れておきます。
- PHP製のマルチページアプリケーション（MPA）でテンプレートエンジンはSmarty
- jQueryが多めでVanillaJSも少しある
- Viewに軽い動きをつけるような処理が多め
- 一部でAjax通信をしているところもある
- （jQuery 1.12 + jQuery Migrate Plugin 1.4で動いている（詳細は後ほど））
- Vue.jsもほんの少しある
- CDN経由のものとnpm経由のものがある
- 完全ビルドでSmartyと組み合わせたり、ランタイム限定ビルドで小さな単一ファイルコンポーネントを作ったり
- gulpとwepbackを両方使っている
- JSやCSS関連のタスクは元々gulpに集約されていて、npm経由でのVue.jsが導入された頃にwebpackも使い始める
- JSライブラリのバージョンアップはほとんど行われていない
- 使っているかどうか分からないJSライブラリ、ファイル、処理がそれなりに存在する
改善の基本方針
「大規模リニューアルでシングルページアプリケーション（SPA）化してバーーンとモダンな開発環境にするぞ！！１」
…といきたいところですが、工数などの関係もあり、なかなかそのような思い切った大きな改善はできません。
よって、以下を基本方針としました。
- 既存の資産（jQueryなど）を活かしつつ、部分的にモダンな開発環境にしていく
- 不要なもの（JSライブラリ、ファイル、処理）は可能な限りなくしていく
jQueryで書いていたような処理はVanillaJSでも十分書けるようになった昨今ですが、グーペのjQuery依存度やjQueryからVanillaJSへの書き換えの工数などを考慮し、既存の資産を活かす方向性を選びました。
とはいえ、これ以上jQuery依存は増やしたくないですし、むしろ減らしたいくらいなので、基本的に新機能の追加や既存機能のリニューアルではVue.jsやVanillaJSを使うような方針としています。
取り組んだこと
jQueryバージョンアップ
先に事前知識として、jQuery Migrate Pluginというプラグインについて紹介します。
jQuery Migrate Pluginとは、jQueryのバージョンアップをサポートするためのプラグインで、公式から提供されています。このプラグインには以下のような機能があります。
- バージョンアップによって廃止された機能を復元し、そのまま使えるようにしてくれる
- バージョンアップによって廃止された機能を使った場合、コンソールに警告を出してくれる
このプラグインを読み込みながらバージョンアップをし、コンソールに出てくる警告をなくしていき、最後にプラグインを外すことでバージョンアップを完了することができます。
注意点として、このプラグインには、jQueryの1系や2系の最新バージョンから3系へのバージョンアップをサポートするもの、jQueryの1系や2系から1系や2系の最新バージョンへのバージョンアップをサポートするものの2種類あり、使い分ける必要があります。詳細は公式ページを参照してください。
さて、ここからはグーペの話になりますが、先述の通り、グーペではjQuery 1.12 + jQuery Migrate Plugin 1.4で動いている状態でした。既にプラグインは読み込まれていますが、コンソールには大量の警告が出ている状態だったので、それらをなくすところからのスタートでした。
「文字列置換で全て一気に解決！」みたいなことはできず、部分的に文字列置換しながら愚直に作業していきました。ただ、先述した基本方針にもある通り、jQuery依存は減らしたいと思っていたので、不要なコードなら削除し、コードの書き換え時にVanillaJSの書き換えが容易そうなものは書き換えるようにしていました。
結果としてjQueryのバージョンを当時最新の3.4に上げ、プラグインを外すことができました。更にjQuery依存を少しだけ減らすことができました。
ちなみに3.5へのバージョンアップもその後完了し、最近リリースされた3.6へのバージョンアップも数日前に完了しています。
機能単位でのSPA化とTypeScript導入
グーペ管理画面にはこのような管理メニューがあり、様々な機能を提供しています。
グーペ管理画面の全体をSPA化するのには膨大な時間がかかるため、各機能のルーティングはこれまで通りサーバーサイドで行うMPAのままとし、各機能に対し、機能単位でSPA化にしていくような戦略を取ることにしました。
例えば、約4ヶ月前に新機能としてリリースしたイベント予約機能は、Vue.js、Vue Router、TypeScriptなどを用いたSPA構成になっています。
実績はまだまだ少ないですが、徐々にSPA化を進めていきたいと考えています。
その他
以下のような取り組みを行いました。
- JSライブラリのバージョンアップ
- ほとんどのライブラリを最新に近い状態にすることができている
- 不要なJSライブラリ、ファイル、処理の削除
- CDN経由でVue.jsを利用するのをやめる
- 脱gulpに向けた活動
- webpackやnpm-scriptsに移行予定
- JSファイルに関する処理は移行完了し、CSSファイルに関する処理はこれから、という状態
さいごに
いかがだったでしょうか。これらの改善は基本的には他業務と並行して行っているので、改善スピードは決して速いものとは言えません。ですが、このような日々の小さな改善の積み重ねが将来的には大きな改善へと繋がり、結果としてユーザー体験や開発者体験の向上に繋がると考えています。
これまでの改善では技術的な負債を返すことをメインで行ってきました。負債を全部返した状態ではないですが、新しいことにもいろいろ挑戦できる環境になってきたので、これからも楽しみながら改善を続けていきます。何か進捗があればまたテックブログなどで紹介できればと思います。