meetup_20211006_md - Speaker Deck

meetup_20211006_md

Slide 1

Slide 1 text

Slide 2

Slide 2 text

#RAKUSMeetup 松本和馬 ◆お仕事＜経歴＞ 2021年4月まで（ラクス入社前）　・SIerでWeb系の受託開発　・EC事業会社でアプリケーションエンジニア 2021年5月ラクス入社＜ラクスでの担当業務＞メール共有システム「 MailDealer」のフロントエンドを担当新機能実装やフロントエンド改善に奮闘中 ◆プライベート＜スキ＞我が子/ネイティブアプリ開発 /おつまみ自炊＜最近のマイブーム＞干し肉の作り方を動画で研究 ※冷蔵庫でパンチェッタ製造中

Slide 3

Slide 3 text

#RAKUSMeetup 目次 1. 担当プロダクト（MailDealer）の紹介 2. 見えてきたフロントエンドの課題 3. 課題解決に向けた取り組み 4. フロントエンドチームとしてのレガシー改善の取り組み

Slide 4

Slide 4 text

#RAKUSMeetup 1.担当プロダクト（MailDealer）の紹介

Slide 5

Slide 5 text

#RAKUSMeetup 　　　　　について https://www.maildealer.jp/ ● メール共有・管理システム ● お問い合わせメールを集中管理し会社やチームで共有できる ● 約20年に渡り、継続開発している

Slide 6

Slide 6 text

#RAKUSMeetup 開発体制についてこれまでの開発体制開発チームラクスベトナム開発チーム＋ 2021年5月〜フロントエンドチーム「餅は餅屋」の精神で、分業による生産性向上を狙うバックエンド領域フロントエンド領域

Slide 7

Slide 7 text

#RAKUSMeetup 参画してわかったこと ● 四半期毎に新機能をリリース ○ 顧客要望に応えるため、スピーディに機能開発を続けている ○ 売上シェアを広げるためにも、必要なサイクル ● トレードオフとして、技術の最新化が遅れている ○ バックエンドの改善は適宜実施されているが、フロントエンドの改善は必要最低限で止まっている印象

Slide 8

Slide 8 text

#RAKUSMeetup 2.見えてきたフロントエンドの課題

Slide 9

Slide 9 text

#RAKUSMeetup 課題例1：廃止されたHTML仕様の残党 MailDealerの対応ブラウザ（2021年10月現在） Google Chrome、Microsoft Edge、Firefox 、Safari ※いずれも最新バージョンそれなのに・・・残党この部分は改行されません HTML Living Standard に準拠させていきたい緊急度は低いけど

Slide 10

Slide 10 text

#RAKUSMeetup 課題例2：秘伝のタレ = CSS 秘伝のタレのように継ぎ足しされてきたので・・・ CSS再設計 & AltCSS導入して保守しやすくしたい緊急度は低いけど ● 似たようなスタイルの乱立 ● クラス名からどのUIを修飾しているのか連想できない ● !important を !important で上書き !important !important 継ぎ足されるほど、保守性が低下していく

Slide 11

Slide 11 text

#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なのか瞬時に判断できない ● ユニットテストがし辛い ● 参照ジャンプやシンタックスハイライトが効かない（※エディタによる）開発効率が下がる

Slide 12

Slide 12 text

#RAKUSMeetup レガシー改善は必要なのか？このまま放置し続けても大丈夫？機能開発＞レガシー改善開発の優先度

Slide 13

Slide 13 text

#RAKUSMeetup レガシー改善は必要なのか？ ● このまま放置し続けるとまたレガシー化が進む ● いつの間にか生産性が下がっている可能性がある ● エンジニアのモチベーションも下がりかねない売上貢献できる事業なので数年先も継続的な機能開発が続くはず前提

Slide 14

Slide 14 text

#RAKUSMeetup ラクスの行動指針の1つ小さく試して大きく育てる Let’s try it!

Slide 15

Slide 15 text

#RAKUSMeetup 3.課題解決に向けた取り組み

Slide 16

Slide 16 text

