モノレポを構築

2025-06-03

TypeScriptでフルスタック開発マスターへの道・家計簿アプリ開発編

ディレクトリを用意する

プロジェクトを作成するためのディレクトリを用意します。
任意の場所にexpense-tracker-appディレクトリを作成し、移動します。

mkdir expense-tracker-app
cd expense-tracker-app

移動したら、Cursorを開きます。

解説動画

YouTubeに解説動画を公開しています。こちらもあわせて、ぜひご覧ください。

モノレポとは

まずは、モノレポのついて解説します。モノレポとは、複数のプロジェクトやパッケージを単一のリポジトリで管理する開発手法です。従来の方法では各プロジェクトを別々のリポジトリで管理しますが、モノレポではすべてを1つのリポジトリにまとめます。主な特徴と利点は以下の通りです。

まずは、コード共有の容易さと依存関係管理の簡素化にあります。 1つのリポジトリ内にすべてのプロジェクトが存在するため、共通コンポーネントやユーティリティの再利用がスムーズになります。また、開発環境とワークフローの一貫性も大きな利点です。チーム全体が同じ設定、同じツール、同じルールの下で作業できるため、新メンバーの参加時やプロジェクト間の移動時の学習コストが大幅に削減されます。さらに、APIの変更やライブラリのアップデートなど大規模な変更が必要になった場合、それをすべてのプロジェクトに一度に適用できる点も非常に効率的です。最後に見逃せないのがテストの統合と自動化の容易さです。全プロジェクトに対する統合テストを一カ所で管理でき、変更がシステム全体に与える影響を即座に確認できるため、品質保証プロセスが強化されます。

モノレポを構築するには、いろんなツールがあります。今回はbunが用意しているbun workspaceを導入します。

モノレポを構築する

それでは、CursorのAgentを使って、bun workspaceを導入してモノレポを構築しましょう。構築した後に、詳しく解説します。以下のプロンプトを使います。

https://bun.sh/guides/install/workspaces
URLを参考にモノレポを導入したい
workspacesはappsディレクトリを作成して
appsディレクトリには空のfrontendディレクトリと空のbackendディレクトリだけ用意して
frontendディレクトリとbackendディレクトリにpackage.jsonは要らない
.gitignoreを作成して
README.mdを作成して

プロンプトを解説します。最初のURLはbun workspaceのドキュメントです。 https://bun.sh/guides/install/workspaces Agentはネットの情報も参照できます。次に、ドキュメント通りだと、workspacesという名前でディレクトリが作成されるので、appsという名前で作成するように指示します。そして、appsディレクトリにはfrontendディレクトリとbackendディレクトリを作成する様に指示します。ドキュメントを参考にしているので、frontendディレクトリとbackendディレクトリにpackage.jsonを作成してしまいます。そこで、package.jsonを要らないと明確に指示します。あとは、.gitignoreとREADME.mdを作成するように指示します。それでは、貼り付けて実行します。あえて、早送りはせずに見てください。終わったら、Accept allをクリックしてください。

モノレポの構成を確認する

作成されたものを確認します。 appsディレクトリには、frontendディレクトリとbackendディレクトリが作成されています。各ディレクトリを確認すると、どちらのディレクトリにも、package.jsonはありません。同じプロンプトを投げても、その都度結果が違うことがありますので、気をつけてください。もし何かファイルが作成された場合は、削除しておいてください。次にルートディレクトリのpackage.jsonを見てみます。

{
  "name": "expense-tracker-app",
  "version": "1.0.0",
  "description": "Expense Tracker Application Monorepo",
  "private": true,
  "workspaces": ["apps/*"],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

rootのpackage.jsonには、dependenciesやdevDependenciesなどを含めてはいけません。個々のパッケージは自己完結し、それ自身の依存関係を宣言すべきだからです。そこで、privateはtrueしておきます。 trueに設定することで、このパッケージが公開されないようにします。モノレポのルートパッケージは通常、個別のパッケージとして公開する必要がないためです。 workspacesはモノレポ内のワークスペースを指定します。 apps/*は、appsディレクトリ内のfrontendやbackendなどのサブディレクトリをワークスペースとして扱うことを意味します。これにより、依存関係の管理やスクリプトの実行が容易になります。