MENU

AIでコード生成ができる!bolt.newの使い方

目次

コード生成AIで最もオススメのbolt.newとは

bolt.newは、StackBlitzが提供する開発者向けのAI搭載のノーコードツールです。
今まではPC環境でガリガリとコードを書いてプログラミングしていたものを、ブラウザ上でプロンプトを入力するだけで最新のパッケージ・言語などを駆使してAIが作ってくれるというスグレモノです。(僕も触って感動しました)

bolt.new公式サイト

bolt.newの特徴について

  • 自然言語入力でウェブ開発:日本語を含む自然言語での指示だけで、ウェブサイトやアプリケーションを簡単に作成できます。
  • フルスタック開発が可能:ブラウザ上で、フロントエンドだけでなくバックエンドまで一貫して開発できる強力なツールです。
  • AIによるコード生成:プロンプトを入力して会話していくだけで、AIが適切なコードを自動生成します。生成したコードを自分で編集したり、公開もできます!
  • 多様なフレームワークに対応:React、Vue、Angular、Next.jsなど、人気の高いウェブ開発フレームワークを幅広くサポートしています。

bolt.newの料金は?

スクロールできます
PersonalProTeamsEnterprise
& Self-hosted
価格$0/月$18/月$29/メンバー/月(年払い)要問い合わせ
主な特徴• 回数制限が厳しい
•Claude 3.5 Sonnetの使用
• StackBlitz Personalの全機能
• 月間1000万トークンまで
• 外部APIへのアクセス
• StackBlitz Proの全機能
•月間1000万トークンまで
• Eメールサポート
• StackBlitz Teamsの全機能
• プライベートnpmパッケージの利用
• カスタムSSO統合
• 自社ホスト、オンプレミス、VPCインストールオプション
• 独自のAnthropic APIエンドポイント利用
• 専任ソリューションエンジニア
• Slack、Zoom、Eメールサポート
商用利用不可✕不可✕可◯可能◯

個人ならPersonalプラン・Proプラン 法人ならTeamsプラン・Enterprise & Self-hostedプランのようですね。
なお、商用利用はTeamsプラン・Enterprise & Self-hostedプランのみ可能なので気をつけましょう。

bolt.newの始めかた

まずはbolt.newの公式ページからアカウント登録をさくっとしましょう。

STEP
右端のGet Startedをクリック
STEP
アドレスかgithubアカウントでbolt.newにアカウント登録

AIとチャットしてアプリのコードを生成

今回は簡単なタスク管理アプリを作ってみようかと思ったので以下のプロンプトを入れてみました。

タスク管理アプリを作成してください。
画面右側にタスクの入力欄を設定
入力項目はタイトル、期日、内容を入力できる項目にしてください。
またひだ側には設定されたタスク一覧を表示してください。
タスク一覧はアイコンで編集・削除・コピーできる機能を付けてください
UIは基本的に日本語ベースでお願いします。

プロンプトは日本語にも対応していました。
こんな雑な指示ですが自動で書いてくれる、パッケージのインストールもしてくれてる⋯!

できた!(配置がプロンプトの指示と合ってないですが)

これだとあまりにも寂しいし、指示内容と違うのでプロンプトを2〜3回打って調整。
日本語指示にちょっとしたコツはありますが、デザインもちゃんと要望に合わせて反映してくれます。
出来上がったアプリはこちら

他にもゲーム名で実況動画を探したいな〜と思ったのでyoutube内の動画を検索するサイトも作ってみました。
(「ゲーム名」+「実況」とタイトルに入っている動画を検索して表示してくれる)

作ったアプリを公開

出来上がったアプリは右上のDeployを押せばネット上に公開できます。

デプロイが完了すると、以下のようなメッセージが表示されるので手順にそってクレームURLから申請を行えば正式にリリースができます。申請しない場合は、1週間後に自動的に削除されます。

サイトは現在
https://******
で公開されています。 この URL にアクセスすると、アプリケーションの動作を確認できます。

クレーム URL: https://*******

bolt.new使ってみて感想とまとめ

良かった点

  • 画面もシンプルでコードが書けない人でも、操作にそこまで迷わない。
  • AIが日本語対応しており、指示しやすい。(画面自体は英語)
  • コードもしっかり生成されており、bolt.newの画面でコーディングして調整ができる。

イマイチな点

  • レイアウトやデザインについての精度はまだ甘い。(左右の位置指定やアイコン反映するのが地味に手間取った)
  • 無料版だとすぐにトークンが無くってしまう。
  • ディティールの調整はやはり人の手が必要。

イマイチな点と書きましたがbolt.newはまだβ版だそうです。
今後このツールはかなり開発・クリエイティブ界隈にも影響を与えるであろうツールだなと思いました⋯!
簡単にアプリを作って操作感を試してみるとかは最早AIに任せる業務だなと感じています。

何にせよ技術革新を感じずにはいられないAIツールです。
これからの開発技術の発展を予感させますね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次