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

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. 改訂版アプリ本　執筆者募集！ ワンストップアプリ本 β版に寄稿してくれる 人募集中！ アプリに関するものならなんでもおｋ 数行のコラムから参加おｋです！

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. おしまい