Claude Code で ToDo アプリを作ってみた！🚀～AI ペアプロの第一歩を踏み出そう～

みなさん、AI と一緒にコードを書いたことはありますか？😎 Claude Code を使って実際に ToDo アプリを作ってみたら、想像以上に楽しくて効率的だったので、その体験をシェアします！✨

こんな人におすすめです！👋

• Claude Code が気になっているけど、まだ触ったことがない方 🤔

• AI と一緒に開発してみたい方 🤖

• 新しいツールを試すのが好きな方 ⚡

• （HTML/CSS/JavaScript の基本が分かる方 💻）

この記事を読むと... 📚

• ✨ Claude Code の使い方がマスターできます

  実際にアプリを作りながら覚えられます！

• 🤝 AI とペアプロする感覚が分かります

  まるで優秀な同僚と作業している感じです

• ⚡ 開発スピードが爆上がりします

  自然な日本語で指示するだけでコードが生まれる魔法

• 🎯 動くアプリが完成します

  最後にはちゃんと使える ToDo アプリができあがります！

今回作るのはこんなアプリ！📱

📝 ToDo アプリの機能一覧
├── ✅ タスク追加 - 思いついたらすぐ追加
├── ✏️ タスク編集 - あとから修正もOK
├── 🗑️ タスク削除 - 不要になったらポイッ
├── ✔️ 完了切り替え - 達成感を味わおう
├── 🎨 イケてるデザイン - 見た目も大事
└── 💾 データ永続化（ローカルストレージ） - 安心して使える

どのくらい時間がかかりますか？⏰

だいたい30-45分くらい

コーヒー☕を飲みながらでも、サクッと作れます！

さあ、環境を準備しましょう！🛠️

事前に準備しておくもの 📋

• Docker 🐳 （Docker Compose）

  まだの方は公式サイトからダウンロードしてください

• ブラウザ 🌐

  Chrome、Firefox、Safari、なんでもOKです

• エディタ ✏️

  VS Code がおすすめですが、お好みで

• Anthropic アカウント 🔑

  Claude を使うのに必要です（無料で作れます）

Step 0: Docker環境をサクッと作りましょう 🐳

まずはプロジェクト用のフォルダを作って、必要なファイルを準備します：

# プロジェクト用のフォルダを作成
mkdir claude-todo-project
cd claude-todo-project

これ以降は claude-todo-project 配下で作業します 🔧

Dockerfile を作成（これが開発環境の設計図！）：

FROM ubuntu:24.04
# パッケージを更新し必要なツールをインストール
RUN apt-get update && apt-get install -y \
    curl \
    git \
    build-essential \
    vim \
    nano \
    && rm -rf /var/lib/apt/lists/*
# Node.js 20 LTSをインストール
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
    && apt-get install -y nodejs
# 作業ディレクトリを設定
WORKDIR /workspace
# Claude Codeをグローバルインストール
RUN npm install -g @anthropic-ai/claude-code
# アプリ用ディレクトリを作成
RUN mkdir -p /workspace/app
# エントリーポイントを設定
CMD ["bash"]

docker-compose.yml を作成（コンテナの起動設定！）：

services:
  claude-dev:
    build: .
    container_name: claude-todo-dev
    volumes:
      - .:/workspace
  app:
    image: nginx:alpine
    container_name: todo-app
    ports:
      - "8080:80"
    volumes:
      - ./app:/usr/share/nginx/html

Step 1: Docker環境を起動してみましょう！🚀

# Docker環境をビルド＆起動（初回は少し時間がかかります）
docker-compose up -d --build

# コンテナの中に入ってみましょう
docker-compose exec claude-dev bash

# 成功すると以下のようなプロンプトに変化します✨
root@${コンテナID}:/workspace#

Step 2: Claude Code とお友達になりましょう！🤝