Zenn
株式会社BTM テックブログPublicationへの投稿
🏖️

なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian)

t.sakamoto
に公開
Next.js
Vercel
Obsidian
Model Context Protocol
Claude
tech

はじめに

こんにちは、BTMの坂本です！
エンジニアの皆さん、日々の開発業務お疲れさまです。
「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」
そんな風に感じることは多々あると思います。

今回はプロジェクト作成からデプロイまで、なるべく労力をかけない個人開発として、Claude/MCPサーバー/Vercel/Obsidianを使った開発を紹介したいと思います。

作成物

今回作成したもの。
https://github.com/sakamoto051/rakuraku
不要ファイルの削除などは手動で行ったりしましたが、基本的に全てClaude経由で実装したものです。
（ファイル消し忘れがところどころに...）
※ リポジトリは予告なく非公開となる可能性があります。ご了承ください。

開発環境

作業フロー

開発シーケンス

Windows環境

Windows 11
WSL2 (Ubuntu 22.04) #この中でアプリ開発

アプリ関連

T3 Stack
  - Next.js
  - TypeScript
  - tRPC
  - Prisma
  - Tailwind CSS
  - NextAuth.js

T3Stackを採用する理由は以下のとおりです。

  • 導入が簡単で型安全な開発が可能
  • tRPCによるフロントエンド・バックエンド間の型共有でコスト削減
  • Vercelでのデプロイが容易

AI関連

Claude (Pro Plan)
Claude Desktop
Claude Code
MCP Server
　- github
　- filesystem
　- claude_code
　- obsidian-mcp-tools

Claude (Pro Plan)

メインで開発を進めるうえでPro Plan以上への加入は必須レベルだと思うので利用します。

Claude Desktop

MCPサーバーを利用するために使用します。AIエージェントとして開発者からの入力を受け付けて、GitHubのIssue作成、実装、PR作成、マージ、デプロイ、ドキュメント作成まで自律的に進めてもらいます。

Claude Code

ターミナルから実行する場合はAPI利用料が発生しますが、Claude DesktopからMCPサーバー(claude_code)として使うとPro Planの利用料金内で自由に使用できます。

MCPサーバー

github

GitHubのリポジトリと連携してIssue作成 / Commit / Push / PR作成 / PRレビューなどができるようにします。

filesystem

ローカルファイル操作用。Claude Codeが使用できればファイル操作もできるので不要かも。

claude_code

filesystemと違いコマンド実行ができるため、自律的にコードベースの理解、ファイル操作、テストの実行、フォーマッターやリンターのチェック、ビルド実行など開発のメイン作業をしてもらいます。
コードの品質部分は、コマンド実行結果という明確な基準を設定して担保できるようにしたい。
単純な実装のみ依頼するとnpx tsc --noEmit, npx @biomejs/biome check, npx next buildなどでほぼ必ずエラーが多発しますが、エラー内容をフィードバックすることでAI側でできるだけ品質を保てる環境にします。

obsidian-mcp-tools

マークダウンエディタであるObsidianのVaultを操作します。
今回はアプリのドキュメント管理用に使用します。

外部サービス関連

GitHub
Vercel
Supabase

Vercel

Next.jsベースの開発を進めるので、デプロイはVercelにGitHubを連携して行います。連携することでブランチ作成時はPreview環境、mainマージ時はProduction環境に自動デプロイされるようになります。無料利用枠で3アプリまでは環境を作れますが商用利用はNGになっているので注意しましょう。
DB、キャッシュサーバー、オブジェクトストレージとも簡単に連携できるので、インフラ周りを丸投げします。

Supabase

DBはVercelから簡単に連携できるSupabaseを採用しています。

開発準備

Claude

Pro planに加入します。手順は割愛します。

Claude Desktop

公式からデスクトップアプリをインストールします。
https://claude.ai/download
以下の手順でMCPの設定ファイルを確認します。
開発者モードを有効にするとDeveloper > Open App Config FileからMCPサーバーの設定ファイルを編集できるようになります。

macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
Windows: `%APPDATA%\Claude\claude_desktop_config.json`

以降で各MCPサーバーの設定をこのファイルに追加していきます。

MCPサーバー

