このレシピを使って、CSVファイルをインタラクティブなデータエクスプローラーに変換するFabricアプリを作成します。 Claude Codeはファイルを検査し、プロジェクトをスキャフォールドし、利用可能な列に合うフィルターや可視化を実装し、端末からアプリの検証を行います。
完成したアプリは静的コンテンツにCSVファイルを含み、ブラウザでデータを読み込みます。 この方法は、ライブ接続を必要としないサンプル、公開、または非機密データにうまく機能します。
このチュートリアルでは、次の操作を行います。
- Claude Codeをインストールして起動します。
- Claude CodeにFabricアプリの足場を作って検査してもらいましょう。
- CSVファイルの周りにインタラクティブなエクスプローラーを作ってみてください。
- 生成された変更を確認し、検証してください。
- アプリをFabricにデプロイしてください。
- デプロイメントを確認してアプリを開きます。
前提条件
- Node.js 20 以降。
- Claude Codeでサポートされた端末です。
- Claude CodeにアクセスできるClaude Pro、Max、Team、Enterprise、またはConsoleアカウント。
- Fabric にアクセスできる Microsoft アカウント。
- 共同作成者、メンバー、または管理者のアクセス許可を持つFabric ワークスペース。
- テナント向けにFabricアプリのワークロードを有効にしました。
- ヘッダー行付きのUTF-8 CSVファイルです。 Claude Codeを始める前にファイルの全パスを知っておきましょう。
Important
静的なアプリコンテンツとしてデプロイされたCSVファイルは、アプリにアクセスできる人に提供されています。 この方法は秘密や個人情報、その他の機密情報には使わないでください。
Claude Codeのシステム要件やアカウントオプションについては、 Claude Codeの設定ドキュメントをご覧ください。
Claude Codeをインストールする
オペレーティングシステムのメソッドを使ってClaude Codeをインストールしてください。
ウィンドウズ
WinGetでClaudeコードをインストールする方法:
winget install Anthropic.ClaudeCode
macOS、Linux、またはLinux 用 Windows サブシステム
ネイティブのインストーラーを使いましょう:
curl -fsSL https://claude.ai/install.sh | bash
インストールを確認します。
claude --version
claude doctor
その他のインストール方法については 、「Install Claude Code」をご覧ください。
Claude Code を起動
プロジェクトを作成したい親フォルダのターミナルを開いてください。
Claude Code を始める:
claude求められたらブラウザ認証フローを完了してください。
Claude Codeが要求するフォルダのアクセス権限とコマンド権限を確認してください。
Claude Codeは、検査や変更を望まないファイルが入っているフォルダから起動しないでください。
足場を作ってアプリを起動します
次のプロンプトをClaude Codeに貼り付けてください:
Set up a new Rayfin app for me, end to end.
Create the project in a folder named csv-data-explorer. Before changing code, read any
CLAUDE.md, copilot-instructions.md, and agent guidance included in the scaffolded project.
Do the work yourself instead of only printing instructions:
1. Run `npm create @microsoft/rayfin@latest csv-data-explorer`.
2. Inspect the scaffolded project. Explain the purpose of rayfin/rayfin.yml,
rayfin/data/, and src/.
3. Install dependencies if the scaffold command didn't install them.
4. Run `npx rayfin login` and pause while I complete sign-in.
5. Deploy the backend with `npx rayfin up`.
6. Confirm the deployment with `npx rayfin up status`.
7. Start the frontend with `npm run dev`.
8. Tell me the local URL to open and summarize what you created.
Ask before making a destructive change or using a force option.
コマンドは確認後に承認してください。 Rayfinブラウザのサインインを促されたら、サインインを完成させてください。 フロントエンドが始まったら、Claude Codeが報告するローカルURLを開きます。
Claude Codeにデータエクスプローラーの構築を依頼してください
CSVファイルへの完全なパスをClaude Codeに与え、ユーザーがどのようにデータを探索すべきかを説明してください。 エージェントはヘッダーやサンプル値を検査し、データセットに合わせてコントロールや可視化を調整できます。
次のプロンプトをスタートレシピとして使ってください。
<full-path-to-csv-file>をファイルへのパスに置き換えてください。
Turn this Fabric app into a data explorer for the CSV file at
<full-path-to-csv-file>.
Requirements:
- Inspect the headers and a representative sample of rows first. Summarize the
inferred date, numeric, Boolean, and categorical columns before editing.
- Don't modify the source file. Copy it into an appropriate static asset folder with
a clear name so the deployed app can load it.
- Parse quoted fields, escaped commas, missing values, and line breaks correctly.
Use an existing CSV dependency if the project includes one. Otherwise, add a
well-maintained parser and explain why it's needed.
- Build KPI callouts and two useful charts based on the columns actually present.
Don't invent fields or values.
- Add a global search, column filters appropriate to each inferred data type, sortable
columns, pagination, and a control to clear all filters.
- Show the filtered row count, and calculate KPIs and charts from the filtered rows.
- Add a detailed data grid and preserve the original column names.
- Include loading, empty, and error states.
- Report malformed rows without crashing the app.
- Make the layout usable with a keyboard and responsive at desktop and mobile sizes.
- Follow the scaffolded project's existing component and styling patterns.
- Don't add dependencies unless they're necessary.
Before editing, inspect the relevant files and give me a short implementation plan.
Then make the changes, run the existing build, start the app, and validate the main
flows in a browser at desktop and mobile sizes. Explain any errors you fix.
Claude Codeがプロジェクトを編集する前に計画を確認しましょう。 もし計画があなたの要件に合わない場合は、実施を承認する前に修正してください。
生成された変更を確認する
Claude Codeが終わったら、作業のレビューを依頼してください:
Review the changes you made against every requirement in my previous prompt.
Check for:
- Incorrect parsing of quoted fields, escaped commas, missing values, or line breaks.
- Type inference that changes valid identifiers or loses numeric precision.
- KPIs or charts that don't update from the filtered rows.
- Search, filtering, sorting, pagination, or clear-filter controls that don't work.
- Invented fields, values, or fallback data that aren't in the CSV file.
- The original CSV file being modified.
- Missing loading, empty, or error states.
- TypeScript, build, browser console, or responsive layout errors.
Fix confirmed issues, rerun the existing build and browser checks, and summarize the
final behavior.
ソースコントロールの違いはご自身で確認してください。 次のことに特に注意してください。
- コピーしたCSVアセットと、それが公開に適切かどうかについて。
- CSVの解析と型推論。
-
rayfin/rayfin.yml内のサービス構成。 -
package.jsonの新たな依存関係。 - 絶対にコミットしてはいけない秘密や資格。
アプリを検証する
Claude Codeにプロジェクトの既存の検証を実行するよう依頼してください:
Validate the app without adding new tools.
1. Run the existing build and type-check commands from package.json.
2. Start the frontend if it isn't already running and report the local URL.
3. In a browser, verify the initial row count against the CSV file.
4. Test search, each filter type, sorting, pagination, clear filters, and malformed-row
handling. Confirm that KPIs and charts update with the filtered rows.
5. Check desktop and mobile layouts and report browser console errors.
6. Fix confirmed issues and rerun the failed check.
ブラウザで、数行、合計、フィルター済みの結果を元のCSVファイルと比較してください。 空の結果、歪んだデータ、キーボード操作、狭い画面をテストしてください。
完成したアプリをデプロイしてください
変更を確認してアプリをテストした後、Claude Codeにデプロイを依頼してください:
Deploy the reviewed app to Fabric.
1. Show me the current git diff and summarize what will be deployed.
2. Run `npx rayfin up`.
3. Run `npx rayfin up status`.
4. Confirm that the deployment is healthy.
5. Give me the hosted app URL and Fabric portal link from the command output.
Stop and explain the issue if deployment or verification fails.
同じ npx rayfin up コマンドは、アプリ開発を続ける際に既存のデプロイメントを更新します。
Claudeコードで反復を続けてください
後の変更には焦点を絞ったプロンプトを使いましょう。 望ましい動作、影響を受けるユーザー、制約、検証ステップを含めてください。
Add saved views to the CSV data explorer.
Let users name and save the current search, filters, sort order, and visible columns
in browser storage. Don't store or duplicate CSV rows in browser storage. Add controls
to apply, rename, and delete a saved view. Run the existing build and browser checks,
then list the user flows I should retest.
各リクエストは確認できるほど小さく管理してください。 Claude Codeに大きな変更や破壊的な変更を求める前に、動作状態をコミットしてください。
Claude Codeのワークフローのトラブルシューティング
Claude Codeはコマンドのみを印刷します
Claude Codeにコマンドを実行し、結果を報告するよう伝えてください。 要求されたコマンド権限を確認し承認してください。
コマンドはサインインを待機しています
ブラウザのサインインフローを完成させます。 そしてクロード・コードにサインイン完了を伝え、続行できるようにします。
Claude Codeが間違ったフォルダで動作します
セッションを終了し、足場状のプロジェクトフォルダでターミナルを開き、再度 claude を実行します。
Claude Codeがコマンドを見つけられません
Claude Code のインストールを確認するには、claude doctor を実行してください。 Rayfin コマンドでは、Node.js 20 以降とプロジェクトの依存関係がインストールされていることを確認してください。
アプリは開きますが、CSVデータが読み込まれません
Claude Codeにブラウザネットワークとコンソールのエラーを検査させ、デプロイされたアセットパスを確認し、CSVファイルが静的ビルド出力に含まれているか確認してください。
クロード・コードは次のように提案します。 --force
まずClaude Codeで破壊的なスキーマ操作を表示するよう要求してください。 データ損失の可能性を理解し承認した場合にのみ --force を受け入れてください。
その他のアプリの問題については、「Fabricアプリのトラブルシューティング」をご覧ください。