noteでフロントエンドエンジニアをやっているzochang(ことyamagata)です。最近はFall Guysで瞬発力も記憶力も必要としないステージだけ生き生きプレイできることに気づきました。

さて先日note.comのnavbarをSvelte製のコンポーネントでの置き換えが完了しました。
navbarというのはnote.comをブラウザで開いているときに常にページの上部にあるロゴや検索フォームがあるUIです。

なぜしたの？

これはnoteのフロントエンドアプリが大きくなりすぎてしまったために発生した様々な問題を解消するプロジェクトの一環です。

現在noteのフロントエンドは一つのNuxt.jsアプリですが、これを機能毎に分割し開発効率の向上、新機能リリース時の影響範囲コントロール、パフォーマンスを向上させるのが目的です。

そのために手始めとして分割後の各アプリで共通して使うnavbarをSvelte実装で置き換えることで、異なるフレームワーク（主にNuxt.jsとNext.js）でも同じコンポーネントを使えるようにすることが狙いです。

このあたりの話は以前スライドを公開しています。
問題の気付きや何故Svelteを採用したか、などがご覧いただけます。

どれくらいかかったの？

Svelteコンポーネント開発は基本僕一人で行っていました。先述のスライドによると2021年2月から始めていたようなので、完全にnavbarを置き換えるまで１年と三ヶ月かかったようです。

業務時間の50%をこのプロジェクトにあててまして、通常の業務と並行して行っていたためあまり進捗を出せない時もありました。あとはモチベーションを維持していくのが難しい時期もありましたが、最初にログイン前状態navbarのリリースが出来たときに達成感を得られたのでそこで持ち直した感があります。

どんなことしてたの？

開発中は以下のようなことをしていました。

1. noteの既存実装を動かして動作を確認する

2. おなじ動作をするようにSvelteでコンポーネントを設計&実装する

3. Nuxt <=> Svelte間で共通で使いたいロジックやリソースに気づく

4. note-common-styles, note-api-client, note-universal-routerなど共通ライブラリを開発する

5. ユニットテストを充実させる

6. E2Eテストを追加する

7. 既存実装の仕様変更に気づく（変更をSvelte側にも取り込む）

8. 仕上がってきたらステージング環境でおさわり会を開く（沢山の方に参加していただきました 🙏）

9. バグが大量に発覚するのでひたすら直す

10. おさわり会をまた開催する

11. バグが潰せたらリリース！

とくに4の共通ライブラリはたくさん生まれましたし、紹介したいことがいろいろあるので別記事で追って紹介していきます。

これからどうするの？

現在はNuxt.jsから一部の画面をNext.js製のアプリに切り離す作業をしています。どこから分割されていくかはリリースされてからのお楽しみです。

最近はフロントエンドエンジニアがチームを横断して集まってタスクを分担して進めていますので以前よりも速度が上がって、モチベーションも上がりまくりです。最終的なフロントエンドの図はまだぼやけている部分もありますが、かなり素晴らしいものになると確信しています。

是非これからのnoteのフロントエンドに期待してください。