この記事は Howtelevision Advent Calendar 2022 9日目の記事です。
8日目は@Syoituさんによる「PokeAPIを利用した二次開発」 でした。
こんにちは、ハウテレビジョンで外資就活の開発をしている菅と申します。
弊社では今夏からフロントエンドの技術スタックとしてNext.jsを導入しました。
最終的にすべてのフロントエンドの実装をNext.jsで置き換えることを目標に、技術負債解消プロジェクトチームを結成し、日々古のコードたちと戦っております。
本記事では、Next.jsを導入してみてよかったこと、苦労したことを書いていきたいと思います。
現在の外資就活ドットコム
弊社が運営する外資就活ドットコムは2010年に始まったサービスです。
フレームワークはCakePHPを使用していますが、プロダクトの成長速度に保守が追いつかずに継ぎ接ぎが多く頭が痛い状況です。
React.js + Golangへの置き換えを新規開発・運用の傍らで試みてきましたが、数年経った現在でも半分以上はCakePHPで実装されています。
更に申し上げると、Reactで実装されている部分もCakePHPのviewの中にReactを挿入する形で使用しています。
ここはReactで実装してるから早く終わるよね〜と甘い見積もりをしていると、ところがどっこいCakePHP側を触らないといけなかったということが起きかねません。
段階的リプレイス
とはいってもいきなりすべてのコンテンツをリプレイスしてリリースするのは現実的ではありません。
以下のルールでリプレイスを開始しました。
- 1コンテンツごとなど区切りやすい単位でリプレイスしていく
- 別アプリケーションとしてデプロイし、リプレイスされたコンテンツのURLのみnginxでリダイレクトをかけてNext.js製アプリケーションをユーザーに表示する
現在の予定としては一年半ほどかけてリプレイスが完了する見通しです。
いざ出陣
最初のリプレイス対象として「相談室」というコンテンツに白羽の矢が立ちました。
理由としては
- React.js + Golang (in CakePHP) で実装されているコンテンツなので、バックエンドのエンドポイントがすでに存在している
- 他コンテンツよりも比較的小規模である
などがありました。
よかったこと
- すべてTypeScriptファイルなので型の安全性が担保される
これまでも部分的にTypeScript化されているものはありましたが、基本的にはjsファイル…。
格段に作業効率が上がり、安心感を持って開発をすることができるようになりました。
- 単純に早い
言わずもがなですが表示もbuildもdeployも早くなりました。
開発環境由来のタイムロスを最小化することで精神衛生の状態も向上しました。
- 古い書き方のコードを一掃することができた
こちらも言わずもがなですが、Next.jsで再実装することによってClassコンポーネントでの実装やhooksを使わない実装などを一掃することができました。
現在のコードもいずれ古くなってしまうので、継続的にリファクタにも力をいれていきたい所存です。
苦労したこと
- PHPで実装していた細かいDBとの通信をすべてGolangで再実装する必要があった
当然ですが、PHPだからこそできていた実装方法はできなくなりました。
Next.jsにapiをもたせる方法もありましたが、今回のリプレイスではすべてバックエンド側はGolangに受け持ってもらっています。
- 秘伝のタレを読みといていく必要があった
今までのツケなので文句を言う筋合いはないのですが、つらいものがありました…
- 外資就活ドットコムのスマホアプリのwebViewで表示するとNext.jsのルーティングがエラーになってしまい、力技で解決する他なかった
あまりの謎現象にチーム全員で頭を抱えました。
おそらくスマホアプリ側の実装の問題によるもののため、一旦力技で解決し、根本的解決にむけて引き続き調査と作業を続けています。
まとめ
- 技術負債は本当につらい
- 技術負債はこまめに解消した方がいい
- Next.js最高！
- Next.jsで開発をしたい方、新しい技術が好きな方、ぜひ一緒にハウテレビジョンで働きましょう！
- ご応募お待ちしております！