合同会社リベリオン

はじめに

AI開発アシスタントのClaudeを使って、フルスタックの日報アプリケーション「日報太郎」を作成してみました。この記事では、開発プロセスから学んだことまで、実際の体験をお伝えします。

👉 実際に「日報太郎」を使ってみてください: https://nippo-taro.rebellion-inc.jp

作成したアプリ「日報太郎」の概要

主な機能

ユーザー認証: Supabaseによる安全な認証システム
日報作成・編集: Markdown記法対応のリッチエディタ
画像アップロード: クリップボードからの画像貼り付けにも対応
公開・非公開設定: 日報の公開範囲を制御
共有機能: URLでの日報共有
日付指定: 報告日を自由に設定可能（作成日と報告日を分離）
レスポンシブデザイン: スマートフォンにも完全対応

技術スタック

フロントエンド: Next.js 15 (App Router) + TypeScript
バックエンド: Supabase (PostgreSQL + Authentication + Storage)
スタイリング: Tailwind CSS
デプロイ: Netlify
その他: ReactMarkdown, date-fns, Lucide React

なぜ「日報太郎」という名前にしたのか

実家のにゃんこの名前が「じろう」だからです！

Claudeとの開発体験

1. 要求定義からプロジェクト設計まで

最初に「日報アプリを作りたい」という漠然とした要求から始まりました。Claudeは以下のような質問を通じて要求を整理してくれました：

どんな機能が必要か？
どの技術スタックを使うか？
デプロイ先はどうするか？
ユーザビリティで重視したい点は？

この対話を通じて、明確な機能要件と技術選定ができました。

以下は最初に使用したプロンプトです

日報作成アプリを作ってください。
要件としては以下の通りです。
・ユーザーは会員登録をすることができる
・ユーザーは日報を書くことができる。その際、markdownでの入力と、画像ファイルを挿入することができる。画像ファイルはクリップボードからペーストすることもできる。
・ユーザーは自身の作成した日報一覧を閲覧することができる。
・日報には公開と非公開設定ができる
・日報を共有するためのURLを生成することができる
・databaseはsupabaseを使用
・ユーザーの作成などはsupabaseのauthenficationを使用
・メールの送信をローカルでテストするための何か仕組みを導入

2. プロジェクト構造の提案

Claudeは現代的なNext.js 15のApp Routerを使ったプロジェクト構造を提案してくれました：

app/
├── auth/                 # 認証関連
├── dashboard/           # ダッシュボード
├── nippo/              # 日報機能
│   ├── new/            # 新規作成
│   ├── [id]/           # 詳細表示
│   └── [id]/edit/      # 編集
├── share/[id]/         # 共有ページ
└── api/               # APIルート

components/            # 再利用可能なコンポーネント
lib/                  # ユーティリティ関数

3. 段階的な開発プロセス

Claudeとの開発は非常に段階的で理解しやすいものでした：

基本構造の構築
認証システムの実装
CRUD操作の実装
UI/UXの改善
画像アップロード機能
レスポンシブ対応
デプロイとトラブルシューティング

印象的だった開発体験

Supabaseとの統合

SupabaseのRLS（Row Level Security）ポリシーの設定では、複数回の試行錯誤がありました。Claudeは以下の点で非常に有用でした：

問題の特定: エラーメッセージから原因を即座に特定
解決策の提示: 具体的なSQLクエリとポリシー設定を提供
代替案の検討: 複数のアプローチを比較検討

-- 最終的に採用されたシンプルなポリシー
CREATE POLICY "Users can manage their own nippo" ON nippo
FOR ALL USING (auth.uid() = user.id);

レスポンシブデザインの改善

「日報太郎」では特にモバイル対応を重視しました。Tailwind CSSのブレークポイントを活用した実装をClaudeが提案してくれました：

{
  /* デスクトップレイアウト */
}
<div className="hidden sm:flex items-center justify-between">
  {/* 横並びのボタン */}
</div>;

{
  /* モバイルレイアウト */
}
<div className="sm:hidden space-y-2">
  <button className="w-full flex items-center justify-center">
    {/* 縦並びの全幅ボタン */}
  </button>
</div>;

リアルタイムプレビュー機能

Markdown記法のリアルタイムプレビューでは、パフォーマンスを考慮した実装を提案してくれました：

const previewContent = useMemo(() => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        img: ({ src, alt }) => (
          <img
            src={src}
            alt={alt}
            className="max-w-full h-auto rounded-md shadow-sm border my-2"
          />
        )
        // その他のカスタムコンポーネント
      }}
    >
      {content}
    </ReactMarkdown>
  );
}, [content]);

遭遇した課題と解決策

1. 認証の無限ループ問題

問題: 認証チェックが無限に実行される

解決策: useEffectの依存関係を適切に管理

// 問題のあった実装
useEffect(() => {
  // 認証チェック
}, [user]); // userが依存関係にあると無限ループ

