TimeTreeウェブ版のSSR脱却と負債を生まない目標づくり
はじめに
こんにちは、フロントエンドエンジニアのSaulです。今年の6月にTimeTreeに入社し、早半年が経ちました。この記事は、株式会社TimeTree Advent Calendar 2023の4日目の記事として、入社直後に取り組んでいたサーバーサイドレンダリング（SSR）脱却についてお届けします。
ちなみに昨日はStudがLokalizeというサービスを紹介してくれました。日英以外の多言語対応や翻訳量で課題を感じてる方はぜひ読んでみてください。
TimeTreeウェブ版の現状
TimeTreeウェブ版はアプリ版リリースの少しあと、2016年に開発されました。今日までの7年間は決して平坦ではなく、紆余曲折を感じる味わい深いコードベースとなっていました。
（Reactベースのアプリケーションなのですが）一部がクラスコンポーネントのままだったり、scssとemotionの混在、ライブラリのもメジャーバージョン数個遅れ等々。これらの詳細は一日目の記事で触れていますが、要は課題が山積みでした。
ちょうど入社した6月からウェブ版を整備しようというプロジェクトが始まり、自分もそこに参画しました。
新たな負債を生まない目標づくり
前提を決める
まず考えたのは、今Q（6~9月）で確実に終わる目標を設定することでした。課題のいくつかは、改善途中で頓挫してるものもあり、新旧入り交じったコードベースが新たな負債になっていました。これは開発体制の頻繁な変更が主な原因と考えられたので、まず前提をきめました。
前提：
組織編成が変わらない1クオーター（3ヶ月）で完結できる目標を立てる
あとはどの課題に取り組むかですが、他領域への影響の大きさを考えてSSR脱却に決めました。hypernovaというライブラリを使ってSSRをおこなっており、このライブラリがとっくの昔にdeprecatedになっており、なんなら2023年10月にアーカイブされていました。それ故、他ライブラリがアップデートできなかったり、Nodeサーバーのメンテナンスコストも計上されていたので、SSR脱却が第一候補に上がりました。
ちなみにSSR脱却は、長期的にはRuby on Railsからの脱却やNext.js移行にもつながってきます。
長期目標：Railsからの脱却 & 他フレームワークへの移行（Next.js等）
短期的な目標の設定：ほぼ使われてないにも関わらず残っていたSSRの削除
現状：Rails + HypernovaによるSSR
目標：RailsによるMPA（Multi-Page Application）
この短期目標を今Qで取り組みましょうという話に落ち着きました。
取り組み内容
移行作業：まずMPA用のコントローラーを作成し、小さめのページから順に適用しました。
最終ステップ：全ページへの適用後、SSR用のコントローラーやモジュールの削除、webpackの設定変更、ライブラリの削除を行いました。
初期のRailsとReactに散らばった古いコードの把握が難しかったのですが、創業から開発担当しているStudの膨大な知見によりスムーズにおこなえました。大感謝です。
作業自体は難しくなかったので、あとは粛々と進め、想定より早くSSR脱却を終えることができました。
振り返り
振り返ってみると当たり前のことをやってるなあ、と思いますが、入社当初はNext.js移行！という声がよく耳に入ってきました。絶対頓挫すると思ったので、上記のように課題を分解できてよかったです。
あと、8月後半から新規開発が始まったので、例に漏れず整備プロジェクトは中断となりました。ただ、現在は新規開発をしつつも、基盤整備も並行しておこなっています。
おわりに
今プロジェクトでは入社直後に担当したSSR脱却についてお届けました。入りたての組織なので、組織の経緯やメンバーの特性を考えて意思決定が必要でしたが、組織もメンバーも良すぎて何の障害もなかったです。特に膨大な知識を持つ創業メンバーのStud、技術負債の返却に多大な理解を示してくれたPMのBruce には大変お世話になりました。
ウェブ版の人員は入社当初よりも増え、さらに活発になってます！TimeTreeでのフロントエンド開発に興味を持たれた方は、ぜひカジュアル面談などでお話しましょう！