0Pricing
React Academy · レッスン

共有LibrariesとInternal Packages

共有UIおよびutility librariesを作成し、TypeScript path aliasesで複数のappsからimportします。

「共有LibrariesとInternal Packages」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

共有ライブラリを使う理由

複数のアプリでコンポーネント、フック、ユーティリティを重複して作成する代わりに、それらを共有ライブラリプロジェクトに切り出し、モノレポ内のどのアプリからでも利用できるようにします。

ライブラリの生成

Nxのジェネレーターを使って、型付きでビルド可能なライブラリプロジェクトを作成します。

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

ライブラリの公開API

すべてを単一のindex.ts（公開API）からエクスポートします。利用側は@myorg/uiからのみインポートし、深い内部パスからインポートしないようにします。

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

ライブラリの種類：publishableとbuildable

Buildableライブラリは増分コンパイルを行うため、モノレポのビルドを高速化できます。Publishableライブラリはこれに加えて、外部から利用できるnpm互換パッケージを生成します。

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

モジュール境界の適用

@nx/enforce-module-boundaries ESLintルールを使って、循環依存を防ぎ、各プロジェクトが相互にインポートできる範囲を制限します。

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

共有ライブラリ用のStorybook

UIライブラリに対してStorybookを実行し、アプリに依存せず、コンポーネントを分離した状態でドキュメント化します。

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

ライブラリのテスト

各ライブラリには独自のテストターゲットがあります。ライブラリが変更された場合は、そのライブラリと影響を受けるすべてのアプリのテストを実行します。

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

モノレポでのバージョン管理

モノレポでは、すべてのパッケージが単一のpackage.jsonとバージョンを共有します。publishableライブラリでは、@jscutlery/semverやChangesetsなどのツールを使って、パッケージごとのバージョン管理を行います。

既存コードのライブラリへの移行

共有コードは段階的にライブラリへ移行します。ライブラリを作成し、ファイルを移動してインポートを更新すれば、あとはTypeScriptのパスエイリアスが処理してくれます。

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

CompodocまたはStorybook Docsによるドキュメント作成

StorybookのautodocsタグまたはCompodocを使って、ライブラリファイル内のTypeScriptの型とJSDocコメントからAPIドキュメントを生成します。

小テスト

共有Nxライブラリからインポートする利用側にとって、単一のエントリーポイントは何にすべきですか？

まとめ

nx generateでライブラリを生成し、すべてを単一のindex.tsからエクスポートして、ESLintルールでモジュール境界を適用します。増分ビルドを高速化するにはbuildableライブラリを使い、npmにリリースする必要がある場合はpublishableライブラリを使います。UIライブラリに対してStorybookを実行すると、分離された状態でドキュメントを作成できます。

よくある質問

「共有LibrariesとInternal Packages」レッスンは無料ですか？

はい。「共有LibrariesとInternal Packages」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「共有LibrariesとInternal Packages」で何を学びますか？

共有UIおよびutility librariesを作成し、TypeScript path aliasesで複数のappsからimportします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「共有LibrariesとInternal Packages」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React Appsを含むNx Monorepoの作成
  2. 共有LibrariesとInternal Packages
  3. Nx Affected CommandsとCaching
  4. Code GeneratorsとWorkspace Automation
← React Academyに戻る