Claude Codeでダッシュボードアプリを開発する前に
本記事の内容は、Claude Code Proプランへの加入と環境構築が完了していることが前提となっています。
なお、作業がスムーズに進まない場合に備え、スクリーンショットを使ったAIへの質問方法を覚えておきましょう。
開発前の前提条件
ダッシュボードの開発に必要な環境構築（Claude Codeのインストール・ログイン・VS Codeへの導入）は、完了している前提でスタートします。
まだ環境構築（VS CodeやClaude Codeのインストール・ログイン）が済んでいない方は、まずバイブコーディング入門を見て、環境構築をしておきましょう。
また、この記事での開発手順はClaude Code Proプランへの加入が前提となっています。無料プランでは、利用できる機能や上限が異なるため、同じ手順通りに進められないことがあります。
なお、AIは同じプロンプトに対して、常に同じ出力をするわけではありません。この記事と同じ結果にならないこともありますが、その場合の対処法を次に紹介します。
【paizaラーニングの関連講座】
バイブコーディング入門 Claude Code編1: ダッシュボードアプリを作成しよう
【関連】Claude Codeとは？できること・使い方・料金まで初心者向けにやさしく解説
困ったときはスクリーンショットでAIに聞く
Claude Codeに指示を出しても、思った通りの結果にならないことがあります。そんなときは、画面のスクリーンショットを撮って、AIに直接見せながら質問するのがおすすめです。
- Windowsの場合：Win + Shift + S を押すと、画面の好きな範囲を選択してスクリーンショットが撮れます
- Macの場合：Cmd + Shift + 4 を押すと、同様に範囲を選択してスクリーンショットが撮れます
撮ったスクリーンショットは、Claude Codeの入力欄にドラッグ＆ドロップ（または貼り付け）すれば、画像を見せながら質問できます。Claude Codeに限らず、ブラウザ版のClaude、ChatGPTなど、ほかのAIチャットでも同様の方法で貼り付け可能です。
また、エラーメッセージが文字で表示されている場合は、そのテキストをコピーしてAIに貼り付けるだけでも解決の手がかりになります。
Streamlitでダッシュボードの土台を作る
ダッシュボードの土台作りは、プロジェクトフォルダを作成して、VS Codeで開くところからスタートします。その後、Streamlitというライブラリを使うことで、初心者でも簡単にダッシュボードを組み立てられます。ここでは、フォルダ作成からライブラリの選定、起動までの手順を紹介します。
プロジェクトフォルダを作成してVS Codeで開く
まず、コードを入れるためのフォルダ（プロジェクトフォルダ）を作成します。
Windowsの場合
- エクスプローラーを開き、任意の場所（ドキュメントなど）で右クリックする
- 「新規作成」→「フォルダ」をクリックし、名前を付ける
Macの場合
- Finderを開き、任意の場所（書類など）で右クリックする
- 「新規フォルダ」をクリックし、名前を付ける
フォルダができたら、VS Codeで開きます。
- VS Codeの左メニューの一番上のアイコン（エクスプローラー）をクリックする
- 「フォルダを開く」ボタンをクリックし、先ほど作成したプロジェクトフォルダを選択する
- 「フォルダの選択」をクリックする
これで、VS Code上で作成したプロジェクトフォルダの中身が確認できるようになります。作成したばかりのフォルダは、空の状態で表示されます。
続いて、Claude Codeを起動します。VS Code画面の右上にある、オレンジ色のClaude Codeアイコンをクリックしてください。（このアイコンは、VS Codeで何らかのファイルやページを開いていないと表示されないことがあります。表示されていない場合は、拡張機能の設定ページなどを開いてから確認してみましょう。）
初めてこのプロジェクトフォルダでClaude Codeを起動した場合、フォルダの中身を信頼するかどうかの確認が表示されます。Claude Codeは、このフォルダ内のファイルを読み書きするため、内容を確認したうえで、提示された選択肢（通常は「1」）を選んでエンターキーを押してください。
これで、Claude Codeにプロンプトを送る準備が整いました。
使用するライブラリをAIに相談する
Claude Codeを起動したら、以下のプロンプトを入力してください。
Webブラウザで見れるダッシュボードをPythonで作りたいです。おすすめのライブラリを教えてください。Streamlit、Dash、Flask、Djangoなど複数の候補が提案されます。今回は、初心者でも扱いやすいStreamlitを使用します。（提案される候補は毎回変わることがありますが、その場合も「初心者向け」「シンプル」と説明されているものを選べば問題ありません。）
タイトルだけのダッシュボードを作成・起動する
以下のプロンプトでダッシュボードの土台を作ってもらいます。
Streamlitを使いダッシュボードを作ってください。内容はタイトルだけで「国内の経済指標」というタイトルにしてください。Claude Codeが、dashboard.pyなどというファイルを作成しようとします。内容を確認し、問題がなければ提示された選択肢（多くの場合「1」）を選んでエンターを押し、編集を許可してください。画像では、app.pyというファイルを作成しています。
ファイルができたら、次のプロンプトで起動します。
ダッシュボードを起動させてください。streamlit run dashboard.pyというコマンドの実行を許可するか聞かれるので、実行を許可します。Streamlitが未インストールの場合は、インストールの許可も求められるので、あわせて許可してください。
起動が完了すると、ブラウザでアクセスできるURLが表示されます。そのURLをブラウザに貼り付けると、「国内の経済指標」というタイトルだけが表示されたダッシュボードを確認できます。
【関連】Claude CodeをVSCodeで使うには？導入から設定・連携まで初心者向けに丁寧に解説
e-Stat APIで経済指標データを取得する
経済指標データは、e-Stat APIという政府統計の公式APIを使って取得します。
ここからは、APIキーの取得、環境変数での安全な管理、実際のデータ取得までの手順をひとつずつ確認していきましょう。
データ取得方法をAIに相談する
データは、外部から取得する必要があります。取得方法は、AIに相談してみましょう。
Pythonを使い、日本の消費者物価指数や景気動向指数など経済指標を取得したいです。どのような方法がありますか？いくつかの方法が提案される中に、e-Stat API（政府統計の総合窓口が提供するAPI）が含まれています。
APIとは、外部のサービスとデータをやり取りするための仕組みのことです。公式で信頼性が高いデータ取得方法なので、今回はこちらを採用しましょう。
e-Stat APIを使うには、APIキー（利用者を識別するための鍵となる文字列）が必要です。APIキーの取得方法も、AIに聞いてみましょう。
e-StatのAPIキーの取得方法を教えてください。e-Stat APIキーを取得する
案内された手順に沿って、e-Stat APIの公式サイトにアクセスし、ユーザー登録を行います。
- e-Stat APIサイトにアクセスし、ユーザー登録画面からメールアドレスを入力して仮登録する
- 登録したメールアドレスに届いたメールから、本登録用のURLにアクセスする
- 利用する機能で、「API機能」にチェックが入っていることを確認し、パスワードを設定して登録を完了する
- ログイン後、マイページから「API機能アプリケーションIDの発行」を選択する
- 名称（例：勉強用のダッシュボードアプリ）を入力する
- URL欄には、公式サイトで利用しない場合の入力例として案内されている http://test.localhost/ などを入力する
- 「発行」を押すと、appIDとしてAPIキーが表示されるので、コピーして控えておく
ここで取得したAPIキー（App ID）は、次の手順で使います。
APIキーを環境変数で安全に管理する
取得したAPIキーは、アカウントにひもづいた重要な情報です。コード内に直接書き込んでしまうと、第三者に見られたり、誤ってGitHubなどで公開してしまったりするリスクがあります。APIキーの安全な管理方法についても、AIに相談してみましょう。
e-StatのApp IDを取得しました。しかし、このApp IDを直接コードに記載したくありません。どうしたら良いですか？環境変数を使う方法（コードの外にある設定ファイルに秘密値を保存し、コードからはその値を読み込むだけにする方法）が推奨されるので、この方法を採用します。
.envファイルを作ってください。.envファイルが作成されたら、ファイル内の your_actual_api_key_here という記述を、実際に取得したApp IDに置き換えてください。.envファイルはダブルクリックで開いて編集できます。AIは毎回指示内容が異なるので、画像ではESTAT_APP_ID=のあとに、your_app_id_hereを消して貼り付けるようになっています。
続けて、.envファイルの中身を読み込むために必要なライブラリをインストールしてもらいます。
python-dotenvライブラリをインストールしてください。このままでは .env ファイルがGit（変更履歴を管理する仕組み）の管理対象に含まれ、外部に公開されてしまう可能性があるため、除外設定も依頼しておきましょう。
Claude Codeが.envを読み込まないように設定したいです。.gitignoreファイル（Gitの管理対象から除外するファイルを指定する設定ファイル）が作成され、.envがGitの管理対象から除外されます。
さらに、Claude Code自体にも.envの中身を見せたくない場合は、以下のように聞いてみましょう。
Claude Code自体が.envファイルの中身を読み込まないように設定したいです。どのように設定したら良いですか？.claude/settings.json という設定ファイルが作成され、.env 関連のファイルがClaude Codeのコンテキストからも除外されます。これで、APIキーを安全に管理する準備が整いました。
消費者物価指数・景気動向指数を取得する
準備ができたので、ここからは実際にe-Stat APIを使ってデータを取得します。消費者物価指数の、直近12ヶ月分の月次データを取得してみましょう。
e-Statを使って消費者物価指数の直近12ヶ月の月次データを取得してください。エラーがある場合は、詳細なエラーメッセージをコンソールに出力して解決してください。取得結果をこのコンソールに表示させてください。APIでデータを取得する処理は、うまくいかないこともあります。あらかじめ「エラーが出たら詳細を教えてほしい」と伝えておくことで、Claude Codeがエラー内容を確認しながら解決してくれます。
ファイルの作成・実行の許可を求められた場合は、内容を確認して問題なければ許可してください。しばらくすると、取得した消費者物価指数の値がコンソールに表示されます。念のため、ネット上の公開情報と数値が一致しているかも確認しておくと安心です。
続けて、景気動向指数（長期系列）も同様に取得します。
同様に景気動向指数（長期系列）の直近12ヶ月の月次データを取得してください。エラーがある場合は、詳細なエラーメッセージをコンソールに出力して解決してください。取得した結果をこのコンソールに表示させてください。取得したデータが何年を基準にした値なのかわからない場合は、そのまま聞いてしまって構いません。
取得した景気動向指数は何年を基準としたデータですか？【関連】Claude CodeとGitHubの連携とは？手順・GitHub Actions・MCPまで解説
グラフ表示とAI分析機能を追加する
取得したデータは、折れ線グラフに変換することでダッシュボード上で見やすくなります。さらに、Claude Code APIを使えば、取得した数値をもとにAIが分析するボタンを追加することも可能です。ここでは、グラフ表示の方法と、追加課金が発生するAI分析機能の実装手順を紹介します。
折れ線グラフでダッシュボードに表示する
取得した消費者物価指数を折れ線グラフにしてダッシュボードに表示してください。ダッシュボードの起動を確認された場合は許可し、表示されたURLにアクセスすると、折れ線グラフとデータテーブルが確認できます。
同様に、景気動向指数もグラフ化します。
取得した景気動向指数を折れ線グラフにしてダッシュボードに表示してください。これで、消費者物価指数と景気動向指数、2つの指標がグラフとテーブルで並んだダッシュボードが完成します。
e-Statでは、この2つ以外にも産業や人口に関するものなど、さまざまな指標を取得できます。慣れてきたら、自分の興味がある指標を追加してみるのもおすすめです。
AI分析機能を追加する（要追加課金）
これから解説する機能を追加する場合は、Claude Code Proプランのサブスクとは別に、Claude Code APIのクレジット購入（従量課金）が必要です。
追加するのは、「分析」ボタンを押すと、取得済みの消費者物価指数・景気動向指数の値をもとに、AIがその内容を分析してくれる機能です。
アプリの中で動的にAIを呼び出すには、開発用のClaude Codeとは別に、Claude Code APIという仕組みを使います。
APIキーの取得手順
- AnthropicのAPIコンソールに直接アクセスし、アカウントの作成またはログインをする
- 画面左メニューの「Plans & Billing」を開き、クレジットを購入する（まずは$5〜10程度の少額で問題ありません）
- クレジットカード情報や請求先住所を入力し、購入手続きを完了させる
- 画面左メニューの「API Keys」を開き、「Create Key」をクリックして、新しいAPIキーを発行する
- 表示されたAPIキーをコピーして、安全な場所に控えておく（※APIキーは一度しか表示されないため注意してください）
取得したAPIキーは、e-Statのときと同様に.envファイルに追記します。CLAUDE_API_KEY=の後ろに、コピーしたキーを貼り付けてください。
準備ができたら、以下のプロンプトで分析機能を実装してもらいます。
ダッシュボード上に分析というボタンを追加してください。それが押されたタイミングで、取得した消費者物価指数の値と景気動向指数の値から、どのようなことが言えるのか分析する機能をつけてください。分析はClaude Code APIを使ってAIに分析させてください。Claude Code APIのAPIキーは取得してあり、.envファイルにCLAUDE_API_KEY=の後ろに記載してあります。エラーがある場合は、詳細なエラーメッセージをコンソールに出力して解決してください。実装が完了すると、ダッシュボード上に「AI経済分析」ボタンが追加されます。押してみると、これまで取得した2つの指標について、AIによる分析結果が表示されます。
覚えておきたいClaude Codeのスラッシュコマンド
Claude Codeには、開発効率を高めるスラッシュコマンドが用意されています。/から始まるコマンドを使うことで、モデルの切り替えやプロジェクト情報の生成などを素早く行えます。ここでは、覚えておくと便利な4つのコマンドを紹介します。
入力欄に/と打つと、使えるコマンドの一覧が表示されます。
- exit：Claude Codeを終了する
- claude --continue：前回のやり取りを引き継いだ状態で、Claude Codeを起動する
- /model：使用するAIモデルを切り替える（利用できるモデルは契約プランによって異なります）
- /init：プロジェクトの概要（実行方法や構成など）をまとめたCLAUDE.mdというファイルを自動生成する。次回以降、Claude Codeがこのプロジェクトを編集する際の参考情報になるため、作成しておくのがおすすめです
Claude Codeでのアプリ開発についてよくある質問
Q. Claude Code Proプランでなくても開発できますか？
A.この記事の手順は、Claude Code Proプランへの加入を前提としています。無料プランでは利用できる機能や上限が異なるため、同じ手順通りに進められない場合があります。
Q. プログラミング初心者でもClaude Codeを使ってアプリ開発できますか？
A.できます。Claude Codeに日本語で指示を出すだけでコードが生成されるため、プログラミングの知識がなくても手順通りに進められます。ただし、細かい修正を加えたい場合は、プログラミングの基礎知識があるとよりスムーズです。
Q. e-Stat APIの利用に料金はかかりますか？
A.e-Stat APIの利用自体は無料です。ユーザー登録とAPIキー（App ID）の発行だけで、利用を開始できます。
Q. AI分析機能は、必ず追加する必要がありますか？
A.必須ではありません。AI分析機能は、Claude Code APIのクレジット購入（追加課金）が必要な機能です。ダッシュボード自体は、この機能を追加しなくても完成します。
Q. 記事と同じ結果にならない場合は、どうすればいいですか？
A.AIは同じプロンプトに対して毎回同じ出力をするとは限りません。結果が異なる場合は、画面のスクリーンショットを撮ってAIに見せながら質問してみましょう。
Q. WindowsとMacのどちらでも同じ手順で進められますか？
A.進められます。スクリーンショットの撮り方のみ、WindowsはWin+Shift+S、MacはCmd+Shift+4と操作が異なるため、それぞれの方法を覚えておきましょう。
Q. 途中でエラーが出て進めなくなったら、どうすればいいですか？
A.エラーメッセージが表示された場合は、その内容をコピーしてAIに貼り付けるか、画面をスクリーンショットで撮ってAIに質問してみてください。原因と対処法を教えてもらえます。
まとめ
今回は、Claude Codeへの指示を出しながら、e-Stat APIと連携した経済指標ダッシュボードアプリを開発する手順を解説しました。
この記事のポイントをまとめます。
- ライブラリの選定、APIキーの取得と安全な管理について、AIに直接相談しながら進めることで、初心者でも一通り実践できる
- APIキーなどの秘密情報は環境変数で管理し、コードに直書きしない習慣をつけることで、安全にアプリ開発を進められる
- AI分析機能の追加には、Claude Code APIの追加課金が必要なため、必要に応じて実装するかを判断できる
- うまくいかないときは、スクリーンショットを撮ってAIに見せながら質問すると、文章だけで説明するよりも素早く解決できる
なおpaizaラーニングでは、Claude Codeの使い方やPythonなどのプログラミング言語が学べる動画講座を公開しています。ぜひご利用ください。
【paizaラーニングの関連講座】
バイブコーディング入門 Claude Code編
新・Python入門編
【プログラミング問題を解いて力試し】