Chapter 01無料公開

はじめに

jiyuujin
jiyuujin
2022.10.06に更新

ご挨拶

こんにちは。現在 React / Express / WebSocket から構成されている Web サービスの機能開発に、ウェブフロントエンド開発やアクセシビリティの啓蒙を中心に進める jiyuujin と申します。

https://yuma-kitamura.nekohack.me/


モノレポを理解する

今回は、各種モノレポ管理に焦点を合わせ、各種ツールについて認識を深めていきます。実際に React ( Vite ) 上で、モノレポ管理を進めるプロジェクトにジョインさせていただいている経験談を交えて、技術発信できればと考えています。

前段でモノレポとは何か、後段でそれをどう活用しているかについて、解説させていただきます。

  • モノレポの一般論について
  • プロジェクトでそれをどう活用しているかについて

なお、基本的な使い方については公式ドキュメントに詳細な情報が書かれています。この本を通じて Lerna や Nx の全体像を掴むことができたなら、公式ドキュメントや API リファレンスもぜひ一度読み通してみてください。

参照リポジトリ

まずは下記リポジトリをご確認いただければ幸いです。

フロントエンドにおけるユニットテストの管理に Lerna を使う

同じソースコードに対して、ユニットテスト (Jest や Vitest、Mocha) を実行しています。

https://github.com/jiyuujin/frontend-tests

Lerna の代わりに yarn workspaces を使う

同じことを yarn workspaces で管理したら、一体どうなるのだろう。

率直に作成してみたっかたので、こちらも合わせてご確認いただければ幸いです。

https://github.com/jiyuujin/yarn_workspaces-frontend-tests

色々なウェブサイトの管理に Nx を使う

jiyuujin のウェブサイト (下記参照) 製作で、モノレポ (Nx) を採用させていただいています。

https://github.com/nekohack/org

VS Code Conference JP における、各年 (2023/2021) のウェブサイト (下記参照) 製作で、技術のリードをさせていただいています。

https://github.com/vscodejp/conference