search

Web アプリ共通ライブラリ "React Shared Component" の紹介

hashtag
React Shared Components とは何か

Wantedly のヘッダーなど、共通で使われる React コンポーネントを提供するパッケージです。

2021/1 時点では、以下のコンポーネントを提供しています。

  • 企業画面

    • ヘッダー

    • サイドバー

    • オンボーディングタスク

    • ストーリーのエディター

  • ユーザー側

    • ヘッダー

    • フッター

hashtag
背景

Wantedly のフロントエンドは React で書かれており、フロントエンドコードは複数のリポジトリに分かれています。 元々は一つのモノリシックなリポジトリでフロントエンドも管理していましたが、新規で作成するページの大部分は新しいリポジトリで書かれています。 そして、この新しいフロントエンドのリポジトリも、企業側管理画面、ユーザー側画面とで分かれています。

一方で、ヘッダーやサイドバー、フッターなどといったナビゲーションなど、リポジトリ間で共通の UI があります。 実装が重複しないよう、それらを Wantedly 共通の React コンポーネントライブラリに切り出しています。

以下は実例です。これらのページは異なるリポジトリで実装されてます。 一方、青色で囲われたヘッダーは共通なので、ライブラリの中で実装され、それを各リポジトリで呼び出しています。

例

hashtag
UI パッケージとの違い

UI パッケージは、デザインシステムで規定されている全プロダクト共通の UI システムやコンポーネントを提供するライブラリです。 一方で、 react-shared-components は、 Wantedly の機能を提供するライブラリです。

hashtag
やることとやらないこと

hashtag
やること

  • 複数のリポジトリで使用するコンポーネントの提供

hashtag
やらないこと

  • 単一リポジトリでしか使用しないコンポーネントの提供

  • デザインシステムで規定されているコンポーネントの提供

hashtag
パッケージとしての提供粒度

基本的には、一つの共通コンポーネントを一つのパッケージとして提供します。 例えば、ヘッダーのパッケージ、フッターのパッケージなど。

単一パッケージで提供するのではなく複数のパッケージに切り分ける理由は、使わないコンポーネントを install しないためです。 そのため、 monorepo で、React Shared Components は管理されています。

hashtag
新規コンポーネントを追加する

yarn new-package コマンドが用意されています。 追加したいパッケージを入力することで、パッケージの追加に必要な設定ファイルなどが自動的に生成されます。

hashtag
話を聞きに行きたい

hashtag
もっと知りたい

前へWeb アプリのデザインシステムライブラリ次へモバイルアプリのアーキテクチャ

最終更新