メインコンテンツへスキップ

バイブコーディング：小さなアプリを自分で作る

バイブコーディング（vibe coding）では、作りたいものを普段の言葉で説明します。アシスタントがコードを書き、結果を見せ、あなたのフィードバックに合わせて修正します。プログラミングができなくても大丈夫です。たとえば、研修用のクイズ、ちょっとしたゲーム、同僚に便利なツールなどを作れます。

必要なのはデスクトップアプリケーションだけです。Node.js や git をインストールする必要はありません。アプリに組み込まれています。

1. 作業フォルダーを選ぶ​

コンピューターに空のフォルダー（たとえば 研修クイズ）を作り、チャットの作業フォルダーとして選びます。方法はローカルファイルアクセスをご覧ください。アシスタントはこのフォルダー内でのみ作業します。

2. 作りたいものを説明する​

作りたいものをできるだけ具体的に伝えます。たとえば：

情報セキュリティのワークショップ用クイズを 1 つの HTML ページで作って。選択式の問題を 10 問、大きなボタン、最後にスコア、最初からやり直すボタンを付けて。

このようなシンプルなページは、アシスタントがアプリに内蔵された Web サーバーで表示します。結果は内蔵ブラウザに表示されます。上部バー右側のブラウザボタン（地球のアイコン）です。詳しくはローカルサーバーと内蔵ブラウザをご覧ください。

気に入らなければ、変えてほしい点をそのまま伝えましょう：

ボタンを緑にして、間違えたときは正しい答えを表示して。

自分の写真と、アシスタントにページを見てもらう​

メッセージに写真を添付して、次のように頼みます。

この写真をウェブページに載せて。

アシスタントは写真をプロジェクトフォルダー（例: img/）に保存し、ページに配置します。アシスタントが作ったばかりの画像でも同じようにできます。

内蔵ブラウザーで開いているページに問題がありますか？ 次のように頼みます。

ページのどこがおかしいか見て。

アシスタントはページのテキスト、スクリーンショット、エラーメッセージを確認します。アシスタントにページを見てもらうを参照してください。

アシスタントが内蔵ブラウザーで自分でページを開くと、読み込みが終わるまで待ち、スクリプトのエラーや読み込めないファイルなど、ページのエラーメッセージを確認します。動作すると伝える前に、それらを修正します。その後、ユーザーと同じようにページを試します。ボタンをクリックし、欄に入力し、キーを押して、その際に出たエラーも修正します。すべてが意図どおりに動くかどうかは、ご自身で確認してください。

3. もっと大きなアプリ​

複数の画面があるアプリなど、もっと大きなものを作りたい場合は、アシスタントが Vite や React などを使ってプロジェクトを作成できます：

このフォルダーに、Vite を使って、同僚が会議室を予約できる React アプリを作って。すべてインストールして、アプリを起動し、結果を見せて。

このようなプロジェクトの作成（たとえば npm create vite@latest）は、コマンドカードで承認します。その後、アシスタントがパッケージをインストールします。これも承認するか、確認なしでパッケージのインストールを許可をオンにします。パッケージのインストールをご覧ください。 コマンドごとにカードを出したくない場合は、最初のカードで このプロジェクトを信頼する を選んでください。

4. バージョンを保存する​

バージョンとは、ある時点のプロジェクトのスナップショットです。変更が気に入らなければ、以前のバージョンに戻せます。区切りのよいところでアシスタントに頼みましょう：

バージョンを保存して。

初回は、アシスタントがフォルダーのバージョン履歴を開始します。パスワードやキー（Google API キーを含む）など、秘密情報らしきファイルがバージョンに含まれることはありません。何かをスキップした場合は、アシスタントがお知らせします。

5. プロジェクトを GitHub に置く​

GitHub では、プロジェクトをオンラインに保存できます。バックアップになり、別のコンピューターで作業を続けることもできます。

GitHub に接続する​

GitHub には各自が自分のアカウントで接続します。まだアカウントがない場合は、先に github.com/signup で無料のアカウントを作成してください。

  1. 設定を開き、デスクトップの状態で GitHub パネルを探します。
  2. GitHub に接続をクリックします。アプリがコードを表示し、ブラウザで github.com/login/device を開きます。
  3. GitHub でコードを入力し（コードをコピーでコピーできます）、許可します。ページが開かない場合は、GitHub を開くをクリックします。
  4. パネルに @あなたの名前 として接続済み と表示されます。

GitHub が求める許可。 GitHub には HandiHow-B-V のアプリ AI-School Desktop が表示され、リポジトリーへのアクセス（repo）が求められます。プライベートリポジトリーを含む読み取りと書き込みです。このアクセスは、プロジェクトを作成・更新するために必要です。ページが github.com 上にある場合だけ許可してください。

コードの有効期限が切れた場合。 コードの有効期間は約 15 分です。期限が切れたら、もう一度 GitHub に接続 をクリックしてください。

組織のリポジトリー:

  • 組織がサードパーティーアプリを制限している場合は、許可画面で組織の横にある Request（アクセスをリクエスト）をクリックします。後から github.com/settings/applications > AI-School Desktop でも行えます。
  • 組織のオーナーが、組織の Settings > Third-party access > OAuth application policy で承認します。
  • 承認がない場合、自分のリポジトリーは使えますが、組織のリポジトリーは使えません。

別のアカウントを使う場合。 接続を解除 をクリックし、もう一度接続する前にブラウザーで github.com からサインアウトしてください（またはプライベートウィンドウを使います）。そうしないと、GitHub はすでにサインインしているアカウントを使います。

ノート

古いバージョンのアプリでは「このバージョンのアプリでは、まだ GitHub でサインインできません」と表示されます。その場合はアプリを更新してください。

公開と更新​

そのあと、たとえば次のように頼みます：

このプロジェクトを GitHub に置いて。

アシスタントは、正確なアドレスとアプリに内蔵およびネットワーク有効のラベルが付いたカードを表示します。続けるには実行、やめるには拒否をクリックします。新しいリポジトリは、公開を頼まない限り非公開です。アドレスが github.com でない場合や、リポジトリが公開になる場合は、カードが警告します。オンラインに上げるときは、送信されるファイルが表示されます。

その後は、たとえば次のように使います：

  • 「新しいバージョンをオンラインに上げて。」アシスタントが新しいバージョンを GitHub に送ります。
  • 「最新バージョンを取ってきて。」アシスタントが GitHub から変更を取得します。
  • 「プロジェクト https://github.com/naam/project をこのフォルダーにダウンロードして。」アシスタントが既存のプロジェクトをダウンロードします。

公開プロジェクトは、接続しなくてもダウンロードできます。オンライン公開と新しいリポジトリの作成には接続が必要です。

6. 安全のためのヒント​

  • 新しいリポジトリは非公開です。誰にコードを見られてもかまわない場合にだけ公開にしてください。
  • パスワード、キーなどの秘密情報をアプリに入れないでください。
  • Google API キー（AIza で始まるもの。Firebase アプリの Web キーなど）を使う場合は、アシスタントがバージョンに含めないファイル（.env など）に入れてください。キーがコード内にあると、そのファイルはオンラインに上がりません。
  • 実行をクリックする前に、必ずカードのアドレスを確認してください。
  • 接続情報は、このコンピューターのあなたのユーザーアカウントに暗号化して保存されます。アシスタントがあなたの GitHub キーを見ることはありません。共用のコンピューターで作業する場合は、終わったら接続を解除をクリックしてください。
  • 接続を解除は、このコンピューターから接続を削除するだけです。アクセスを完全に取り消すには、GitHub の Settings > Applications で行ってください。

このページで