AIミーティング 2023/05/10 #ChatGPT #GPT4 #PaLM のLT資料です
https://osaka-driven-dev.connpass.com/event/282588/
https://kumamcn.connpass.com/event/282983/
2023/05/10AIミーティングVue2 x Vuetifyでチャットアプリつくーる
View Slide
がちもとさん本名は、藤本賢志（ふじもとさとし）KumaMCNという技術コミュニティを運営株式会社ナレッジコミュニケーションでAI・XRアプリ開発崇城大学古賀都市計画研究室の技術顧問でまちづくりの研究高専で制御を、大学でセンシングを学び、次は脳みそ@sotongshi
Vue2 x Vuetifyを使ったチャットアプリの作成https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d
Vue2 x Vuetifyとは？• Vue2：シンプルなJavaScriptのフレームワーク• Vuetify：マテリアルデザインのUIコンポーネントを提供
チャットアプリの機能やデザイン• マークダウンの表示に対応• ソースコードもコピーできる• モデルを切り替えられる
開発環境• 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
App.vueの構成• template：HTMLの部分。• script：JavaScriptの部分。データ、メソッドなどを書くところ• style：CSSの部分。Vuetifyを用いているのでほぼ書いていない
ChatGPTに聞きながら作ったコード ＜template＞
ChatGPTに聞きながら作ったコード ＜script＞
作り方
こんな感じで
小さく作る
頭いいからAPI使いだす
なんかうまくいかないとき
（怒）
敬語使いましょう。丁寧になります。ちょっと変えるとできたり・・・
動いたコードを全部貼ってから聞く
変更したところだけ教えてもらう
まとめ• AIに仕事してもらって楽になると思ったが、開発スピード爆上がりで時間が足りない！• とりあえず動くコード書いてくれるのでうれしい、動いたコードはNotionにまとめとく• ChatGPTと会話するコミュ力が必要！• 数時間かかりましたが、チャットアプリ５分でつくれます👇• https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d
不定期で突発的に開催• 会話履歴の振り返り• 作ったものを共有する• 今後の予定は未定だけど、ChatGPTに聞きながらライブコーディングとか
satoshirobatofujimoto
ikezoemakoto
line_developers_tw
imsaku
nagix
yosuke_furukawa
miu_crescent
matsuihidetoshi
soudai
mongolyy
tsujiba
rigolon
senkin13
frogandcode
brad_frost
akosma
mongodb
zakiyama
tanoku
shpigford
chrisshort
jakevdp
caitiem20
bryan
morganepeng