💡
Boltを使ってWebアプリ開発の一歩目を踏み出そう！
1. はじめに: アプリ開発は一歩目が重い
「こういうアプリを作りたい！」「このアプリができたらきっと便利だ！」と思っても、
実際にアプリ開発を始めようとすると、その一歩目がなかなか踏み出せないことがあります👣
私も年越し前にMBTIを使ったアプリを作りたいと思い、いろいろ調べてみたのですが、どうしても一歩目が踏み出せませんでした。
個人開発は特に、自分でペースも完成度も決めることができてしまうため、怠惰な性格の私にはなかなか厳しいものがあります・・・
とはいえ、多くの個人開発者、同じような経験があるのではないでしょうか？
そこで、今回はAI自動アプリ生成「Bolt」と簡単に構築できるデータベースサービス「Supabase」を使って、アプリ開発の一歩目を踏み出す方法をご紹介します！
2. BoltとSupabaseの概要
まずは、BoltとSupabaseの概要を簡単に説明します。
Boltとは？
Boltは、日本語や英語などの自然言語で指示を入力するだけで、AIがコードやUIを自動生成してくれるツールです。プログラミング未経験者でも簡単に使えるのが特徴で、例えば「電卓を作って」と指示すると、電卓のコードを生成し、プレビューで動作確認することができます。
このツールの魅力は、思いついたアイデアをすぐに形にできること。コードを書く時間やエラー修正に追われることなく、実際の成果物を作り始めることができます。
Supabaseとは？
Supabaseは、リアルタイムのデータベースサービスを簡単に構築できるプラットフォームです。Firebaseに似ていますが、オープンソースであることが特徴です。データベースのセットアップ、認証、ストレージ機能などを手軽に実現できるため、アプリのバックエンド構築に最適です。
たとえば、ユーザー認証機能を追加したい場合でも、Supabaseを使えば数行のコードで設定が完了します。
BoltではデフォルトでデータベースをSupabaseに設定するようなので、セットで利用することがおすすめになっています。
3. Boltとsupabaseを使ったアプリ開発の流れ
1. アプリのアイデアを考える
まずは作りたいアプリのアイデアを簡単にまとめます！
ここでは私が以前企画した「MBTIシェアリング」を例にして進めます。
※MBTIシェアリングの企画記事は以下
2. BoltでUIを作成する
Boltを使って、UIや基本機能を生成します。
- Boltを開く 以下サイトにアクセスし、Boltを開きます。
- サインアップする Boltを使うには、サインアップする必要があります。 私も場合Githubアカウントでサインアップしました。
- 作ってほしいアプリを指示する 短文「MBTIシェアリング」を作ってと指示しても、AIにはわからないので、具体的な指示を入力します。 何回か試しましたが、詳細に伝えすぎても、簡単に伝えすぎても、うまく生成されませんでした。なので、適度に具体的な指示を入力するのがポイントです。 以下は自分が入力した指示です。
実効すると、どんどんコードを書いてくれます！
特に指示していませんが、ReactとTypeScriptで生成されました。
previewで確認すると、以下のような画面が生成されていました。
すごいですよね・・・！
ここまで自力で作るのはかなり大変だと思いますが、Boltを使えば簡単に作成できました。
3. Supabaseとの接続を行う
初回作成後以下のような画面が表示されます。
日本語訳すると、以下の意味ですね。
事前にsupabaseのアカウントを作成しておく必要があります。アカウントを作成したら、右上の「Connect to Supabase」をクリックして、データベースを作成します。これだけで、データベースのセットアップが完了します！
4. 生成されたUI・コードを確認して修正する。
ただ、生成されたUIはあくまでベースなので、自分のアプリに合わせて修正が必要です。
たとえば、色やレイアウト、機能の追加などですね。
私は以下のような質問をしました！
それぞれのtsxファイルについてviewとCSSを分けるコンポーネント構造にしてほしい
デザインをもっとワクワクするものにしてほしい
「回答する」ボタンを押下したら、自動的に結果ページに遷移するようにしてほしい
他にも、関数の追加やDBの追加など詳細を依頼しましたが、内容が複雑になるにつれコードがぐちゃぐちゃになってしまいました🤖。。。
やはり完全に自分の要望通り実現させるのは難しいみたいですね。
また、何度か修正依頼を出した結果、無料枠を使い切ってしまいました。
これ以降の修正は、アップグレードを行うか、ソースコードのダウンロードをして、自分で修正していく必要があります。
複雑な要望の場合、言葉だけでは伝わらない
エンジニアの職がなくなるかもしれない・・・！と思いましたが、
やはり複雑な要望の場合、言葉だけで伝え切るのは難しいようです。
また、AIが生成されたものの妥当性を判断したり、追加での細かい修正は人間が行う必要があります。
ただ、個人開発などで、簡単にアプリを作りたいときにはとても便利なツールだと思いました。特に、データベースのセットアップや認証機能の追加など、手間がかかる部分を簡単に実現できるのは魅力的です！自分でやっていたらもっと時間がかかっていたと思います！
まとめ：Boltの速さで一歩目を走り切ろう！
今回で「MBTIシェアリング」の概要を実装することができました！
自分はReactは触ったことがないですが。。これを機会に勉強していきたいと思います！
今回はBoltとsupabaseを使ってアプリ開発の一歩目を踏み出しましたが、これからも様々なツールを使って、アプリ開発を楽しんでいきたいと思います！
一歩目がなかな踏み出せないエンジニアの皆さん！
ぜひ、Boltを使って、アプリ開発を始めてみてください！