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
2
JSでギャルゲーをつくろう!
endohizumi
0
43
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
75
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
260
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
160
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
830
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
110
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
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
業務ヒアリングと知識の呪い
tamai_63
0
130
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
2
160
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
1
230
クレジットカードを製造する技術
yutadayo
70
35k
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
310
ドメインと向き合う - 旅行予約編
hidenorigoto
4
530
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
5
950
Oracle Cloud Infrastructure:2024年9月度サービス・アップデート
oracle4engineer
PRO
0
370
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
560
OPENLOGI Company Profile
hr01
0
53k
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
How to name files
jennybc
77
98k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
210
Side Projects
sachag
452
42k
What's new in Ruby 2.0
geeforr
341
31k
A Tale of Four Properties
chriscoyier
155
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
560
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
Agile that works and the tools we love
rasmusluckow
327
21k
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いいな
これから使っていこう
おしまい