用 Claude Code 实战开发一个备忘录应用

Claude Codeは、CLI上で動くLLMによるAI開発支援ツールです。本連載は全5回を予定しています。実務経験1～3年程度のエンジニア向けに、対話モードでの会話の基本、コンテキストと＠記法、スラッシュコマンドとパーミッションの基本を解説し、最後に学んだ知識を総動員してアプリ開発をハンズオンで体験します。なお本連載は2026年9月刊行の『Claude Codeで作って学ぶ AI駆動アプリ開発入門』から一部を抜粋・編集してお届けします。

本書の第2章では1つのプロンプトでWebサイトを作りました。ここからは、これまでの連載で学んだ知識を組み合わせて、本格的なWebアプリ開発に挑戦します。

今回のシナリオ

ある日、上司からこんな依頼が来ました。「⁠簡単なメモアプリを今日中に作ってほしい⁠」⁠。機能は以下のとおりです。

自分用メモの追加・編集・削除; カテゴリ分類（仕事・個人・アイデア）; ブラウザを閉じてもメモが消えない永続化; データベース不使用

ここまで学んできた知識を活かせば十分に対応できます。対話テクニック（連載第1回⁠）⁠、コンテキストの知識（第2回⁠）⁠、@記法（第2回⁠）⁠、スラッシュコマンド（第3回⁠）⁠、パーミッション設定（第4回）を組み合わせて、実際にアプリを作ってみましょう。

大切なのは、いきなり全機能を一度に指示しないことです。各ステップで動作を確認しながら進めることで、意図のズレを早い段階で発見できます。5つのステップに分けて、1つずつ確認しながら進めていきます。

完成イメージ

最終的に、以下の機能を持つメモアプリを作ります。

これらの機能を5つのステップで段階的に構築していきます。

始める前の準備⁠：承認モードを確認しよう

開発を始める前に、画面下部のステータスラインを確認しておきましょう。accept edits onやplan mode onなどのモード表示がなければ、Manualモードです。もし別のモードになっている場合は、Shift+Tabを押してモードを切り替えましょう。

Manualモードでは、Claude Codeがファイルを作成・編集するたびに確認画面が表示されます。初めてのアプリ開発では、1つひとつの変更を確認しながら進めることで、意図しない変更を把握しやすくなります。まずはManualモードで確認しながら進め、Step 1のファイル編集のタイミングでAuto-Acceptモードへ切り替えます。パーミッション設定（settings.json）はStep 1の後で設定します。

Step 1⁠：プロジェクトを作成しよう

最初のステップでは、Reactプロジェクトの環境を構築します。ここを終えると、すぐにブラウザで動く画面を確認できるようになります。

ターミナルで、メモアプリを作成するディレクトリに移動し、Claude Codeを起動しましょう。今回はデスクトップに作成した「workspace」フォルダの中にメモアプリのプロジェクトを作成していきます。エクスプローラー（Windows）やFinder（macOS）でデスクトップに「workspace」フォルダを作成し、移動してからClaude Codeを起動します。

第1回で学んだ複数行入力（\ + Enter）を使って、環境構築の指示を出してみましょう。プロンプト入力中に自身が読みやすいように改行したり、条件が複数あるときは箇条書きで整理して伝えると意図が正確に伝わります。

指示した内容に応じて、Claude Codeがプロジェクトの作成を開始します。Reactプロジェクトを新規作成するシェルコマンドである npm create ... を実行しようとしています。確認画面が表示されますので、内容を確認して「Yes」を選択しましょう。

Reactプロジェクトが作成されたら、npm install（パッケージのインストール）や不要ファイルの削除など、自動的に次のアクションに進んでくれます。それぞれ同様の確認画面が表示されるので、内容を確認して「Yes」を選択しましょう。以降、本書ではシェルコマンドの確認にはYesを選択して進めることを前提として説明します。

「不要な初期ファイルや記述は編集・削除」と指定しているため、ファイルの上書き（overwrite）について確認が入るはずです。このとき、2番目の選択肢を選んで、Auto-Acceptモードに切り替えましょう。