// 改善後の実装
const supabase = useMemo(() => createClient(), []);

useEffect(() => {
  // 認証チェック（一度だけ実行）
}, [supabase]);

useEffect(() => {
  // リダイレクト処理（ユーザー状態変化時）
}, [user, pathname, loading]);

2. Netlifyデプロイ時の静的生成エラー

問題: ビルド時に環境変数が見つからずエラー

解決策: 認証が必要なページで動的レンダリングを強制

// 認証が必要なページに追加
export const dynamic = 'force-dynamic';

3. タイトル不要への仕様変更

開発中に「タイトルは不要で、日付ベースの表示にしたい」という仕様変更がありました。Claudeは：

データベース変更: マイグレーションファイルの作成
型定義の更新: TypeScriptの型からtitleを削除
UI更新: 日付ベースのタイトル生成関数を実装

// 自動生成されるタイトル表示
const generateNippoTitle = (reportDate: string): string => {
  const date = new Date(reportDate + 'T00:00:00');
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}の日報`;
};

4. 報告日と作成日の分離

「後から過去の日報を追加したい」という要求により、報告日（report_date）と作成日（created_at）を分離する機能を実装しました：

// 日付選択UI
<div className="mb-6 flex items-center space-x-3">
  <Calendar className="w-5 h-5 text-gray-500" />
  <div className="flex items-center space-x-2">
    <label>報告日：</label>
    <input
      type="date"
      value={reportDate}
      onChange={(e) => setReportDate(e.target.value)}
    />
    <span className="text-sm text-gray-500">
      {isToday(reportDate) ? '今日' : formatDateToJapanese(reportDate)}
    </span>
  </div>
</div>

Claudeを使った開発のメリット

1. 学習コストの削減

新しい技術（Next.js 15のApp Router）も即座に適切な実装方法を提案
ベストプラクティスを常に意識した提案

2. 問題解決の速さ

エラーメッセージから原因を即座に特定
複数の解決策を比較検討できる

3. コード品質の向上

TypeScriptの型安全性を重視した実装
パフォーマンスを考慮した最適化

4. ドキュメント化への配慮

コメントが適切に書かれたコード
後から見てもわかりやすい構造

学んだこと・感じたこと

1. AI駆動開発の可能性

Claudeとの開発で、以下のような新しい開発体験を得られました：

対話的な設計: 要求を対話で整理できる
即座のフィードバック: 実装に対する改善提案
継続的なリファクタリング: より良いコードへの提案

2. 従来の開発との違い

従来の開発:

調べる → 理解する → 実装する → テストする
問題発生 → 調べる → 修正する

Claudeとの開発:

相談する → 提案を受ける → 実装する → 改善提案を受ける
問題発生 → 即座に解決策を得る → 修正する

3. 開発者として必要なスキル

Claudeを使っても、以下のスキルは依然として重要だと感じました：

要求定義能力: 何を作りたいかを明確に伝える
アーキテクチャ理解: 提案された構造を理解し評価する
品質判断: 提案されたコードの良し悪しを判断する

「日報太郎」の今後の展望

現在の「日報太郎」は基本的な日報機能を提供していますが、今後以下のような機能拡張を検討しています：

チーム機能: 組織での日報共有
テンプレート機能: よく使う日報形式の保存
通知機能: 日報提出のリマインダー
分析機能: 活動の振り返りと分析
API連携: 他のツールとの連携

まとめ

Claudeと一緒に「日報太郎」を開発した体験は、非常に学習効果が高く、かつ効率的でした。特に以下の点が印象的でした：

学習効率の向上: 新しい技術もすぐに適切な方法で使えた
問題解決の速さ: 詰まったときの解決が早い
品質の向上: ベストプラクティスを常に意識した実装

ただし、AIはあくまでもツールであり、最終的な判断や方向性の決定は開発者が行う必要があります。Claudeは優秀なペアプログラミングパートナーとして、開発を大幅に加速してくれる存在だと感じました。

最後に - ぜひ「日報太郎」を使ってみてください！

今回作成した「日報太郎」は、現代的なWebアプリケーション開発のベストプラクティスが詰まったアプリケーションです。

👉 ぜひ「日報太郎」を使ってみてください: https://nippo-taro.rebellion-inc.jp

アカウント作成は無料
すぐに日報の作成・管理が始められます
Markdown記法による豊富な表現力
画像の貼り付けも簡単
スマートフォンからでも快適に利用可能

興味のある方は、ぜひ実際にClaudeと一緒に何かを作ってみることをお勧めします。きっと新しい開発体験を得られるはずです。

技術仕様:

Next.js 15 (App Router)
TypeScript
Supabase (Database + Auth + Storage)
Tailwind CSS
ReactMarkdown
Netlify (Hosting)

アプリURL: https://nippo-taro.rebellion-inc.jp リポジトリ: GitHub

Claudeで日報アプリ「日報太郎」を作ってみました！