なぜ大企業はNxを使うのか？ モノレポツール 5分のクイックセットアップ

モノレポ入門

ES6、SCSS前処理、npm、フロントエンドフレームワーク、CI/CD、Dockerなど、近年フロントエンドの技術は急速に進化している。小規模なアプリケーションを完成させる場合、上記の技術に加えて、比較的大規模で複雑なプラットフォームの整備も必要になるかもしれません。

モノレポ（Monorepository）とは、フレームワークの概念で、Mono（1つ）のrepo（リポジトリ）という文字通りの意味から、この（Monorepo）フレームワークは、旧来の分離の概念とは異なり、大量のコードを同じコードベースに置いて管理を行うものであることを知ることができ、GoogleはMonorepoの使用を優先している企業の1つである。GoogleはMonorepoを採用した最初の企業の一つである。

詳しくは以下の記事を参照されたい：

モノレポを本当に知っていますか？ 5分でわかるフロントエンドの大規模アーキテクチャ。

Nxプロフィール

Nxは高速で効率的、そして非常に拡張性の高いモノレポツールで、以下のような特徴がある。

1. 3つの主要なフロントエンドフレームワークのサポート：Vue、React、Angular

2. バックエンドフレームワークのサポートExpress、Nest、Next

3. モノレポ・フレームワークの場合

4.様々な種類のテストをサポートする：Cypress、Jest

Nxフロントエンド・フレームワークのコンセプト

Nxはフロントエンド・フレームワークで、有名なプログラミング・エディターVisual Studio Codeとよく似た設計思想を持っている。Visual Studio Codeでは、拡張機能をインストールしなくても、優れた開発体験を得ることができます。 Nxも同じような原則に従っており、その中核となる機能は簡潔かつ明確で、曖昧さがないため、開発がより明確になります。

Nxのコア機能には、プロジェクト管理、タスク実行、コード生成、依存性分析が含まれます。これらの機能により、開発チームはより効果的なコラボレーション、大規模なフロントエンド・プロジェクトの管理、コードの品質と一貫性の確保が可能になります。Nxを使えば、設定やツールの混乱を心配することなく、フロントエンド・プロジェクトを簡単に作成、保守、拡張することができます。

Visual Studio Codeの拡張機能と同様に、Nxもプラグインをサポートしており、プロジェクトに適したプラグインを選択することができます。この柔軟性により、Nxは小規模なアプリケーションから大規模なエンタープライズ・アプリケーションまで、幅広いフロントエンド・プロジェクトに適しています。

次に、簡単なNxプロジェクトを作成してみよう。まず、Nxをインストールし、新しいプロジェクトを作成します。そして、Nxのコマンドラインツールを使って、コンポーネント、サービス、その他のコードファイルを生成します。Nxは、プロジェクトの立ち上げプロセスをスピードアップするために、定義済みのプロジェクトテンプレートを数多く提供しています。また、Nxは、プロジェクトの立ち上げプロセスをスピードアップするために、あらかじめ定義されたプロジェクト・テンプレートを多数提供しています。プロジェクトの構造や構成は、特定のニーズに合わせて簡単にカスタマイズできます。

Nxはまた、ビルド、テスト、デプロイメントプロセスの自動化を支援する強力なタスク実行機能を提供します。これにより、プロジェクトの信頼性と安定性を確保し、開発効率を向上させることができます。

つまり、Nx はパワフルで柔軟なフロントエンドフレームワークであり、シンプルさとカスタマイズ性を重視して設計されているため、開発チームはフロントエンドプロジェクトを管理しやすく、優れた開発体験を提供できます。個人の開発者であれ、大規模なチームであれ、Nxは高品質なフロントエンドアプリケーションを構築するのに役立ちます。

Nxビルド

新しいNx環境の作成

読者は以下のコマンドで新しいNx作業環境を作ることができる。

npx create-nx-workspace@latest

作成が完了したら、事前設定を選択する必要があります。参考までにNxの事前設定をいくつか紹介します。

Workspace(Typescript)

npx create-nx-workspace –preset=core

React

npx create-nx-workspace –preset=react

Next.js

npx create-nx-workspace –preset=next

Angular

npx create-nx-workspace –preset=angular

FullStack — Angular & Nest.js

npx create-nx-workspace –preset=angular-nest

Backend — Express

npx create-nx-workspace –preset=express

既存プロジェクトにおけるNx環境の構築

既存のプロジェクトにLernaまたはYarnのモノレポがある場合、以下のコマンドを使ってnpx add-nx-to-monorepoを作成することができます。

すでにReact Appプロジェクトがある場合は、以下のコマンドでNxをビルドすることもできる。

npx cra-to-nx

Nx CLIのインストール

開発者のエクスペリエンスを向上させたい場合は、フルドメインNx CLIをインストールすることも推奨される。

npm install -g nx

Nxフォルダ構造

Nx公式ドキュメントのサンプルを使った簡単な例です。

Nxプロジェクトには、おおよそ次のようなフォルダがあります。

 

1. myorg/を自分の大きなNxプロジェクト名にする。

2. /apps/ はプロジェクトが保存される場所であり、すべてのプロジェクトのメインエントリーポイントです。このフォルダ内のプロジェクトはできるだけ軽量にし、大きなファイルや再利用可能なコードはLibrariesに置き、各プロジェクトで読み込むことを推奨します。

3. /libs/には、すべてのライブラリプロジェクトが格納されます。例えば、私の仕事では、いくつかの共通関数をモジュール化してここに格納する。

4./tools/にはよく使うコードのスクリプトがあり、このフォルダにパラメータを置くことができます。例: データベースの設定とスクリプト

5. /workspace.jsonには、大きなNxプロジェクト内の小さなプロジェクトがすべてリストアップされています。

6./nx.jsonはNx CLIに従って設定され、Nxに何がキャッシュされ、どのように実行される必要があるかを伝えます。

7. /tsconfig.base.jsonはグローバルなTypeScriptを設定し、TypeScriptまたはJavaScriptの読み込みを補助するエイリアスを各ライブラリに作成する。

結語

これはNxの簡単な紹介で、Monorepoフレームワークのツールであることに加えて、Nxが何をサポートしているかを説明し、現在のユーザーのコンテキストに基づいてNx環境を構築するコマンドを使用します。

私は現在外資系企業で働いており、いくつかのプロジェクトを管理するためにNxツールを使用しています。個人的には、コードの再利用性を向上させるだけでなく、チーム内の他のエンジニアとのコラボレーションやディスカッションの機会を増やすことができ、とても便利に使っています。

引用

 

https://github.com/nrwl/nx