![見出し画像](https://assets.st-note.com/production/uploads/images/152677224/rectangle_large_type_2_d61a23bbdacdeb99d8e986896b149f39.png?width=1200)
話題のv0で、iPhoneの電卓を一瞬で作ってみた!!
こんにちは!「1年後起業する人」です!
ここでは、私の起業に向けての学びや進捗をシェアしています。私の目標は、「日本の地域振興と高齢者の雇用促進を観光業を通じて実現すること」です ٩( 'ω' )و
今回も一緒に学んでいきましょう!!
話題のv0で、iPhoneの電卓を一瞬で作ってみた!!
この前 X(旧Twitter)を見てたら、こんなポストが回ってきました。
v0 now supports basic @vuejs rendering
— v0 (@v0) August 27, 2024
Third-party npm package support for Vue is coming next pic.twitter.com/kd7gs1W6tF
「a calculator in veu with a cool background」と入力するだけでめっちゃいい感じの電卓ができるというもの。
本当に1回目でこんな出てくる?ということで試してみました!
v0とは?
まず、v0について簡単にご紹介します。
最近、プログラミングや開発の世界で話題になっているのが「v0」というツールです。
v0は、驚くほどシンプルなインターフェースを持ちながら、強力な機能を提供するプログラミングツールです。
これを使えば、複雑なコーディングなしでアプリケーションのプロトタイプを素早く作成できるんです。しかも、初心者でもすぐに扱えるので、まさに革命的なツールと言えるでしょう。
…というChatGPTの説明でしたが、
v0というUI作成ツールにチャット機能が追加されたことで、一気に人気が高まってきたようです。
早速作ってみた
では、まずv0を使った流れを紹介します。
まじで一瞬です。笑
① 下記サイトにログイン
② ポストのプロンプトを入力
(veuじゃなくていいので、今回はそこだけ抜きました)
![](https://assets.st-note.com/img/1725113190183-59EzS2qgck.png?width=1200)
③ 完成
演算子の位置がめちゃくちゃ気持ち悪いですが、一応っぽい電卓はできました!すごい!!
![](https://assets.st-note.com/img/1725113492770-POTSoh0F1N.png?width=1200)
④ iPhoneの電卓作成
電卓の配置どうしよう?と思った時に、
iPhoneの電卓の配置でいいかってことでプロンプト入力。
・入力の配置を、iPhoneの電卓と同じ配置にしてください。
・「=」を押すまで、入力した式(数字や演算子)が見えるようにしてください。
出力がこちら。
![](https://assets.st-note.com/img/1725113817882-znmrQYkpIb.png?width=1200)
いや、「iPhoneの電卓と同じ配置」というか
ただのiPhoneやないかい!!!!
これ面白かったので公開してみました。笑
サイトの公開
今回作成した電卓アプリは、v0で公開しました。
v0は公開する際に自動的にURLを作成してくれるので、とても便利でした!
やり方は、ただ右上の「Publish」を押すだけ!
![](https://assets.st-note.com/img/1725113967727-CjYftA27zh.png?width=1200)
ぜひ使ってみてください!
感想をコメントで教えていただけたら嬉しいです。
Claudeとの使用感の違い
結論、あまり変わらない!笑
いや、もっといろんな使い方をしたら違いがわかってくるかもしれませんが、
・プロンプト入力でリアルタイムで見た目が出てくる
・作成物をコミュニティ的なところで公開できる
という今回の使い方に関してはあまり変わりませんでした。
次に挑戦したいこと
次は、v0を使ってさらに高度なアプリに挑戦しようと思っています。
今回の経験を活かして、もっと便利で楽しいアプリを開発してみたいです。
皆さんの意見をお聞かせください!
最後に、皆さんに質問です。v0を使ってみたことがありますか?また、今後作ってみたいアプリはありますか?ぜひコメント欄で教えてください。
この記事を読んでくれてありがとう!次回もお楽しみに!
この記事が気に入ったらサポートをしてみませんか?