0Pricing
React Academy · レッスン

Code GeneratorsとWorkspace Automation

custom Nx generatorsを作成し、components、pages、librariesを一貫した方法でscaffoldします。

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

Nxジェネレーターとは

Nxジェネレーターは、ファイルのひな形を作成し、設定を更新し、モノレポ全体の一貫性を維持するコード生成ツールです（schematicsに似ています）。組み込みジェネレーターを実行することも、独自のジェネレーターを作成することもできます。

組み込みジェネレーターの実行

ジェネレーターパッケージと名前を指定してnx generateを使います。--dry-runを追加すると、ファイルを書き込まずに変更内容を確認できます。

# Generate a React component in the ui library:
npx nx generate @nx/react:component Button --project=ui --dry-run

# Generate a hook:
npx nx generate @nx/react:hook useAuth --project=data-access

カスタムジェネレーターの作成

ローカルプラグインプロジェクト内に、空のジェネレーターテンプレートを生成します。

# Create a local plugin:
npx nx generate @nx/plugin:plugin my-plugin --directory=tools/my-plugin

# Add a generator to it:
npx nx generate @nx/plugin:generator feature-module --project=my-plugin

ジェネレーターの構成

ジェネレーターは、schema.json（入力）とindex.ts（ファイルとワークスペースを変更するロジック）で構成されます。

// tools/my-plugin/src/generators/feature-module/schema.json
{
  "$schema": "...",
  "title": "Feature Module Generator",
  "properties": {
    "name": { "type": "string", "description": "Feature name" },
    "directory": { "type": "string", "default": "libs" }
  },
  "required": ["name"]
}

ジェネレーターのindex.ts

ジェネレーター関数は、ツリー（ファイルシステムの抽象化）とオプションを受け取ります。ツリーAPIを使って、ファイルの読み取り、書き込み、更新を行います。

import { Tree, formatFiles, generateFiles } from '@nx/devkit';
import * as path from 'path';

export default async function (tree: Tree, options: FeatureGeneratorSchema) {
  generateFiles(
    tree,
    path.join(__dirname, 'files'), // template folder
    `libs/${options.name}`,       // output path
    { ...options, tmpl: '' }       // template variables
  );
  await formatFiles(tree); // run prettier on generated files
}

テンプレートファイル

テンプレートファイルは、ジェネレーターと同じ場所にあるfiles/フォルダーに配置します。動的な内容にはEJS構文を使用します。

// tools/my-plugin/src/generators/feature-module/files/src/index.ts__tmpl__
export * from './lib/<%= name %>';

// files/src/lib/__name@dasherize__.ts__tmpl__
export function <%= name %>() {
  return '<%= name %> feature';
}

project.jsonの更新

ジェネレーターは既存のファイルを変更できます。updateProjectConfigurationを使って、プロジェクトに新しいターゲットを追加します。

import { updateProjectConfiguration, readProjectConfiguration } from '@nx/devkit';

const config = readProjectConfiguration(tree, options.project);
config.targets.storybook = {
  executor: '@storybook/nx:build-storybook',
  options: { outputDir: 'dist/storybook' },
};
updateProjectConfiguration(tree, options.project, config);

ジェネレーターの実行

ローカルプラグインを指定して、組み込みジェネレーターと同じ方法でカスタムジェネレーターを実行します。

npx nx generate my-plugin:feature-module my-feature --dry-run
npx nx generate my-plugin:feature-module my-feature

ワークスペースのマイグレーション

Nxのバージョンを更新すると、Nxは自動マイグレーションを提供します。nx migrate latestを実行し、続けてnx migrate --run-migrationsを実行して適用します。

npx nx migrate latest
# Review migrations.json
npx nx migrate --run-migrations

定型コードの自動化

チーム固有のパターンに対応するカスタムジェネレーターを作成します。たとえば、標準化されたフォルダー構成のフィーチャーモジュール、CRUDページ、クエリフックを事前設定したデータアクセスライブラリなどです。

ジェネレーターのテスト

Nxはジェネレーター用のテストハーネスを提供します。テスト内に最小限のツリーを作成することで、実際のファイルシステムに触れずにファイル生成を検証できます。

import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';

test('generates feature module', async () => {
  const tree = createTreeWithEmptyWorkspace();
  await generator(tree, { name: 'products' });
  expect(tree.exists('libs/products/src/index.ts')).toBe(true);
});

小テスト

Nxジェネレーターのfiles/フォルダーは何のためにありますか？

まとめ

Nxジェネレーターは、nx generateを通じて一貫した方法でファイルのひな形を作成します。カスタムジェネレーターは、schema.json（入力）とindex.ts（ロジック）を使って作成します。EJSテンプレートにはfiles/フォルダーを使用します。createTreeWithEmptyWorkspaceを使って、安全なインメモリファイルシステム上でジェネレーターをテストします。

よくある質問

「Code GeneratorsとWorkspace Automation」レッスンは無料ですか？

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

「Code GeneratorsとWorkspace Automation」で何を学びますか？

custom Nx generatorsを作成し、components、pages、librariesを一貫した方法でscaffoldします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Code GeneratorsとWorkspace Automation」レッスンにはどのくらい時間がかかりますか？

ほとんどの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に戻る