note のフロントエンドチームでは、これまで複数のリポジトリで管理していたアプリケーションと社内共通パッケージを単一のモノレポに統合し、開発効率の向上と品質の改善を目指しました。モノレポを採用することで、コードの共有や再利用が容易になり、プロジェクト間の連携が強化されます。

モノレポへの移行

これまで note のフロントエンド開発では、複数のアプリケーションと社内パッケージをそれぞれ独立したリポジトリで管理していました。しかし、この方式では、リポジトリ間の依存関係の管理が複雑化し、変更の適用や追跡が難しくなるという課題がありました。

そこで、これらのリポジトリを単一のモノレポに統合することにしました。モノレポへの移行の主な目的は、開発効率の向上と品質の改善です。複数のアプリケーションと社内パッケージを1つのリポジトリで管理することで、コードの共有や再利用が容易になり、変更の適用や追跡がシームレスになります。モノレポの管理には Turborepo を採用しています。

社内パッケージのリリースフロー自動化

移行前の社内パッケージのリリースフローは、手作業が多く非効率的でした。開発者が Pull Request を develop ブランチにマージした後、手動でリリースとタグを作成する必要がありました。その後、作成されたタグをトリガーとして GitHub Actions がパッケージのリリースを行っていました。このプロセスは手動作業が多いため、ミスが発生しやすく、リリースの遅延につながっていました。モノレポへの移行に伴い、社内パッケージのリリースフローを自動化することで、これらの課題を解決しました。

新しいリリースフローでは、開発者が package.json の version フィールドを更新し、その変更を develop ブランチにマージすることでリリースプロセスが開始されます。マージをトリガーとして、GitHub Actions が自動的にタグの作成からパッケージのリリースまで一貫して実行します。パッケージの配信管理には、lerna-lite を使用しています。

Turborepo のリモートキャッシュによるビルド時間の改善

Turborepo のリモートキャッシュ機能を活用することでビルド時間の大幅な改善を実現しました。従来のローカルキャッシュに加え、セルフホストのリモートキャッシュサーバーを導入しました。これにより、複数の開発者がキャッシュを共有できるようになり、既にビルドされた依存関係やアセットをスキップできるようになりました。

また、リモートキャッシュはチーム内で共有されるため、個々の開発者のローカル環境だけでなく、CI においてもビルド時間の改善が実現しました。リモートキャッシュの導入は、モノレポ化による開発効率の向上に大きく貢献しました。

ESLint の共通設定の導入

モノレポへの移行に伴い、コード品質の一貫性を保つために ESLint の共通設定を導入しました。各プロジェクトでバラバラだった Lint ルールが統一され、コードスタイルや品質が向上しました。共通設定の ESLint は、モノレポ全体で適用できるため、新たに追加されるパッケージやプロジェクトも一貫したコードスタイルを維持できます。

複数パッケージ・アプリケーションへの変更を1つの PR で

モノレポ化以前は、複数のパッケージやアプリケーションに関連する変更を適用する際、それぞれのリポジトリに対して個別の PR を作成する必要がありました。この方式では、変更の関連性を把握しづらく、レビュー作業も非効率的でした。

モノレポ化後は、複数のパッケージやアプリケーションにまたがる変更を1つの PR で管理できるようになりました。関連する変更を一箇所で確認できるため、変更の目的や影響範囲が明確になり、レビュー作業の効率が大幅に向上しました。たとえば、ある機能追加のために、API クライアントパッケージと UI コンポーネントパッケージの両方に変更が必要な場合、モノレポ化以前は2つの独立した PR が必要でした。

しかし、モノレポ化後は、1つの PR で両方のパッケージの変更を含めることができます。変更の関連性が明確になり、レビュアーは機能追加の全体像を理解しやすくなりました。また、1つの PR で複数の変更を管理することで、関連するパッケージやアプリケーションの変更が同時にマージされるため、不整合が発生するリスクが軽減されます。

まとめ

モノレポへの移行により、note のフロントエンドチームは開発効率の向上を実現することができました。複数のアプリケーションと社内パッケージを1つのリポジトリで管理することで、コードの共有や再利用が容易になり、変更の適用や追跡がシームレスになりました。

また、社内パッケージのリリースフローの自動化や ESLint の共通設定の導入により、開発者の生産性が向上し、リリースプロセスの効率化が実現しました。さらに、複数パッケージやアプリケーションへの変更を1つの PR で管理できるようになったことで、レビュー作業の効率化と変更の整合性の確保が可能になりました。今後も、モノレポの利点を活かしながら継続的に改善し、より良いプロダクト開発を目指していきます。

▼noteの技術記事が読みたい方はこちら