2番目を選択すると、ステータスラインに「accept edits on」と表示され、Auto-Acceptモードに切り替わります。以降のステップでは、ファイルの編集は承認なしで自動的に進みます。以降、本書のハンズオンではAuto-Acceptモードを前提として説明します。慣れないうちは、自動で進む範囲がファイル編集だけに限られるAuto-Acceptモードで動作を把握しながら進め、慣れてきたら操作の安全性判定をauto modeに任せる、という使い分けがおすすめです。

Auto-Acceptモードが自動承認するのはファイルの作成・編集のみです。npm install や mkdirなどのシェルコマンドには引き続き確認が表示されます。シェルコマンドの確認についてはStep 1の後でパーミッション設定を行います。

プロジェクトの作成が完了すると、Claude Codeが完了報告をしてくれます。以下は、Claude Codeからの報告の一例です。最初に指示した通り、不要なファイルを削除し、初期ファイルを整理してくれます。

動作確認⁠：開発サーバーの起動

Claude Codeが作業を終えたら、ブラウザで動作を確認しましょう。開発サーバーの起動は、Claude Codeとは別のターミナルで自分で実行します[1]。

[1] Claude Codeに開発サーバーの起動を指示することも可能ですが、その場合 /exitや再起動のタイミングでサーバーも一緒に停止します。別ターミナルで自分で起動しておくことで、Claude Codeの再起動に関わらずサーバーを維持できます。

新しいターミナルタブを開き、memo-appに移動して開発サーバーを起動してください。

起動すると、次のような出力が表示されます。Reactの開発サーバーは、デフォルトで http://localhost:5173 というURLでアクセスできます。

ブラウザで http://localhost:5173 にアクセスし、Reactの初期画面が表示されれば成功です。

このターミナルは開発中はそのまま開いたままにしておきます。コードを変更すると、開発サーバーが自動的にリロードされて変更が反映されます。もし誤って閉じてしまったときは、同じ手順で再起動してください。

/init でCLAUDE.mdを生成する

環境の準備が完了したところで、CLAUDE.mdも生成しておきましょう。CLAUDE.mdはプロジェクトの情報をClaude Codeに伝えるためのファイルで、詳しくは本書の第4章で解説しています。CLAUDE.mdはmemo-appの中に作るので、ここで一度Claude Codeを終了し、「⁠~/Desktop/workspace/memo-app」に移動してから起動し直しましょう。

移動できたら、第3回で学んだ /init を実行して、CLAUDE.mdの雛形を生成します。

このコマンドを実行すると、Claude CodeがCLAUDE.mdの雛形を生成してくれます。以下はCLAUDE.md を生成した際の出力の一例です。初期状態のReactプロジェクトで使われている技術情報を反映してくれています。

これでStep 1の環境構築は完了です。プロジェクトが作成され、開発サーバーが動き、CLAUDE.mdも用意できました。

パーミッション設定を追加する

Step 1の作業中、npm installやmkdirなどのシェルコマンドのたびに確認が表示されていました。Auto-Acceptモードに切り替えたのでファイルの作成・編集は自動で承認されるようになりましたが、シェルコマンドの確認はAuto-Acceptモードの対象外です。

第4回で学んだパーミッション設定を使えば、シェルコマンドの承認も効率化できます。このハンズオン向けの.claude/settings.jsonを作成しましょう。プロジェクトの中に.claude/ディレクトリを作り、その中にsettings.jsonファイルを作成してください。テキストエディタ（VS Codeやメモ帳など）で以下の内容を記述します。

第4回で紹介したdeny・ask・allowの考え方に基づいた設定です。allowにはこのハンズオンで頻繁に使うコマンドを登録し、denyとaskで危険な操作を制御しています。settings.jsonの変更は保存した時点で即座に反映されます。

Step 2⁠：メモの追加⁠・表示機能を作ろう

まずはメモを入力して一覧に表示する、最も基本的な機能から始めます。以下のようなプロンプトを送信します。

