Vibe Coding入門

AIと一緒に作る
超簡単ファイル整理アシスタント

プログラミング初心者でも心配なし！
AIにおしゃべりするように指示を出すだけで
素敵なWebアプリが作れちゃう✨

クリックすると全ての内容が一度に表示されます

📋 目次

🌟 Vibe Codingって何？

Vibe Coding（ヴァイブ・コーディング）とは、AIに自然言語で指示を出して プログラムを作っていく新しいコーディングスタイルです。2025年2月にAndrej Karpathy氏が提唱した概念で、 「コードの存在を忘れて、バイブス（ノリ）を重視しながら開発する」アプローチです。

❌ 従来のコーディング

  • 文法を完璧に覚える必要がある
  • セミコロンやインデントに神経を使う
  • エラーメッセージと格闘する日々
  • ライブラリやフレームワークの学習が大変
  • プログラミング言語ごとに学び直し

✅ Vibe Coding

  • 「こんなのが欲しい」を自然言語で伝えるだけ
  • 修正も「ここをこう変えて」と会話感覚
  • 文法を覚えなくてもコードが生成できる
  • 技術的な詳細をAIが処理してくれる
  • プログラマーはアイデアに集中できる
「ボタンを押すと色が変わるWebページを作って」

HTMLファイルとして保存して実行する方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. メモ帳などのテキストエディタを開き、コードを貼り付けます
  3. ファイルを「.html」拡張子で保存します（例：「color_change.html」）
  4. 保存したファイルをダブルクリックすると、ブラウザで開いて実行できます

これで生成AIが作成したコードをすぐに試すことができます！

💡 実際に試してみよう！

#color_change.htmlをブラウザで動かすと、以下のようなボタンを押すと背景色が変わるアプリが出来上がります。下のデモで実際に試してみましょう！

ボタンを押して色を変えよう！

「ボタンをもっとオシャレにして、色が変わるときにフェードインするようにして」

HTMLファイルとして保存して実行する方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. メモ帳などのテキストエディタを開き、コードを貼り付けます
  3. ファイルを「.html」拡張子で保存します（例：「fancy_color_change.html」）
  4. 保存したファイルをダブルクリックすると、ブラウザで開いて実行できます

これで生成AIが作成したコードをすぐに試すことができます！

✨ 改良版を試してみよう！

フェードイン効果とオシャレなグラデーションボタンを追加したバージョンです。下のデモで実際に動作を確認できます。

ボタンを押して色を変えよう！

こんな感じで、会話するようにコードを生成・改良できるのがVibe Codingの魅力です。 プログラミングの経験がなくても、「こんなことができたらいいな」という思いをAIに伝えるだけで、 実際に動くWebアプリを作ることができます。

✅ Vibe Codingのコツ

  • 具体的にイメージを伝える（「カラフルな」「モダンな」など）
  • 段階的に機能を追加していく（一度にすべてを求めない）
  • わからないところは質問する（「この部分はどういう意味？」）
  • 修正点を明確に伝える（「このボタンの色を青に変えて」）

🔍 今回作るもの：ファイル整理アシスタント

このチュートリアルでは、ブラウザだけで動く便利なファイル整理アシスタントを作ります。 散らかったファイルをドラッグ＆ドロップするだけで、自動的に種類別に分類してくれる便利ツールです。

🌟 主な機能

ファイルタイプ別整理機能

  • ドラッグ＆ドロップでファイル追加
  • 画像・文書・音楽・動画・その他に自動分類
  • タイプ別に色分けされた一覧表示
  • 分類結果の整理機能

おしゃれなダッシュボード表示

  • ファイル種類別の円グラフ表示
  • ファイル数・合計サイズの表示
  • アニメーションつきのデザイン
  • スクリーンショットボタンで結果を保存
ファイル整理アシスタントのデモ

↑ ファイル整理アシスタントの動作イメージ

🎮 実際に使ってみよう！

以下のファイル整理アシスタントは、実際に機能します。
ファイルをドラッグ＆ドロップして試してみましょう！

File Organizer

