claude-memでClaude CodeとCursorのコンテキストを共有してみた

claude-memでClaude CodeとCursorのコンテキストを共有してみた

2026.01.23

こんにちは。たかやまです。

私は普段Claude CodeとCursorを利用しています。

使い方としてはClaude CodeでアイデアをまとめたりPlanを立てたりしつつ、実際の実装はエディタ上でレビューしやすいCursorを活用しています。

ただ、Claude CodeとCursorを併用していると、各エディタで独立した会話履歴を管理することになり、作業内容を連携できない課題があります。

対応として、Cursor側の実装内容をClaude Codeに説明するための中間ファイルを作成したり、あるいはExportしてコンテキストを再度説明し直さなければなりません。

私はスラッシュコマンドで記録を定型化して対応していましたが、記録に時間がかかる点がネックでした。

claude-memはその辺りの負担を軽減してくれるそうでしたので、今回はclaude-memを使ってClaude CodeとCursor間でコンテキストを共有する方法を紹介します。

https://github.com/thedotmack/claude-mem

さきにまとめ

  • claude-memはセッション間およびClaude CodeとCursor間でコンテキストを共有できるプラグイン
  • Claude Codeで作成した計画をCursorでMCP経由で参照し(逆も然り)、シームレスに実装を継続できる
  • v9.0.5時点でCLAUDE.mdファイルが各ディレクトリに自動生成される仕様があるので、導入時は挙動を理解した上で利用が必要

コンテキスト共有イメージ

CleanShot 2026-01-23 at 17.57.09@2x.png

claude-memについて

claude-memはClaude Code向けの永続的メモリシステムです。

https://github.com/thedotmack/claude-mem

セッション中のツール使用や操作内容を自動的にキャプチャし、Claude Agent SDKを使ってセマンティックサマリーを生成・保存します。

これにより、セッションが終了しても過去の作業コンテキストを次のセッションに引き継ぐことができます。

主な特徴は以下のとおりです。

特徴 説明
永続的メモリ セッション間でコンテキストを自動保存・復元
ライフサイクルフック SessionStart / UserPromptSubmit / PostToolUse / Stop / SessionEnd の5つのタイミングで自動記録
Web Viewer http://localhost:37777 でリアルタイムにメモリストリームを確認可能
MCP Search Tools 過去の作業履歴を自然言語で検索可能
プライバシーコントロール <private> タグで機密情報を記録対象から除外
マルチプラットフォーム Claude Code / Cursor / Claude Desktopで利用可能

記録は全てローカルで行われるため、外部にデータが送信されることはありません。

ドキュメントも用意されているので詳細が気になる方はこちらもご覧ください。
アーキテクチャについても詳細に記載されています)

https://docs.claude-mem.ai/introduction

やってみた

検証時の環境 : claude-mem v9.0.5 / Claude Code v2.1.15 / Cursor Version: 2.4.21

Claude Codeへclaude-memをインストールする

まずはClaude Codeにclaude-memプラグインをインストールします。

Quick Startにて、/plugin コマンドによる導入方法が紹介されています。

Quick Start - Claude-Mem

/plugin marketplace add thedotmack/claude-mem
/plugin install claude-mem
実行コマンド
❯ /plugin marketplace add thedotmack/claude-mem
  ⎿  Successfully added marketplace: thedotmack

❯ /plugin install claude-mem
  ⎿  Plugin 'claude-mem@thedotmack' is already installed. Use '/plugin' to manage existing plugins.

claude-memをインストールすると、以下のファイルやディレクトリが作成・変更されます。

カテゴリ パス 説明
Claude Code設定 ~/.claude/settings.json プラグイン有効化設定が追加
シェル設定 ~/.zshrc , ~/.bashrc claude-mem コマンドのエイリアスが追加
データディレクトリ ~/.claude-mem/ DB・設定・ログ・アーカイブ・ベクトルDBを格納
プラグイン ~/.claude/plugins/marketplaces/thedotmack/ プラグイン本体・依存関係
外部ツール ~/.bun/ Bunランタイム(未インストール時)
外部ツール ~/.local/bin/uv uvパッケージマネージャー(未インストール時)

