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
170
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でギャルゲーをつくろう!(第3版)
endohizumi
0
27
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
47
JSでギャルゲーをつくろう!
endohizumi
0
240
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
84
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
290
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
200
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
890
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
130
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
81
Other Decks in Technology
See All in Technology
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
140
インラインRBSコメントに鯛pe checkersもニッコリ
sansantech
PRO
2
230
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
530
さくらのクラウド 開発の挑戦とその舞台裏
kazeburo
0
270
撤退危機からのピボット : 4年目エンジニアがリードする TypeScript で挑む事業復活 / crisis-to-pivot-4th-year-engineer-ts-relaunch
carta_engineering
2
130
KubeCon + CloudNativeCon Europe 2025 Recap: The GPUs on the Bus Go 'Round and 'Round / Kubernetes Meetup Tokyo #70
pfn
PRO
0
170
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
740
SONiCにて使用されているSAIの実際
sonic
0
350
20250514 1Passwordを使い倒す道場 vol.1
east_takumi
0
160
GrafanaをClaude DesktopからMCPで触ってみた
hamadakoji
0
1.3k
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
bengo4com
1
230
AIエージェントのオブザーバビリティについて
yunosukey
1
430
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Code Reviewing Like a Champion
maltzj
523
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Thoughts on Productivity
jonyablonski
69
4.6k
The Invisible Side of Design
smashingmag
299
50k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
24
2.8k
Designing Experiences People Love
moore
142
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
GraphQLとの向き合い方2022年版
quramy
46
14k
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いいな
これから使っていこう
おしまい