加速するサービス展開を 支える共通 UI コンポーネント開発 ©RakSul,Inc. AllRights Reserved. 2021.05.13 Engineering Team Presentation powered by Builders Box

自己紹介 ©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

目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4

目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4

事業概要 ©RakSul,Inc. AllRights Reserved. 印刷・広告の シェアリングプラットフォーム 2013年3月開始 物流の シェアリングプラットフォーム 2015年12月開始 広告の プラットフォーム 2020年4月開始

ラクスルのビジネスモデル 伝統的な産業にテクノロジーを持ち込み産業構造を変え、 21世紀型へアップデート 既存産業 20世紀型 ラクスルによるプラットフォーム創造 21世紀型 企業ごとに 販売機能と 製造機能をもつ 製販一体 製販分離

本発表のスコープ ©RakSul,Inc. AllRights Reserved. 印刷・広告の シェアリングプラットフォーム 2013年3月開始 物流の シェアリングプラットフォーム 2015年12月開始 広告の プラットフォーム 2020年4月開始 今回はここのフロントエンドのお話です

● 日本、ベトナム(ホーチミン)、インド(ベンガルール)の3拠点 ● プロダクトごとにスクラムが存在し、アジャイルで開発 ● 拠点同士で完全に独立しているわけではなく、プロダクトごとに協業 エンジニア組織 ©RakSul,Inc. AllRights Reserved. 国内 78名 20名 (20.6稼働開始) 4名 (20.10稼働開始) ※ ベトナムオフィスの様子 ※ 人員数は2020年12月現在

目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4

ラクスルの事業フェーズ ©RakSul,Inc. AllRights Reserved. 一言で表すと... サブドメイン (*.raksul.com) での サービス立ち上げが急速に進んでいるフェーズ dm.raksul.com design.raksul.com enterprise.raksul.com and more ...

発生した課題 ©RakSul,Inc. AllRights Reserved. 他にも新規サービスを複数開発中

発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 ● 各サービスは基本的に印刷のラクスルのアカウントを利用する ● 各サブドメインサービスが「印刷のラクスル系列のサービスである」 認知を取りやすくし、デザインからブランディングを統一していこう という動き ● 一方、実装は各サービスのリポジトリで独自に行われていた ● そのためグローバルヘッダーやボタン、ポップアップなどの UI コンポーネントの品質を、 サービスを超えて担保することが難しくなってきていた ○ 加えて同じ UI の実装がサービス分あるため、改修が困難になってくる ○ 重複した UI を各プロダクトで実装・メンテナンスするのはコスト高

発生した課題 ©RakSul,Inc. AllRights Reserved. ● リリース時期によってヘッダーがバラバラ ● ボタンやモーダルのデザインもまちまち

発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) リポジトリ毎に実装が存在し、品質がバラバラな状態

発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) 全サービスのグローバルヘッダー を UI 改修したい！ サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) デザイナー

発生した課題 ©RakSul,Inc. AllRights Reserved. 各サービス毎のデザインのばらつき問題 dm.raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) 全サービスのグローバルヘッダー を UI 改修したい！ サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) デザイナー エンジニア陣 実装が各リポジトリで バラバラだから大変だし 品質も担保しづらい ...

目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. 発端はエンジニア・デザイナーの危機感から ● 前述した課題を解決するため、2020年1月頃から印刷のラクスルを担当する 一部のフロントエンドエンジニア・デザイナーで定例を実施 ● 共通 UI プロジェクト(当時仮称)の発足 ○ サービス要件に寄らない基礎的なコンポーネント (ボタン、モーダル、スナックバー、グ ローバルヘッダーなど)を private npm package として提供 ○ バラけがちな UI 実装を統一して管理し、各サービス毎の品質を担保する狙い ■ カラースキームも提供(サービス間で統一したいグレースケール等 ) ■ クロスブラウザ対応に関しても、サービス毎の品質差をなくす

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. raksul-common-ui 導入前 raksul.com dm.raksul.com design. raksul.com サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) new repo サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) サービス共通 UI 群 (ボタン、グローバル ヘッダーなど) リポジトリ毎に実装が存在し、品質がバラバラな状態

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 で一括管理

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 とは別に、開発者向けコンポーネントカタログも準備 (後述)

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved. デザイナーとの連携 ● ツールは Adobe XD を使用 ○ 印刷事業のデザインツールはほぼ XD に統一 ● CSS のカスタムプロパティ変数名を XD 側でも定義 ○ XD 上でカラーを参照する際に、変数名で参照出来るように ○ 開発時に毎回実際の色と変数を関連付ける必要がなくラク ○ エンジニアとデザイナーとの共通言語として変数名を使える

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.

raksul-common-ui プロジェクト発足 ©RakSul,Inc. AllRights Reserved.

目次 ©RakSul,Inc. AllRights Reserved. ラクスルの事業・組織 事業フェーズと直面した課題 raksul-common-ui プロジェクト 1 2 3 プロジェクトの成果と今後の課題 4

プロジェクトの成果 ©RakSul,Inc. AllRights Reserved. ● 各新規プロダクトの UI 実装における品質差の解消 ○ UI / UX の統一に一定貢献 ● 煩雑な UI コンポーネントの初期実装コストを削減 ○ Nuxt.js の場合 npm install してほんの少し config を書くだけで使える ○ サービスの本質的な価値部分によりフォーカスできるように 🎉 ● デザイナーとのコミュニケーション効率アップ ○ 「raksul-common-ui の Storybook にあるものが実装のすべてである」 という共通認識 ○ 「このコンポーネントは実装されているんだっけ？」などの不毛な コミュニケーション減

今後の課題 ©RakSul,Inc. AllRights Reserved. 一旦ミニマムで作りきったため、今後は足元を固めていく予定 ● コントリビューションやメンテナンスフローの整備 ○ 事業部のフロントエンド + グローバルメンバーとの協業 ● 継続的なメンテナンスやバージョンアップ ○ ロードマップやマイルストーンの整備 ○ まだまだ始まったばかりのプロジェクトだが、フェードアウトしないように ● CI や自動テストの整備 ○ Jest による snapshot テスト、コンポーネントのテスト拡充 ● a11y 対応 ○ checkbox や radio 周りが不十分なので、随時対応していく

イベント・採用情報 ©RakSul,Inc. AllRights Reserved. We are hiring ! ● フロントエンドエンジニア ● サーバーサイドエンジニア ● QAエンジニア ● テックリード候補 ● エンジニアリングマネージャー 候補 募集職種一覧はこちら

今後のイベント イベント・採用情報 ©RakSul,Inc. AllRights Reserved. 5月18日　19時～　Raksul Tech Talk 5月20日　19時～　UX Bridge vol.10 最新の情報は SNSをご覧ください @raksuldev 最新の情報はTwitterから @raksuldev

© RakSul,Inc. All Rights Reserved. ©RakSul,Inc. AllRights Reserved.