claude-memのインストールにより、以下のMCPツールが自動的に有効化されます。

MCPツール 説明
__IMPORTANT 3層ワークフローパターンを説明する常時参照用ドキュメント(呼び出し不要)
search キーワードでメモリを検索し軽量なインデックス(ID一覧)を取得する
timeline 特定の観測記録を起点に前後の時系列コンテキストを取得する
get_observations 特定のIDの完全な観測記録を取得する(複数IDのバッチ処理推奨)
Memory Search - Claude-Mem

インストールが完了すると、以下のファイルおよび設定追加が行われ、Worker APIが localhost:37777 で起動されます。

ブラウザで http://localhost:37777 にアクセスすると以下のような画面が表示されます。

CleanShot 2026-01-14 at 10.28.34@2x.png

`/bin/sh: bun: command not found` が出る場合

初回起動時に /bin/sh: bun: command not found というエラーが表示される場合があります。

bunがインストールされていない場合claude-memがbunを初回インストールしており、Pathが通っていないケースがあるので再度Claude Codeを再起動してください。

Bun Requirement - claude-mem

日本語モードの設定

claude-memはデフォルトでは英語でメモリアーティファクトが生成されますが、日本語での記録を行いたい場合は設定ファイルを変更する必要があります。

設定変更はインストール時に作成された設定ファイル ~/.claude-mem/settings.jsonCLAUDE_MEM_MODE を以下に編集することで行えます。

{
  "CLAUDE_MEM_MODE": "code--ja"
}

Modes - Claude-Mem

この設定により、観測記録(タイトル、記述、事実、要約)がすべて日本語で生成されるようになります。

設定後はClaude Codeを再起動することで反映されます。

Claude Code上でclaude-memを使ってみる

ではclaude-memをインストールした状態でclaude codeを使ってみます。

試しにclaude-memのリポジトリをクローンして何ができるか問い合わせてみます。

プロンプト内容
❯ このリポジトリについて各ファイルを読み込んで解説して

⏺ このリポジトリの主要ファイルを読み込んで解説します。

