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

jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js

Endo_Hizumi
December 11, 2019

jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js

Endo_Hizumi

December 11, 2019
Tweet

More Decks by Endo_Hizumi

Other Decks in Technology

Transcript

  1. jQuery使いがVue.js
    を使った話
    2019/12/11 Yumemi.vue #4
    遠藤ヒズミ

    View full-size slide

  2. 合同誌頒布のお知らせ
    親方Projectさんより新刊合同誌『ワンストッ
    プアプリ開発(α版)』が出ます
    スマホで始めるWebアプリ開発で
    寄稿しました!
    アプリに関する様々なノウハウが詰まった一
    冊です!

    View full-size slide

  3. 合同誌頒布のお知らせ
    イベント名:第2回 技術同人誌博覧会
    日時:2019.12.14 (Sat.) 11:00~17:00
    場所:プラザマーム(日本橋浜町)
    サークル:【2F-あ06】親方Project

    View full-size slide

  4. 改訂版アプリ本 執筆者募集!
    ワンストップアプリ本 β版に寄稿してくれる
    人募集中!
    アプリに関するものならなんでもおk
    数行のコラムから参加おkです!

    View full-size slide

  5. Boothお試し版
    配布してます

    View full-size slide

  6. 自己紹介
    名前:菊地 峻輔
    HN:遠藤ヒズミ (@endo_hizumi)
    所属:ジャスミンシステム
    業務:都内某所でPython書いてるサーバーサイドPG
    趣味:Webアプリ開発・変態ガジェット集め・プラモデル製作
    Vue歴:趣味で3ヶ月くらい?
    Webサイト:https://hizumi.dev

    View full-size slide

  7. 7
    今、やってること
    GameClient
    GameServer
    JinroDB
    JinroResponcer.php
    Broadcast.php
    member
    activity_logs
    triggerで 書き込む
    発言・投票などの行動 書き込み
    レコード
    取得
    JSONで送信
    7
    今、開発している人狼のWebアプリの仕組みがこうなって
    います。

    View full-size slide

  8. jQueryの良かったところ
    ● DOMの取得が短くかけた
    ○ document.getElementById('hoge')を$(‘hoge’)で書ける

    View full-size slide

  9. jQueryの良かったところ
    ● $.ajaxで、簡単に非同期通信が行えた
    ○ $.getや$.postの略記があって、ワンライナーで、かけた
    ○ $.ajaxで、成否の判定がコールバックで、かけた

    View full-size slide

  10. jQueryの良かったところ
    ● アニメーション用のメソッドが豊富
    ○ フェードイン・フェードアウトや上からスライドして下に消えるな
    ど、動きのあるページが容易に作れた
    ○ アニメーションが終わったときのコールバックも設定できる

    View full-size slide

  11. jQueryの良くなかったところ
    ● 複数のイベントトリガーの定義で簡単に汚くなる
    ○ DOM一つにイベントを結びつけるから、複雑な処理は辛いこ
    とになる。
    イベントトリガーのコールバックに直接処理を書く
    → 良くあるファットコントローラーに
    イベントトリガーだけで、実際の処理が数十行先
    → 読みづらく、把握しづらい。

    View full-size slide

  12. jQueryの良くなかったところ
    ● 複数の要素の描画に生のHTMLを書かないといけない
    配列を操作するメソッドはある。
    表示にはforで必死に回さないといけなくなる。

    View full-size slide

  13. Vue.js の良かったところ
    ● タグのようにコンポーネントを置ける

    View full-size slide

  14. Vue.js の良かったところ
    ● イベントの紐付けをタグに書くのでコードと要素の関連付けが理解
    しやすい

    View full-size slide

  15. Vue.js の良かったところ
    ● 配列要素の描画が簡単

    View full-size slide

  16. Vue.js の良かったところ
    ● 配列要素の描画が簡単

    View full-size slide

  17. Vue.jsいいな

    View full-size slide

  18. これから使っていこう

    View full-size slide

  19. おしまい

    View full-size slide