ファイル整理アシスタント

ファイルをアップロード

ファイルをドラッグ＆ドロップするか、クリックして選択

どんなファイルでもOK

ブラウザだけで動くファイル整理アプリを作りたい。
ユーザーがファイルをドラッグ＆ドロップすると、種類（画像、文書など）ごとに分類されて表示されるようにして。
素晴らしいアイデアですね！
ブラウザで動作するファイル整理アプリを作りましょう。以下のような機能を実装できます：

1. ドラッグ＆ドロップエリア
2. ファイルをタイプ別に分類（画像、文書、音楽、動画、その他）
3. 分類結果をカラフルに表示
4. ファイル数や合計サイズなどの分析結果を表示

段階的に実装していきましょうか？

では早速、AIとの会話を通じて実際にアプリを作っていきましょう！
ステップバイステップで、初心者でも理解しやすいように進めていきます。

📱 Step 1: 基本的なHTML構造を作る

まずは、アプリケーションの基本構造となるHTMLを作成しましょう。AIに基本的な構造を作ってもらいます。

ファイル整理アプリの基本的なHTML構造を作ってください。
モダンでおしゃれなデザインで、ドラッグ&ドロップエリアと結果表示エリア
を含むようにしてください。
もちろんです！モダンでおしゃれなデザインのファイル整理アプリの基本的なHTML構造を作成します。TailwindCSSを使ってスタイリングしますね。

HTMLファイルとして保存して実行する方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. メモ帳などのテキストエディタを開き、コードを貼り付けます
  3. ファイルを「.html」拡張子で保存します（例：「file_organizer.html」）
  4. 保存したファイルをダブルクリックすると、ブラウザで開いて実行できます

これで生成AIが作成した基本構造を確認できます！

⚠️ インターネット接続が必要です

このコードはTailwind CSSやFontAwesomeなどのライブラリをCDNから読み込んでいます。実行するにはインターネット接続が必要です。

AIが生成したコードを見てみましょう。
ここでは、ファイル整理アプリの基本的なHTML構造が作られました。
ドラッグ＆ドロップエリア、結果表示エリア、ダッシュボードエリアの3つの主要なセクションがあります。
デザインはTailwind CSSを使用して、モダンでおしゃれな見た目になっています。

次のステップでは、このHTMLにJavaScriptを追加して、実際にファイルがドラッグ＆ドロップできるようにしていきます。

🎨 Step 2: ドラッグ＆ドロップエリアを実装する

次に、ドラッグ＆ドロップエリアを実装して、ファイルを追加できるようにします。AIに機能を追加してもらいましょう。

ドラッグ＆ドロップ機能を追加してください。
ユーザーがファイルをドロップしたら、そのファイルをタイプ
（画像、文書、音楽、動画、その他）ごとに分類して、リストに表示するようにしてください。
それぞれのファイルタイプによって背景色を変えると見やすいと思います。

JavaScriptコードの追加方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. HTMLファイルの`<script></script>`タグ内に貼り付けます
  3. ファイルを保存して再読み込みすると機能が追加されます

これで生成AIが作成したドラッグ＆ドロップ機能が実装されました！

AIが提供したコードを追加することで、ドラッグ＆ドロップ機能が実装されました。 このコードがやっていることは：

🔍 コードの解説

  1. ドラッグ＆ドロップエリアのイベントリスナーを設定
  2. ファイルを種類別（画像、文書、音楽、動画、その他）に判別する関数を実装
  3. ファイルサイズを読みやすい形式（KB、MB、GB）に変換
  4. 分類されたファイルをタイプごとにグループ化して表示
  5. 各ファイルタイプに合わせたアイコンと色を付けて視覚的にわかりやすく表示

✅ Vibe Codingのポイント

「背景色を変えると見やすい」というシンプルな要望だけで、AIは各ファイルタイプに適した色とアイコンを選び、見やすいUIを実装してくれました。専門的な知識がなくても、「こうしたい」という意図を伝えるだけでコードが生成されます。

次のステップでは、ダッシュボード機能を実装して、ファイルの分析結果をグラフで表示できるようにしましょう。

📊 Step 3: ダッシュボード機能を追加する

次に、分析ボタンをクリックしたときにファイルの種類別統計をグラフで表示するダッシュボード機能を追加します。

分析ボタンを押したときに、ダッシュボードを表示する機能を追加してください。
ファイルタイプごとの割合を円グラフで表示し、合計ファイル数と合計サイズも
表示するようにしてください。グラフはアニメーション付きで表示されるとより見栄えが良いと思います。

JavaScriptコードの追加方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. HTMLファイルの`<script></script>`タグ内の最後（閉じタグの直前）に貼り付けます
  3. ファイルを保存して再読み込みすると機能が追加されます

これで生成AIが作成したダッシュボード機能が実装されました！

追加された機能を見てみましょう：

🔍 コードの解説

  1. 「分析する」ボタンのクリックイベントを処理
  2. アップロードされたファイルのタイプ別の数とサイズを集計
  3. Chart.jsライブラリを使って、アニメーション付きのドーナツグラフを描画
  4. タイプごとに異なる色で表示（画像は青、文書は緑など）
  5. マウスオーバーでファイル数とサイズの詳細を表示
  6. 合計ファイル数をカウントアップアニメーションで表示
  7. 合計サイズを読みやすい形式で表示

✅ Vibe Codingのコツ

「見栄えが良い」「アニメーション付き」などの言葉を使うと、AIはより視覚的に魅力的な実装を提案してくれます。 技術的な細部（Chart.jsの設定やアニメーションの実装方法）を気にする必要はなく、 「どんな体験にしたいか」を伝えることに集中できます。

次のステップでは、ダッシュボードのスクリーンショットを撮れる機能を追加します。

✨ Step 4: スクリーンショット機能を実装する

最後に、ダッシュボードをスクリーンショットとして保存できる機能を追加します。これにより、分析結果を画像として保存したり共有したりできるようになります。

スクリーンショットボタンを押すと、ダッシュボードのスクリーンショットを撮って保存できる機能を追加してください。
また、ボタンを押したときに「キャプチャ成功！」のようなメッセージが表示されるといいと思います。

JavaScriptコードの追加方法:

  1. head要素内にhtml2canvasライブラリを追加する
  2. 上記のコードを「コピー」ボタンでコピーします
  3. HTMLファイルの`<script></script>`タグ内の最後（閉じタグの直前）に貼り付けます
  4. ファイルを保存して再読み込みすると機能が追加されます

これで生成AIが作成したスクリーンショット機能が実装されました！

スクリーンショット機能が追加されました。この機能について：

🔍 コードの解説

  1. html2canvasライブラリを使用してダッシュボードのスクリーンショットを撮影
  2. 高解像度（2倍スケール）でキャプチャして鮮明な画像を生成
  3. キャプチャ処理中はボタンにスピナーアイコンを表示して視覚的フィードバック
  4. 画像を自動ダウンロード（ファイル名には日付を含む）
  5. 操作の成功/失敗を通知メッセージで明示
  6. 通知はアニメーション付きで表示され、3秒後に自動的にフェードアウト

✅ Vibe Codingでの実装の流れ

ここでのポイントは、「キャプチャ成功！のようなメッセージが表示される」という要望に対して、 AIがアニメーション付きの通知システムを実装してくれた点です。シンプルな要望に対して、 ユーザー体験を向上させる追加機能を提案してくれるのもVibe Codingの利点です。

📝 完成コード

これで、ファイル整理アシスタントの開発が完了しました！以下が完成したコードです。 このコードをHTMLファイルとして保存して、ブラウザで開くだけで動作します。

📄 index.html

完成コードを表示して詳細を解説してください

完成コードの保存方法:

  1. 上記のコードを「コピー」ボタンでコピーします
  2. メモ帳などのテキストエディタを開き、コードを貼り付けます
  3. ファイルを「index.html」という名前で保存します
  4. ブラウザで開くと、ファイル整理アシスタントが使えます

