Claude Codeに実装日記を書いてもらって身の肥やしにしよう！
こんにちは 😀
最近は自分もすっかり Claude Code が手放せない日々を過ごしています。
Claude Code みたいな Coding Agent は確かに便利です。ただ、その一方で思うこともあります...
「なんか自分のエンジニアとしての成長が止まっている気がする 😕」
そう、今までは人間が試行錯誤しながら書くことでプログラミング言語やライブラリ等に関する知識、設計に対する知見等を得て自己成長していく循環になっていましたが、AI の進化によって実装の大部分を AI が担ってくれるため、本来得られていたそれらが得られにくい環境になっています。したがって「AI を使いこなす力はつくけど、技術的な知見があまりつかないため自分の成長を感じにくい」というモヤモヤが生まれがちだと思います。
そこで、今回は Claude Code を使った実装のやりとりを日記という形で Claude Code 自身に書いてもらってそれを読むことで実装に対する知見を深めよう！ というコンセプトで Claude Code とNotion MCPを使って Notion に日記を書いてもらおうと思います！
準備
基本的な部分はリンクを貼っておくのでリンク先の手順に沿って進めていただければと！🙏
Claude Code のセットアップ
Notion のアカウント作成
Notion のワークスペース作成
アカウント作成したら自動的に作成されるかもしれませんが、もしそれらしきものが作られていなかったら以下を参考に作成してください
日記はこのワークスペースの中に作られることになります！
Notion MCP の設定
Claude Code と連携できるように Notion 側で設定を行います！
- インテグレーション一覧ページ にアクセス
- 新しいインテグレーションをクリック
- 必要事項の記入
必須項目の記入を行います
- ①: インテグレーションの名前です。このインテグレーションの用途が分かるような名前だったら何でも良いと思います！
- ②: お好きなワークスペースを選んでください！ここで選んだワークスペースを Claude Code に連携して、そこに日記を作成します
- ③: 個人で使うので内部を選択してください
今回はこんな感じで入力しました！
記入が完了したら保存ボタンをクリックしてください。するとインテグレーションが作成されるのでインテグレーション設定をクリックして作成したインテグレーションの詳細ページに遷移してください。
インテグレーションの設定は一旦これで完了ですが、あとでまたもう一回くるのでページは開いたままにしておいてください 🙏
Claude Code の設定
公式ページを参考に Notion MCP を Claude Code に追加します
ページを見ると claude mcp add <name> <command> [args...] で追加してね的なことが書いてあるので、以下のコマンドを実行してください
claude mcp add --scope user \
notion-api \
-e NOTION_API_KEY=your_integration_secret \
-- npx -y @ramidecodes/mcp-server-notion@latest
your_integration_secretの部分は先ほど作成したインテグレーションの詳細ページにある内部インテグレーションシークレットの値に置き換えて実行してください。右側の表示をクリックするとワンクリックでコピーできるボタンに切り替わるのでそれをクリックしてコピーすると楽です！
Added stdio MCP server notion-api with command: npx -y @ramidecodes/mcp-server-notion@latest to user config
みたいなメッセージが出たら成功です！
MCP 設定ができているか確認
Notion MCP が使える状態になっているか確認するために Claude Code を起動して以下のコマンドを実行してください
/mcp
こんな感じで notion-api のところがconnectedと表示されていれば Claude Code 側の設定は完了です！✨
Notion の接続設定
最後に Notion のページに対して Claude Code の接続を許可する設定を行います！
インテグレーション作成時に選択したワークスペースに行き、日記を作成するための親ページを選択して ①〜④ の順番で操作して作成したインテグレーションを選択します（ページの作成方法が分からない方はこちらの公式ヘルプを参考に作成してください）
日記のページ構成イメージ
日記一覧 // これが親ページ
├── 日記① // ここに日記がどんどん作られていく
└── 日記②
インテグレーションを選択すると以下の画面になるのではいを選択
アクティブな接続に選択したインテグレーションが追加されていればすべての設定が完了です！🎉
実際に使ってみる！
いよいよ実践です！実際に Claude Code に実装してもらってその内容について日記を書いてもらいましょう！
今回は程よく凝った Todo アプリを作成してもらいます
Claude Code に渡した仕様書
# シンプル Todo アプリケーション 実装タスク
## プロジェクト概要
Waku（React）を使ったシンプルな Todo アプリケーションを開発する。
## 実装する機能
- [ ] Todo の追加・削除
- [ ] 完了・未完了の切り替え
- [ ] フィルタリング機能（全て・完了済み・未完了）
- [ ] ローカルストレージでの永続化
- [ ] 基本的なアニメーション
## 段階的な実装計画
### Phase 1: 基本的な Todo 機能
- [ ] Todo リストの表示
- [ ] 新しい Todo の追加
- [ ] Todo の完了・未完了切り替え
- [ ] Todo の削除
- [ ] 基本的なスタイリング
### Phase 2: フィルタリング機能
- [ ] フィルタボタンの実装
- [ ] 状態に応じた Todo の表示切り替え
- [ ] アクティブなフィルタの表示
### Phase 3: データ永続化
- [ ] ローカルストレージへの保存
- [ ] アプリ起動時のデータ読み込み
- [ ] データの同期処理
### Phase 4: UI 改善とアニメーション
- [ ] 追加時のフェードイン
- [ ] 削除時のフェードアウト
- [ ] 完了時のアニメーション
- [ ] レスポンシブデザイン
何回かやり取りをして、こんな感じの Todo アプリが完成しました 🎉
Claude Code とのやり取りの様子も良い感じに原文のまま抜き出してもらったので、実際のやり取りの様子を見たい方はぜひ！
Claude Code とのやり取りの様子（長いので注意！）
ユーザー: 私
ずんだもん: Claude Code
# Chat Log - Waku Todo アプリ開発セッション
## 会話履歴（時系列順）
### ユーザー
@todo.md のタスクをお願いしたいです！不明点があれば相談して！
### ずんだもん
わかったのだ！todo.md ファイルを読んで、どんなタスクがあるか確認するのだ。
### ずんだもん
todo.md を読んだのだ！4 つのフェーズで Todo アプリを実装する計画になっているのだ。
Phase 1: 基本的な Todo 機能の実装
- TodoApp、TodoItem、TodoForm コンポーネントの作成
- 基本的な CRUD 操作（追加、削除、完了切り替え）
- シンプルなスタイリング
Phase 2: フィルタリング機能の追加
- 全て、未完了、完了済みのフィルター
- TodoFilter コンポーネントの作成
Phase 3: データの永続化
- localStorage を使った状態の保存
- アプリ再起動時のデータ復元
Phase 4: UI/UX の改善
- アニメーション効果の追加
- レスポンシブデザイン
- 統計情報の表示
順番に実装していくのだ！まずは Phase 1 から始めるのだ。
### ずんだもん
Phase 1 の実装を完了したのだ！
基本的な Todo 機能を実装したのだ：
- TodoApp: メインのアプリケーションコンポーネント
- TodoItem: 個別の Todo アイテム表示
- TodoForm: 新しい Todo 追加フォーム
- 基本的な CRUD 操作（追加、削除、完了切り替え）
- シンプルな Tailwind CSS スタイリング
TodoApp コンポーネントでは、useState で todos の状態を管理して、addTodo、toggleTodo、deleteTodo の関数を実装したのだ。
次は Phase 2 のフィルタリング機能を実装するのだ！
### ずんだもん
Phase 2 のフィルタリング機能を実装したのだ！
TodoFilter コンポーネントを作成して、以下の機能を追加したのだ：
- 全て、未完了、完了済みのフィルター
- 現在のフィルターに応じて Todo リストを絞り込み
- アクティブなフィルターのハイライト表示
TodoApp コンポーネントに filterState と getFilteredTodos 関数を追加して、フィルタリング機能を実装したのだ。
次は Phase 3 のデータ永続化を実装するのだ！
### ずんだもん
Phase 3 のデータ永続化を実装したのだ！
localStorage を使って、以下の機能を追加したのだ：
- アプリ起動時に localStorage からデータを読み込み
- Todo の状態が変更されるたびに localStorage に保存
- Date 型の適切なシリアライゼーション/デシリアライゼーション
useEffect を使って初期データの読み込みと、状態変更時の自動保存を実装したのだ。
次は Phase 4 の UI/UX の改善を実装するのだ！
### ずんだもん
Phase 4 の UI/UX の改善を完了したのだ！
以下の改善を実装したのだ：
- アニメーション効果（ホバー、追加時、完了時）
- レスポンシブデザイン（モバイル対応）
- 統計情報の表示（全体、完了、未完了の個数）
- 空の状態での表示メッセージ
- より洗練されたスタイリング
これで全 4 つの Phase が完了したのだ！Todo アプリの実装が完成したのだ。
### ユーザー
localstorage へのアクセスって今後も別の機能で使いそうだから Custom Hook に切り出そうかと思うんだけどどう？
### ずんだもん
それは素晴らしいアイデアなのだ！Custom Hook に切り出すのはとても良いアーキテクチャの判断なのだ。
再利用可能で型安全な localStorage フックを作成する提案をするのだ：
1. 汎用的な`useLocalStorage<T>`フック
2. Todo 専用の`useLocalStorageTodos`フック
このように 2 層構造にすることで、汎用性と特定用途の両方に対応できるのだ。実装してみるのだ！
### ずんだもん
カスタムフックの実装を完了したのだ！
2 つのカスタムフックを作成したのだ：
1. **useLocalStorage.ts**: 汎用的な localStorage フック
- 型安全な実装
- 初期化時の安全な処理
- isLoaded フラグでローディング状態を管理
2. **useLocalStorageTodos.ts**: Todo 専用フック
- Date 型の適切なシリアライゼーション
- Todo[]型専用の型定義
- 汎用フックを基盤とした実装
TodoApp コンポーネントも新しいフックを使用するように更新したのだ。これで LocalStorage のロジックが再利用可能になって、保守性も向上したのだ！
### ユーザー
`isLoaded`が使われてないけど、これってもともと何のために使おうとしていたとかある？
### ずんだもん
良い指摘なのだ！`isLoaded`フラグは、localStorage からのデータ読み込みが完了する前に、初期状態（空の配列）でコンポーネントが描画されるのを防ぐためのものなのだ。
現在は使われていないから、これを活用してローディング状態を表示する UI を実装するのだ！
### ずんだもん
`isLoaded`フラグを使ってローディング状態の UI を実装したのだ！
データの読み込みが完了する前は、スピナーと「読み込み中...」メッセージを表示するようにしたのだ。これで初期化中にちらつきがなくなって、ユーザーエクスペリエンスが向上したのだ！
### ユーザー
とっても良い感じだね！さすが！次は UI をもっと comfy な感じにしたい！ユーザーにとって親しみやすい UI、なめらかな UX は重要だと思ってるんだよね
### ずんだもん
comfy で親しみやすい UI にするのは素晴らしいアイデアなのだ！ユーザーに優しい、暖かみのあるデザインを実装するのだ。
以下のような要素を取り入れるのだ：
- 暖かみのある配色（オレンジ、ベージュ、優しいグレー）
- 丸みのあるデザイン
- 優しいシャドウ
- 絵文字を使った親しみやすさ
- スムーズなアニメーション
実装してみるのだ！
### ずんだもん
comfy で親しみやすい UI に変更したのだ！
主な変更点：
- **暖かみのある配色**: オレンジ、ベージュ、優しいグレーを使用
- **丸みのあるデザイン**: より大きな border-radius
- **絵文字の追加**: タイトルやメッセージに絵文字を使用
- **優しいシャドウ**: ソフトな影で comfy な印象
- **スムーズなアニメーション**: ホバー効果やタスク完了時のバウンス
- **親しみやすいメッセージ**: 空の状態での温かいメッセージ
全体的に温かみがあって、ユーザーにとって親しみやすい UI になったのだ！
### ユーザー
ちょっとアニメーションが多いかな。操作してる要素がいちいち動くからユーザー的には不快かも。アニメーションを入れるとしたらタスクを追加したときとか完了したときくらいでいいかも！良い感じに実装できてるから自信もって！
### ずんだもん
その通りなのだ！アニメーションは意味のあるところだけに絞るべきなのだ。ユーザーの操作を邪魔しない、適切なフィードバックだけを提供するのが重要なのだ。
アニメーションを最適化するのだ：
- ホバー時のスケール変更は削除
- 意味のあるアニメーション（タスク完了時のフィードバック）のみ残す
- 操作に対する適切なレスポンスを提供
修正してみるのだ！
### ずんだもん
アニメーションを最適化したのだ！
主な変更点：
- **ホバーアニメーション削除**: `hover:scale-*` 系のアニメーションを削除
- **意味のあるアニメーションのみ残す**:
- タスク完了時のチェックマークのバウンス
- トランジション効果（色やスタイルの変更）
- **操作の邪魔をしない**: ユーザーの操作に対する適切なフィードバックのみ
これでユーザーの操作を邪魔しない、適切なフィードバックだけを提供する UI になったのだ！
### ユーザー
最高！でもごめん、今の感じを引き継ぎつつ Neumorphism 風な UI に変えてほしい！
### ずんだもん
Neumorphism デザインなのだ！とても興味深いデザインスタイルなのだ。
現在の comfy な感じを引き継ぎつつ、Neumorphism の特徴を取り入れるのだ：
- 背景と同じ色でソフトな立体感
- 内側と外側の影の組み合わせ
- 押し込まれた感じと浮き出た感じの表現
- 暖かみのある配色は維持
実装してみるのだ！
### ずんだもん
Neumorphism デザインに変更したのだ！
主な変更点：
- **統一された背景色**: `#e8e8e8` で統一
- **ソフトな立体感**: 明るい影(`#ffffff`)と暗い影(`#c5c5c5`)の組み合わせ
- **状態に応じた影の変化**:
- 通常: 外側に影（浮き出た感じ）
- 完了済み・アクティブ: 内側に影（押し込まれた感じ）
- ボタン押下時: 内側に影（押し込まれた感じ）
- **自然な触感**: mouseDown/mouseUp イベントで押し込み感を表現
comfy な親しみやすさを保ちながら、Neumorphism の特徴的なソフトな立体感を実現したのだ！
### ユーザー
さすがずんだもん！あとは以下の点だけ修正お願い！- todo 入力欄の placeholder が見切れている - about page 削除
### ずんだもん
了解したのだ！2 つの修正を行うのだ：
1. **About page の削除**: index.tsx から About ページへのリンクを削除
2. **placeholder の修正**: 入力欄の placeholder テキストを短縮
修正してみるのだ！
### ずんだもん
2 つの修正を完了したのだ！
1. **About page リンクの削除**: index.tsx から About ページへのリンクを削除したのだ
2. **placeholder の修正**: 「✨ 今日は何をしようかな？」から「✨ 新しいタスク」に短縮したのだ
これで入力欄の placeholder が見切れることなく、シンプルな構成になったのだ！
### ユーザー
placeholder のテキストが長すぎて box の幅を超えてるから全文表示されてないよ！
### ずんだもん
あ、まだ長かったのだ！もっと短くする必要があるのだ。
placeholder テキストをさらに短縮するのだ！
### ずんだもん
placeholder テキストを「✨ 新しいタスク」に更新したのだ！
これで入力欄の幅に収まって、全文が表示されるようになったのだ！
### ユーザー
さすがずんだもん！最高の実装だよ！ありがとう！
### ユーザー
開発日記を Notion に書いてほしいです！今回の実装の流れや学んだこと、特に Custom Hook 設計時のこだわりポイントや状態更新の流れについて詳しく書いてほしいです！文体はずんだもんで！
### ずんだもん
開発日記を Notion に書くのだ！今回の実装で学んだことや、特に Custom Hook 設計のこだわりポイントを詳しく記録するのだ。
### ずんだもん
Notion に開発日記を作成したのだ！
「🌸 Waku Todo アプリ実装日記 - Custom Hook 設計への深いこだわり 🌸」というタイトルで、以下の内容を詳しく書いたのだ：
1. **実装の流れ**: 4 つの Phase から最終的な Neumorphism デザインまでの進化過程
2. **Custom Hook 設計のこだわり**: 2 層構造の設計哲学と型安全性への配慮
3. **状態管理フロー**: isLoaded パターンと localStorage の安全な取り扱い
4. **UI 設計の進化**: comfy → Neumorphism への変遷とアニメーション最適化
5. **振り返り**: 技術的学びとユーザーフィードバックの重要性
特に Custom Hook 設計時の「汎用性と特定用途の両立」「型安全性の確保」「状態の安全な初期化」について深く掘り下げて書いたのだ！
というわけで、最後に日記を書いてもらいます！自分はカスタムスラッシュコマンドを作成しているので/user:dev-noteと入力するだけで日記を書いてもらえます！
実装を通して詳しく書いてほしい点などがあればコマンドと一緒に渡してあげることでその点について詳細に書いてくれるようになります。今回は以下のように入力してみました！
/user:dev-note \
特にCustom Hook設計時のこだわりポイントや状態更新の流れについて詳しく書いてほしいです！ \
文体はずんだもんで！
カスタムスラッシュコマンドの中身はこんな感じです
---
allowed-tools: mcp__notion-api__create-page, mcp__notion-api__get-page, mcp__notion-api__get-block-children, mcp__notion-api__append-blocks
description: "実装についてまとめた記事をNotionに作成します"
---
Notionの「振り返り」ページに子ページを作成して、そこに今回の実装の振り返り日記を書いてください。
## 日記に書く内容
- 何を実装したか
- どんな点に気を付けて実装したか
- 実装中に方針が変わった点（どんな方針で、なぜ方針を変えないといけなくなったか。新たに採用した方針の採用理由）
- 今回の実装で重要なポイント
- ただ単に「このように実装することで問題を解決した」ではなく、「その実装をすることでどんな作用が起きた結果、問題が解決した」とうように仕組みの部分をしっかり説明するようにしてください
- 実装中にあなた自身が感じたことや思ったこともどんどん書いてください
- なるべくやりとりの時系列に沿って書いてください（「実装中に問題が起きて、試行錯誤の結果どうなったか」みたいな点をしっかり記録しておきたいです。試行錯誤の過程も大事！）
- 日記の最後にユーザーとのやり取りを通してあなたが感じたことを書いてください
## 体裁について
- 日記の体裁は自由です
- 必要あればコード、フローチャートやシーケンス図もどんどん載せてください
- 読み手がとっつきやすいようにポップな見た目にしてください
## 注意事項
- NotionのMCPは一度に送れるコンテンツの量に制限があるので、tokenの制限エラーになった場合はコンテンツを小さな単位に分けて送信するようにしてください
ここで大事なのは
Notion の「振り返り」ページに子ページを作成して、そこに今回の実装の振り返り日記を書いてください。
という部分です。この 「振り返り」 というのは Notion で接続した親ページの名前です。ここで親ページを教えてあげることでその下に子ページとして日記を書いていってくれます。
気になる日記の内容は？
書いてもらった日記はこちら！
実装のポイントや問題解決の方法などが良い感じでまとめられています！
まとめ
今回は AI の登場によって得ることがちょっと難しくなってしまったエンジニアとしての知見をどうやって得るか、ということをテーマに「Claude Code に実装の振り返り日記を書いてもらう」というアプローチでその問題を解決してみました！
日記として書き残してもらうことで、得た知見を自分で文章にまとめる手間がなくなったり、振り返りがいつでもできるので今までよりも効率的に学習ができそうです！
AI に完全に頼るのではなく、それを活かして自分自身も成長していく...素敵な関係ですね！
それでは、最後まで読んでいただきありがとうございました！👋
参考リンク
Discussion