> For the complete documentation index, see [llms.txt](https://docs.wantedly.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wantedly.dev/fields/apps/react-shared-components.md).

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

## React Shared Components とは何か

React Shared Components は以下の2つのパッケージ提供します

* **shared components**: v1\~v3 も含めて複数箇所で共有する Frontend v4 の技術をベースとしたコンポーネント
* **frontendx**: Frontend v4 の各リポジトリ間で共有される React Hooks 、ユーティリティ [servicex](/fields/the-system/servicex.md) の思想を引き継いでいる

## 背景

### 前提

[Webアプリのアーキテクチャ](/fields/apps/frontend-architecture.md)に記載があるように、 Wantedly のフロントエンドのアーキテクチャは技術スタックをアップデートしてきました。 そのため現在はフロントエンドのコードは複数のリポジトリに分かれています。

### shared components

複数リポジトリにフロントエンドのコードがある一方で

* ヘッダー
* サイドバー
* フッター

といったナビゲーションなどのコンポーネントはリポジトリ間で共通の UI が存在しています。 例： 以下の画面はそれぞれ異なるリポジトリで実装されており、青色で囲われた部分は共通の UI です。

![例](/files/-MhWAMwej_cjDsoN4Jta)

これらコンポーネントを複数リポジトリで個別で管理すると

* デザインの一貫性が担保できなくなる（特定のリポジトリのみが修正されている状態になる等が発生する）
* 個別で実装することでの機能差分が生まれる（特例のリポジトリのみ独自の機能が追加されている状態になる）

など、メンテナンス性・安定性を損ねることになります。 そのためこれらコンポーネントをパッケージ化するために `shared components` が誕生しました。

### frontendx

Frontend v4 のリポジトリでは、コンポーネントだけではなく、

* Feature Flagsの管理
* A/Bテストの状態管理

といった React hooks /ユーティリティについても個別に実装されるという事象が発生していました。 これらもコンポーネントと同様に個別で実装されることでメンテナンス性・安定性を損ねていると言う問題があり、 `frontendx` が誕生しました。 またこれら共通化を行うコードは共通のコンポーネントである `shared components` からも利用されうるというところから、 `React Shared Components` にて管理がされています。

## このパッケージがやること/やらないこと

### shared components

#### やること

* Frontend v4 におけるコンポーネントの共有
* Frontend v1\~v3 から v4 移行を前提とした全アーキテクチャでのコンポーネント共有

#### やらないこと

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

### frontendx

#### やること

* `shared components` を含む Frontend v4 で利用されるコードの共有

#### やらないこと

* 単一リポジトリでしか使用しないコードの提供
* Frontend v1\~v3 での直接的な利用
  * frontendxは v4 でのコードを共有することを目的としている
  * `shared components` は v4 でのコンポーネントを v1\~v3 で利用できるようにする
    * そのため `frontendx` は `shared components` をサポートし、 v1\~v3 にて利用することで間接的に利用されることを許容する

## React Shared Components と UI との違い

React Shared Components はここまで記載した通り、 Wantedly における**機能を提供**します。 一方 UI は、デザインシステムで規定されている**全プロダクト共通の UI システムやコンポーネント**を提供します。 前者は**機能**を、後者は **UI システムやコンポーネント**を提供すると言う責務の違いがあります。

## 提供されるパッケージ

現在提供されているパッケージは以下のREADMEを参照してください [react-shared-components README(internal)](https://github.com/wantedly/react-shared-components)

原則として1つの共通コンポーネントを1つのパッケージとして提供しています。 e.g.) ヘッダー/フッター

使わないコンポーネントを install しないため、単位でパッケージを提供しています。 また上記の理由から React Shared Components は monorepo で、管理されています。

#### 話を聞きに行きたい

* Slack: [#frontend\_chapter](https://wantedly.slack.com/archives/CA46K091P)

#### もっと知りたい

* [Lerna による monorepo の管理について (internal)](https://dev-docs.wantedly.com/javascript/lerna)
* [react-shared-components デザインドキュメント (internal)](https://github.com/wantedly/react-shared-components/blob/master/docs/design.md)