はじめに📝

こんにちわ、最近は生成AIやらガジェットにハマって1ヶ月で8万円溶かした、ノベルワークスのまとっち（@matoi_thai）です。この前使ったReplitが非エンジニアの僕には扱いやすかったので、やったことをQiitaに残しておきます。

こんな人に見てほしい👀

• 環境構築とかデプロイとかよく分からない非エンジニア

• コーディングせずに自然言語でアプリを作りたい人

Replitとは🧠

Webブラウザ上でプログラムの作成・実行・共有ができるクラウド型の統合開発環境（IDE）です。Replitに搭載されているAIエージェントに自然言語で指示するだけで、WebアプリのUIからDB連携まで丸ごと自動構築してくれます。

https://replit.com/

作ったアプリ３つ

• ① ポケモンバトル⚔️

• ② kintone ER図生成ツール🧩

• ③ kintone JSカスタマイズツール⚙️

①ポケモンバトル⚔️

2時間足らずで完成しました。

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

通常のポケモンとは異なる動的なアニメーションで、３対３で乱戦するポケモンバトルを作って。
初代151匹のポケモンから３体選んだら、タイプ相性やステータスや運などで、勝敗が決まるようにして。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー

完成品

https://x.com/matoi_thai/status/1933918131640267161?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1933918131640267161%7Ctwgr%5Ef7bc1995f7a4ad81efbb081ecddce7a60f63204e%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fqiita.com%2Fembed-contents%2Ftweetqiita-embed-content__4d95875533052bf78435d245b1cea890

②kintone ER図生成ツール🧩

4時間掛かったと思います。（ログイン情報でアプリ情報取得するところが手こずった）

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

kintoneにログインIDとパスワードで接続して、指定したアプリIDに紐付くアプリを全て洗い出して。それらアプリのフィールド情報やリレーションを図示したER図を生成してくれるシステムを作りたいです。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー

完成品

https://x.com/matoi_thai/status/1932039678976503864?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1932039678976503864%7Ctwgr%5E8e7d323abcb362fd8764ce94b00e2f2479aa9010%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fqiita.com%2Fembed-contents%2Ftweetqiita-embed-content__6a69ecccb67be03e386a0f029ca1adc9

③kintone JSカスタマイズツール⚙️

6時間以上は掛かった気がします。（Gemini APIキーの設定やらで手こずった）

プロンプト

だいたいこんなプロンプトを入力しました。 ※他にも細かい追加プロンプトはしてます

入力したカスタマイズ要望に応じたJavaScriptを生成してくれるkintone開発支援ツールを作って。アプリフィールド情報を取得して、生成AIでJavaScriptを作って、それをkintoneにデプロイしたい。

アプリ作成時の画面

左から、ファイル構成、エージェントの処理ログ、画面プレビュー

完成品

https://x.com/matoi_thai/status/1931643637181583619?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1931643637181583619%7Ctwgr%5E7520f8e808b3b0fa418e004070fb63e815768573%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fqiita.com%2Fembed-contents%2Ftweetqiita-embed-content__f99dcca85454ed6a9cc403bc40a2bd77

おわりに

非エンジニアが手軽なアプリ開発をするならReplitはオススメです。環境構築・画面UI・DB設計・デプロイといった難しいところを、自然言語でお願いするだけで良い感じにやってくれます。