📦 完成アプリの主な機能

ファイルアップロード

  • ドラッグ＆ドロップでファイル追加
  • クリックでのファイル選択
  • 複数ファイル同時処理

ファイル分類

  • 画像、文書、音楽、動画、その他の5種に分類
  • タイプ別の色分け表示
  • ファイルサイズの表示

ダッシュボード

  • アニメーション付きドーナツグラフ
  • ファイル数のカウントアップ表示
  • 合計サイズの計算と表示
  • グラフ上のツールチップ

UI/UX機能

  • スクリーンショット撮影と保存
  • 処理状態の通知メッセージ
  • スムーズなアニメーション

このコードをindex.htmlという名前で保存して、ブラウザで開くだけで、ファイル整理アシスタントが動作します。 インターネット接続が必要なのは、TailwindやChartJSなどのライブラリをCDNから読み込んでいるためです。

🎉 まとめ＆次のステップ

おめでとうございます！これでVibe Codingを使って、ファイル整理アシスタントを完成させることができました。 このチュートリアルを通じて、AIに自然言語で指示を出しながら、段階的にWebアプリを開発する方法を学びました。

🧠 Vibe Codingで学んだこと

  1. 自然言語でAIにコード生成を指示する方法
  2. 段階的に機能を追加していく開発スタイル
  3. 「こうしたい」という意図をAIに伝える効果的な方法
  4. 専門的な知識がなくても、魅力的なUIを作れること
  5. 一つのHTMLファイルでも、十分実用的なアプリが作れること
Vibe Codingを活用した次のステップについて教えてください

✅ AIプロンプトのコツ

  • 具体的に伝える：「綺麗な」より「青色のグラデーションで」のように具体的に
  • 一度に全部求めない：段階的に機能を追加する方が効率的
  • 理由を添える：「ユーザーが分かりやすいように」など目的を伝える
  • 参照点を示す：「Twitterのような通知」など既存のUIを参照する
  • フィードバックを与える：良かった点や改善点を伝えてAIの出力を調整する

⚠️ Vibe Codingの限界

Vibe Codingは便利なプログラミング手法ですが、実際に使う前に知っておくべき限界もあります。

限界ポイント 説明
自分の知識の壁は越えられない
自分が理解できないことは、AIに正しく指示できない

料理を知らない人がシェフに「おいしい料理を作って」と言うようなもの。何がおいしいのか、どんな味付けが好きなのか伝えられないと、期待通りの料理は出てきません。

同じように、プログラムのことがよく分からないと、AIに上手に指示できず、思い通りの結果にならないことが多いです。

伝え方で結果が大きく変わる
プログラミングの知識があるほど、AIへの指示も的確になる

「駅までの道を教えて」と言っても、「右に曲がって、2つ目の信号を左に...」と詳しく説明できる人と、「あっちの方」としか言えない人では、案内の質が違います。

プログラミングを知っている人は、AIに的確な指示ができるので、より良い結果が得られます。

複雑なものは作りにくい
単純な機能と複雑な機能では必要な知識量が大きく異なる

シンプルなボタンやお問い合わせフォームは簡単に作れても、LINEのようなチャットアプリやAmazonのようなECサイトなど、複雑な機能が必要なものは難しいです。

AIの力だけでは複雑なアプリケーションを作るのが難しい場合が多いです。

AIとの会話が難しいことも
AIの提案内容を理解できないと適切な判断ができない

AIが「こういう方針でいいですか？」と確認してきたとき、その内容がよく分からないと「うん、いいよ」としか言えません。

でも実際に作られたものが想像と違うと、「AIが言うことを聞いてくれない」と感じてしまい、AIツールの使用をやめてしまう原因になります。

まとめ

Vibe Codingは確かに便利ですが、「カーナビがあれば運転の知識がなくても大丈夫」というわけではありません。

基本的な知識があると、AIともっと上手にコミュニケーションでき、もっと素晴らしいものが作れるようになります。

プログラミングの基礎を学びながらVibe Codingを活用することで、より高いレベルの成果が得られるでしょう。