npmと言うのは？把握しよう！

npmは、開発者がアプリケーションで利用するライブラリやコードをインストール、共有、管理するためのJavaScriptパッケージマネージャーです。これにより、ユーティリティ関数から複雑なUIコンポーネントまで、さまざまなパッケージを扱うことができます。

npmはUXPin Mergeを通じてデザインと開発のコラボレーションを促進する重要な要素です。これにより、開発者はReactコンポーネントをパッケージ化してデザイナーに提供し、デザイナーはそれを簡単にデザインに統合できます。このプロセスにより、一貫性のある効率的なワークフローが実現し、デザインシステムと最終製品の整合性が保証されます。UXPin Merge をぜひご覧ください。

NPM とは

npm（Node Package Manager）は、エンジニアがアプリケーションや Web サイトの開発に使うツールのオープンソースレポジトリです。

npm には以下の２つの特徴があります：

オープンソースプロジェクトを公開するためのレポジトリ
簡易版：デジタルストレージおよび検索機能
リポジトリと対話するための CLI（コマンドラインインターフェース）
簡易版：ストレージ機能と通信するためのツール

パッケージマネージャーとは

npm パッケージとは何かを説明する前に、パッケージマネージャーの考えを理解することが非常に重要です。パッケージマネージャーはデベロッパーのためのツールキットだと考えてください。

例えば、決済のためにStripeを使うアプリケーションを作るとします。パッケージマネージャは、製品がStripeと通信して支払いを処理するのに必要なコードをすべてインストールします。

エンジニアは、コードを全部書いたりStripe のドキュメントからコピー＆ペーストする代わりに、コマンドを入力するだけで、パッケージマネージャーが必要なコードの依存関係をStripe からインストールします。

さまざまなタイプの検索機能、API、支払い、認証ツール、地図、アイコン、ホスティングなど、アプリケーションを開発するのに考えられるあらゆるものに対して、何百万ものパッケージがあります。

また、npm などの誰でもパッケージをアップロードしてインストールできるオープンソースの公開レポジトリと、アクセスが制限された非公開レポジトリがあります。

コマンドラインインターフェースとは

CLI（コマンドラインインターフェース）は、開発者がコンピュータプログラムを操作するためのテキストベースのインターフェースです。これを使用して、ソフトウェア開発に必要なバックグラウンド処理を行うコマンドを実行できます。

npmでは、CLIを通じてパッケージレジストリとやりとりでき、エンジニアは npm install コマンドに続けてパッケージ名を入力することで特定のパッケージをインストールできます。

npm レジストリ

npmのWebサイトでは、エンジニアがパッケージを検索し学ぶことができますが、これは単なるレジストリであり、パッケージはホストされていません。そのため、エンジニアはGitHub、Packagecloud、AWS CodeArtifact などのプラットフォームを使用してパッケージをホストし、配布しています。

たとえば、NPM上の UXPin Merge CLI を見ると、レポジトリと関連リンクとして GitHub が表示されており、その上には、UXPin Merge CLI とその依存関係をインストールするコマンドである npm i @uxpin/merge-cli があります。ちなみに、npm の後の「i」は「install」の略語なので、npm install @uxpin/merge-cli と入力しても同じ結果になります。

依存関係（Dependency）とは

パッケージは、エンジニアが「依存関係」と呼ぶ他のパッケージで構成されています。わかりにくいかもしれませんが、この依存関係とは、プロジェクト内でさまざまなタスクを実行するコードのパッケージです。

たとえば、UXPin Merge CLI は Typescript を使うため、依存関係として typescript のパッケージが必要です。そして Typescript は UXPin Merge CLI に必要な４１の依存関係のうちの１つに過ぎません。

開発依存関係（DevDependencies）とは

UXPin Merge CLI の依存関係を見ると、４１の依存関係と４１の開発依存関係（Dev Dependencies）があります。

依存関係：ソフトウェアの実行に必要なパッケージ
開発依存関係：開発段階でのみ必要なパッケージ

依存関係と開発依存関係は node_modules という別のフォルダにあるので、packages.json ファイルとプロジェクトのコードではその場所がわかります。

package.json ファイルとは

メタデータと依存関係を提供する package.json ファイルというのがあり、コンピューターにプロジェクトをインストールするとき、npm は package.json ファイルを参照して依存関係と開発依存関係をインストールします。

それぞれの依存関係を個別にインストールする代わりに、コマンドラインに npm install と入力するだけです。

ホスティングプロバイダーもまた、package.json ファイルを使って、そのサーバー上でプロジェクトを実行するにに必要な依存関係（開発依存関係は除く）をインストールします。

package-lock.json とは

package-lock.json は、プロジェクトの構築に使われたパッケージの正確なバージョンを指定します。このファイルは、プロジェクトがインストールされたときに、最新のリリースではなく、開発中に使われたバージョンを参照するように、依存関係をロックします。

エンジニアは定期的にパッケージを更新し、多くの場合はパッケージの動作方法を変更します。なので、依存関係をロックすることで、プロジェクトが意図したとおりに動作するようになるのです。

