Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
Endo_Hizumi
December 11, 2019
Technology
0
110
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
64
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
170
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
110
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
630
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
64
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
66
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
790
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
77
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
72
Other Decks in Technology
See All in Technology
SSMパラメーターストアでクロススタック参照の罠を回避する
shuyakinjo
0
100
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.1k
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
150
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
270
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
280
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.3k
証明書って何だっけ? 〜AWSの中間CA移行に備える〜
minorun365
3
2.1k
ChatGPT for Hacking
anugrahsr
0
4.4k
re:Invent2022 前後の Amazon EventBridge のアップデートを踏まえつつ、情シスの仕事をより楽しくしたい話。 / EventBridge for Information Systems Department
_kensh
2
720
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
160
組織に対してSREを適用するとどうなるか
kuniim
7
2.7k
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
240
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
35
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
Done Done
chrislema
178
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
580
Documentation Writing (for coders)
carmenintech
51
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
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いいな
これから使っていこう
おしまい