「AIでアプリを作りたいけど、何から始めればいいかわからない…」と悩んでいませんか？
私自身、Claude Codeを使い始めた当初は「本当にコードが自動で生成されるの？」と半信半疑でした。でも実際に手を動かしてみると、驚くほどスムーズにアプリが完成して、正直感動しました。
この記事では、Claude Codeを使ってメモアプリをゼロから作る手順をハンズオン形式でわかりやすく解説します。表や図を交えながら丁寧に進めていくので、初めての方でも安心してついてきてください。
目次
- Claude Codeとは？
- 環境構築
- プロジェクトのセットアップ
- メモアプリの設計
- プランモードで要件を先に詰める
- Claude Codeを使った実装ハンズオン
- 動作確認
- まとめ
1. Claude Codeとは？
Claude Code（クロード・コード）は、Anthropicが提供するAIエージェント型のCLIツールです。ターミナルから直接操作でき、コードの生成・編集・実行・デバッグまで、会話しながら進められるのが最大の特徴です。
| 項目 | 内容 |
|---|---|
| 提供元 | Anthropic |
| 形式 | CLIツール（ターミナルで操作） |
| 対応OS | macOS / Linux / Windows（WSL） |
| 得意なこと | コード生成・編集・デバッグ・テスト |
| インストール方法 | npm install -g @anthropic-ai/claude-code |
従来の「ChatGPTにコードを貼り付けて、回答をコピーして、ファイルに貼り直して…」という繰り返し作業がなくなります。Claude Codeはファイルを直接読み書きしてくれるので、開発のスピードが体感で3〜5倍は上がると私は感じています。
2. 環境構築
必要なもの
| ツール | バージョン | 用途 |
|---|---|---|
| Node.js | v18以上 | Claude Code本体の実行 |
| npm | v9以上 | パッケージ管理 |
| Anthropic APIキー | — | Claude APIへのアクセス |
インストール手順
# Claude Codeをグローバルインストール
npm install -g @anthropic-ai/claude-code
# バージョン確認
claude --version
APIキーの設定
export ANTHROPIC_API_KEY="sk-ant-xxxxxxxx"
.bashrc や .zshrc に追記しておくと毎回設定しなくて済むので楽です。
echo 'export ANTHROPIC_API_KEY="sk-ant-xxxxxxxx"' >> ~/.zshrc
source ~/.zshrc
✅ ここまでできれば環境構築は完了です。
3. プロジェクトのセットアップ
まずは作業用ディレクトリを作ります。
mkdir memo-app
cd memo-app
このディレクトリ内でClaude Codeを起動します。
claude
するとターミナル上にインタラクティブなチャット画面が立ち上がります。ここから自然言語で指示を出すだけでOKです。
エンジニアなら読むべき本を30冊以上紹介！
正直、私の仕事のやり方をガラッと変えた神本やSQLのチューニングに悩んだ時にめちゃくちゃ役に立ったもあります👇
→記事を読む
4. メモアプリの設計
今回作るメモアプリの仕様を整理しておきましょう。設計をClaude Codeに伝える際にも、要件を明確にしておくほど精度の高いコードが生成されます。
機能一覧
| 機能 | 説明 | 優先度 |
|---|---|---|
| メモ追加 | タイトルと本文を入力して保存 | ◎ 必須 |
| メモ一覧表示 | 保存済みメモの一覧表示 | ◎ 必須 |
| メモ詳細表示 | 選択したメモの内容を表示 | ◎ 必須 |
| メモ編集 | 既存メモの修正 | ✅ あると良い |
| メモ削除 | 不要なメモの削除 | ✅ あると良い |
| 検索機能 | キーワードでメモを絞り込む | ❌ 今回はスコープ外 |
技術スタック
| 項目 | 選択 |
|---|---|
| フロントエンド | React + TypeScript |
| スタイリング | Tailwind CSS |
| データ保存 | localStorage（シンプルに） |
| ビルドツール | Vite |
5. プランモードで要件を先に詰める
「要件を伝えたら、いきなりコードを書き始めてしまって後から大幅修正になった…」という経験はありませんか？
私はClaude Codeを使い始めた頃、とにかく早くコードを生成したくて要件整理をすっ飛ばしがちでした。でもそれが結局、手戻りを増やして時間のロスになると気づきました。そこで活用したいのが**プランモード（Plan Mode）**です。
プランモードとは？
プランモードは、Claude Codeがコードを一切書かずに計画だけを立てるモードです。実装前に「何をどう作るか」をClaude Codeと一緒に言語化・確認できます。
| モード | 動作 | 使うタイミング |
|---|---|---|
| 通常モード | 指示するとすぐコードを生成・編集する | 要件が固まっているとき |
| プランモード | コードは書かず、計画・提案のみ返す | ◎ 要件を詰めたいとき |
プランモードに切り替えるには、Claude Codeのチャット画面でショートカットキー Shift + Tab を押します。画面上部に Plan mode と表示されれば切り替え完了です。
# プランモードへの切り替え
Shift + Tab を押す → 「Plan mode」と表示される
✅ プランモード中はファイルの読み取りは行いますが、ファイルの作成・編集・削除は一切しません。安心して要件の対話ができます。
プランモードで要件を詰める実践例
プランモードに切り替えたら、まずざっくりした要望を投げてみましょう。
① 最初の投げかけ
メモアプリを作りたいです。
機能はメモの追加・一覧表示・編集・削除を考えています。
技術スタックはReact + TypeScript + Tailwind CSSを使う予定です。
このアプリを作る上で、設計上の考慮点や足りていない要件はありますか？
② Claude Codeからの返答例（プランモード）
Claude Codeはコードを書かず、こんな観点を返してきます。
【確認したい点】
1. データの永続化はどうしますか？
- localStorage（シンプル）
- IndexedDB（大量データ対応）
- バックエンドAPI連携（複数端末対応）
2. メモの並び順はどうしますか？
- 作成日時の降順（新しい順）
- 更新日時の降順
- 手動並び替え
3. メモの最大文字数制限は設けますか？
4. ダークモードの対応は必要ですか？
【設計上の提案】
- useMemos カスタムフックにCRUDロジックをまとめると保守性が上がります
- メモのid生成には crypto.randomUUID() の使用を推奨します
- TypeScriptの型定義ファイルを src/types/ に分離すると管理しやすくなります
このやり取りを通じて、自分が考えていなかった観点に気づけるのがプランモード最大のメリットだと思います。
③ 要件を確定させる
Claude Codeとの対話を重ねて、要件を固めていきます。
確認ありがとうございます。以下で進めてください。
- データ保存: localStorage
- 並び順: 作成日時の降順
- 文字数制限: なし
- ダークモード: 今回は対応しない
④ プランの確認
要件が固まったら、実装計画全体をClaude Codeに整理してもらいます。
では上記の要件で、実装の計画を立ててください。
フォルダ構成・コンポーネント設計・実装順序を整理してください。
Claude Codeが実装計画を返してくれます。
【実装計画】
■ フォルダ構成
src/
├── types/memo.ts ← 型定義
├── hooks/useMemos.ts ← CRUD + localStorage
├── components/
│ ├── MemoForm.tsx ← 追加フォーム
│ ├── MemoList.tsx ← 一覧
│ └── MemoDetail.tsx ← 詳細・編集・削除
└── App.tsx ← レイアウト組み立て
■ 実装順序
1. 型定義（Memo interface）
2. カスタムフック（useMemos）
3. MemoForm
4. MemoList
5. MemoDetail
6. App.tsx での統合
■ 設計上のポイント
- localStorageへの読み書きは useMemos 内に閉じ込める
- コンポーネントはprops経由でのみデータを受け取るピュアな設計
- 編集中状態は MemoDetail 内のローカルstateで管理
✅ この計画に納得できたら、プランモードを解除して実装に移ります。
プランモードを解除して実装開始
プランモードの解除も Shift + Tab を押すだけです。
# プランモードを解除
Shift + Tab を押す → 「Plan mode」表示が消える
解除したらClaude Codeに実装開始を伝えます。
では先ほどの計画通りに実装を進めてください。
プランモードで合意した設計をベースに、Claude Codeがスムーズにコードを生成してくれます。
プランモードを使うメリットまとめ
| 項目 | プランモードなし | ◎ プランモードあり |
|---|---|---|
| 要件の抜け漏れ | ❌ 後から気づいて手戻り発生 | ✅ 事前に洗い出せる |
| 設計の質 | ❌ AIが勝手に判断する部分が多い | ✅ 合意した設計で進める |
| 修正コスト | ❌ コード生成後の修正は大変 | ✅ 計画段階で軌道修正できる |
| コミュニケーション | ❌ 一方的に指示するだけ | ✅ 対話しながら要件を深められる |
❌ 「とりあえず作ってみて後から直せばいい」という進め方は、規模が大きくなるほど修正コストが膨らみます。プランモードで設計の合意を取ってから実装する習慣を身につけると、開発全体のスピードが上がると私は感じています。
6. Claude Codeを使った実装ハンズオン
いよいよ本番です。ここからはClaude Codeに指示を出しながら実装を進めます。
Step 1: プロジェクトの雛形作成
Claude Codeのチャット画面にこう入力します。
ReactとTypescriptとViteとTailwind CSSを使ったメモアプリのプロジェクトを作成してください。
フォルダ構成も整えてください。
すると、Claude Codeが以下の作業を自動でやってくれます。
-
npm create vite@latestの実行 -
tailwindcssのインストールと設定ファイルの生成 - 基本的なフォルダ構成の作成
生成されるフォルダ構成の例：
memo-app/
├── src/
│ ├── components/
│ │ ├── MemoList.tsx
│ │ ├── MemoDetail.tsx
│ │ └── MemoForm.tsx
│ ├── hooks/
│ │ └── useMemos.ts
│ ├── types/
│ │ └── memo.ts
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── vite.config.ts
└── tailwind.config.js
整理されたフォルダ構成が一瞬で出来上がるのは気持ちいいですね。
Step 2: 型定義の作成
src/types/memo.ts にメモの型を定義してください。
メモはid、title、content、createdAtを持ちます。
Claude Codeが生成するコード例：
// src/types/memo.ts
export interface Memo {
id: string;
title: string;
content: string;
createdAt: Date;
}
✅ シンプルですが、これが後の実装の基盤になります。
Step 3: カスタムフックの作成
src/hooks/useMemos.ts を作成してください。
localStorageを使ってメモのCRUD操作（追加・取得・更新・削除）ができるカスタムフックを作ってください。
生成されるコードのイメージ：
// src/hooks/useMemos.ts
import { useState, useEffect } from 'react';
import { Memo } from '../types/memo';
const STORAGE_KEY = 'memos';
export const useMemos = () => {
const [memos, setMemos] = useState<Memo[]>([]);
useEffect(() => {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
setMemos(JSON.parse(stored));
}
}, []);
const saveMemos = (updated: Memo[]) => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
setMemos(updated);
};
const addMemo = (title: string, content: string) => {
const newMemo: Memo = {
id: crypto.randomUUID(),
title,
content,
createdAt: new Date(),
};
saveMemos([newMemo, ...memos]);
};
const updateMemo = (id: string, title: string, content: string) => {
const updated = memos.map(m =>
m.id === id ? { ...m, title, content } : m
);
saveMemos(updated);
};
const deleteMemo = (id: string) => {
saveMemos(memos.filter(m => m.id !== id));
};
return { memos, addMemo, updateMemo, deleteMemo };
};
❌ 「とりあえず全部App.tsxに書いてしまいがち」という落とし穴に注意。カスタムフックに分けることでテストもしやすくなります。
Step 4: コンポーネントの作成
以下のコンポーネントを作成してください。
- MemoForm: タイトルと本文を入力して追加するフォーム
- MemoList: メモ一覧を表示するリスト
- MemoDetail: 選択したメモの詳細を表示・編集・削除できるコンポーネント
Tailwind CSSを使ってシンプルで見やすいデザインにしてください。
Claude Codeがコンポーネントを3つ同時に生成してくれます。私が試したときはほぼ修正なしで動くコードが出てきたので、かなり驚きました。
MemoForm.tsxの例：
// src/components/MemoForm.tsx
import { useState } from 'react';
interface Props {
onAdd: (title: string, content: string) => void;
}
export const MemoForm = ({ onAdd }: Props) => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = () => {
if (!title.trim()) return;
onAdd(title, content);
setTitle('');
setContent('');
};
return (
<div className="p-4 bg-white rounded shadow">
<h2 className="text-lg font-bold mb-3">新しいメモ</h2>
<input
type="text"
placeholder="タイトル"
value={title}
onChange={e => setTitle(e.target.value)}
className="w-full border rounded px-3 py-2 mb-2 text-sm"
/>
<textarea
placeholder="本文"
value={content}
onChange={e => setContent(e.target.value)}
className="w-full border rounded px-3 py-2 mb-3 text-sm h-24 resize-none"
/>
<button
onClick={handleSubmit}
className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition"
>
追加する
</button>
</div>
);
};
Step 5: App.tsxで組み立て
App.tsxで各コンポーネントとuseMemos hookを組み合わせて、
左側にメモ一覧・右側にメモ詳細という2カラムレイアウトのUIを作ってください。
このように指示の粒度を調整しながら進めるのがClaude Codeを上手く使うコツです。「全部作って」と一度に言うより、ステップを分けた方が精度が上がります。
Claude Codeへの指示のコツまとめ
| ✅ 良い指示の例 | ❌ 避けたい指示の例 |
|---|---|
| 「src/hooks/useMemos.ts を作成してください」 | 「カスタムフックを作って」 |
| 「Tailwind CSSでシンプルなデザインに」 | 「いい感じにして」 |
| 「localStorageに保存してください」 | 「データを保存して」 |
| 「エラーハンドリングも追加してください」 | 「ちゃんと作って」 |
ファイルパスや技術名、要件を明確に伝えることが成功の鍵だと思います。
7. 動作確認
実装が完了したら、開発サーバーを起動して確認します。
npm run dev
ブラウザで http://localhost:5173 にアクセスして、以下を確認しましょう。
| チェック項目 | 確認内容 |
|---|---|
| ✅ メモ追加 | タイトル・本文を入力して「追加する」ボタンが動作するか |
| ✅ 一覧表示 | 追加したメモが一覧に表示されるか |
| ✅ 詳細表示 | 一覧のメモをクリックして詳細が表示されるか |
| ✅ 編集 | メモの内容を修正して保存できるか |
| ✅ 削除 | メモを削除して一覧から消えるか |
| ✅ 永続化 | ページリロード後もメモが残っているか（localStorage） |
もし動作がおかしければ、Claude Codeに「〇〇が動かないのでデバッグしてください」と伝えるだけで修正してくれます。エラーメッセージをそのまま貼り付けてもOKです。
8. まとめ
| ポイント | 内容 |
|---|---|
| ◎ プランモードで先に設計合意 |
Shift + Tab でモード切替。コードを書く前に要件・設計を詰める |
| ◎ 指示は具体的に | ファイルパス・技術名・要件を明確に伝える |
| ✅ ステップを分ける | 一度に全部頼まず、段階的に実装する |
| ✅ エラーはそのまま渡す | エラーメッセージをコピペするだけでデバッグしてくれる |
| ❌ 曖昧な指示はNG | 「いい感じに」「ちゃんと」は精度が落ちる |
Claude Codeを使えば、設計さえしっかりしていれば実装時間を大幅に短縮できます。「アイデアはあるけど実装が追いつかない」というエンジニアにこそ、ぜひ一度試してほしいツールです。
今回作ったメモアプリを土台に、検索機能やタグ機能など、どんどん機能を追加してみてください。Claude Codeが強力なサポートをしてくれるはずです。
エンジニアなら読むべき本を30冊以上紹介！
正直、私の仕事のやり方をガラッと変えた神本やSQLのチューニングに悩んだ時にめちゃくちゃ役に立ったもあります👇
→記事を読む