前回までの記事では、VS Codeの導入やReact / Next.jsの開発環境構築を進めてきました。 今回はその続きとして、Claude Codeに指示を出しながら、Webアプリにファイル選択機能を実装する流れを整理します。
この記事のポイントは、単にコードを完成させることではありません。 非エンジニアがAIにどう依頼すると、実装を完成に近づけやすいのかを、具体的なプロセスとして紹介することです。
まだ開発環境の準備が終わっていない方は、先に以下の記事から進めると流れがつかみやすいです。
Claude Codeとは？なぜ非エンジニアでも実装を進めやすいのか
Claude Code は、コードベースを読み取り、ファイルを編集し、コマンドを実行しながら開発を進められるAIコーディング支援ツールです。 Claude Code公式では、コードの修正だけでなく、機能追加や開発タスクの自動化も支援するツールとして案内されています。
参考：
Claude Code公式｜概要
Claude Code公式｜How Claude Code works
この特性があるので、非エンジニアでも 「このアプリにこういう機能を追加したい」 「見た目はこうしてほしい」 「今はアップロード処理は不要」 といった形で依頼しながら、少しずつアプリを育てていくことができます。
今回作る機能｜ファイルダイアログからファイルを選択するUI
今回作るのは、次のようなシンプルな機能です。
- 画面に「ファイルを選択」ボタンを表示する
- ボタンを押すとファイルダイアログが開く
- ローカルファイルを1つ選択できる
- 選択後、ファイル名を画面に表示する
いきなり複雑なアップロード処理までは行わず、まずは 「選ぶ → 表示する」までを完成させるのがポイントです。 この切り分けをしておくと、Claude Codeにも指示しやすくなります。
ファイル選択機能は何で実装する？まずは input type=”file” が基本
Webアプリでファイル選択機能を実装する場合、まず基本になるのが <input type="file"> です。 これはHTML標準の仕組みで、ユーザーが端末内のファイルを選択できるようにするものです。
また、accept 属性を使うことで、画像やCSVなど対象ファイルの種類を絞ることもできます。 複数選択したい場合は multiple 属性も使えます。
一方で、ブラウザには showOpenFilePicker() のようなAPIもありますが、MDNでは experimental とされており、広く安定した実装として扱うには少し注意が必要です。 そのため、今回のような非エンジニア向けの記事では、まずは input type="file" ベースで考える方がわかりやすいです。
参考：
MDN｜Window.showOpenFilePicker()
Claude Codeにいきなり実装させないのが大事
Claude Code の公式ベストプラクティスでは、いきなりコードを書かせるのではなく、 まず探索し、次に計画し、その後に実装する流れが勧められています。
つまり、最初から 「ファイル選択機能を作って」 とだけ投げるより、
- 今のコード構成を確認してもらう
- どのファイルを触るか整理してもらう
- 実装方針を出してもらう
- その後に実装してもらう
という順番の方が、ズレが起きにくくなります。
参考：
Claude Code公式｜Best Practices
非エンジニア向け｜最初にClaude Codeへ出す依頼文の例
実際には、最初の依頼文でかなり結果が変わります。 ポイントは、やりたいこと・制約・今回やらないことをセットで書くことです。
たとえば、今回なら次のような依頼文がわかりやすいです。
この Next.js アプリに、ファイルダイアログからローカルファイルを選択できる機能を追加したいです。
非エンジニア向けにわかりやすい実装にしてください。
要件:
- 画面に「ファイルを選択」ボタンを表示する
- ボタンを押したらファイルダイアログを開く
- 選択後、ファイル名を画面に表示する
- まずは単一ファイルでよい
- 将来的に画像やCSVにも対応しやすい構成にしたい
- 既存のレイアウトはなるべく崩さない
まずはコードを変更せず、実装方針を調査して計画を出してください。
どのファイルを触る想定かも教えてください。この依頼文では、単に「作って」と言うのではなく、 先に計画だけほしいことを明確にしています。 これにより、Claude Codeがいきなり大きく変更しすぎるのを防ぎやすくなります。
Claude Codeの返答で確認したいポイント
Claude Code が計画を返してきたら、次の点を見ておくと安心です。
- どのファイルを編集するつもりか
input type="file"ベースで考えているか- 既存のページに直接追加するのか、コンポーネントを分けるのか
- 今の段階では「選択と表示」だけに絞れているか
この時点で、 「アップロード処理まで入れようとしている」 「不要に複雑な状態管理を入れようとしている」 など、やりすぎが見えたら、その場で止めて修正した方がいいです。
計画がよさそうなら、次に実装を依頼する
計画に問題がなければ、次のように実装へ進めます。
ではその方針で実装してください。
変更後に、どのファイルを編集したか、何を追加したかを簡潔にまとめてください。
最後に動作確認の手順も教えてください。このように、実装後の説明も一緒に依頼しておくと、 非エンジニアでも変更内容を追いやすくなります。
1回で理想形にならないときの追加指示の出し方
実際には、1回で思った通りにならないことも多いです。 ただし、それは失敗ではなく、追加で具体化すればよい段階です。
たとえば、以下のような追加指示が使えます。
見た目をシンプルにしたい場合
ありがとう。
次は input をそのまま見せるのではなく、ボタンを押したらファイルダイアログが開くUIにしてください。
見た目はシンプルで、記事用のサンプルとしてわかりやすいデザインにしてください。CSVだけ選べるようにしたい場合
CSVだけ選べるようにしてください。
accept 属性も設定してください。ファイル名を画面に表示したい場合
選択後に、画面上へファイル名を表示してください。
まだアップロード処理は不要です。複数ファイル選択に広げたい場合
次に、複数ファイル選択にも対応してください。
選択されたファイル名を一覧表示してください。こうした指示は、HTML標準の accept や multiple を使って対応できる範囲です。
Claude Codeがずれたときに戻すコツ
AIに依頼すると、便利な反面、こちらが言っていないことまで先回りして実装しようとすることがあります。 そんなときは、やさしく具体的に範囲を絞り直すのがコツです。
- 今はアップロード処理は不要です
showOpenFilePicker()は使わず、input type="file"ベースで実装してください- まずは1ファイル選択だけにしてください
- コード全体を書き換えず、必要最小限の変更にしてください
- 既存のレイアウトを大きく変えないでください
Claude Code 公式のベストプラクティスでも、作業の途中で方向修正することや、こまめに軌道修正することが推奨されています。
参考：
Claude Code公式｜Best Practices
非エンジニアがAIに実装依頼するときに大切な考え方
今回のファイル選択機能の実装で伝えたいのは、 最初から完璧なプロンプトを書く必要はないということです。
大事なのは、
- まず小さく要件を切る
- 先に調査と計画を出してもらう
- その後に実装してもらう
- ずれたら追加指示で整える
という流れを意識することです。
ファイル選択機能のような小さめのUI実装は、Claude Codeに依頼する題材としてちょうどよく、 AIとのやり取りに慣れる練習にも向いています。
まとめ｜Claude Codeでファイル選択機能を実装するときの進め方
今回は、非エンジニア向けに Claude Codeへ依頼しながらファイル選択機能を実装するプロセスを整理しました。
- まずは
input type="file"を使う方針で考える - いきなり実装ではなく、先に調査と計画を依頼する
- 実装後は見た目や対象ファイルを追加指示で整える
- ずれたら範囲を明確にして戻す
非エンジニアでも、実装そのものを全部理解してから始める必要はありません。 まずは 「何を作りたいかを小さく言語化して、AIに順番に依頼する」 ことが大切です。
この流れに慣れてくると、ファイル選択だけでなく、 画像アップロード、CSV読み込み、結果表示など、次の機能追加にもつなげやすくなります。
コメント