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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Boothお試し版配布してます

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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