Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
Endo_Hizumi
December 11, 2019
Technology
0
93
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
Endo_Hizumi
December 11, 2019
Tweet
Share
More Decks by Endo_Hizumi
See All by Endo_Hizumi
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
59
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
150
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
84
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
570
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
53
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
62
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
700
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
53
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
64
Other Decks in Technology
See All in Technology
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
pei0804
4
3.3k
QiitaConference2022
fuwasegu
0
180
IoTLT88-NTKanazawa-laundry-dry
yukima0707
0
220
Retca Cloud
bau
0
510
How to start with DDD when you have a Monolith
javujavichi
0
300
GeoLocationAnchor and MKTileOverlay
toyship
0
110
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
500
Meet passkeys
satotakeshi
1
110
The application of formal methods in Kafka reliability engineering
line_developers
PRO
1
160
Azure Arc Virtual MachineとAzure Arc Resource Bridge / VM provisioning through Azure portal on Azure Stack HCI (preview)
sashizaki
0
130
MRTK3 - DataBinding and Theming 入門
futo23
0
180
DeepL の用語集が(いつのまにか)日本語に対応してたので試してみた
irokawah0
0
150
Featured
See All Featured
Debugging Ruby Performance
tmm1
65
10k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
A Tale of Four Properties
chriscoyier
149
21k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Designing Experiences People Love
moore
130
22k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Ruby is Unlike a Banana
tanoku
91
9.2k
Designing with Data
zakiwarfel
91
3.9k
For a Future-Friendly Web
brad_frost
166
7.4k
Code Review Best Practice
trishagee
43
9.2k
Robots, Beer and Maslow
schacon
152
7.1k
Transcript
jQuery使いがVue.js を使った話 2019/12/11 Yumemi.vue #4 遠藤ヒズミ
合同誌頒布のお知らせ 親方Projectさんより新刊合同誌『ワンストッ プアプリ開発(α版)』が出ます スマホで始めるWebアプリ開発で 寄稿しました! アプリに関する様々なノウハウが詰まった一 冊です!
合同誌頒布のお知らせ イベント名:第2回 技術同人誌博覧会 日時:2019.12.14 (Sat.) 11:00~17:00 場所:プラザマーム(日本橋浜町) サークル:【2F-あ06】親方Project
改訂版アプリ本 執筆者募集! ワンストップアプリ本 β版に寄稿してくれる 人募集中! アプリに関するものならなんでもおk 数行のコラムから参加おkです!
Boothお試し版 配布してます
自己紹介 名前:菊地 峻輔 HN:遠藤ヒズミ (@endo_hizumi) 所属:ジャスミンシステム 業務:都内某所でPython書いてるサーバーサイドPG 趣味:Webアプリ開発・変態ガジェット集め・プラモデル製作 Vue歴:趣味で3ヶ月くらい? Webサイト:https://hizumi.dev
7 今、やってること GameClient GameServer JinroDB JinroResponcer.php Broadcast.php member activity_logs triggerで 書き込む
発言・投票などの行動 書き込み レコード 取得 JSONで送信 7 今、開発している人狼のWebアプリの仕組みがこうなって います。
jQueryの良かったところ • DOMの取得が短くかけた ◦ document.getElementById('hoge')を$(‘hoge’)で書ける
jQueryの良かったところ • $.ajaxで、簡単に非同期通信が行えた ◦ $.getや$.postの略記があって、ワンライナーで、かけた ◦ $.ajaxで、成否の判定がコールバックで、かけた
jQueryの良かったところ • アニメーション用のメソッドが豊富 ◦ フェードイン・フェードアウトや上からスライドして下に消えるな ど、動きのあるページが容易に作れた ◦ アニメーションが終わったときのコールバックも設定できる
jQueryの良くなかったところ • 複数のイベントトリガーの定義で簡単に汚くなる ◦ DOM一つにイベントを結びつけるから、複雑な処理は辛いこ とになる。 イベントトリガーのコールバックに直接処理を書く → 良くあるファットコントローラーに イベントトリガーだけで、実際の処理が数十行先
→ 読みづらく、把握しづらい。
jQueryの良くなかったところ • 複数の要素の描画に生のHTMLを書かないといけない 配列を操作するメソッドはある。 表示にはforで必死に回さないといけなくなる。
Vue.js の良かったところ • タグのようにコンポーネントを置ける
Vue.js の良かったところ • イベントの紐付けをタグに書くのでコードと要素の関連付けが理解 しやすい
Vue.js の良かったところ • 配列要素の描画が簡単
Vue.js の良かったところ • 配列要素の描画が簡単
Vue.jsいいな
これから使っていこう
おしまい