プロンプトに沿ってClaude Codeがコードを実装してくれます。Reactの経験は必要ありません。Reactでは、画面を「コンポーネント」と呼ばれるUIの部品に分けて作ります。入力フォームやメモ一覧といったパーツがそれぞれ独立したコンポーネントになるため、後から修正や機能追加がしやすくなります。ここでは「どんなコードが書かれたか」よりも「指示したとおりに動くか」を確認することに集中しましょう。以下は、メモの追加・表示機能を追加した際の出力の一例です。

動作確認⁠：メモの追加と表示

コードが書き上がったら、ブラウザで動作を確認します。先ほど別ターミナルで起動した開発サーバーが動いていれば、ブラウザが自動的にリロードされているはずです。開発サーバーを閉じてしまっていた場合は、「⁠cd ~/Desktop/workspace/memo-app && npm run dev」で再起動してから確認してください。以下を確認しましょう。

テキスト入力欄が表示されている; 追加ボタンがある; テキストを入力して追加を押すと、メモが一覧に表示される; メモに作成日時が表示されている

実際にテキストを入力して追加を押すと、メモが一覧に表示されることを確認してください。

Step 3⁠：メモの編集⁠・削除機能を追加しよう

メモの追加と表示ができるようになりました。ただ、このままでは入力ミスに気づいても修正できず、不要なメモも消せません。次は既存メモの編集と削除機能を追加して、メモを管理できるようにしましょう。

このステップでは、第2回で学んだ@記法を使ってみましょう。Reactにおいてメインのコンポーネントである src/App.jsx というファイルを明示的に指定しつつ、編集・削除機能を追加します[2]。

[2] src/App.jsx は、Reactプロジェクトの作成時に自動的に生成されるファイルであり、メモ機能作成後もファイルは残っている前提でプロンプトを送信しています。

@src/App.jsxと指定することで、Claude Codeはこのファイルの内容をコンテキストに読み込んだ状態で作業を始めます。第2回で学んだとおり、@記法を使うとプロンプト送信時点でファイルの内容がコンテキストに含まれるため、より正確な修正が期待できます。

動作確認⁠：編集⁠・削除の操作

メモ機能を追加した時と同様にブラウザで操作して、意図どおりに動くことを確かめましょう。開発サーバーが停止していた場合はnpm run devで再起動してください。

各メモに編集・削除ボタンが表示されている; 編集ボタンを押すと、メモの内容を修正できる; 修正後に保存を押すと、内容が更新される; 削除ボタンを押すと、メモが一覧から消える

Step 4⁠：カテゴリ分類機能を追加しよう

編集・削除ができるようになり、メモを自由に管理できるようになりました。しかし、メモが増えてくると今度は別の問題が生じます。仕事のメモと個人のメモが混在して、必要なものをすぐに見つけられなくなるのです。そこで、メモにカテゴリを付けて分類できる機能を追加しましょう。

ここで、第2回で学んだコンテキストの管理を実践します。Step 3までの対話でコンテキストにはメモの編集・削除に関する情報が蓄積されていますが、カテゴリ機能の実装にはこれらの情報は不要です。不要な情報がコンテキストに残っていると、Claude Codeが意図からズレた実装をする原因になります。/clear コマンドを実行してコンテキストをリセットしましょう。

これでコンテキストがリセットされました。作業の切り替え時には /clear でコンテキストをリセットする習慣をつけておくと、意図どおりの実装を得やすくなります。

以下のようなプロンプトを送信してカテゴリ機能を追加しましょう。

実装が完了すると、以下のような出力が表示されます。

実際に操作して確かめてみましょう。指定した指示通り、メモにカテゴリを設定することができ、一覧ではカテゴリが表示されたり、フィルタボタンでカテゴリごとに絞り込みができることを確認します。

メモ追加時にカテゴリを選択できる; 追加されたメモにカテゴリが表示されている; フィルタボタン（仕事・個人・アイデア・すべて）が表示されている; フィルタボタンを押すと、該当するカテゴリのメモだけが表示される

