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.4k
meetup_20211006_md
rakus.matsumoto
October 07, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
220
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
140
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
24
17k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1k
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
about #74462 go/token#FileSet
tomtwinkle
1
370
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
190
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
210
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
320
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Producing Creativity
orderedlist
PRO
347
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Unsuck your backbone
ammeep
671
58k
Navigating Team Friction
lara
189
15k
How GitHub (no longer) Works
holman
315
140k
Side Projects
sachag
455
43k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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 プロダクトの垣根を超えて 効率的にレガシー改善を目指す