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 Vue.js
Search
Endo_Hizumi
December 11, 2019
Technology
0
140
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
73
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
220
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
150
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
760
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
86
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
75
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
960
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
120
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
81
Other Decks in Technology
See All in Technology
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
AMLD 2024 - Build Your Own GPT
donlelef
1
260
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
依存ライブラリはどこに?
takesection
0
110
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
2.9k
バッチ処理のSLOをどう設計するか
rynsuke
7
560
任意コード実行の原理
ffri
0
170
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Facilitating Awesome Meetings
lara
39
5.5k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Building Adaptive Systems
keathley
29
1.8k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Designing Experiences People Love
moore
135
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Invisible Customer
myddelton
114
12k
What the flash - Photography Introduction
edds
64
11k
Debugging Ruby Performance
tmm1
68
11k
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いいな
これから使っていこう
おしまい