加速するサービス展開を支える共通 UI コンポーネント開発 / Common UI Component Development supporting accelerated Services

■イベント

【Engineering Team Presentation】各社のサービス品質を支えるベストプラクティス

https://sansan.connpass.com/event/209357/

■登壇概要

タイトル：加速するサービス展開を支える共通 UI コンポーネント開発

発表者：ラクスル株式会社　ラクスル事業本部 システム開発部（ラクスル） RIU開発5G
フロントエンドエンジニア　菅野 彬

▼Builders Box

https://buildersbox-online.com/

Transcript

1. 加速するサービス展開を 支える共通 UI コンポーネント開発 ©RakSul,Inc. AllRights Reserved. 2021.05.13 Engineering Team Presentation powered by Builders Box
2. 自己紹介 ©RakSul,Inc. AllRights Reserved. ラクスル株式会社 フロントエンドエンジニア ラクスル事業本部 システム開発部 RIU開発5G 2019.01 ラクスルへジョイン 2019.02 ~ 2021.02 印刷事業やノベルティ事業の フロントエンドを担当 2021.03 ~ 新規プロダクト開発のフロントエンドを担当 趣味: ギター、ゲーム(最近は FF14 とグラブル) 菅野 彬 Akira Kanno GitHub: https://github.com/teinen Twitter: https://twitter.com/tei_nen
3. 目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4
4. 目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4
5. 事業概要 ©RakSul,Inc. AllRights Reserved. 印刷・広告の シェアリングプラットフォーム 2013年3月開始 物流の シェアリングプラットフォーム 2015年12月開始 広告の プラットフォーム 2020年4月開始
6. ラクスルのビジネスモデル 伝統的な産業にテクノロジーを持ち込み産業構造を変え、 21世紀型へアップデート 既存産業 20世紀型 ラクスルによるプラットフォーム創造 21世紀型 企業ごとに 販売機能と 製造機能をもつ 製販一体 製販分離
7. 本発表のスコープ ©RakSul,Inc. AllRights Reserved. 印刷・広告の シェアリングプラットフォーム 2013年3月開始 物流の シェアリングプラットフォーム 2015年12月開始 広告の プラットフォーム 2020年4月開始 今回はここのフロントエンドのお話です
8. • 日本、ベトナム(ホーチミン)、インド(ベンガルール)の3拠点 • プロダクトごとにスクラムが存在し、アジャイルで開発 • 拠点同士で完全に独立しているわけではなく、プロダクトごとに協業 エンジニア組織 ©RakSul,Inc. AllRights Reserved. 国内 78名 20名 (20.6稼働開始) 4名 (20.10稼働開始) ※ ベトナムオフィスの様子 ※ 人員数は2020年12月現在
9. 目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4
10. ラクスルの事業フェーズ ©RakSul,Inc. AllRights Reserved. 一言で表すと... サブドメイン (*.raksul.com) での サービス立ち上げが急速に進んでいるフェーズ dm.raksul.com design.raksul.com enterprise.raksul.com and more ...
11. 発生した課題 ©RakSul,Inc. AllRights Reserved. 他にも新規サービスを複数開発中
12. 発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 • 各サービスは基本的に印刷のラクスルのアカウントを利用する • 各サブドメインサービスが「印刷のラクスル系列のサービスである」 認知を取りやすくし、デザインからブランディングを統一していこう という動き • 一方、実装は各サービスのリポジトリで独自に行われていた • そのためグローバルヘッダーやボタン、ポップアップなどの UI コンポーネントの品質を、 サービスを超えて担保することが難しくなってきていた ◦ 加えて同じ UI の実装がサービス分あるため、改修が困難になってくる ◦ 重複した UI を各プロダクトで実装・メンテナンスするのはコスト高
13. 発生した課題 ©RakSul,Inc. AllRights Reserved. • リリース時期によってヘッダーがバラバラ • ボタンやモーダルのデザインもまちまち
14. 発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) リポジトリ毎に実装が存在し、品質がバラバラな状態
15. 発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) 全サービスのグローバルヘッダー を UI 改修したい！ サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) デザイナー
16. 発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 dm.raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) 全サービスのグローバルヘッダー を UI 改修したい！ サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) デザイナー エンジニア陣 実装が各リポジトリで バラバラだから大変だし 品質も担保しづらい ...
17. 目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4
18. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. 発端はエンジニア・デザイナーの危機感から • 前述した課題を解決するため、2020年1月頃から印刷のラクスルを担当する 一部のフロントエンドエンジニア・デザイナーで定例を実施 • 共通 UI プロジェクト(当時仮称)の発足 ◦ サービス要件に寄らない基礎的なコンポーネント (ボタン、モーダル、スナックバー、グ ローバルヘッダーなど)を private npm package として提供 ◦ バラけがちな UI 実装を統一して管理し、各サービス毎の品質を担保する狙い ▪ カラースキームも提供(サービス間で統一したいグレースケール等 ) ▪ クロスブラウザ対応に関しても、サービス毎の品質差をなくす
19. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. raksul-common-ui 導入前 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) リポジトリ毎に実装が存在し、品質がバラバラな状態
20. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. raksul-common-ui 導入後 raksul.com dm.raksul.com design. raksul.com raksul-common-ui new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) $ npm install raksul-common-ui raksul-common-ui で一括管理
21. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. 技術スタックや仕様など • 2021年5月現在、以下のフレームワーク等を使用 ◦ Vue.js v2.6.11 ◦ TypeScript v3.9.3 ◦ Storybook v6.1.21 ◦ eslint v6.7.2 ◦ prettier v1.19.1 • IE11 を含む主要ブラウザ対応済 (印刷のラクスルの推奨環境準拠 ) • エンジニア以外も UI を確認しやすいよう、社内環境に Storybook を 静的ホスティング (Amazon S3) • Storybook とは別に、開発者向けコンポーネントカタログも準備 (後述)
22. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. デザイナーとの連携 • ツールは Adobe XD を使用 ◦ 印刷事業のデザインツールはほぼ XD に統一 • CSS のカスタムプロパティ変数名を XD 側でも定義 ◦ XD 上でカラーを参照する際に、変数名で参照出来るように ◦ 開発時に毎回実際の色と変数を関連付ける必要がなくラク ◦ エンジニアとデザイナーとの共通言語として変数名を使える
23. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.
24. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.
25. raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.
26. 目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4
27. プロジェクトの成果 ©RakSul,Inc. AllRights Reserved. • 各新規プロダクトの UI 実装における品質差の解消 ◦ UI / UX の統一に一定貢献 • 煩雑な UI コンポーネントの初期実装コストを削減 ◦ Nuxt.js の場合 npm install してほんの少し config を書くだけで使える ◦ サービスの本質的な価値部分によりフォーカスできるように 🎉 • デザイナーとのコミュニケーション効率アップ ◦ 「raksul-common-ui の Storybook にあるものが実装のすべてである」 という共通認識 ◦ 「このコンポーネントは実装されているんだっけ？」などの不毛な コミュニケーション減
28. 今後の課題 ©RakSul,Inc. AllRights Reserved. 一旦ミニマムで作りきったため、今後は足元を固めていく予定 • コントリビューションやメンテナンスフローの整備 ◦ 事業部のフロントエンド + グローバルメンバーとの協業 • 継続的なメンテナンスやバージョンアップ ◦ ロードマップやマイルストーンの整備 ◦ まだまだ始まったばかりのプロジェクトだが、フェードアウトしないように • CI や自動テストの整備 ◦ Jest による snapshot テスト、コンポーネントのテスト拡充 • a11y 対応 ◦ checkbox や radio 周りが不十分なので、随時対応していく
29. イベント・採用情報 ©RakSul,Inc. AllRights Reserved. We are hiring ! • フロントエンドエンジニア • サーバーサイドエンジニア • QAエンジニア • テックリード候補 • エンジニアリングマネージャー 候補 募集職種一覧はこちら
30. 今後のイベント イベント・採用情報 ©RakSul,Inc. AllRights Reserved. 5月18日　19時～　Raksul Tech Talk 5月20日　19時～　UX Bridge vol.10 最新の情報は SNSをご覧ください @raksuldev 最新の情報はTwitterから @raksuldev
31. © RakSul,Inc. All Rights Reserved. ©RakSul,Inc. AllRights Reserved.