業務でたまに使うツール、毎回ツール名で検索してページを開いている...なんてことはしていないですか？ それ全部、自分専用のツール集として1時間で作れます。

今回はChatGPTとbolt.newを使い、たった1時間で23個の業務効率化ツール集を爆速で立ち上げられたのでご紹介します。 立ち上げたサイトはこちらに公開しているので、ご自由にお使いください。

https://tasukari.nisyuu.com

使用したツール

開発に使用したのはChatGPTとbolt.new、Supabase、Netlifyです。ChatGPTは要件定義に、bolt.newは実装に使用しました。 SupabaseのDB実装や認証機能実装はbolt.newから指示を出して実行することができるため、事前にSupabaseアカウントを作成してbolt.newに連携しておけば実質bolt.newだけで実装可能です。

bolt.newはNetlifyとも連携しているため、ワンクリックでNetlifyのサーバーへデプロイできます。 ソースコードはGitHub管理できるため、Netlify以外のホスティングにデプロイすることもできます。

https://openai.com/ja-JP/chatgpt/overview/

https://bolt.new

開発手順

開発はほとんどチャットで指示を出すだけで完成できました。 少しだけ手で変更を入れましたが、テキストの削除や不要な要素の削除ぐらいです。

要件定義

まずはChatGPTにやりたいことを伝え、要件定義書を作成してもらいました。 作ろうとしているものは比較的シンプルなので、下記文章で大雑把に伝えてみました。

テキストの差分チェックや文字数チェック、ダミーテキスト生成、単位変換、電卓などの業務で度々使用するツールを提供する便利サイトを作ろうとしています。 要件定義をしてください。

機能要件、非機能要件、技術要件、ページ構成などいい感じに補足した仕様書を作ってくれました。

また、業務効率化ツール案を他にも提案してもらい、Supabaseを使うことなども伝えながら要件定義書を仕上げていきました。 あらかじめ要件定義を仕上げておくことで、整理した情報をbolt.newへ伝えられるためトークンの使いすぎ防止になります。

最終的に仕様書に追加された機能は以下の23個になりました。

• 日程調整ツール＋共有
• ToDo管理＋進捗共有
• QRコード生成
• 差分チェック
• 文字数カウント
• ダミーテキスト生成
• 単位変換
• 簡易電卓
• JSON整形＆検証
• 色コード変換
• 正規表現テスター
• 見積書自動作成
• 営業メールテンプレート
• アポ調整メッセージ
• 経費精算チェック
• 税率計算ツール
• 振込手数料計算
• メール文まとめテンプレ
• 議事録フォーマットメーカー
• 時間の逆算計算
• 出力チェック
• 経費精算テンプレ生成
• 請求書番号発行

実装

ChatGPTに作ってもらった要件定義書は、bolt.newにそのままチャットへ送りました。 文章量が多いと実装がキリのいいところで止まってしまうようで、3,4度続きの実装をするように指示することで仕様書通りのものが出来上がりました。

チャットの横に開発しているサイトの画面が表示されるので、実装されたものを確認しながら指示を出すことができます。 サイト内の気になる箇所があれば、DOM要素を指定してピンポイントで指示を出し修正することができました。 サイトの画面が表示されている部分にソースコードを表示させることもできるため、手で直接変更を加えることもできます。簡単な修正などはトークン消費がもったいないので、手で軽く変更するといったことができます。

開発画面

サインアップ・ログインはメールアドレスとOAuth認証(X, Google, GitHub)で実装しました。Supabaseが認証機能を提供しているため、チャットで指示を出すだけで実装してくれます。 OAuth認証はプラットフォーム側の設定が必要ですが、ソースコードには一切触れず実装できました。

開発中にエラーが出た場合は、ワンクリックで修正指示を出せるそうですが今回は一度もエラーが出なかったので試せませんでした。 すばらしい。

デザインは特に指定していないためか、シンプルなデザインになりました。

GitHubへの同期は実装がソースコードに反映されたタイミングで行われるようでした。

ChatGPTとbolt.newを使った開発のコツ

個人的に培ったChatGPTとbolt.newで開発する時のポイントを以下にまとめておきます。

• 要件定義はChatGPTやGeminiなどであらかじめ整理しておく
  • 整理した情報をbolt.newに渡すことでトーク消費を抑えられる
• 技術スタックを指定したければ最初に伝えておく
  • 途中で変更しようとすると変更が大きくなり、トークン消費が増えてしまう
• できるだけDOM要素を指定して指示を出す
  • トークン消費を抑えるため
• 削除やテキスト追加など簡単な修正は手で行う
  • トークン消費を抑えるため
• ページごとにパスが必要であれば、明記する
  • 最初の実装ではページパスがなかったので、明記しておいた方が確実
    • v0も同じだった

bolt.newで見えた新たな世界

生成AIを使うことで開発を加速させる効果が狙えることは読者の方もご承知だと思いますが、もっと広い範囲で、各自が自分の理想とする情報ツールを容易にDIYできるようになった世界が見えました。

さらに、エンジニアでなくても自然言語とGUI操作のみで開発が可能であることをbolt.newは提示しているため、開発がエンジニアだけのものでなくなったことを感じました。

おわりに

頑張っても1週間はかかっていたような実装を、フロントエンド実装とバックエンド実装込みで短時間のうちに完成させることができました。

率直にここまで来たか！という感想です。

以前類似サービスのv0を使ってみたこともありますが、bolt.newはSupabaseと連携することができフロントエンドだけでなくバックエンドも構築できてしまうことが圧倒的にメリットだと思いました。 ただし、その分トークンの消費が多いため、ChatGPTやGeminiなどである程度要件を固めてから指示を出すなどできるだけ工夫することが最良です。

Stripeとの連携もサポートしているようなので、サブスク導入も簡単にできそうでした。

本記事で紹介していない機能がまだまだあるようなのと、開発体験が良すぎて課金をしたのでしばらくbolt.newに入り浸ってみます。