top of page

hand-dot.com

・プロンプト

8h8k1

・得られたコードの動作確認

deagn

・AIを使ったプロトタイピングの流れ

48h69

Table of contents

用件定義からAIでアプリのプロトタイピング

更新日：3月26日

ChatGPTでプロトタイピングができるか試してみた。


下記の記事からいけるんじゃないかと思っていたのをやってみた感じです。

TypeScript, TypeDoc, GitHub Copilotを使ったメタプログラミング


上記の記事ではもっとガチガチの用件定義を想定していましたがただの用件定義ドキュメントからでも満足いく結果が得られました。


プロンプト


## 概要

現在持っている資産を現金、株、コモディティ、仮想通貨などのカテゴリに分けて入力すると、
それらの資産をカテゴリ別に指定した割合にリバランスするためのプログラムを開発しようとしています。

## プログラミング言語

JavaScript

## 資産のカテゴリ

| 長期投資資産のカテゴリ                 | どう分散するか？                                              | 具体的な ETF 例                                                  |
| --------------------------- | ----------------------------------------------------- | ----------------------------------------------------------- |
| 株式・社債・不動産（5割）（経済成長時に上昇する部分） | 「先進国／途上国」、「ドル建て／円建て／ユーロ建て」                            | VEA, VWO, SPY,1615, 1306, 2800,FXI, SX5S, FEZ,EIDO, HYG     |
| コモディティ（3割）（経済危機に備える部分）      | 貴金属（金／銀／プラチナ）、ベースメタル（亜鉛／鉛／アルミニウム）、原油、天然ガス、農業商品、ビットコイン | GLD, IAU, GDX,GDXJ, SLV, PPLT,1541, PALL, DBB,USO, UNG, DBA |
| 国債・現金（2割）（守りの部分）            | 「米国債／日本国債／欧州国債」、「短期／中期／長期」                            | VGSH, SPTS, TIP,BND, VGIT, SPTI,EDV, SPTL, TLT              |

## ユースケース

・現在の資産をカテゴリに分けて入力する
・現在の資産を理想の資産と、リバランスするための操作を出力する


## 関数と型について

intereface Asset {
  stock: number;
  commodity: number;
  bond: number;
}

function rebalance(currentAsset: Asset): {ideal: Asset, operation: Asset} {}

## 期待する出力

const currentAsset = {
  stock: 80,
  commodity: 10,
  bond: 10,
};

rebalance(currentAsset); // => {ideal: {stock: 50, commodity: 30, bond: 20}, operation: {stock: -30, commodity: 20, bond: 10}}

---

rebalance 関数の実装をお願いします。

まずは上記のプロンプトから下記の結果を得た



interface Asset {
  stock: number;
  commodity: number;
  bond: number;
}

function rebalance(currentAsset: Asset): {ideal: Asset, operation: Asset} {
  const total = currentAsset.stock + currentAsset.commodity + currentAsset.bond;
  const ideal: Asset = {
    stock: total * 0.5,
    commodity: total * 0.3,
    bond: total * 0.2,
  };

  const operation: Asset = {
    stock: ideal.stock - currentAsset.stock,
    commodity: ideal.commodity - currentAsset.commodity,
    bond: ideal.bond - currentAsset.bond,
  };

  return {ideal, operation};
}

const currentAsset = {
  stock: 80,
  commodity: 10,
  bond: 10,
};

console.log(rebalance(currentAsset));
// => {ideal: {stock: 50, commodity: 30, bond: 20}, operation: {stock: -30, commodity: 20, bond: 10}}

ロジックは大丈夫そうだったのでReactコンポーネントにしていく



そして微調整


・Reactのコンポーネントで下記のInputを受け取って上記のrebalance関数を使って、出力をideal, operationで分けてわかりやすく表示するUIを1コンポーネントで作成してください
  ・株式・社債・不動産(stock)
  ・コモディティ(commodity)
  ・国債・現金(bond)
・上記のReactコンポーネントは下記の要件を満たす必要があります。
  ・ UIは日本語でわかりやすく
  ・桁は万からで、いい感じにフォーマットして欲しい。
  ・各カテゴリーの中身の内訳を見れるようにする
    ・カテゴリと、ティッカーor通貨名、金額(評価額)を入力して、カテゴリでグループ化して表示する
  ・入力をローカルストレージに保存できるようにする




株式・社債・不動産:、コモディティ:、国債・現金:　のInputは内訳を元に反映されるように修正し、
内訳のカテゴリは 株式・社債・不動産:、コモディティ:、国債・現金: で選択できるようにしてください

得られたコードの動作確認


コードが返ってきたのでStackblitzに貼り付けて動かしてみた。

流石にびっくりした。


URL: https://stackblitz.com/edit/vitejs-vite-t2x3rq?file=src/App.tsx


いや、メチャクチャすごくないですか？

内訳の部分から「内訳追加ボタン」を押すと実際に「理想」、「操作」に反映されて動きます。

なんかローカルストレージへの保存はうまくいってない気がするけど、まあそれはどんまいレベルでしょう。


AIを使ったプロトタイピングの流れ


Stackblitzに書き出せばGithubレポジトリ化もすぐにできるので叩き台を作ったらそっから本格的にオーディングに取り掛かれる。


ChatGPTでコードを出してもらって、そこからStackblitzで開いて、

GitHubに連携するという方式が一番プロジェクトのスタートとして早い気がする


いやーめちゃくちゃいい。


これで思いついたんだけど、下記のStackblitzのAPIを使って

https://developer.stackblitz.com/platform/api/post-api

Chrome拡張で作るといいかもしれない。

これはまたネタとして溜めておいて、別の機会にでも作るとするか。


イメージとしてはStackblitzに貼り付けるのが若干面倒なので、ChatGPTでそのまま開けるようにしてコードを実行するまでを効率化する。


Chrome拡張のContent Scriptsを書けばいい感じにできるはず？

言うほどメリットないかなー。わからない。


とにかく、言語化がうまくできればそこからプロトタイピングがめちゃくちゃ気軽にできることがわかったのでとても良かった。楽しい。


アイデアはあったが面倒で作ったなかったものや、これからアイデアが浮かんできたらちゃんと言語化しておくことでプロトタイピングがここまでの精度でできるということがわかったのでどんどんと利用していきたいと思った。


ではでは。


bottom of page