npm の使用法

一般的な npm コマンドとその機能には以下が挙げられます：

npm init：プロジェクトの package.json ファイルを作成する。アプリケーションをゼロから構築する場合、npm init はプロジェクトの重要な情報を含めるのに使う最初のコマンドの一つになる。また、NPM は、パッケージがインストールや削除されるたびに、package.json ファイルを自動更新する。
npm install：プロジェクトの依存関係を全て package.json ファイルにインストールする。
npm install <package-name>：NPM レジストリから特定のパッケージをインストールして node_modules フォルダに保存する。例えば、npm install @uxpin/merge-cli は Merge CLI をインストールする。
npm install <package-name> –save：NPM パッケージをインストールして package.json ファイルの依存関係に追加する。
npm install <package-name> -save-dev：NPM パッケージをインストールして開発依存関係に追加する。
npm uninstall <package-name>：プロジェクトから特定のパッケージをアンインストールする。
npm doctor：npm インストールの診断を実行し、パッケージの管理に必要なものがすべて揃っているかチェックする。
npm update <package-name>：特定のパッケージを最新バージョンに更新する。

これらは、最も一般的な npm コマンドのほんの一部であり、完全なリストは npm のドキュメントにあります。

デザイナーとして npm を理解する

npm は、デザインツールのプラグインやアプリ拡張機能に匹敵するツールキットです。パッケージがどのように作成されるかを詳しく知る必要はありませんが、１つ２つ知っておくといいかもしれません。

まず、MUI や Ant Design などのコードコンポーネントライブラリは、npm パッケージとして共有されています。

npm パッケージとしてディストリビューションされているコンポーネントライブラリを見つけるにはどうすればいいのでしょうか。UXPin の公開デザインシステムライブラリである Adele から、UXPin に取り込めるコンポーネントライブラリを探すとします。Shopify の Polaris を選び、それが npm 経由でディストリビューションされていることがわかります。

それで、NPM サイトにアクセスして Shopify の Polaris を探します。

UXPin と Merge テクノロジーで、NPM パッケージ経由でコンポーネントライブラリから UI 要素をインポートできます。そして、その要素を使って、完全に機能するプロトタイプを作成することができます。

UXPin Merge は通常、デベロッパーによって設定されますが、開発サポートが不足している場合は、新しいツールである Merge Component Manager を使って自分で UI コンポーネントを管理することができます。

ただし、プログラミングの知識を深めてデベロッパーとより良い連携をしたいのであれば、HTML、CSS、Javascript の基本的なコードの原則やコンポーネントライブラリについて学ぶ方が、デザイナーにとってははるかに価値があります。

npm 統合でできること

npm は一般的にデベロッパーが使うツールですが、シームレスなドラッグ＆ドロップによる UI 構築のために React のコンポーネントを UXPin に取り込むなど、強力なデザインワークフローを実現する上で重要な役割を果たしています。

UXPin Merge のようなツールを使える技術的なデザイナーにとって、以下のような理由から npm が重要になります：

React コンポーネントへのアクセス：デザインシステムが React を使って構築されている場合、npm を使ってそのコンポーネントをパッケージ化し、UXPin Merge のような他のアプリケーションやツールで使えるようにすることができる。また、npm パッケージとして利用可能な React コンポーネントは、UXPin に直接インポートすることができ、それでデザイナーはコードを記述することなく、実際のコードコンポーネントをデザインにドラッグ＆ドロップすることができる。
アップデートの管理が簡単：npm でバージョン管理をシンプルになる。デベロッパーがボタンコンポーネントの新バージョンなどパッケージを更新すると、npm は自動的に UXPin Merge で更新を管理することから、デザイナーは常に開発チームの最新コンポーネントを使えるようになる。これにより、手動で更新することなく、デザインと開発の一貫性が保たれる。
デベロッパーとのシームレスな連携：npm で、技術的なデザイナーとデベロッパーが同じソースから作業できるようになる。デベロッパーは npm を使って作成したコンポーネントを公開し、デザイナーは Merge を使ってそのコンポーネントを簡単に UXPin にインポートできる。これにより、デザイナーがプロトタイプに使うコンポーネントと、デベロッパーが最終製品に実装するコンポーネントが完全に同じであることが保証される。

UXPin Merge で連携の改善

Merge では、デザイナーとエンジニアが同じコンポーネントライブラリを使っ作業するため、デザインと開発の連携が強化されます。

Merge は、デザイナー用の UI キットとデベロッパー用のコードを用意する代わりに、デザインチームがコードコンポーネントを使って完全に機能するプロトタイプを構築できるように、レポジトリを UXPin のエディタに同期します。

UI 要素をドラッグ＆ドロップするだけでインターフェースを構築できるように、会社のデザインシステムや MUI などのコンポーネントライブラリを同期しませんか。Merge へのアクセスのリクエストはこちら。

npmと言うのは？把握しよう！