⏺ Read(package.json)
  ⎿  Read 95 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Read(README.md)
  ⎿  Read 317 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Read(tsconfig.json)
  ⎿  Read 30 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Search(pattern: "src/**/*.ts")
  ⎿  Found 100 files (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ 主要ファイルの読み込みと構造把握のため、さらに詳細を確認します。

⏺ Read(src/services/worker-service.ts)
  ⎿  Read 600 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Read(src/hooks/session-start-hook.ts)
  ⎿  Error reading file

⏺ Search(pattern: "plugin/**/*")
  ⎿  Found 63 files (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)
  ⎿  Loaded src/CLAUDE.md
  ⎿  Loaded src/services/CLAUDE.md

⏺ フックファイルとアーキテクチャドキュメントをさらに読み込みます。

⏺ Read(plugin/.claude-plugin/plugin.json)
  ⎿  Read 18 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Read(plugin/hooks/hooks.json)
  ⎿  Read 82 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Read(docs/public/architecture/overview.mdx)
  ⎿  Read 241 lines
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Search(pattern: "src/hooks/*.ts")
  ⎿  Found 1 file (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)
  ⎿  Loaded plugin/CLAUDE.md
  ⎿  Loaded plugin/.claude-plugin/CLAUDE.md
  ⎿  Loaded plugin/hooks/CLAUDE.md
  ⎿  Loaded docs/CLAUDE.md
  ⎿  Loaded docs/public/CLAUDE.md
  ⎿  Loaded docs/public/architecture/CLAUDE.md

⏺ claude-mem リポジトリ解説

  概要

  claude-memはClaude Code向けの永続的メモリシステム。セッション間でコンテキストを保持し、Claude Agent
  SDKを使用して観察データを圧縮・意味抽出する。

  主要コンポーネント

  1. アーキテクチャ(5層構造)

  ライフサイクルフック (src/hooks/)
  - SessionStart - コンテキスト注入
  - UserPromptSubmit - セッション作成
  - PostToolUse - ツール実行キャプチャ
  - Stop - サマリー生成
  - SessionEnd - セッション完了マーク

  ワーカーサービス (src/services/worker-service.ts)
  - Express HTTP API (localhost:37777)
  - 非同期AI処理 (Claude Agent SDK)
  - SSE経由リアルタイム配信
  - Bunによる自動プロセス管理

  データベース層 (src/services/sqlite/)
  - SQLite3 + FTS5全文検索
  - ChromaDB ベクトル検索 (semantic search)
  - ~/.claude-mem/claude-mem.dbに保存

  MCPスキル (plugin/skills/mem-search/)
  - 3層プログレッシブディスクロージャ
    a. search - コンパクトインデックス取得
    b. timeline - 時系列コンテキスト取得
    c. get_observations - 詳細フェッチ
  - トークン効率10倍向上

  ビューアUI (src/ui/viewer/)
  - React + TypeScript
  - SSE経由リアルタイムストリーム
  - http://localhost:37777

  2. データフロー

  Hook入力 → SQLite保存 → Worker処理 → SDK圧縮 → DB書き戻し → 次回セッション注入

  検索フロー
  ユーザークエリ → MCPツール → HTTP API → SessionSearch → FTS5 → 結果返却

  3. ディレクトリ構造

  ソース (src/)
  - hooks/ - 5つのフックスクリプト実装
  - services/ - ワーカーサービス、SQLite、検索ロジック
  - ui/viewer/ - Reactビューア

  ビルド済プラグイン (plugin/)
  - .claude-plugin/plugin.json - プラグインメタデータ
  - hooks/hooks.json - フック設定
  - scripts/ - ビルド済み実行ファイル
  - skills/ - MCPスキル定義
  - ui/viewer.html - 単一HTMLバンドル

  4. 技術スタック
  ┌──────────────┬────────────────────────────────┐
  │     要素     │              技術              │
  ├──────────────┼────────────────────────────────┤
  │ 言語         │ TypeScript (ES2022)            │
  ├──────────────┼────────────────────────────────┤
  │ ランタイム   │ Node.js 18+, Bun               │
  ├──────────────┼────────────────────────────────┤
  │ DB           │ SQLite3 + FTS5                 │
  ├──────────────┼────────────────────────────────┤
  │ ベクトルDB   │ ChromaDB                       │
  ├──────────────┼────────────────────────────────┤
  │ HTTP         │ Express.js                     │
  ├──────────────┼────────────────────────────────┤
  │ リアルタイム │ SSE                            │
  ├──────────────┼────────────────────────────────┤
  │ UI           │ React + TypeScript             │
  ├──────────────┼────────────────────────────────┤
  │ AI SDK       │ @anthropic-ai/claude-agent-sdk │
  ├──────────────┼────────────────────────────────┤
  │ ビルド       │ esbuild                        │
  └──────────────┴────────────────────────────────┘
  5. ビルド/開発コマンド

  npm run build-and-sync        # ビルド→マーケットプレース同期→ワーカー再起動
  npm run worker:restart         # ワーカー再起動
  npm run worker:logs            # ログ確認
  npm run test                   # テスト実行

  6. 設定

  ~/.claude-mem/settings.json - 自動生成される設定ファイル
  - AIモデル選択
  - ワーカーポート (デフォルト37777)
  - ログレベル
  - コンテキスト注入設定

  7. 特徴的な機能

  プライバシータグ
  <private>機密情報</private>  <!-- 保存されない -->

  プログレッシブディスクロージャ
  - 段階的コンテキスト開示
  - トークンコスト可視化
  - 必要な情報のみフェッチ

  ベータチャンネル
  - Endless Mode (実験的バイオミメティックメモリ)
  - Web UIから切り替え可能

  8. ライセンス

  - メイン: AGPL-3.0
  - ragtime/: PolyForm Noncommercial 1.0.0

  アーキテクチャ上の重要ポイント

  1. フックベースの非侵襲的設計 - Claude Codeのライフサイクルイベントに連携
  2. 非同期バックグラウンド処理 - ユーザー体験を阻害しない
  3. ハイブリッド検索 - FTS5全文検索 + ChromaDB意味検索
  4. トークン効率最適化 - 段階的開示パターン
  5. オープンソースコア + 有料Pro機能の分離設計

SessionStart / UserPromptSubmit / PostToolUse / Stop のタイミングでフックが実行されてclaude-memに自動で記録されるため、ユーザー側で記録指示は不要です。

claude-memを確認すると、以下のような形で記録されます。

CleanShot 2026-01-22 at 22.23.39@2x.png

PROMPTにユーザーが実行したプロンプトが記録され、DISCOVERYにClaude Codeの調査の洞察が記録されます。

調査が完了すると SESSION SUMMARYの形で内容が要約されて記録されます。

では、次に全く別のプロジェクトでセッションを立ち上げてコンテキストが共有されるか確認してみます。

ここではObsidianのフォルダでClaude Codeを立ち上げて先ほど調査したclaude-memの内容を取得できるか試してみます。

❯ claude-mem mcpを使ってclaude memリポジトリの調査内容を確認して

⏺ claude-mem MCPサーバーのツールを使用して、claude-memリポジトリの調査内容を確認します。

⏺ ToolSearch(Search tools: "select:mcp__plugin_claude-mem_mcp-search__search")
  ⎿  Found 1 tool
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ plugin:claude-mem:mcp-search - search (MCP)(query: "claude-mem リポジトリ 調査", limit: 10)
  ⎿  No results found matching "claude-mem リポジトリ 調査"
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ plugin:claude-mem:mcp-search - search (MCP)(query: "claude-mem", limit: 20)
  ⎿  Found 3 result(s) matching "claude-mem" (2 obs, 1 sessions, 0 prompts)

     ### Jan 22, 2026
     … +15 lines (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ claude-memリポジトリに関する調査内容を確認しました。以下の情報が記録されています。

  記録されている調査内容

  1. セッション #S1 (2026-01-22 22:10)
    - タイトル: 「claude-memリポジトリの各ファイルを読み込んで解説」
  2. 観察記録 #4 (2026-01-22 22:07)
    - タイトル: 「TypeScriptソースコードの構造とモジュール編成」
    - src/ディレクトリ配下の100以上のTypeScriptファイルの調査結果
  3. 観察記録 #2 (2026-01-22 22:06)
    - タイトル: 「TypeScript設定とビルド構成」
    - tsconfig.jsonの設定内容

  詳細を確認しますか?

❯ 詳細を確認して

⏺ claude-memの調査記録の詳細を確認します。

⏺ ToolSearch(Search tools: "select:mcp__plugin_claude-mem_mcp-search__get_observations")
  ⎿  Found 1 tool
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ plugin:claude-mem:mcp-search - get_observations (MCP)(ids: [2,4])
  ⎿  [
       {
         "id": 4,
     … +70 lines (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ claude-memリポジトリの調査内容の詳細を確認しました。

  調査内容の詳細

  1. TypeScriptソースコードの構造とモジュール編成

  概要
  100以上のTypeScriptファイルで構成され、サービス層、インフラ、UI、データアクセスが明確に分離されている

  主要な構造

  データアクセス層 (services/sqlite/)

  - 9つの主要クラス: Database、Observations、Sessions、Summaries、Timeline、Prompts、Import、migrations、transactions
  - 各クラスはCRUD操作を個別ファイルに分離 (get.ts、store.ts、types.ts、recent.ts等)

  ワーカーサービス (services/worker/)

  - コア機能: DatabaseManager、Search、SettingsManager、TimelineService、SSEBroadcaster
  - HTTPルート (http/routes/): DataRoutes、LogsRoutes、SettingsRoutes、ViewerRoutes
  - 検索システム (search/): SearchOrchestrator、SearchStrategy、3つのフィルタ (DateFilter、ProjectFilter、TypeFilter)

  コンテキスト生成 (services/context/)

  - 処理フロー: 設定ロード→トークン計算→セクションレンダリング→フォーマット
  - コンポーネント: ContextConfigLoader、TokenCalculator、2つのフォーマッター (ColorFormatter、MarkdownFormatter)、3つのレンダラー
  (HeaderRenderer、SummaryRenderer、FooterRenderer)

  UIレイヤー (ui/viewer/)

  - Reactベースのビューア
  - 9つのカスタムフック:
  useSSE、useSettings、useTheme、usePagination、useStats、useContextPreview、useGitHubStars、useSpinningFavicon

  その他

  - エージェント層 (services/worker/agents/): ObservationBroadcaster、SessionCleanupHelper、FallbackErrorHandler
  - インフラ層: GracefulShutdown
  - キュー処理: SessionQueueProcessor
  - ユーティリティ (bin/): cleanup-duplicates.ts、import-xml-observations.ts

  2. TypeScript設定とビルド構成

  設定の特徴
  - ターゲット: ES2022
  - モジュールシステム: ESNext
  - strictモード有効で型安全性を最大化
  - JSX: Reactモード
  - ビルド: src/ → dist/
  - ソースマップと型定義ファイルを生成

  アーキテクチャの特徴
  堅牢なソフトウェアエンジニアリングプラクティスを反映し、テスタビリティ、保守性、拡張性を重視した設計になっています。

MCPサーバーからちゃんと先ほどのセッションサマリのコンテキストを取得していることが確認できますね

もちろんclaude-mem上でも今回の調査内容が記録されています。

ちなみにclaude-memの記録はプロジェクトごとに分けられており、右上のプルダウンから切り替えることでプロジェクトごとの過去のコンテキストを確認することができます。

(ALL Projectsでは全プロジェクトのコンテキストを時系列順に確認できる)

CleanShot 2026-01-22 at 22.41.15@2x.png

私の執筆時点のバージョン v9.0.5では、claude-memが読みに行ったディレクトリフォルダに以下の形式のCLAUDE.mdファイルが乱立します。

CleanShot 2026-01-09 at 11.56.06@2x.png

<claude-mem-context>
# Recent Activity

<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->

*No recent activity*
</claude-mem-context>

GitHub Issueでは、この問題についてディスカッションされていますが現時点では無効にするオプションはないため大規模プロジェクトで利用する場合には環境に影響がないかは自己責任で確認してください。

https://github.com/thedotmack/claude-mem/issues/609

私は .git/info/exclude に以下のように追加して無視するようにしています。

# Exclude CLAUDE.md files in subdirectories (keep root CLAUDE.md tracked)
*/CLAUDE.md
**/*/CLAUDE.md

claude-memを導入する際は自動生成されるファイルの挙動やリポジトリ運用への影響を考慮しつつ、必要に応じて除外設定などの対策を行うことをおすすめします。

Cursorへclaude-memをインストールする

claude-memはCursorとの連携にも対応しています。
連携ユーザーにはCursorのみ利用ユーザーとClaude Codeユーザー向け2通り手順がありますが、ここではClaude Codeユーザー向けの手順を進めていきます。

https://docs.claude-mem.ai/cursor

Claude Codeユーザーはclaude-memインストール時にclaude-memコマンドがalias設定されているので、そのコマンドを使ってCursorのインストールを行います。

claude-mem cursor install <スコープ>
実行コマンド
 ❯ claude-mem cursor install user

Installing Claude-Mem Cursor hooks (user level, unix)...

  Copied common.sh
  Copied session-init.sh
  Copied context-inject.sh
  Copied save-observation.sh
  Copied save-file-edit.sh
  Copied session-summary.sh
  Created hooks.json (unix mode)

Installation complete!

Hooks installed to: /Users/YOUR_USERNAME/.cursor/hooks.json
Scripts installed to: /Users/YOUR_USERNAME/.cursor/hooks

Next steps:
  1. Start claude-mem worker: claude-mem start
  2. Restart Cursor to load the hooks
  3. Check Cursor Settings → Hooks tab to verify

Context Injection:
  Context from past sessions is stored in .cursor/rules/claude-mem-context.mdc
  and automatically included in every chat. It updates after each session ends.

このコマンドを実行すると、スコープに応じてhooks.jsonファイルが設定されます。

スコープ 説明 インストール先
project プロジェクトレベル(デフォルト) カレントディレクトリ/.cursor
user ユーザーレベル ~/.cursor
enterprise エンタープライズレベル (macOS)/Library/Application Support/Cursor/hooks.json, (Linux)/etc/cursor/hooks.json, (Windows)C:\\ProgramData\\Cursor\\hooks.json

インストール状態は以下のコマンドで確認できます。

claude-mem cursor status
実行コマンド
 ❯ claude-mem cursor status

Claude-Mem Cursor Hooks Status

Project: Not installed

User: Installed
   Config: /Users/YOUR_USERNAME/.cursor/hooks.json
   Mode: Unified CLI (node worker-service.cjs)

Enterprise: Not installed

mcpサーバーは自動で登録されていないので、mcp.jsonファイルに以下を追加します。

{
  "mcpServers": {
    "mcp-search": {
      "command": "node",
      "args": [
        "/Users/YOUR_USERNAME/.claude/plugins/marketplaces/thedotmack/plugin/scripts/mcp-server.cjs"
      ]
    }
  }
}

Cursor上でMCPサーバーとして mcp-search が有効になっていればOKです

CleanShot 2026-01-23 at 17.30.48@2x.png

参考 : Claude Desktop MCP - Claude-Mem

実際にClaude CodeとCursorでコンテキストを共有してみる

では実際に、Claude CodeとCursorでコンテキストを共有してみたいと思います。

ここでは、Claude Codeで簡単なtodoアプリのプランを作らせてCursorで実装を行うシナリオを想定してやってみます。

Claude Codeではプランモードでシンプルなtodoアプリの計画のみ作成します。

❯ 非常にシンプルなWebで動作するtodoアプリを作成する計画を立てて

⏺ この要求は実装計画を立てる作業のため、plan modeに入ります。

⏺ Entered plan mode
  Claude is now exploring and designing an implementation approach.
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ 現在のディレクトリ構造とプロジェクトの状態を確認します。

⏺ Bash(pwd)
  ⎿  /tmp/claude-mem-temp
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Bash(ls -la)
  ⎿  total 0
     drwxr-xr-x@   2 takayama.kotaro  wheel    64 Jan 23 17:26 .
     drwxrwxrwt  102 root             wheel  3264 Jan 23 17:42 ..
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ Search(pattern: "**/*.{html,js,css,json,md}")
  ⎿  Found 0 files
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ 空のディレクトリから開始する状況を確認しました。todoアプリの要件を明確化します。

⏺ User answered Claude's questions:
  ⎿  · どのようなtodoアプリを想定していますか? → 単一HTMLファイル(推奨)
     · データの永続化は必要ですか? → localStorage
     · 必要な機能を選択してください → 追加・削除・完了切替
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ 要件が明確になりました。単一HTMLファイルでlocalStorage対応の基本機能のみのtodoアプリを作成する計画を立てます。

⏺ Updated plan
  ⎿  Wrote 57 lines to ../../../Users/takayama.kotaro/.claude/plans/cheerful-sprouting-island.md
      1 # シンプルTodoアプリ実装計画
      2 ## 概要
      3 単一HTMLファイルで動作する最小限のtodoアプリをゼロから作成
      4 ## 要件
      5 - 単一HTMLファイル(HTML/CSS/JS統合)
      6 - localStorage永続化
      7 - 基本機能:追加、削除、完了切替
     … +47 lines (ctrl+o to expand)
  ⎿  Running PostToolUse hooks… (1/2 done)

⏺ 計画ファイルを作成しました。ユーザーに承認を求めます。
  ⎿  User rejected Claude's plan:
     ╭────────────────────────────────────────────────────────────╮
     │ シンプルTodoアプリ実装計画                                 │
     │                                                            │
     │ 概要                                                       │
     │                                                            │
     │ 単一HTMLファイルで動作する最小限のtodoアプリをゼロから作成 │
     │                                                            │
     │ 要件                                                       │
     │                                                            │
     │ - 単一HTMLファイル(HTML/CSS/JS統合)                      │
     │ - localStorage永続化                                       │
     │ - 基本機能:追加、削除、完了切替                           │
     │                                                            │
     │ 実装方針                                                   │
     │ バニラJS + 最小限のCSSで実装。フレームワーク不使用。       │
     │                                                            │
     │ ファイル構成                                               │
     │                                                            │
     │ /tmp/claude-mem-temp/                                      │
     │ └── todo.html  (新規作成)                                │
     │                                                            │
     │ 実装内容                                                   │
     │                                                            │
     │ HTML構造                                                   │
     │                                                            │
     │ - 入力フォーム(テキスト入力 + 追加ボタン)                │
     │ - todoリスト(ul/li)                                      │
     │ - 各todo項目:チェックボックス、テキスト、削除ボタン       │
     │ CSS                                                        │
     │                                                            │
     │ - シンプルで読みやすいレイアウト                           │
     │ - 完了済みタスクの打ち消し線                               │
     │ - レスポンシブ対応(max-width指定)                        │
     │ JavaScript機能                                             │
     │                                                            │
     │ 1. データ管理                                              │
     │   - localStorage読み込み・保存                             │
     │   - todo配列管理(id, text, completed)                    │
     │ 2. イベントハンドリング                                    │
     │   - 追加:フォーム送信時                                   │
     │   - 完了切替:チェックボックスクリック時                   │
     │   - 削除:削除ボタンクリック時                             │
     │ 3. レンダリング                                            │
     │   - todo配列からDOM生成                                    │
     │   - 変更時に再レンダリング + localStorage保存              │
     │                                                            │
     │ 検証手順                                                   │
     │                                                            │
     │ 1. todo.htmlをブラウザで開く                               │
     │ 2. todo追加動作確認                                        │
     │ 3. 完了チェック動作確認                                    │
     │ 4. 削除動作確認                                            │
     │ 5. ブラウザリロード後のデータ永続化確認                    │
     │                                                            │
     │ 実装ファイル                                               │
     │                                                            │
     │ - /tmp/claude-mem-temp/todo.html(新規作成)               │
     │                                                            │
     │ 約200行程度の単一ファイルで完結。                          │
     ╰────────────────────────────────────────────────────────────╯

claude-mem上に以下のようにコンテキストが記録されていることが確認できます。

Planを途中で止めたのでSession Summaryは記録されていませんが、実装計画の内容がちゃんと記録されていますね

CleanShot 2026-01-23 at 17.49.05@2x.png

次にCursorで実装を行います。
プランの内容をそのままCursorに貼り付けてもいいですが、せっかくなのでclaude-mem mcpから情報を取得して実装させてみます。

問い合わせ内容に合わせてclaude-mem mcpからちゃんと実装計画を取得し、実装までしてくれていますね。

CleanShot 2026-01-23 at 17.54.52@2x.png

(ちなみにできたアプリはこんな感じ)

CleanShot 2026-01-23 at 18.01.04@2x.png

claude-mem上でもClaude CodeのコンテキストとCursorでのコンテキスト両方記録されていることが確認できますね!

CleanShot 2026-01-23 at 17.57.09@2x.png

もちろんこの後Claude Codeに戻って再度claude-mem mcpからコンテキスト継続して作業することも可能です。

最後に

今回はclaude-memを使ってClaude CodeとCursor間でコンテキストを共有する方法を紹介しました。

都度都度スラッシュコマンドで記録呼び出しのような手間がなく、シームレスにコンテキストを共有できるので私が当初あった課題はclaude-memを導入することで解消されました。

ただ、CLAUDE.mdファイルが大量に生成される仕様など気になる部分もあるので、導入にあたってはご自身で仕様を確認しつつ導入いただければと思います。

とはいえClaude CodeとCursorを両方使っている方には、エディタを跨いだ作業でも過去のコンテキストを効率的に共有できるので興味があればぜひ導入してみてください。

この記事が誰かのお役に立てれば幸いです。

以上、たかやま(@nyan_kotaroo)でした。

この記事をシェアする

FacebookHatena blogX

関連記事