RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

【Meetup】SaaSプロダクトのフロントエンド/Vue.js、React、TypeScript、E2Eテスト

f:id:tech-rakus:20201029201914p:plain

はじめに

今回は10/28開催のラクスMeetupSaaSプロダクトのフロントエンド/Vue.js、React、TypeScript、E2Eテスト』の様子をお届けします!
ラクスがこれまで開催してまいりましたイベントの中でも最多の申し込みをいただき、ラクスエンジニア3名が日々のフロントエンド技術の取り組みを堂々と発表させていただきました。

イベントテーマ概要

今回のMeetupではラクスが展開する新旧3種類のサービスから、各サービスにおけるフロントエンドに関する取り組みを発信させていただきました。
10月にリリースしたばかりの楽楽勤怠、急速に利用者が拡大するチャットディーラー、すでに数多くの利用者を抱える歴史ある楽楽明細より、それぞれ開発をリードするエンジニア達が登壇させていただきました。
それぞれの局面を迎える3サービスでフロントエンド技術をどのように活用しながらサービスを成長させているか、またモダンなフロントエンド技術をどのように大規模SaaSに取り入れていくかをメインテーマとした登壇となりました。

発表の紹介

それではここから各発表内容と資料を共有させていただきます!

テスト稼働の削減とフロントエンドの品質担保を行うE2Eテスト

まずはチャットディーラーのフロントエンド開発とバックエンド開発で横断的に活躍する川又が、フロントエンドの効率的な品質担保策として導入したE2Eテストを紹介させていただきました。
そのサービスの特性上、大前提となる自動応答処理(ユーザから質問に対し、想定した回答を返す)を担保するのが非常に重要なチャットディーラー。
かつては多大なる工数によってテストを行い、その品質を担保していました。
今回ご紹介しましたのはそんな状況を回避すべく、Puppeteerを中心としたE2Eテストです。
同じ悩みに直面している方には、川又の発表から解決のヒントを掴んでいただければと思います。

speakerdeck.com

Vue.js + TypeScriptによる新規サービス開発ふりかえり

10月にリリースされたばかりのラクス最新のサービスである楽楽勤怠について、リリースに至るまでの約1年間の振り返りを共有させていただきました。
ラクス初のフロントエンド・バックエンド分離の体制、またVue.jsとTypeScriptを中心としたモダンなフロントエンド技術での開発、この2つの側面から良かった点・苦しんだ点が詳細に紹介されています。
ラクス初のフロントエンドエンジニアであり、フロントエンド組織の拡大にも従事する北嶋がこれらの学びを今後どう活かし、ラクスのサービスの発展に挑戦していくか注目です。

speakerdeck.com

息の長いサービスのフロントエンドを少しずつ改善していく営み

最後に楽楽明細のリードエンジニアとして中心的に活躍する三田より、2010年リリースのサービスのフロントエンドを改善していく取り組みを紹介させていただきました。
リリースからこれまでの10年以上に、今後10年もより加速度的に利用者が拡大することを見込み、楽楽明細では現状の問題点を分析しながらフロントエンドの改善に取り組んでいます。
モダンな技術の導入には技術・組織・人などの課題をクリアしていく必要がありますが、ここまでの改善に至る地道な取り組みが紹介されています。
ご参加の方の中には、ラクスが組織的に取り組む技術ロードマップについて関心を持っていただけた方もいらっしゃったようです。
ぜひとも多くのエンジニアの方のご参考としていただきたい内容です。

speakerdeck.com

おわりに

ラクスによるフロントエンドの取り組み、参考にしていただける知見はありましたでしょうか?
多くの方に支持いただける大規模SaaSが故の制約と闘いつつ、それでも技術の進化を止めないラクスの戦略を感じ取っていただけたのではないかと思います。
今後もラクスMeetupでは日々のエンジニアの取り組みを発信してまいりますので、次回もぜひご参加いただけますと幸いです。

そして直近ですが、フロントエンドがテーマのイベントが予定されています!
前回の実施の際にも多くの方にご参加いただけ、盛況なイベントとなりました。
今回も面白く有益な場となりますので、是非ご参加いただけますと幸いです!

rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.