#RAKUSMeetup 「課題：古いHTML仕様の残党」退治 ● やること：代替案で置換していく ○ そう、修正は簡単残党残党 ● ただし、修正対象箇所：6,000箇所 ○ 影響範囲が広いので対象を絞って少しずつリファクタリング ● もちろんテストは必要 ○ 修正前後で見た目に差異がないことを担保する必要がある ○ クロスブラウザで確認

Slide 17

Slide 17 text

#RAKUSMeetup 6,000箇所 × 4ブラウザ分のテストを目視で確認していく・・・？

Slide 18

Slide 18 text

#RAKUSMeetup ● 修正前後のスクリーンショットを比較し、見た目に差異がないかをチェックするテストビジュアルリグレッションテストの試験導入変更前のスクリーンショット変更後のスクリーンショット差分を検出

Slide 19

Slide 19 text

#RAKUSMeetup 今回使用したテストライブラリツール説明 Playwright ヘッドレスブラウザを操作するための Node.jsライブラリコードに従ってブラウザの自動操作や、スクリーンショットの収録が可能 1つのテストコードでクロスブラウザの自動操作が可能 reg-suit 2つの画像を比較し、差分レポートを出力する Node.jsライブラリ

Slide 20

Slide 20 text

#RAKUSMeetup ビジュアルリグレッションテストの流れテストコード作成スクリーンショット収録画像比較＆レポート出力結果確認 Playwright reg-suit テストコードを作成するテストコードを実行する reg-suit を実行してレポートを出力する出力されたレポートをチェックし、合否を判定する STEP.1 STEP.2 STEP.3

Slide 21

Slide 21 text

#RAKUSMeetup ビジュアルリグレッションテストの効果 3割程度のテスト工数削減見込み手動テストの場合の工数ビジュアルリグレッションテストの工数（内訳） 1ブラウザあたり3分 × 4ブラウザ 12分/テスト1件 8分30秒/テスト1件（内訳） 1テストコード作成：8分テスト結果確認：30秒

Slide 22

Slide 22 text

#RAKUSMeetup 今後も少しずつ安全に、改善を続けていく

Slide 23

Slide 23 text

#RAKUSMeetup 4.フロントエンドチームとしてのレガシー改善の取り組み

Slide 24

Slide 24 text

#RAKUSMeetup フロントエンドチームの構成フロントエンドチームのメンバ内訳レガシー寄りの技術モダン寄りの技術技術スタック・課題感が似ているレガシーチームを発足（今年7月）

Slide 25

Slide 25 text

#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ

Slide 26

Slide 26 text

#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ

Slide 27

Slide 27 text

#RAKUSMeetup 1.フロントエンド課題の共有と相互解決 ● 週1回のチームMTG ● 各プロダクトで発生したフロントエンドの課題を共有し、チームで解決策を模索するプロダクトA の担当単体試験で摘出できるバグが、結合試験で見つかっちゃってプロダクトB の担当プロダクトBでは〇〇観点の試験で摘出漏れを防いでるよプロダクトA の担当なるほど！取り入れてみる！

Slide 28

Slide 28 text

#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ

Slide 29

Slide 29 text

#RAKUSMeetup 2.成功例の水平展開水平展開することで効率的なレガシー改善を目指すプロダクトA の担当 JSとPHPを完全分離したら、頗る開発しやすくなったよ。プロダクトB の担当うちもやろうと思ってたんだよ！効率的なリファクタリングの進め方とテスト方法を教えて！

Slide 30

Slide 30 text

#RAKUSMeetup レガシーチームの取り組み 1. フロントエンド課題の共有と相互解決 2. 成功例の水平展開 3. レガシーならではの技術力の底上げ

Slide 31

Slide 31 text

#RAKUSMeetup 3.レガシーならではの技術力の底上げ ● 新旧幅広いフロントエンド技術の習得古めの技術例新しめの技術例 HTML4.01 XHTML CSS2.1 HTML Living Standard CSS Level 4 スキルマップの策定、定期的な勉強会開催 ● バックエンド側の言語・フレームワークも理解

Slide 32

Slide 32 text

#RAKUSMeetup プロダクトの垣根を超えて効率的にレガシー改善を目指す