Step 5⁠：ローカルストレージでデータを永続化しよう

カテゴリ分類ができるようになり、メモを種類ごとに整理できるようになりました。しかしまだ課題が残っています。ブラウザをリロードしたり、ブラウザを閉じたりすると、追加したメモがすべて消えてしまうのです。

この問題を解決するには、データをブラウザ側に保存しておく仕組みが必要です。そこで使うのがローカルストレージです。ローカルストレージとは、サーバーを用意しなくてもブラウザだけでデータを保存できるWeb APIで、有効期限がなくブラウザを閉じてもデータが残ります。実際の業務アプリではデータベースを使用することがほとんどですが、今回の要件ではデータベースを必要としないので、今回のようにお試しでの開発には最適です。

それでは、ローカルストレージでデータを永続化する機能を追加してみましょう。また別作業に切り替わるため、/clear コマンドを実行してコンテキストをリセットしてからプロンプトを送信します。

実装が完了すると、以下のような出力が表示されます。

では、ブラウザで操作して、実際にメモが永続化されていることを確認しましょう。

メモをいくつか追加する; ブラウザをリロードする; 先ほど追加したメモが残っていれば成功

これでローカルストレージにメモが保存され、ブラウザを閉じても次回アクセス時に自動的に読み込まれるようになりました。

今回使った知識を振り返ろう

5つのステップで、メモアプリが完成しました。各ステップを振り返ると、第1回から第4回で個別に学んだ知識がそれぞれ異なる場面で活きていたことがわかります。

個別に学んだ知識が、実際の開発では自然に組み合わさって使われていたことが確認できます。

このハンズオンで重要なのは、段階的に指示して確認しながら進めるという開発フローです。

もし最初から「メモの追加・編集・削除ができて、カテゴリ分類もできて、ブラウザを閉じてもデータが消えないメモアプリを作ってください」と一度に指示していたら、意図通りの結果を得るのは難しかったかもしれません。各ステップで動作を確認し、問題がないことを確認してから次に進む。この流れが、Claude Codeを使った開発の基本です。この開発フローは本書の5章でも取り上げます。

第2回で学んだ /clear でコンテキストをリセットしておきましょう。ここまでの対話でコンテキストが圧迫されているため、リセットして新鮮な状態で次の対話を始めるのが適切です。

メモアプリをGitで管理しよう

アプリが完成したので、コードをGitリポジトリに登録しておきましょう。

Claude Codeがリポジトリの初期化（git init）とコミットを実行します。Viteがプロジェクト作成時に.gitignoreを生成しているため、node_modulesやdistは自動的に除外されます。

本書のこの後のハンズオンでは、区切りのよいタイミングでコミットしながら進めます。

まとめ

Claude Codeを使って、5つのステップでReactメモアプリを構築しました。第1回で学んだ複数行入力、第2回の@記法、/clearや第3回の /init、第4回のパーミッション設定など、これまでの連載で学んだ知識を実際のアプリ開発に活用できることを確認できました。コードを書かずに、対話と確認を繰り返すだけでアプリが完成する流れを通じて、AI駆動開発の基本的なサイクルを体験できました。

本書『Claude Codeで作って学ぶ AI駆動アプリ開発入門』では、さらに踏み込んだClaude Codeの使い方も解説しています。ぜひこちらもあわせてお読みください。

関連書籍⁠：Claude Codeで作って学ぶ AI駆動アプリ開発入門

Anthropic社が開発した次世代のAIコーディングツール「Claude Code」の入門書です。

本書では、Anthropic社が開発したエージェント型コーディングツール「Claude Code」の基本的な使い方から始まり、基本的なコマンド操作から、CLAUDE.mdによるプロジェクト設定、MCPを活用した外部サービス連携、CI/CDへの組み込みまでを一貫してアプリ開発を題材にしながらハンズオンで学び、現場で即戦力となるテクニックが自然と身につくように構成しています。

詳細情報を見る