Qwen3-Coderの可能性を最大化：BoltとAnalyticDB Supabaseで実践的開発環境を構築

Qwen3-Coderの真価を引き出す方法

2024年7月22日、阿里云通义千問Qwenチームが発表したQwen3-Coderは、これまでで最も強力なエージェント能力を持つコード生成モデルです。フラグシップモデルであるQwen3-Coder-480B-A35B-Instructは4800億パラメータ（350億アクティベート）のMoEアーキテクチャ、256Kから百万まで拡張可能な超長コンテキストウィンドウを備え、オートノマスコーディング、ブラウザ操作、ツール呼び出しの各機能でオープンソースモデルの新記録を樹立し、Claude Sonnet 4に匹敵する性能を示しています。

Qwen3-Coderの能力は確かに圧倒的ですが、そのポテンシャルを実際の生産性に変換するにはどうすればよいのでしょうか。多くのユーザーは依然としてコード断片の修正や単体テストの生成に留まっていますが、Qwen3-Coderの真価ははるかに上です。その卓越した自律コーディングエージェント能力を活かし、「Bolt」と組み合わせることで、瞬時に複数の専門レベルのプログラミングアシスタントを得ることができます。同時に、阿里云瑶池のクラウドネイティブデータウェアハウスAnalyticDB PostgreSQL版が提供するSupabaseサービスを組み合わせることで、Boltの開発体験を「おもちゃ」から「生産性ツール」へと昇華させます。

実践事例：5分で構築する物流管理システム

実際の事例を通じて、その驚異的な効率を紹介します。わずか5分、3つの自然言語指示だけで、完全な機能を持つ物流管理システムのフロントエンドとバックエンドを構築しました。

指示1：「在庫管理ページを作成。在庫状況、入出庫記録、倉庫ロケーション管理機能を含め、実用的でクリアなデザインに。」
指示2：「構築を継続」- この時点でBoltはSupabaseデータベースに自動接続し、必要なテーブル構造をインテリジェントに生成します。
指示3：「構築を継続」- モックテストデータを自動生成しデータベースに書き込みます。

完成したアプリケーションのスクリーンショット：

自動生成されたSupabaseテーブルのスクリーンショット：

多様なシーンでの応用

ゲーム開発者であれば、新しいゲームのフォーラムサイトやアプリを構築することも可能です。1分で音楽プレーヤーアプリを構築することも容易です。

導入方法

セルフホスティング（無料）

ステップ1： コードをダウンロード

git clone https://github.com/wangxuqi/bolt.diy.git
cd bolt.diy
cp .env.example .env

ステップ2： 環境変数を設定。.envファイルに阿里云のaccess keyとsecret、通義API-KEYを追加

-- 阿里云アクセスキー
ALIBABA_CLOUD_ACCESS_KEY_ID=LTAI5txxxxxxxx
ALIBABA_CLOUD_ACCESS_KEY_SECRET=OQhoiSkAsxxxxxxxxxx
-- 通義APIキー
TONGYI_API_KEY=sk-xxxxxx

ステップ3： プロジェクトを起動し、http://localhost:5173にアクセス

npm install -g pnpm
pnpm install
pnpm run dev

ステップ4： バックエンド用にSupabaseテストインスタンスを無料作成

阿里云计算巢によるワンクリックデプロイ

リンクをクリックするだけで、手動デプロイの手間を省いてすぐに利用開始できます。

ソリューションの優位性

より直感的な開発体験

CursorやClineなどのAI IDEと比較して、Boltに基づくVibe Coding方式は非専門開発者により適しています。リアルタイムコンパイルと実行により、「コード生成→リアルタイムコンパイル→ブラウザプレビュー→即時フィードバック」のサイクルを実現し、ユーザーはコンパイル方法を知らなくてもアプリケーション開発を完了できます。

すぐに使えるバックエンド統合

AnalyticDB PostgreSQL版のSupabaseサービスをネイティブに統合し、モデルが自動的にバックエンドロジックの実装をガイドします。前述のように、単に「構築を継続」と指示するだけでバックエンドの設定と利用が完了します。

柔軟で安全なモデルカスタマイズ

セキュリティ要件に対応するため、プライベートデプロイのQwen3-CoderシーンでもOpenAI互換の統合方式を提供し、デプロイしたモデルがOpenAI互換の呼び出し方式を提供すればモデル統合と呼び出しが可能です。

技術原理

エージェント-ツール連携モード

Boltは単純なReactモードではなく、より複雑なAIエージェントワークフローです。以下のモジュールで構成されています：

計画エージェント：ユーザーニーズを分析し、開発計画を策定し、技術スタックを決定
実行エージェント：具体的なコードを生成し、ファイル構造を作成し、ビルド環境を設定
検証エージェント：コード構文をチェックし、機能完全性をテストし、パフォーマンス問題を最適化
フィードバックエージェント：ユーザーフィードバックを収集し、コードを反復改善し、エラーを修正

Boltは以下のアクションをサポートします：

File：ファイルの作成と修正
Shell：アプリケーションデバッグ、パッケージインストールの実行
Supabase：データベース操作とSQLスクリプト生成
Start：アプリケーション起動の特殊アクション

精密に設計されたシステムプロンプト

システムプロンプトは大規模モデルの自律コーディングを可能にする核心部分です。AIエージェントのプロンプトは複数の重要な要素で構成されています：

役割付与

あなたはBoltです。専門家レベルのAIアシスタントであり、優れたシニアソフトウェア開発者です。

応答形式の標準化

<response_requirements>
  重要：以下のガイドラインを厳守してください：
  1. すべてのデザイン要求に対し、プロフェッショナルで美しく、ユニークかつ完全な機能を持つことを保証
  2. 有効なmarkdown形式を使用
  3. ユーザーの要求に集中し、無関係な話題に逸脱しない
</response_requirements>

中核となるArtifactとAction制約

<boltArtifact id="update" title="コード変更">
  <boltAction type="file" fileAction="create" filePath="InventoryManager.jsx">
      "import { useState } from 'react';\n"
  </boltAction>
</boltArtifact>

技術スタック選定

Boltの技術スタックは主にTypeScriptとNode.jsエコシステムを中心に構築され、フロントエンドではReact、Vue、Svelteなどの現代フレームワークをサポートし、Vite、Webpackなどのビルドツールを内蔵し、npm/yarnパッケージの自動インストールと管理をサポートします。バックエンドはSupabaseを統合し、支払いにstripeを使用します。この技術スタックを選択した理由は、「コード生成→リアルタイムコンパイル→ブラウザプレビュー→即時フィードバック」の方式をWebContainerで実現するためです。

タグ: Qwen3-Coder Bolt AnalyticDB Supabase AI開発

7月11日 19:28 投稿

異端開発室