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

React Shared Components とは何か

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

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

  • 企業画面

    • ヘッダー

    • サイドバー

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

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

  • ユーザー側

    • ヘッダー

    • フッター

背景

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

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

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

UI パッケージとの違い

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

やることとやらないこと

やること

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

やらないこと

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

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

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

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

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

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

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

ℹ Output destination directory: "."

// 追加したいパッケージ名を入力する
? Please enter package name. (e.g. shared-footer) shared-global-header

// テンプレートファイルが自動で出力される
Generated 17 files!
✔ packages/shared-global-header/src/SharedComponent.tsx
✔ packages/shared-global-header/src/index.tsx
✔ packages/shared-global-header/src/tests/SharedComponent.test.tsx
✔ packages/shared-global-header/src/index.stories.test.ts
✔ packages/shared-global-header/src/setupTest.ts
✔ packages/shared-global-header/stories/SharedComponent.stories.tsx
✔ packages/shared-global-header/package.json
✔ packages/shared-global-header/.gitignore
✔ packages/shared-global-header/.npmignore
✔ packages/shared-global-header/babel.config.js
✔ packages/shared-global-header/jest.config.js
✔ packages/shared-global-header/README.md
✔ packages/shared-global-header/tsconfig.json
✔ packages/shared-global-header/.storybook/main.js
✔ packages/shared-global-header/.storybook/manager-head.html
✔ packages/shared-global-header/.storybook/preview-head.html
✔ packages/shared-global-header/.storybook/webpack.config.js

話を聞きに行きたい

もっと知りたい

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

最終更新