この記事は、弁護士ドットコム Advent Calendar 2024 の 23 日目の記事です。
はじめに
こんにちは、クラウドサイン事業本部の篠田（@tttttt_621_s）です。普段はクラウドサインのフロントエンドの改善活動を行なっています。
「負債」という言葉で何をイメージしますでしょうか？
経営的には「負債」はポジティブな意味合いもありますが、技術的には「負債」はネガティブな意味合いが強いですよね。 ついつい「なんでこんな実装になってるんだ？」とか「これはつらい！」などと言ってしまいがちです。
とはいえ、これまでプロダクトの売り上げに貢献してきたコードであることも事実です。
今回はそんな技術的負債に対してリスペクトを持ちつつ改善していることを紹介いたします。
- はじめに
- フロントエンドの改善チームができた背景
- Vue 3 化
- TypeScript のバージョンアップ
- Node.js のバージョンアップ
- Renovate の再開
- その他の改善
- 今後やっていきたいこと
- おわりに
フロントエンドの改善チームができた背景
クラウドサインは 2015 年にリリースされた契約締結から契約書管理まで可能なクラウド型の電子契約サービスです。 事業の急成長と共に多くの方にご利用いただき、今では大企業から自治体でも導入いただいています。
またエンジニアの人数も増え、多くの開発チームが存在しています。
フロントエンドは当初 jQuery で実装されていましたが、2016 年に Vue.js を導入しました。 その後、Options API や vue-property-decorator、@vue/composition-api などを経て現在は script setup で実装しています。
プロダクト開発に求められることの 1 つとして顧客に早く価値を提供するということがあります。
しかし、事業の成長と共に機能開発において、以下のような小石につまずくことが増えてきました。
- 本来行いたい開発の影響で、他の画面も合わせて修正する必要がある
- 共通コンポーネントに修正が必要だが、他の画面に影響が出るかもしれない
- 新しいライブラリを導入したいけど、今の環境に入れられない
このような小石はなかなか片手間で改善するのは難しく、やがて大きな岩になり開発スピードが遅くなることが懸念されました。
そこで、価値提供の阻害要因であるこれらに対して、戦略的に対処するため 2023 年 2 月にフロントエンドの改善チームが立ち上げられました。
Vue 3 化
Vue.js を採用しているプロダクトにおいて、2023 年はまさに Vue2 EOL による Vue3 化の年だったのではないでしょうか。
クラウドサインも Vue3 化に取り組みました。クラウドサインの戦略として、新規機能開発を止めずに Vue3 化を並行して行うという意思決定をしました。
詳しい取り組みは、Vue Fes Japan 2023 で発表させていただいたのですが、Vue2 と Vue3 の破壊的変更を吸収するモジュールを作成しアップデートに取り組みました。
当時の発表で触れられていない点としては、以下の学びがありました。
モジュールを正しく使ってもらうための仕組み化が重要
Vue2 と Vue3 の破壊的変更を吸収するモジュールを作成するというアプローチはとても良かったです。
しかし当然ですがそれを正しく使ってもらう必要があります。 そのために、lint などによる仕組み化や、仕組み化が難しいときはドキュメントを充実させるなどの啓蒙活動が必要であることを学びました。
ドキュメントにないような特殊な使い方を控える
さまざまな経緯で、ドキュメントにないような特殊な使い方をしているコードが一部ありました。
このようなコードは、ライブラリ側が想定してないような場合もあり、アップデート時に不具合が発生し原因の追究や回避策の検討も難しかったです。
他チームメンバーの協力
クラウドサインのフロントエンドは大規模なため、どうしても手数が必要になるときがありました。
そのようなタスクは、他チームメンバーの協力のおかげでスピーディーに完了できました。
TypeScript のバージョンアップ
改善チームができた当時、TypeScript は 3 系を使っていました。
現代のフロントエンドにおいて TypeScript は必須と言っても過言ではないもので TypeScript のバージョンアップも重要な課題でした。
また 3 系からアップデートする過程で、TypeScript からさまざまなコンパイラオプションも追加されています。
具体的には、noUncheckedIndexedAccess や noPropertyAccessFromIndexSignature などがあります。
特に、noUncheckedIndexedAccess を有効にするためには結構な手間がかかりましたが、これにより型安全性が向上しました。
個人的には、クラウドサインで satisfies が使えるようになったときは嬉しかったのを覚えています。
今では 5 系を使っていますが、今後も定期的にバージョンアップを行い型の恩恵を最大限活かして開発できる環境を維持していきたいと考えています。
Node.js のバージョンアップ
Node.js は LTS に追従し、定期的にバージョンアップを行っています。
また Node.js のリリース情報は slack に通知されるようにしています。これによりセキュリティリリースの情報は早いタイミングでキャッチアップ可能になっています。
当初、Node.js のバージョンアップはフロントエンドの改善チームが行っていましたが、今ではフロントエンドエンジニアの誰もがやるように仕組み化しみんなで取り組んでいます。
Renovate の再開
もともとクラウドサインは Renovate を導入し npm package のアップデートを行なっていましたが、一時的に停止していました。 再開するにあたり、いきなり package.json にあるすべててのライブラリを Renovate によるアップデート対象にするのではなく小さく再開しました。
具体的には Vue.js や TypeScript などのコアなライブラリから Renovate の対象にし、今後徐々に拡大していく想定です。
その他の改善
その他にも、以下のような改善に取り組みました。
- npm scripts の整理
- unit test の改善
- moment.js から date-fns への移行
- fork-ts-checker-webpack-plugin から vue-tsc への移行
今後やっていきたいこと
今回紹介できていない現在進行中の改善もいくつかありますが、それに加え今後は以下のようなことにも取り組んでいきたいと考えています。
予防医療的な取り組み
今までは「負債」に対する改善ということで、もうすでに可視化された問題に対する取り組みを行ってきました。
今後は、問題になりそうな部分を早めに検知して「負債」と呼ばれる前に何かしらのアクションができるようになりたいです。
新技術の検証
日々多くの新しい技術が生まれています。それらがクラウドサインにとってプラスになるのか検証していきたいです。
結果として良さそうなものは積極的に導入することで開発効率や品質の向上に繋げていきたいです。
おわりに
冒頭でも記述しましたが、クラウドサインは 2015 年にリリースされ、10 年目を迎えるサービスです。
10 年といいますと、フロントエンドの技術的転換期を何度も迎えてきたことになります。
寿命の長いサービスだからこそ、大変なことも多々ありますが、それ以上にとてもおもしろいです。
今後も技術的負債と向き合い、改善していくことが重要だと考えています。
最後まで読んでいただきありがとうございました。
