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
meetup_20211006_md
Search
rakus.matsumoto
October 07, 2021
Technology
2
1.3k
meetup_20211006_md
rakus.matsumoto
October 07, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
CDK Vibe Coding Fes
tomoki10
1
630
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
無理しない AI 活用サービス / #jazug
koudaiii
0
100
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
320
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Navigating Team Friction
lara
187
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Gamification - CAS2011
davidbonilla
81
5.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Side Projects
sachag
455
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Transcript
#RAKUSMeetup ©2021 RAKUS Co., Ltd. 20年物プロダクトの フロントエンドを 改善するための取り組み 株式会社ラクス フロントエンドエンジニア
松本 和馬
#RAKUSMeetup 松本 和馬 ◆お仕事 <経歴> 2021年4月まで(ラクス入社前) ・SIerでWeb系の受託開発 ・EC事業会社でアプリケーションエンジニア 2021年5月 ラクス入社
<ラクスでの担当業務> メール共有システム「 MailDealer」の フロントエンドを担当 新機能実装やフロントエンド改善に奮闘中 ◆プライベート <スキ> 我が子/ネイティブアプリ開発 /おつまみ自炊 <最近のマイブーム> 干し肉の作り方を動画で研究 ※冷蔵庫でパンチェッタ製造中
#RAKUSMeetup 目次 1. 担当プロダクト(MailDealer)の紹介 2. 見えてきたフロントエンドの課題 3. 課題解決に向けた取り組み 4. フロントエンドチームとしての
レガシー改善の取り組み
#RAKUSMeetup 1.担当プロダクト(MailDealer)の紹介
#RAKUSMeetup について https://www.maildealer.jp/ • メール共有・管理システム • お問い合わせメールを集中管理し会社やチームで共有できる • 約20年に渡り、継続開発している
#RAKUSMeetup 開発体制について これまでの開発体制 開発チーム ラクスベトナム 開発チーム + 2021年5月〜 フロントエンドチーム 「餅は餅屋」の精神で、分業による生産性向上を狙う
バックエンド領域 フロントエンド領域
#RAKUSMeetup 参画してわかったこと • 四半期毎に新機能をリリース ◦ 顧客要望に応えるため、スピーディに機能開発を続けている ◦ 売上シェアを広げるためにも、必要なサイクル • トレードオフとして、技術の最新化が遅れている
◦ バックエンドの改善は適宜実施されているが、 フロントエンドの改善は必要最低限で止まっている印象
#RAKUSMeetup 2.見えてきたフロントエンドの課題
#RAKUSMeetup 課題例1:廃止されたHTML仕様の残党 MailDealerの対応ブラウザ (2021年10月現在) Google Chrome、Microsoft Edge、Firefox 、Safari ※いずれも最新バージョン それなのに・・・
<font size="12" color="red">残党</font> <nobr>この部分は改行されません</nobr> HTML Living Standard に準拠させていきたい 緊急度は低いけど
#RAKUSMeetup 課題例2:秘伝のタレ = CSS 秘伝のタレのように継ぎ足しされてきたので・・・ CSS再設計 & AltCSS導入して保守しやすくしたい 緊急度は低いけど •
似たようなスタイルの乱立 • クラス名からどのUIを修飾しているのか連想できない • !important を !important で上書き !important !important 継ぎ足されるほど、保守性が低下していく
#RAKUSMeetup 課題例3:PHPとの結合度の高さ JSとPHPのコードを分離して開発効率を上げたい 緊急度は低いけど $js .= ‘ function W_chng_confirm(url1,url2){ if(window.confirm("{$gS[1]}")){
W_chng(url1,url2); } }’; 例:PHPに直書きされたJSコード • JSなのかPHPなのか瞬時に判断 できない • ユニットテストがし辛い • 参照ジャンプやシンタックスハイラ イトが効かない(※エディタによる) 開発効率が下がる
#RAKUSMeetup レガシー改善は必要なのか? このまま放置し続けても大丈夫? 機能開発 > レガシー改善 開発の優先度
#RAKUSMeetup レガシー改善は必要なのか? • このまま放置し続けるとまたレガシー化が進む • いつの間にか生産性が下がっている可能性がある • エンジニアのモチベーションも下がりかねない 売上貢献できる事業なので 数年先も継続的な機能開発が続くはず
前提
#RAKUSMeetup ラクスの行動指針の1つ 小さく試して大きく育てる Let’s try it!
#RAKUSMeetup 3.課題解決に向けた取り組み
#RAKUSMeetup 「課題:古いHTML仕様の残党」退治 • やること:代替案で置換していく ◦ そう、修正は簡単 <font size="12" color="red">残党</font> <span
class="c-msg--warn">残党</span> • ただし、修正対象箇所:6,000箇所 ◦ 影響範囲が広いので対象を絞って少しずつリファクタリング • もちろんテストは必要 ◦ 修正前後で見た目に差異がないことを担保する必要がある ◦ クロスブラウザで確認
#RAKUSMeetup 6,000箇所 × 4ブラウザ分のテストを 目視で確認していく・・・?
#RAKUSMeetup • 修正前後のスクリーンショットを比較し、 見た目に差異がないかをチェックするテスト ビジュアルリグレッションテストの試験導入 変更前のスクリーンショット 変更後のスクリーンショット 差分を検出
#RAKUSMeetup 今回使用したテストライブラリ ツール 説明 Playwright ヘッドレスブラウザを操作するための Node.jsライブラリ コードに従ってブラウザの自動操作や、スクリーンショットの収録 が可能 1つのテストコードでクロスブラウザの自動操作が可能
reg-suit 2つの画像を比較し、差分レポートを出力する Node.jsライブラリ
#RAKUSMeetup ビジュアルリグレッションテストの流れ テストコード作成 スクリーンショット収録 画像比較 &レポート出力 結果確認 Playwright reg-suit テストコードを作成する
テストコードを実行する reg-suit を実行してレポートを出力する 出力されたレポートをチェックし、合否を判定する STEP.1 STEP.2 STEP.3
#RAKUSMeetup ビジュアルリグレッションテストの効果 3割程度のテスト工数削減見込み 手動テストの場合の工数 ビジュアルリグレッションテストの工数 (内訳) 1ブラウザあたり3分 × 4ブラウザ 12分/テスト1件
8分30秒/テスト1件 (内訳) 1テストコード作成:8分 テスト結果確認:30秒
#RAKUSMeetup 今後も少しずつ安全に、改善を続けていく
#RAKUSMeetup 4.フロントエンドチームとしての レガシー改善の取り組み
#RAKUSMeetup フロントエンドチームの構成 フロントエンドチームのメンバ内訳 レガシー寄りの技術 モダン寄りの技術 技術スタック・課題感が似ている レガシーチームを発足 (今年7月)
#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ
#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ
#RAKUSMeetup 1.フロントエンド課題の共有と相互解決 • 週1回のチームMTG • 各プロダクトで発生したフロントエンドの課題を共有し、チームで解 決策を模索する プロダクトA の担当 単体試験で摘出できるバグが、結合試験で見つかっちゃって
プロダクトB の担当 プロダクトBでは〇〇観点の試験で摘出漏れを防いでるよ プロダクトA の担当 なるほど!取り入れてみる!
#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ
#RAKUSMeetup 2.成功例の水平展開 水平展開することで 効率的なレガシー改善を目指す プロダクトA の担当 JSとPHPを完全分離したら、頗る開発しやすくなったよ。 プロダクトB の担当 うちもやろうと思ってたんだよ!
効率的なリファクタリングの進め方とテスト方法を教えて!
#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ
#RAKUSMeetup 3.レガシーならではの技術力の底上げ • 新旧幅広いフロントエンド技術の習得 古めの技術例 新しめの技術例 HTML4.01 XHTML CSS2.1 HTML
Living Standard CSS Level 4 スキルマップの策定、定期的な勉強会開催 • バックエンド側の言語・フレームワークも理解
#RAKUSMeetup プロダクトの垣根を超えて 効率的にレガシー改善を目指す