Akihiro Kuroiwa's Shop

タグ: self-debug

  • Self-Debuggingの先駆け：bolt.new

    bolt.newは、AIを活用した革新的なWeb開発プラットフォームです。自然言語での指示だけで、フルスタックのWebアプリケーションを簡単に作成できる画期的なツールとして注目を集めています。

    AIが生み出す驚異のシミュレーション：bolt.newの実力

    最新のAI駆動型Web開発プラットフォーム、bolt.newの驚くべき能力をご紹介します。私自身がbolt.newを使って作成したシミュレーション「Kinzhal Busters」をご覧ください。このプロジェクトは、現代の軍事技術と防衛システムを模したインタラクティブな3Dシミュレーションです。

    Kinzhal Busters: https://github.com/akuroiwa/kinzhal-busters

    このシミュレーションでは、発電所に飛来するKinzhal（キンジャール）ミサイルと、それを迎撃しようとする複数のドローンによる防衛システムの動きを再現しています。Three.jsを駆使した立体的な表現により、複雑な軌道や迎撃のプロセスを視覚的に理解しやすい形で表現しています。

    bolt.newの驚異的な点は、このような高度な3Dシミュレーションを、プログラミングの詳細な知識がなくても、自然言語での指示だけで作成できることです。AIが要求を理解し、適切なライブラリやフレームワークを選択し、必要なコードを生成してくれるのです。

    Self-Debugging: エラー解決の新たなアプローチ

    bolt.newの特筆すべき機能の一つが、Self-Debuggingです。開発中に発生したエラーを、AIが自動的に解析し修正案を提示します。「Fix problem」ボタンをクリックするだけで、AIがエラーを修正し、アプリケーションを正常に動作させることができます。

    Self-Debuggingについては、論文Teaching Large Language Models to Self-Debugを参照してください。これは、これからのコード生成サービスで主流になる可能性が高い機能です。

    Viteとパッケージのインストール

    bolt.newでプロジェクトを作成すると、デフォルトでViteが選択されます。Viteは高速な開発サーバーと最適化されたビルドツールを提供する次世代のフロントエンドツールです。

    ノーコードで全てが完結する訳ではありません。Stackblitzならば自前でインストールせずともWebブラウザで確認できますが、お気に入りのエディタでコードを手直しし、気軽に動作確認したいでしょう。ここでは、その方法を説明します。

    Ubuntuでの必要なパッケージのインストール

    1. Node.jsとnpm:
    sudo apt update
sudo apt install nodejs npm
    1. 必要に応じてNode.jsのバージョンを更新:
    sudo npm install -g n
sudo n stable
hash -r
npm -v
node -v

    npmでインストールする必要があるもの

    プロジェクトのルートディレクトリで以下のコマンドを実行します:

    npm install

    これにより、package.jsonに記載されている全ての依存関係がインストールされます。

    また、bolt.newで生成されるプロジェクトの.gitignoreファイルには、通常components/ディレクトリが含まれ、バージョン管理から除外されます。

    Viteプロジェクトの起動

    1. 開発サーバーの起動:
    npm run dev

    これにより、開発用のサーバーが起動し、通常はhttp://localhost:5173でアプリケーションにアクセスできます。
    hを入力しenterを押せば、使い方を表示してくれます。

    1. プロダクションビルド:
    npm run build

    これにより、プロダクション用のビルドが作成されます。

    1. プロダクションビルドのプレビュー:
    npm run preview

    ビルドされたプロダクションバージョンをローカルでプレビューできます。

    StackBlitzとGitHub連携

    StackBlitzは、GitHubリポジトリとの連携機能を提供しています。
    bolt.newに作成してもらったプロジェクトをGitHubリポジトリとして登録できます。
    プロジェクトの動作確認も出来るので、Webブラウザさえあれば、いつでも作業できます。

    StackblitzもNetlifyも、bolt.newと同じくGitHubアカウントでアカウント登録したりサインインしたりできます。

    bolt.newからNetlifyへのデプロイとユーザー権限移譲

    bolt.newで作成したプロジェクトをNetlifyにデプロイした直後に表示される「claim URL」をクリックすることで、
    アプリケーションの所有権があなたのNetlifyアカウントに移行されます。
    この過程で、デプロイ時に表示されたURLを控えておくことが重要です。新しい所有者がプロジェクトにアクセスする際に必要となります。

    また、GitHubで更新し、Netlifyのアプリも更新したい場合にはリポジトリの登録が必要です。

    bolt.newは、AIの力を借りてWeb開発のプロセスを大幅に簡素化し、効率化する革新的なツールです。プログラミングの経験が浅い方でも、複雑なWebアプリケーションを作成できる可能性を秘めています。