最近、Next.jsで作成した自作日記アプリに「メモ機能」を追加しました。

🎯 目的：iPhoneのメモアプリ風の体験を実現する

新しく追加するメモ機能は、iPhoneのメモアプリのような軽快さとシンプルさを目指しました。
ただ単にテキストエリアを置くだけではなく、UXにも配慮した設計にしたいと考えていました。

---

🤖 ClaudeCodeとの共同設計

まず最初に取り組んだのが「設計フェーズ」です。
ClaudeCodeに「iPhoneのメモアプリのような機能をNext.jsアプリに追加したい」と伝え、UI/UX・データ構造・ステート管理などについて対話を重ねました。

設計時に話し合ったポイント：

• UI構成（ノート一覧 + ノート編集画面）
• データの保存方式（サーバーアクション vs API Routes）
• クライアント側のリアルタイム反映と非同期処理

ClaudeCodeからの提案を元に、まずは方向性を固めることに専念しました。
この「事前に設計を詰める」フェーズを設けたことで、実装段階がかなりスムーズになりました。

---

⚙️ サーバーアクション + useTransition で実装

今回は App Router（Next.js 13+）のサーバーアクション機能を採用しました。
API Routesを使わなかった理由は以下の通りです：

• クライアント／サーバーの境界が明確になる
• useTransitionとの相性が良く、UXが向上する

'use client';

import { useTransition } from 'react';
import { saveNoteToServer } from './actions';

export default function NoteEditor({ noteId, content }) {
  const [isPending, startTransition] = useTransition();

  const handleSave = () => {
    startTransition(async () => {
      await saveNoteToServer(noteId, content); // サーバーアクションを呼び出す
      // 必要に応じてUIを更新
    });
  };

  return (
    <div>
      <textarea defaultValue={content} />
      <button onClick={handleSave} disabled={isPending}>
        {isPending ? '保存中...' : '保存'}
      </button>
    </div>
  );
}

useTransitionを活用することで、保存中にローディング表示を出しつつ、UIがフリーズしない体験を実現しました。

---

🧹 開発後の仕上げ：Lint + E2Eテスト

機能の実装が完了したあとも、以下の仕上げ作業を行いました：

• Biome によるコードチェック・整形
• Playwright（mcp）を用いたE2Eテストで動作確認

Playwrightのmcpにより、テストファイルを作成せずに機能チェックをさせることができます

---

✍️ まとめ

今回の開発では「AIとの共同設計」が非常に有効でした。
特にClaudeCodeの自然言語での設計提案と、Next.jsの新機能（App Router + サーバーアクション）を組み合わせることで、スムーズに開発が進みました。

今後もこのようなアプローチで、自作アプリの体験をどんどんブラッシュアップしていこうと思います！