この記事はnote株式会社 Advent Calendar 2023の5日目の記事です。 僕はnoteで働いているエンジニアで、主にABテストで改善を繰り返す業務をやりつつ、フロントエンドのリアーキテクチャにも取り組んでいます。 趣味はコーヒーとエレキギターで、どちらも物欲が尽きることはありませんが、最近は新しい焙煎機とエスプレッソマシーンを買いたくてあーでもないこーでもないと悩みながら商品検索を繰り返しています。 Svelteを使っている背景さて、noteではSvelteを使って一部のコンポーネントを実装しています。Svelte自体の詳しい解説は省きますが、開発体験がよくコンパクトなコード にトランスパイルできるUIライブラリです。 現在2023年12月時点でもnoteのフロントエンドの大部分はNuxtで実装されていますが、様々な問題があるためアーキテクチャそのものから見直し、主にNex

noteのフロントエンドリアーキテクチャとは以前「フロントエンドapp分割」として紹介していたプロジェクトの延長にあるものです。 そもそもフロントエンドリアーキテクチャとはなにかnoteは現在APIをRuby on Railsで、Webフロントエンドは主にNuxtで実装されています。Nuxtフレームワークの設計上VueとVuexを多用していくわけですが、多くの機能が密結合しWeb Vitalsの悪化や、生産性の低下、スケールしにくい状態、障害を引き起こす原因になるなどの影響が発生しています。 そこで機能毎に適切な粒度でアプリケーションを分割しつつ上記の問題を解決してくプロジェクトが始まりました。それがフロントエンドリアーキテクチャです。 ちなみに分割するアプリケーションで使うフレームワークはNextを採用しています。これはNuxt v3への移行が困難を極めるため、新たな設計のもとでReac