こんにちは、 虎の穴ラボのS.Sです。
最近は、めっきり寒くなって鍋物が美味しい季節になりましたね。
さて、プロダクトが長く続くと技術の進歩や開発に携わった人が増えることで、レガシーなコードが増えて、それが次の世代に受け継ぐ際にネックになったりします。 そこで、先日発売されました「WEB+DB PRESS Vol.119」にてフロントエンドの脱レガシーについての特集記事が参考になりましたので、ご紹介いたします。
書籍情報
- タイトル：WEB+DB PRESS Vol.119
- 出版社：株式会社技術評論社
- 発行：2020年10月24日
【特集】 フロントエンド脱レガシー
内容
本特集は、サイボウズのフロントエンドエキスパートチームが、自社のプロダクトの「kintone」を題材にフロントエンドにおける脱レガシーについて「長く愛されるプロダクトをさらに改善していくために」をテーマに全5章の構成で解説されています。
第1章 脱レガシーの進め方
まず第1章では、脱レガシーを進める上で、まずフロントエンドのレガシーについて具体例が解説されています。
プログラム開発でレガシーというと、古い技術を使用されていたり、改修すると影響範囲がわからないもの、実装された意図や背景がわからないコードが含まれますが、
フロントエンドのレガシーとなるとさらに、使用しているOSSが古い、サポートブラウザの制約などフロントエンドならではのレガシーの問題点を取り上げられています。
また、なぜ脱レガシーが必要なのか、レガシーコードを改善する前に行うこと、安全な脱レガシーの進め方が解説されています。特に、脱レガシーを行うことで得られるメリットが開発効率の向上の他に意外な面であったりします。
第2章 技術選定
次に第2章では、脱レガシーを行う上で、新たな技術を選定する必要がありますが、その技術選定をする際の評価軸について解説されています。
単に、流行り物を使えばいいという訳ではなく、そのプロダクトにあった技術を選定しないと後々後悔する事になるので、ここは慎重に選びたいところです。
第3章 テスト
第3章では、フロントエンドにおけるテストの手法についての解説と、Jestを使ったフロントエンドの自動テストの導入方法が載っています。
jestjs.io
実際にテストがないプロジェクト状態からのテストコードの実装方法が書かれていますので、ゼロから導入が出来そうです。
フロントエンドをテーマとしたテストコードの記事自体が少ないので、これはとても参考になりました。リファクタリングを行って開発効率を上げても、品質を低下しては本末転倒です。効率よくテストを行うためにも、フロントエンドの自動テスト導入を進めてコード改善を行いたいです。
第4章 脱レガシーコード
テスト環境も整ったところで、第4章では実際に脱レガシーを進めるための改善テクニックが紹介されています。既存のコードを一気に新しいものに置き換えるのでなく、少しづづリファクタリングする方法が解説されているので、参考になります。
JavaScriptの改善がメインですが、CSSの改善方法も記載されています。
さらに、JavaScriptからTypeScriptにコードを自動変換してくれるツール ts-migrate の使い方も紹介されています。これを使えば効率よく移行が出来そうです。
github.com
第5章 次のレガシーを生まないために
最後に第5章では、今書いているコードが次の世代に受け継がれるようレガシーにならないために取り組んだことが紹介されています。
この辺りの仕組みがないとせっかくリファクタリングしたコードも次の世代に変わった時に、うまく受け継がれずに結果としてレガシーコードを生んでしまう可能性があります。そうならないためにレガシーコードを生まないための仕組み作りも必要だと感じました。
感想
レガシーコードの問題点から、脱レガシーを行う上での技術選定の方法や実際にレガシーコードを改善するテクニックとテストコードの作成方法など、脱レガシーの進め方が一通り網羅されていました。また、実際のプロダクトの改善例を元に解説されていたので、実務に落とし込む際にとても参考にしやすいです。
私が開発に携わって頂いています「とらのあな通販」サイトも2018年6月にリニューアルしてから、機能もだいぶ増えまして、レガシーな部分が多くなってきました。この特集のテーマでもありますが、「長く愛されるプロダクトをさらに改善していくために」脱レガシーを進めていきたいです。
P.S.
【オンライン開催】とらのあなエンジニア＆マーケター採用説明会【地方勤務可能！！】
11/20(金)に、採用説明会をオンラインにて開催します。 虎の穴ラボへの転職を考えている方や地元に住みながらWEBエンジニアの仕事に就きたい方、ちょっと話を聞いてみたい方など、ご参加をお待ちしております！ yumenosora.connpass.com
カジュアル面談
弊社エンジニアと1on1で話せます、カジュアル面談も現在受付中です！こちらも是非ご検討ください。 news.toranoana.jp
その他採用情
虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。
カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。
カジュアル面談や採用情報はこちらをご確認ください。
yumenosora.co.jp