最終的な設定
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<作成したアクセストークン>"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "\\wsl.localhost\\<ディストリビューション名>\\home\\<ユーザー名>"
      ]
    },
    "claude_code": {
      "command": "wsl",
      "args": [
          "bash",
          "-ic",
          "cd /home/<ユーザー名>/<アプリのルートディレクトリ> && claude mcp serve"
      ]
    },
    "obsidian-mcp-tools": {
      "command": "C:\\obsidian\\.obsidian\\plugins\\mcp-tools\\bin\\mcp-server.exe",
      "env": {
        "OBSIDIAN_API_KEY": "<自動設定されるAPIキー>"
      }
    }
  }
}

github設定

アプリ用リポジトリ作成 ~ アプリ作成

WSL内で以下のコマンドを実行してアプリを作成し、GitHubでリポジトリ管理します。公式サイト参考に導入しましょう。
https://create.t3.gg/

npm create t3-app@latest
アクセストークン作成

MCPサーバーの設定用にアクセストークンを発行します。
GitHubのSettings > Developer Settings > Personal access tokensから発行します。

MCP設定

MCP設定ファイルに以下を設定します。
アクセストークンは先ほど取得したものを設定します。

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<作成したアクセストークン>"
      }
    }
  }
}

filesystem設定

MCP設定

MCP設定ファイルに以下を設定します。
環境に合わせてwslの対象パスは修正してください。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "\\wsl.localhost\\<ディストリビューション名>\\home\\<ユーザー名>"
      ]
    }
  }
}

claude_code設定

Claude Codeインストール

Anthropic公式のガイドに沿ってWSL内にインストールします。
https://docs.anthropic.com/en/docs/claude-code/overview

npm install -g @anthropic-ai/claude-code

Claude DesktopからWSL内のClaude Codeを動かすので、インストールが完了後はPowerShellなどからWSLのClaude Codeにアクセスできるか確認しておきましょう。

wsl bash -ic "claude -v"
0.2.57 (Claude Code)
MCP設定

MCP設定ファイルに以下を設定します。
Claude Codeは指定ディレクトリでコマンドを実行するので、cd先はWSL内のプロジェクトのルートディレクトリを指定しましょう。

{
  "mcpServers": {
    "claude_code": {
      "command": "wsl",
      "args": [
          "bash",
          "-ic",
          "cd /home/<ユーザー名>/<アプリのルートディレクトリ> && claude mcp serve"
      ]
    }
  }
}

obsidian-mcp-tools設定

Obsidianインストール

デスクトップアプリのObsidianを公式サイトからインストールします。
（余談ですが、Obsidian公式サイトのドメインが.md(モルドバ)なのおしゃれですね）
https://obsidian.md/
Vaultと呼ばれるObsidianが管理するフォルダを任意の場所に作成します。

プラグインインストール

obsidian-mcp-toolsを使用するために以下のプラグインをインストールします。

  • MCP Tools
    • Local REST API
    • Smart Connections
    • Templater
MCP設定

MCP Toolsのインストールが完了すると、MCP設定ファイルに以下が自動的に設定されます。
APIキーも自動的に設定されているはずです。

{
  "mcpServers": {
    "obsidian-mcp-tools": {
      "command": "C:\\obsidian\\.obsidian\\plugins\\mcp-tools\\bin\\mcp-server.exe",
      "env": {
        "OBSIDIAN_API_KEY": "<自動設定されるAPIキー>"
      }
    }
  }
}

開発

事前準備

DBコンテナ起動

T3Stackではデフォルトでstart-database.shがあり、実行することでDB用Dockerコンテナが立ち上げられます。Claudeにお願いします。

チャット内容

Googleアカウント認証追加

NextAuth.jsの認証機能としてデフォルトでDiscordが実装されていますが、今回はGoogleアカウントでログインできるように設定します。Google認証のIDやシークレットが必要になりますが、詳細は割愛します。
https://next-auth.js.org/providers/google
実装後は環境変数に必要な項目を設定しましょう。

チャット内容

初回デプロイ

VercelにGitHubのリポジトリを連携してSupabaseを使用するように環境変数を設定していきます。詳しい手順は長くなるので省略しますが、以下の内容を実施。

  • VercelにGitHubリポジトリ連携してプロジェクトを作成
  • 作成したプロジェクトにSupabaseを連携して環境変数を設定
  • Googleアカウント連携用のIDとシークレット、AUTH_URLやAUTH_SECRETなど必要な環境変数に設定
  • SupabaseにDBのマイグレーションを反映させるためにビルド時のコマンドを調整

