Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Satoshi Gachi Fujimoto

May 10, 2023
Tweet

More Decks by Satoshi Gachi Fujimoto

Other Decks in Technology

Transcript

  1. 2023/05/10
    AIミーティング
    Vue2 x Vuetifyで
    チャットアプリつくーる

    View full-size slide

  2. がちもとさん
    本名は、藤本賢志(ふじもとさとし)
    KumaMCNという技術コミュニティを運営
    株式会社ナレッジコミュニケーションでAI・XRアプリ開発
    崇城大学古賀都市計画研究室の技術顧問でまちづくりの研究
    高専で制御を、大学でセンシングを学び、次は脳みそ
    @sotongshi

    View full-size slide

  3. Vue2 x Vuetifyを使ったチャットアプリの作成
    https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d

    View full-size slide

  4. Vue2 x Vuetifyとは?
    • Vue2:シンプルなJavaScriptのフレームワーク
    • Vuetify:マテリアルデザインのUIコンポーネントを提供

    View full-size slide

  5. チャットアプリの機能やデザイン
    • マークダウンの表示に対応
    • ソースコードもコピーできる
    • モデルを切り替えられる

    View full-size slide

  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

    View full-size slide

  7. App.vueの構成
    • template:HTMLの部分。
    • script:JavaScriptの部分。データ、メソッドなどを書くところ
    • style:CSSの部分。Vuetifyを用いているのでほぼ書いていない

    View full-size slide

  8. ChatGPTに聞きながら作ったコード <template>

    View full-size slide

  9. ChatGPTに聞きながら作ったコード <template>

    View full-size slide

  10. ChatGPTに聞きながら作ったコード <script>

    View full-size slide

  11. ChatGPTに聞きながら作ったコード <script>

    View full-size slide

  12. こんな感じで

    View full-size slide

  13. 小さく作る

    View full-size slide

  14. 頭いいからAPI使いだす

    View full-size slide

  15. なんかうまくいかないとき

    View full-size slide

  16. なんかうまくいかないとき

    View full-size slide

  17. なんかうまくいかないとき

    View full-size slide

  18. 敬語使いましょう。丁寧になります。ちょっと変えるとできたり・・・

    View full-size slide

  19. 動いたコードを全部貼ってから聞く

    View full-size slide

  20. 変更したところだけ教えてもらう

    View full-size slide

  21. まとめ
    • AIに仕事してもらって楽になると思ったが、開発スピード爆上がりで時間が足りない!
    • とりあえず動くコード書いてくれるのでうれしい、動いたコードはNotionにまとめとく
    • ChatGPTと会話するコミュ力が必要!
    • 数時間かかりましたが、チャットアプリ5分でつくれます👇
    • https://qiita.com/SatoshiGachiFujimoto/items/6d0f38ea06cf8f4dd58d

    View full-size slide

  22. 不定期で突発的に開催
    • 会話履歴の振り返り
    • 作ったものを共有する
    • 今後の予定は未定だけど、ChatGPTに聞きながらライブコーディングとか

    View full-size slide