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