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
2.2k
Vue.js は裏切らない / UIT#5
Yuji Yamaguchi
November 29, 2018
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
4k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
510
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
130
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
160
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
1k
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
110
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
310
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
940
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
160
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.4k
Rancher と Terraform
fufuhu
2
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
Kiroで始めるAI-DLC
kaonash
2
560
Testing Trophyは叫ばない
toms74209200
0
720
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.9k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
個人軟體時代
ethanhuang13
0
310
為你自己學 Python - 冷知識篇
eddie
1
340
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Side Projects
sachag
455
43k
Visualization
eitanlees
148
16k
Automating Front-end Workflow
addyosmani
1370
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Facilitating Awesome Meetings
lara
55
6.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
89
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
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