ホーム

Claude CodeとDockerでRのVibe Coding

Vibe Codingは、コンピュータとの対話によってプログラミングを行う新しい手法です。あなたが実現したい結果を説明すれば、Claude Codeがコードを構築し、テストし、改良します。これは魔法ではなく、あなたがビジョンを示し、AIが実装を担う新しい作業方法です。このチュートリアルでは、自然言語による指示だけで実際のNBA統計ダッシュボードを構築する方法を紹介します。

主要な概念

必要なもの

ステップ1：新しいGitHubリポジトリを作成

ローカルGitリポジトリとGitHub上のバックアップができました。

ステップ2：Docker設定をコピー

nba-dashboardフォルダには以下が含まれるはずです：

ステップ3：コンテナでプロジェクトを開く

ステップ4：Claude Codeを起動

claude

Claude Codeが実行中で、リクエストの準備ができました。

ステップ5：最初のVibe - NBAデータを取得

ここからが本番です。ドキュメントを調べる代わりに、実現したいことを説明するだけです。

Claude Codeで以下のように入力します：

hoopRパッケージをインストールして、現在のNBAプレイヤー統計を読み込んで。今シーズンの総得点でトップ10のプレイヤーを表示して。きれいなテーブルで表示して。

Enterを押すと、Claudeが以下の作業を自動で行います：

プレイヤー名、チーム、得点を表示する出力を確認してください。

これがVibe Codingです。ドキュメント検索も試行錯誤も不要で、説明してテストするだけです。

進捗を保存： Claudeに以下のように依頼するか、GitHub Desktopから手動でコミットします：

これらの変更をコミットして。

ステップ6：2番目のVibe - データを探索

ダッシュボードを構築する前に、データの内容を把握しましょう。

Claude Codeで以下のように入力します：

このNBAデータで利用可能な列を見せて。それから要約を作成して：プレイヤー数、チーム数、プレイヤーあたりの平均得点、最多アシストとリバウンドは誰か。

Enterを押すと、Claudeがデータセットを探索して興味深い統計を表示します。 利用可能な列を確認してください：player_name、team、points、assists、rebounds、field_goal_percentageなど。

この探索により、ダッシュボードに何を含めるかを決めることができます。

進捗を保存： Claudeに依頼してコミットするか、GitHub Desktopから手動で行います。

ステップ7：3番目のVibe - 基本的なShinyアプリを作成

対話型ダッシュボードを構築しましょう。

Claude Codeで以下のように入力します：

NBAプレイヤー統計の対話型テーブルを表示するShinyアプリをapp.Rというファイルで作成して。プレイヤー名、チーム、得点、アシスト、リバウンドの列を含めて。最小得点（0から1000）でプレイヤーをフィルタリングするスライダーを追加して。クリーンでプロフェッショナルに見えるようにして。

Enterを押すと、Claudeが完全なShinyアプリケーションを含むapp.Rを作成します。 ファイルの作成が完了するまで待ちます。

ステップ8：Shinyアプリを実行

ダッシュボードが動作するか確認しましょう。

VS Codeエディターの右上（app.Rが開いている場所）を見てください。 ドロップダウン矢印付きの▶ボタンを見つけ、ドロップダウンからRun Shiny Appを選択します。

アプリが起動すると、Open in Browserという通知が表示されます。 Open in Browserをクリックすると、NBAダッシュボードがWebブラウザで開きます。

得点スライダーを動かしてみてください。テーブルがリアルタイムでフィルタリングされます。 プレイヤーデータをスクロールして確認します。 アプリが正常に動作したら、変更をコミットします。

何か問題が発生した場合は、エラーメッセージをコピーしてClaudeに貼り付け、修正を依頼してください。

ステップ9：4番目のVibe - 可視化を追加

テーブルは便利ですが、グラフはより効果的にストーリーを伝えます。

Claude Codeで以下のように入力します：

テーブルの下に得点でトップ15のプレイヤーを表示する棒グラフを追加して。各プレイヤーに異なる色を使用して。また、フィルタリングされたすべてのプレイヤーの得点とアシストの関係を示す散布図も追加して。

Enterを押すと、Claudeがapp.Rを可視化コードで更新します。 Run Shiny Appを再度クリックしてアプリをリロードし、ブラウザを更新してください。

カラフルな棒グラフと散布図が表示されます。 スライダーを動かすと、すべての可視化が連動して更新されます。

これがVibe Codingの実践です。機能を説明し、テストし、改良を重ねます。

ステップ10：5番目のVibe - チームフィルターを追加

チーム選択機能でダッシュボードをより対話的にしましょう。

Claude Codeで以下のように入力します：

チームでプレイヤーをフィルタリングするドロップダウンメニューを追加して。上部に配置して。チームを選択すると、そのチームのプレイヤーだけを表示して。全員を表示する「All Teams」オプションも含めて。

Enterを押すと、Claudeがチームフィルターを追加します。 ブラウザを更新して、ドロップダウンをテストしてください。 Lakers、Warriors、Celticsなど異なるチームを選択すると、テーブルとグラフが各チームに応じて更新されます。

対話しながらプロフェッショナルなダッシュボードを構築しています。

ステップ11：確認してコミット

コミットする前に、Claudeが構築したものを確認しましょう。

チームフィルターと可視化付きのNBAダッシュボードを作成

最初の動作バージョンを保存しました！

ステップ12：反復して改善

Vibe Codingは反復によって真価を発揮します。説明するだけで機能を追加してみましょう。

Claudeへのリクエスト例：

各機能を追加した後の流れ：

重要な原則：

毎回、説明 → テスト → 改良 → コミットのパターンに従いましょう。

次のステップ

トラブルシューティング

ワークフロー概要

このチュートリアルでは、複数の技術を統合したワークフローを構築しました：

魔法は単一のツールにあるのではなく、Vibe Codingによって実現したいことを説明し、素早く反復できる点にあります。空のプロジェクトから動作するスポーツダッシュボードまで、手動で1行もコードを書かずに30分で完成させました。

日常のワークフロー

初期セットアップ後の日々のVibe Codingの流れは以下の通りです：

  1. Docker Desktopを起動する - アプリを起動し、緑色のステータス表示を待つ
  2. VS Codeを開く - プロジェクトを開き、必要に応じてコンテナで再度開く
  3. Claude Codeを起動する - ターミナルでclaudeと入力
  4. 目標を説明する - 「…する機能を追加して」または「…のバグを修正して」
  5. 変更をテストする - アプリを実行し、正常に動作するか確認
  6. 改良またはコミットする - エラーが出たら修正を説明。動作したらGitHub Desktopでコミット
  7. 定期的にプッシュする - Push originをクリックしてGitHubにバックアップ

練習を重ねるほど、実現したいことを効果的に説明できるようになります。Vibe Codingはスキルです。どのような説明が最も効果的か、大きなアイデアをテスト可能な単位に分割する方法を学んでいきます。

Steven Geが2025年12月7日に作成。