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
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
23
12k
強みを伸ばすキャリアデザイン
yug1224
3
490
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
120
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
140
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
970
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
97
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
300
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
930
DX向上委員会 / 20220922_dxhacklt
yug1224
1
220
Other Decks in Programming
See All in Programming
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
0
350
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
階層化自動テストで開発に機動力を
ickx
1
410
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
210
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Porting a visionOS App to Android XR
akkeylab
0
910
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
130
Featured
See All Featured
Building an army of robots
kneath
306
45k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Music & Morning Musume
bryan
46
6.7k
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