Vue2 × Vuetifyでチャットアプリつくーる

AIミーティング 2023/05/10 #ChatGPT #GPT4 #PaLM のLT資料です

https://osaka-driven-dev.connpass.com/event/282588/

https://kumamcn.connpass.com/event/282983/

Transcript

1. 2023/05/10 AIミーティング Vue2 x Vuetifyで チャットアプリつくーる
2. がちもとさん 本名は、藤本賢志（ふじもとさとし） KumaMCNという技術コミュニティを運営 株式会社ナレッジコミュニケーションでAI・XRアプリ開発 崇城大学古賀都市計画研究室の技術顧問でまちづくりの研究 高専で制御を、大学でセンシングを学び、次は脳みそ @sotongshi
3. Vue2 x Vuetifyを使ったチャットアプリの作成 https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d
4. Vue2 x Vuetifyとは？ • Vue2：シンプルなJavaScriptのフレームワーク • Vuetify：マテリアルデザインのUIコンポーネントを提供
5. チャットアプリの機能やデザイン • マークダウンの表示に対応 • ソースコードもコピーできる • モデルを切り替えられる
6. 開発環境 • Windows 11 PC • Node.js 18.15.0 • Vue CLI 5.0.8 • Vue 2.7.14 • vue-clipboard2、clipboard、markdown-it、axios • Vuetify 2.6.15 • Azure OpenAI Service
7. App.vueの構成 • template：HTMLの部分。 • script：JavaScriptの部分。データ、メソッドなどを書くところ • style：CSSの部分。Vuetifyを用いているのでほぼ書いていない
8. ChatGPTに聞きながら作ったコード ＜template＞
9. ChatGPTに聞きながら作ったコード ＜template＞
10. ChatGPTに聞きながら作ったコード ＜script＞
11. ChatGPTに聞きながら作ったコード ＜script＞
12. 作り方
13. こんな感じで
14. 小さく作る
15. 頭いいからAPI使いだす
16. なんかうまくいかないとき
17. なんかうまくいかないとき
18. なんかうまくいかないとき
19. （怒）
20. 敬語使いましょう。丁寧になります。ちょっと変えるとできたり・・・
21. 動いたコードを全部貼ってから聞く
22. 変更したところだけ教えてもらう
23. まとめ • AIに仕事してもらって楽になると思ったが、開発スピード爆上がりで時間が足りない！ • とりあえず動くコード書いてくれるのでうれしい、動いたコードはNotionにまとめとく • ChatGPTと会話するコミュ力が必要！ • 数時間かかりましたが、チャットアプリ５分でつくれます👇 • https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d
24. 不定期で突発的に開催 • 会話履歴の振り返り • 作ったものを共有する • 今後の予定は未定だけど、ChatGPTに聞きながらライブコーディングとか