こんにちは、スクーティー代表のかけやと申します。
弊社は生成AIを強みとするベトナムオフショア開発・ラボ型開発や、生成AIコンサルティングなどのサービスを提供しており、最近はありがたいことに生成AIと連携したシステム開発のご依頼を数多く頂いています。
AI開発に興味があるけれど、高額なクラウドサービスや複雑な設定に悩んでいませんか？そんな方に最適なのが『Bolt.new』。このツールを使えば、ローカル環境でAIアプリを簡単に開発できるうえ、クラウド依存のコストや制限を回避できます。本記事では、Bolt.newの基本的な使い方からローカルLLMの統合まで、効率的なAIアプリ開発を実現する方法を詳しく解説します。初心者からプロまで役立つ情報が満載です。
Bolt.newの概要と利点
Bolt.newとは？
Bolt.newは、StackBlitzが開発したフルスタックWebアプリケーション構築・展開のためのWebベース開発プラットフォームです。AI（Claude 3.5モデル）を活用し、高度なコーディング知識不要でアプリ作成を支援します。Replit Agentと類似点がありつつ、より現代的な操作性も特徴です。シンプルなプロンプト入力で視覚的に美しい、かつ機能的なデザインを生成。迅速なプロトタイピング作成、アイデア出しに最適なツールと言えるでしょう。Bolt.newはWeb開発の新たな可能性を切り拓き、開発者にとって強力な味方となるでしょう。AI技術と直感的なインターフェースの融合は、開発プロセスを革新し、より創造的なアプリ開発を促進します。初心者でも容易に使いこなせるため、AI開発の敷居を大きく下げる効果も期待できます。
Bolt.newの利点
Bolt.newの利点は多岐に渡ります。1つ目は迅速なプロトタイピング作成です。高品質なUI/UXデザインを数分で生成できるため、アイデアの視覚化、迅速な反復作業が容易になります。従来の開発プロセスでは、デザイン段階に多くの時間と労力を費やす必要がありましたが、Bolt.newはこれを劇的に短縮。開発者は、より多くの時間をアプリのコア機能開発に集中できます。2つ目は開発時間の節約です。初期設計作業にかかる時間を大幅に削減できるため、開発全体の効率が向上します。数日あるいは数週間かかっていた作業が数分で完了するケースも珍しくありません。この時間短縮は、開発コストの削減にも直結します。3つ目は、デザイン面でのインスピレーションの促進です。Bolt.newが生成する斬新なデザインは、開発者に新たな発想のヒントを与え、創造性を刺激します。既存の概念にとらわれず、自由な発想でアプリ開発を進めることができるため、革新的なアプリが誕生する可能性も高まります。
Bolt.newを使ったアプリ開発事例
Spotifyクローン作成
Bolt.newを用いたSpotifyクローン作成は驚くほど簡単です。「Spotifyのクローンを作成したい」と入力するだけで、Spotifyに酷似したUIが生成されます。さらに、「ライブラリページ」「楽曲詳細ページ」など、追加ページもプロンプトで指示すればデザインに反映。まるで魔法のように、アプリの骨格が目の前で形作られていく様を体験できます。ただし、楽曲再生といった複雑な機能の実装は、Bolt.newだけでは完結せず、追加の開発作業が必要になるケースもあります。Bolt.newはあくまでもデザイン、プロトタイピング作成を支援するツールであり、すべての機能を自動で実装できるわけではない点に注意が必要です。
Airbnbクローン作成
Airbnbクローンの作成もSpotifyクローンと同様の手順で進めます。「Airbnbのクローンを作成したい」と入力すれば、Airbnb風のホームページが生成されます。さらに、「レンタルリスティングページ」をプロンプトで指示することで詳細ページも作成可能。Bolt.newは様々な種類のWebアプリのプロトタイピング作成に適応できる柔軟性を備えています。しかし、Spotifyクローン作成時と同様に、複雑な機能の実装には追加の開発作業が不可欠です。Bolt.newはあくまでデザイン構築を効率化するツールであり、すべての開発工程を自動化できるわけではないことを理解しておく必要があります。
Bolt.newのローカルインストール
NodeShiftアカウントの作成とGPUノードの設定
Bolt.newをローカル環境にインストールする手順を解説します。まず、NodeShiftプラットフォームでアカウントを作成し、ログインします。必要な情報を入力し、アカウント設定を完了させましょう。次に、GPUノードの設定に進みます。左側のメニューから「GPUノード」を選択し、「GPUノードの作成」ボタンをクリックして仮想マシンデプロイメントを作成します。「GPUノード」タブでGPUモデル、ストレージ、地理的リージョンを選択します。このチュートリアルでは、高速なパフォーマンスを実現するために1x RTX A6000 GPUを使用します。最適なGPUを選択することで、スムーズな開発環境を構築できます。
認証・イメージ選択・SSH接続
仮想マシンの設定を続けます。まず、認証方法を選択します。パスワード認証とSSHキー認証が利用可能ですが、セキュリティの観点からSSHキー認証を推奨します。SSHキーの作成方法は公式ドキュメントを参照してください。次に、仮想マシンのイメージを選択します。Bolt.newをデプロイするには、NVIDIA Cuda仮想マシンを選択します。このCUDA環境は、GPUを活用した高速な処理に最適化されています。「作成」ボタンをクリックすると仮想マシンがデプロイされます。デプロイが完了し、「実行中」ステータスになったら、「接続」ボタンをクリックします。ターミナルを開き、プロキシSSH IPまたは直接SSH IPを貼り付けて接続します。GPUの詳細はnvidia-smiコマンドで確認できます。
リポジトリのクローン、システムアップデート、Vimのインストール
Bolt.newのインストールに必要な準備を進めます。まず、git clone https://github.com/coleam00/bolt.new-any-llm.gitコマンドを実行してリポジトリをクローンし、cd bolt.new-any-llmコマンドでクローンしたディレクトリに移動します。次に、ls -ltraコマンドを実行してリポジトリ内のファイルを確認します。システムのアップデートとVimのインストールも行います。sudo apt updateコマンドでパッケージリストを更新し、sudo apt install vim -yコマンドでVimをインストールします。Vimは高機能なテキストエディタであり、開発作業に役立ちます。もしVimがすでにインストールされている場合は、この手順はスキップできます。
APIキーの設定、Node.jsとpnpmのインストール
LLMを利用するためにAPIキーの設定を行います。.env.exampleファイルを.envにリネームし、vi .envコマンドでファイルを開きます。使用するLLMのAPIキーをファイルに追加します。APIキーは各LLMプロバイダーから取得できます。次に、システムのアップデートを行います。sudo apt update && sudo apt upgrade -yコマンドを実行してシステムを最新の状態に保ちます。続いて、Node.jsをインストールします。curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -コマンドを実行し、sudo apt install -y nodejsコマンドでNode.jsをインストールします。Node.jsのバージョンとnpmのバージョンは、それぞれnode -vとnpm -vコマンドで確認できます。npmを最新バージョンに更新するには、sudo npm install -g npm@latestコマンドを実行します。最後に、pnpmをインストールします。npm install -g pnpmコマンドでpnpmをインストールし、pnpm -vコマンドでバージョンを確認します。pnpmは高速で効率的なパッケージマネージャーです。
Bolt.newサーバーの実行とLLM設定
いよいよBolt.newサーバーの実行です。pnpm installコマンドでpnpmファイルをインストールします。次に、pnpm devコマンドでBolt.newサーバーを実行します。これでBolt.newが起動し、開発を開始できます。外部アクセスのためには、SSHポートフォワーディングの設定が必要な場合があります。LLMプロバイダーとモデルを選択します。LLMプロバイダー（例：OpenAI）とLLMモデル（例：GPT-4）を選択し、APIキーを設定します。プロバイダーとモデルの選択は、開発するアプリの要件に合わせて行います。最後に、プロンプトを入力してアプリの作成を開始します。具体的なプロンプトの書き方は、Bolt.newのドキュメントを参照してください。
Bolt.newを使いこなすためのヒント
AIとの連携と学習
Bolt.newは、ユーザーの操作から学習し、コーディングスタイルや好みに適応していくAIを搭載しています。このパーソナライズされた学習機能により、Bolt.newは単なるコード生成ツールを超え、開発者にとって真のパートナーとなります。AIとの連携を深めるほど、Bolt.newはあなたの開発スタイルを理解し、より的確な支援を提供してくれるでしょう。この相互学習こそが、Bolt.newの最大の魅力と言えるでしょう。開発効率の向上だけでなく、開発者自身のスキルアップにも繋がる、理想的な開発環境を提供します。
効果的なプロンプトの使い方
Bolt.newを最大限に活用するには、効果的なプロンプトの入力が不可欠です。AIに明確で具体的な指示を与えることで、生成されるコードの精度が向上します。例えば、アプリの構成要素、デザインのスタイル、実装したい機能などを詳細に記述することで、AIはあなたの意図をより正確に理解し、期待通りの結果を生成します。また、生成されたコードをレビューし、必要に応じて修正を加えることも重要です。AIはあくまで補助的な役割を果たすものであり、最終的な判断は開発者自身が行う必要があります。AIと開発者の協調作業こそが、Bolt.newによる開発の真髄と言えるでしょう。
Bolt.newの将来性
ノーコードAI開発の進化
Bolt.newのようなAIコード生成ツールは、Web/アプリ開発のあり方を変革しつつあります。コーディング経験が少ない人でも、機能的なプロトタイプや本格的なアプリケーションを作成できるため、開発の民主化が加速しています。将来的には、バックエンドシステムやデータベースとの統合強化、高度なロジック処理機能の実装、さらなるブランディングカスタマイズオプションの拡充などが期待されます。Bolt.newは進化を続けるプラットフォームであり、その可能性は無限大です。
Bolt.newを使い始めるにあたって
AIツールを活用した開発
AIを活用した開発を始めるには、Bolt.newをはじめとする様々なAIツールを試し、自身のニーズに最適なツールを見つけることが重要です。AI生成デザインをたたき台として、ブランドアイデンティティに合わせてカスタマイズしていく柔軟な姿勢が求められます。AIツールと従来の開発手法を組み合わせることで、相乗効果を発揮し、より良い成果を期待できます。常にAIコード生成技術の最新動向を把握し、進化し続ける開発環境に適応していくことが、これからの開発者にとって不可欠となるでしょう。