設定が完了するとデプロイが成功して実際に公開されていることが確認できます。

Issue作成

追加機能の実装案から考えてもらいました。映ってないですが、よくあるタスク管理機能を提案されました。

チャット内容

考えてもらった内容を元にGitHubのIssueを作成してもらいます。

チャット内容

作成されたIssueはエピックやラベルまで設定して、ドキュメントの作成まで起票してくれていました。
JestやVitestのテストはなく、PlaywrightによるE2Eのみでしたが、とりあえず今回はこのまま進めていきます。

一覧・表示コンポーネントのIssue

実装

あとはIssueに沿ってひたすら実装を進めてもらいます。

チャット内容

途中で指示の出し方に試行錯誤していました。プロンプトというほど細かい指示は出していませんが、エラーが発生したときの対応方法を指示しておくと比較的スムーズに進められている印象です。

途中で利用制限に引っかかって待つことになったり、スレッドが長くなりすぎて別スレッドで対応したりを繰り返していき、、、（AI的には）実装が完了しました！

品質

どれどれとファイルを確認しているとやっぱりTypeScript、リンター、フォーマッター関連のエラーで赤い部分が非常に多い...
ということでnpx tsc --noEmit, npx @biomejs/biome check, npx next buildが通過するまでAIにコマンド実行と修正を繰り返させることに。
しばらくすると無事エラーはなくなりました。

次にPlaywrightのE2Eテストを実施してみましたが、結果はほぼ全滅。
同じようにエラー内容を出力させて修正を試みるもなかなかうまくいかず...
あろうことかskipで誤魔化そうとしはじめる始末。
しかもE2Eで確認にも時間がかかりタイムアウトでやり直しも何度も発生。
ここの修正に一番時間がかかりました。

どうしたものかと悩みつつ色々試していると、「エラー内容を出力して、内容を確認後に修正して」という指示よりも「エラー内容を出力して、修正方針を考えて」->「この方針で修正して」という指示のほうが改善がスムーズに進んだ印象でした。
このあたりはプロンプトをしっかり組んで指示すれば難なく進められそうな気もします。
ということで修正に修正を重ね、全テストとエラーが完全に解消。

プッシュ ~ マージ

PR作成からレビュー、マージまでやってもらいます。（何故か英語、ロシア語、日本語を使い分けるClaudeくん）

チャット内容

自分が作ったコードですがレビューで自己添削してもらいます。

チャット内容

パフォーマンス、エラーハンドリング、アクセシビリティ周りで改善の余地がありそう。（言語指定はしておいた方がよさそう）

ブランチ作成でVercelのPreview環境が作成されているので、動作確認してからmainにマージします。
mainにマージされるとVercelのProduction環境にデプロイされるので改めて確認。
実際に作成されたタスク管理機能がこんな感じです。（gif化で若干画質が荒くなってます）

タスク作成後の一覧再取得や、検索もリアルタイムでフィルタしてくれてます。

ドキュメント

最後にObsidianにドキュメントをまとめてもらいます。

チャット内容

READMEをベースに開発者向けのドキュメントに加え、エンドユーザー向けのドキュメントも作成してくれました。

API仕様書ではDBのER図をmermaidを使って整理してくれました。

所感

良かったところ

Issue作成からPR・マージまでの作業が自動化されて開発時間も短縮でき、労力も程々に短縮できたと思います。
PRも修正内容を汲み取って作成してくれるので、手作業でゼロから書き起こす手間も省けます。
レビューは自分が普段意識していない観点からの指摘もあるのでいろんな視点でチェックできる。
特にドキュメントは人間がサボりがちで実装とズレが発生しやすいポイントですが、AIにドキュメント管理してもらうことで常に最新のドキュメントという理想的な状態を保ちやすくなると思います。

改善点

より最適なプロンプトを考えて指示を与えればもっともっと効率よく開発できそうです。実装内容にもよりますが、コマンド実行による品質保証ができればかなり実用的に使えると思います。
Claude Pro Planの利用制限や長いスレッドでのパフォーマンス低下、スレッド上限で途中で処理が終わった場合の切り替えコストの高さも頻繁に感じられたので、さらに快適にしたい場合はMaxプランの検討も...（流石にまだ手が出せない）

みなさんもぜひAIによる開発をお試しあれ！

参考資料

株式会社BTM テックブログ
株式会社BTM テックブログPublication

Discussion