Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello V...
Search
Endo_Hizumi
December 11, 2019
Technology
0
150
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
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
9
JSでギャルゲーをつくろう!
endohizumi
0
96
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
77
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
270
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
180
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
850
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
120
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
77
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.1k
Other Decks in Technology
See All in Technology
ハイテク休憩
sat
PRO
2
140
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
MLOps の現場から
asei
6
630
UI State設計とテスト方針
rmakiyama
2
390
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
2
2.2k
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
Featured
See All Featured
A better future with KSS
kneath
238
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Speed Design
sergeychernyshev
25
670
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
For a Future-Friendly Web
brad_frost
175
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Designing for humans not robots
tammielis
250
25k
Statistics for Hackers
jakevdp
796
220k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
96
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
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いいな
これから使っていこう
おしまい