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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 作り方

    View Slide

  13. こんな感じで

    View Slide

  14. 小さく作る

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. (怒)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide