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
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
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
75
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
250
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
160
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
800
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
99
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
75
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.1k
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
130
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
93
Other Decks in Technology
See All in Technology
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
スレットハンティングについて知っておきたいこと
hacket
0
130
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Done Done
chrislema
179
15k
Infographics Made Easy
chrislema
238
18k
Debugging Ruby Performance
tmm1
71
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
RailsConf 2023
tenderlove
16
720
Scaling GitHub
holman
458
140k
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いいな
これから使っていこう
おしまい