noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています

本記事では、noteのフロントエンドについて2つトピックを紹介します。Nuxt.jsへの移行が完了した話と、見えてきた課題を踏まえ次世代のフロントエンド構築を模索している話です。

Nuxt.jsへの移行が完了

noteでは、AngularJSで構築していたフロントエンドをNuxt.jsに移行するプロジェクトを2018年から進めていましたが、2021年12月、ついに移行が100%完了しました！

最初の1年弱は移行プロジェクトを組み専任リソースを張って実装し、ページ単位で移行していました。手順の型ができて不確実性が減ってからはローコスト運用に変えて少しずつ進め、約3年で全てのプロセスが完了しました。移行の動機、Nuxt.jsの選定理由、移行プロセスなどはこちらの記事を参照いただければと思います。

移行した結果、どうなったか？

Nuxt.jsへの移行により以下のような恩恵が得られました

• viewレイヤの細かい制御が可能になり、チューニングや実装がしやすくなった

• SSRにより全体的なパフォーマンスが向上した

• vuexの導入により複雑なページのUI実装のメンテナビリティが向上

• SFCの導入によりcssの実装コストが下がった

• StoryBookのような既存のツールチェインに乗ることができた

• メンテナンス・機能追加・性能改善が活発なフレームワークに移行できた

• サーバーサイドのRails内からjs(CoffeeScript)が消え、責務が分離できた

• フロントエンドエンジニアの採用に有利に働き仲間が増えた

• etc

移行プロセスはどれくらい大変だったか？

フルリプレイスはどんな案件でも大変です。移行戦略と腕力、大量の調整、気合根性が必要になります。

今回は、ビッグバンリリースを避けてページ単位の漸進的な移行を行う戦略を取りました。ゆえに、移行期間中にも新機能やカイゼンが別チームによりデプロイされます。その結果、AngularJSで入った変更をNuxtでも追っかけで実装しないといけないケースが発生しました（移行あるあるだとは思います…）。

その頻度を少なくするため、移行は変更頻度が高いページから行いました。noteの場合は記事詳細ページです。アクセスが最も多く来る重要ページ、いわば本丸なのですが、逆にこれを乗り越えると後は道なりで粛々と進めていけばよく不確実性が一気に低くなるので、決行することにしました（性能面での恩恵も大きくなります）。デプロイはトラブルはあれど、おおよそ想定通りの範囲に収まりました。

マイルストーンとなった記事ページの移行は以下の記事でも解説しています。

新しい課題への直面とフロントエンド基盤の見直し

deprecatedなフレームワークへの依存は解消し、モダンなフロントエンド環境へは移行できました。Nuxt.jsの運用を始めて2年半経過しましたが、フロントエンド開発での問題が無くなったわけではありません。むしろ、更に厄介チャレンジング な技術課題に直面しています

Nuxtのコードベースが肥大化し開発効率に悪影響

移行後も沢山の機能追加やカイゼンを実装しデプロイしてきました。その結果、コードベースが予想以上のペースで肥大化し、ビルドや開発業務にかなりの処理時間がかかり生産性に悪影響が出るようになってきました。

不要コードの削除やビルドパイプラインの効率化などの対策である程度は改善できましたが、機能や複雑性はこれからも増えるため、抜本的な対応が必要です。そのため、コードベースを分割し、画面ごとに異なる技術スタックやレポジトリ、デプロイサイクルを選んでサービスを機動的に展開できるようにリアーキテクチャを試みています。

note記事を書くためのエディタも、現在はReactベースで実装した新エディタへのフルリニューアルが進行しています（ぜひ一度使ってみてください！）。本家と切り離されたコードベースなので小さく、機動的に、リスクを抑えて高頻度でデプロイできており、開発者DXも良好に推移しているので今後もフロント分割の方向性を模索していく予定で、用途に応じてNuxt.js以外の選択肢も幅広に検討しています。

このフロントエンド分割の取り組みはまさに現在進行中で、出てきた問題を解決しながら進めています。詳しくは以下の記事でも解説しています。

Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社

Nuxt3への移行の検討

2021年10月、ついに Vue3をビルトインしたNuxt.jsのMajorバージョンアップであるNuxt3 のbetaがリリースされました。

大幅なビルド高速化、ビルドサイズ軽量化、開発者ツールの拡充、パフォーマンス向上など多くの目覚しい改善が発表されているため、upgradeの可否について検証・調査を進めています。

Nuxt3では、BridgeというNuxt2からの移行環境が用意されています。noteのコードでBridgeのテストを行った所、逆にビルド時間が遅くなったり、ビルド時のメモリサイズが倍以上に膨れたりといった事象が観察されました（2021年12月段階）。また、ネイティブ ESMへの対応も工数を要する見込みです。総じて、productionへの展開には時間を要しそうな印象を持っています。

フロントエンド基盤を強固にするエンジニアを募集しています

最後にお約束です。noteでは大規模フロントエンドの課題を解決したいエンジニアを募集しています！フロントエンドチームも心強い仲間が増え、根本問題に取り組みリアーキテクチャをさらに推進できる体制が整ってきました。来年移行もチャレンジを続けていく予定なのでご一緒できると嬉しく思います！

フロントエンドエンジニア / note株式会社