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
Vue.js は裏切らない / UIT#5
Search
Yuji Yamaguchi
November 29, 2018
Programming
1
1.9k
Vue.js は裏切らない / UIT#5
Yuji Yamaguchi
November 29, 2018
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
強みを伸ばすキャリアデザイン
yug1224
0
200
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
51
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
66
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
570
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
21
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
220
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
740
DX向上委員会 / 20220922_dxhacklt
yug1224
1
160
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.3k
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
0
190
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
180
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
490
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.8k
Teambox: Starting and Learning
jrom
128
8.4k
What's new in Ruby 2.0
geeforr
337
31k
The Mythical Team-Month
searls
215
42k
Navigating Team Friction
lara
177
13k
Happy Clients
brianwarren
91
6.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Unsuck your backbone
ammeep
662
57k
Faster Mobile Websites
deanohume
297
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Building an army of robots
kneath
300
41k
RailsConf 2023
tenderlove
2
530
Transcript
Vue.js は裏切らない 2018/11/29 UIT#5 Yuji Yamaguchi
自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ ▸ 職種 ▸ フロントエンドエンジニア
▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発 ▸ 横断フロントエンドチーム 2
3 今日話すこと
飲食店向け予約台帳アプリ:レストランボード 4
5 独自フレームワークを Vue.js で置き換えている話
Vue.js で置き換えている話 ▸ 独自フレームワークについて ▸ Vue.js 導入前にやったこと ▸ 良かったこと /
悪かったこと ▸ まとめ 6
どんな独自フレームワーク? ▸ jQuery 製、2014年末頃に誕生 ▸ Babelify で ES2015 化、 MorphDOM
で 差分レンダリング を実現 ▸ Template に Model を渡すとレンダリングし、 Selector と Function を渡すとバインドする MVVM 7
入力値を表示する場合 8
9 完成度は高いが 今後の継続性に不安...
まずは足元を整えることから開始 ▸ Browserify を webpack に ▸ Grunt を Gulp
/ npm script に ▸ JSLint を ESLint / Prettier に ▸ Mocha を Jest に ▸ $.Deferred を Promise(bluebird)に ▸ and more... 10
開発の歴史 11 2014/12 2016/10 2017/10 2018/10 2015/4 独自FW誕生 レストランボード 開発開始
脱Browserify 脱Grunt ESLint Jest Prettier Promise Vue.js async / await 足元の整理に二年弱くらい
Vue.js 導入時に心掛けたこと ▸ 小さく移行する ▸ Drastic に変えない ▸ 画面毎や部品毎、 Molecules
や Atoms から導入 ▸ 案件で触る部分だけ、リファクタリングの粒度にとどめる ▸ 移行で I/F が変わらないことが大事 ▸ レガシーコードの ロジックは資産、できるだけそのまま使う 12
13 導入による大きなインシデントは いまのところなし!
Vue.js 導入で良かったこと ▸ 学習曲線が緩い ▸ バックエンドからの転向組でも立ち上がりがスムーズだった ▸ template, script, style
の SFC はわかりやすい ▸ 誰が書いても それなり に書ける ▸ 人材が少ない中で 誰でもそれなり はすごく嬉しい 14
Vue.js 導入で難しかったこと ▸ 自由にできすぎる... ▸ watch or computed ? created
or mounted ? ▸ ついでに新しい技術等も一緒に入れようとして影響が肥大化する ▸ やらないことを決める のが大事 ▸ 秩序とは制約の上に成り立つ 15
現状の導入比率 16 59% 41% 60画面中25画面で導入済み
17 まとめ
まとめ 利益を出しているサービス開発において 継続性はものすごく重要で 誰でもそれなりに使えるFWはありがたい やらないことを決めるのがすごく難しいが 新旧が共存しながら移行できるのは Vue.js の柔軟性があってこそ 18
19 Vue.js は裏切らない!
20 EOF