デザインシステムをnpmパッケージ化する方法

How to Turn Your Design System into an NPM package

Mergeのnpm統合により、デザインチームは npmレジストリから完全に機能するコンポーネントライブラリをインポートするための制御を強化することができます。コンポーネントライブラリでのプロトタイプデザインは、デザイナーが一行のコードも書かずに完全な機能と忠実度を得られるという利点があります。

この「npmなんたら」の意味がよくわからなくても、心配無用です。本記事では、デザインシステム用にnpmパッケージを作成する方法など、必要なことをすべてご説明します。

UXPin Mergeを使えば、最小限のデザインまたはコーディングでプロジェクトを一から作り上げることができます。自身のデザインシステムをインポートする方法については、Mergeページをご覧ください。また、UXPinでのコンポーネント駆動型プロトタイプの無限の可能性をぜひご覧ください。

Npmとは

npm（Node Package Manager）は、プライベートおよびオープンソースのパッケージをホストする Node.js/JavaScriptアプリケーション用のソフトウェアレジストリです。npmは「世界最大のデベロッパーのエコシステムの1つ」であり、100万以上のパッケージがあります。

パッケージとは

技術的に詳しくない方は、”パッケージって何？”と思われるかもしれませんね。

パッケージには、アプリケーションを実行するために必要なファイルやコードが含まれており、以下の2つのタイプがあります：

依存関係：アプリケーションが動作するために必要なサードパーティのパッケージ
dev依存関係：ツール、自動化、テストなど、エンジニアが開発時に使用するパッケージ

例えば、Googleマップを搭載したアプリケーションを作りたい場合、全てを一から書くのではなく、google-mapsパッケージをインストールして、地図と位置を表示するコードを数行書けばいいのです。

今回は、依存関係、特にコンポーネントライブラリパッケージに焦点を当てます。パッケージとnpmの技術的な側面についてより深く知りたい場合は、以下のリソースをご参照ください。

誰がパッケージを作成・公開できるか

誰でもパッケージを作成し、npmレジストリに公開することができますが、パッケージのアップロードには、基本的なプログラミングスキルとnpmのアカウントが必要です。

コンポーネント駆動型プロトタイピングとは

デザイナーとして、”なぜパッケージとnpmについて知る必要があるのか？“とおそらく疑問に思っていることでしょう。パッケージに格納できるものの1つに、デザインシステムのコンポーネントライブラリがあるんです。

エンジニアは、プロジェクトの依存関係の中にデザインシステムのコンポーネントライブラリをインストールし、そのUI要素を表示したい場所で数行のコードを書くことができます。また、UXPin Mergeのnpm統合により、デザインチームもこのコンポーネントを使うことができます。

merge component manager npm packages import library

UXPin Mergeでは、デザイナーがレポジトリからデザインシステムをインポートしてプロトタイピングを行うことができます。それによって、デザインチームはUXPinでビジュアルUI要素を使い、線や図形を使って作成された他のデザイン要素と同様にキャンバス上で移動させることができます。

Mergeコンポーネントの背後にコードがあることだけが唯一の違いなので、デザイナーはエンジニアと同じ忠実度と機能を享受できます。デザイナーとエンジニアが同じコンポーネントライブラリを使うことで、デザインハンドオフがシームレスになり、一からのデザインまたはコーディングが最小限になります。

uxpin design system components states icons 2

UXPinのコンポーネント駆動型プロトタイプにより、デザインチームは最終製品の正確なレプリカを作成でき、それによってユーザビリティテストとステークホルダーからのフィードバックが大幅に強化されます。

Merge を使ってデザインシステムを UXPinに同期する方法はいくつかありますが、今回はnpmレジストリにコンポーネントライブラリを公開し、npm統合機能を使ってUXPinにインポートする方法に焦点を当てましょう。

デザインシステムをnpmレジストリのパッケージにする方法

UXPinの新しいnpm統合により、デザイナーは製品のデザインシステムをnpmレジストリ経由でUXPinにインポートすることができますが、デザインシステムにパッケージがない場合は、以下の手順で作成してください。

ステップ0：コンポーネントライブラリの有無

UXPinのnpm統合やMergeのどんな統合を使うにしても、デザインシステムにコード化されたコンポーネントライブラリが必要です。そこで、デザインシステムを作成するためのステップバイステップガイドを作りました。

また、オープンソースのコンポーネントライブラリをホストして、製品の要件に合わせたコード編集も可能です。

ステップ1：npmのアカウントの作成

デザインシステムを、承認した人だけが見られるようにするような「非公開」にしたい場合は有料のnpmアカウントが必要です。また、誰でもインストールできてプロジェクトに利用できる公開パッケージをアップロードできます。

ステップ2：npmのバージョンの確認

プライベートパッケージは、npmバージョン2.7.0以上の使用が必要ですが、お使いのシステムがどのバージョンで動作しているかは、ターミナルで以下のコマンドを実行することで確認できます：

npm-vまたはnpm-version

以下のコマンドを実行することで、最新のnpmバージョンにアップグレードすることができます：

npm-install npm@latest -g

ステップ3：パッケージの作成

Npmのドキュメントには、プライベートパッケージの作成と公開のための8つの手順が記載されています。プライベートパッケージをチームで共有するには、npmのユーザーアカウントの作成と、有料のnpm組織の作成が必要であることに注意しましょう。

ステップ4：パッケージのテスト

以下のコマンドを実行して、確実にパッケージがバグフリーであるようにしなければいけません：

npm-install my-package

（my-packageを自身のパッケージの名前に置き換えましょう）

ステップ5：パッケージの公開

繰り返しになりますが、プライベートパッケージの公開については、npmのドキュメントに従うことをお勧めします。この手順を完了すると、あなたのパッケージは npm レジストリに登録され（通常はアドレスの末尾が自身のパッケージ名でになる）、指定された URL にアクセスすることで表示されるようになるはずです。

https://npmjs.com/package/*package-name

(*package-name は自身のパッケージ名に置き換えましょう)

ステップ6：パッケージのコンポーネントをUXPinにインポートする

上記の手順が完了したら、npm統合を使ってコンポーネントライブラリをUXPinにインポートでき、そのプロセスはステップバイステップのチュートリアルで説明した「MUIオープンソースライブラリのインポート」と同じようになります。

MCM（Merge Component Manager）を使って、各コンポーネントとその関連プロパティ（デザインシステムパッケージで「React props」として確定）をインポートするといいでしょう。

デザインチームは、UXPin Patternsを使ってデザインシステムを拡張し、それによって複数の Mergeおよび非MergeのUI 要素を組み合わせて新しいコンポーネントやテンプレートの作成ができます。エンジニアは、このようなパターンをコードに変換してパッケージレポジトリに追加し、デザイナーが MCMを介してインポートできるようにすることができます。

UXPin Mergeとnpm統合のリソース

UXPinでコンポーネント駆動型プロトタイプを始めるための、その他のリソースを以下にご紹介します。

Mergeとnpmの統合があなたのデザインプロジェクトにピッタリかどうか、まだよくわかりませんか？統合について知っておくべきことをぜひチェックしてください。

Try npm integration