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

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

2bf280ac8fc28aa5d99de291eb8ccfbe?s=47 Endo_Hizumi
December 11, 2019

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

2bf280ac8fc28aa5d99de291eb8ccfbe?s=128

Endo_Hizumi

December 11, 2019
Tweet

Transcript

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

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

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

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

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

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

  7. 7 今、やってること GameClient GameServer JinroDB JinroResponcer.php Broadcast.php member activity_logs triggerで 書き込む

    発言・投票などの行動 書き込み レコード 取得 JSONで送信 7 今、開発している人狼のWebアプリの仕組みがこうなって います。
  8. jQueryの良かったところ • DOMの取得が短くかけた ◦ document.getElementById('hoge')を$(‘hoge’)で書ける

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

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

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

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

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

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

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

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

  17. Vue.jsいいな

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

  19. おしまい