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
21
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
47
JSでギャルゲーをつくろう!
endohizumi
0
230
テレビを飲み込め! 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
250510 StepFunctionのテスト自動化始めました vol.1
east_takumi
1
210
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
gotok365
4
250
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
quiver
1
970
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
carta_engineering
0
27k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
740
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
140
dbtとリバースETLでデータ連携の複雑さに立ち向かう
morookacube
0
170
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
470
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
coconala_engineer
0
220
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2025年版)
infiniteloop_inc
6
18k
RubyKaigi NOC 近況 2025
sorah
1
780
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
lamodatech
0
2.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Site-Speed That Sticks
csswizardry
6
540
Code Reviewing Like a Champion
maltzj
523
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Optimizing for Happiness
mojombo
378
70k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
54
6.3k
Designing for humans not robots
tammielis
253
25k
Fireside Chat
paigeccino
37
3.4k
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いいな
これから使っていこう
おしまい