ラクスルの2022年アドベントカレンダー 12日目の記事です。
こんにちは！ノバセル株式会社 NA（ノバセルアナリティクス）グループのmartonです。主にノバセルアナリティクスのフロントエンドの開発を担当しています。
今回はノバセルのデザインシステムの一部として、GitHub Organization内で共通利用できるように公開した、コンポーネントライブラリ「novasell-ui」について紹介したいと思います。
背景
そもそもコンポーネントライブラリとは、デザインシステム内で定められた規格やガイドラインに従ったコンポーネント（ボタンやフォームなど）をまとめたライブラリのことです。コンポーネントライブラリを利用することでデザインに一貫性を持たせることができ、複数プロダクト全体の体験を向上させることができます。
ノバセルでは現在、ノバセルアナリティクスとノバセルトレンドの2つのプロダクトを開発しています。ノバセルアナリティクスはVue、ノバセルトレンドはReactを採用しているため、同じ見た目でも共通のコンポーネントを使うことができていません。
この課題を解決して、複数プロダクト全体にデザインの一貫性を持たせるために、コンポーネントライブラリのnovasell-uiを公開するに至りました。
novasell-uiはライブラリ問わず連携できるWeb Componentsで構築する案も考えましたが、社内でプロダクトをReactに置き換えていく機運が高まっていることや、フロントエンドエンジニアが少ないことを考慮して、Reactを採用しました。novasell-uiを全プロダクトで使うためには、Vueで開発しているノバセルアナリティクスをReactに置き換えるという障壁はありますが、少しずつ対応していき、プロダクトの体験を向上させていきたいと思っています。
ここからはnovasell-uiがこれまで行ってきたことについて、ライブラリの公開方法を中心に紹介していきたいと思います。
コンポーネントのビルド方法
さて、まずは公開するコンポーネントのビルドの設定について紹介していきます。
novasell-uiでは、コンポーネントをstyled-components を使って作成し、src/index.tsでエクスポートしています。tscでコンパイルした後に、このファイルがnovasell-uiのエントリーポイントになります。
src/index.tsx
export { Button } from './components/buttons/Button' ;
export { TextLinkAnchor, TextLinkButton } from './components/buttons/TextLink' ;
export { CheckBox } from './components/inputs/CheckBox' ;
export { Tooltip } from './components/tooltips/Tooltip/Tooltip' ;
...
tsconfigは2つ作成し、ビルド用のtsconfig.build.jsonにはテストやStorybookなど、novasell-uiには含めたくないファイルをexcludeの配列に追加しています。
tsconfig.json
{
"compilerOptions ": {
"outDir ": "./lib ",
"lib ": [ "es2020 ", "dom "] ,
"target ": "es2020 ",
"module ": "commonjs ",
"moduleResolution ": "node ",
"declaration ": true ,
"sourceMap ": true ,
"types ": [ "node ", "react ", "jest ", "@testing-library/jest-dom "] ,
"typeRoots ": [ "types ", "node_modules/@types "] ,
"jsx ": "react ",
"strict ": true ,
"forceConsistentCasingInFileNames ": true ,
"noFallthroughCasesInSwitch ": true ,
"noImplicitReturns ": true ,
"noUnusedLocals ": true ,
"noUnusedParameters ": true ,
"allowSyntheticDefaultImports ": true ,
"noEmitOnError ": true ,
"esModuleInterop ": true ,
"baseUrl ": "./ ",
"paths ": {
"@/* ": [ "src/* "]
}
} ,
"exclude ": [ "node_modules "] ,
"include ": [ "src/**/* "]
}
tsconfig.build.json
{
"extends ": "./tsconfig.json ",
"exclude ": [
"node_modules ",
"src/**/*.test.ts ",
"src/**/*.test.tsx ",
"src/**/*.stories.tsx "
]
}
package.jsonにビルドコマンドを追加し、コンポーネントのビルドの準備が完了しました。
package.json
{
"scripts ": {
"build ": "tsc -p tsconfig.build.json ",
}
}
novasell-uiの公開準備
novasell-uiは、GitHubのプライベートリポジトリを使用してライブラリを管理できるGitHub Package Registryにホスティングしています。公開に必要なpackage.jsonの設定のみ抜粋して紹介していきます。
{
"name ": "@raksul/novasell-ui ",
"version ": "1.0.0 ",
"main ": "lib/index.js ",
"scripts ": {
"build ": "tsc -p tsconfig.build.json && tsc-alias ",
...
} ,
"files ": [
"lib "
] ,
"publishConfig ": {
"registry ": "https://npm.pkg.github.com/ "
} ,
"dependencies ": {
...
} ,
"devDependencies ": {
...
} ,
}
name：ライブラリの名前。nameの頭文字に @〇〇 を付けることでscoped packagesにすることができます。scoped packagesとは、特定のオーガニゼーション内でのみ共有されるライブラリのことです。novasell-uiはラクスルのGitHub Organization内にあるリポジトリでのみ利用可能にしたいので、@raksul を頭文字につけています。
version：ライブラリのバージョン。同じバージョンを公開することはできないので、新しいバージョンを公開するときは、この番号を更新する必要があります。更新の仕組みについては後ほど紹介していきます。
main：ライブラリの中で最初に呼ばれるスクリプト。先ほど設定したtscの出力先のファイルを指定します。
publishConfig：公開するレジストリを指定します。今回はGithub Package Registryを指定しています。
files：ライブラリをインストールしたときにnode_modulesへコピーするファイル。ライブラリに必要なファイルのみ含めます。
Github Actionsを用いて公開する
novasell-uiの公開にはRelease Please を使用しています。これはgitのコミット履歴の中でConventional Commit に沿ったコミットメッセージを探して、リリース用のPRを作成してくれるGithub Actionsです。
このPRにはCHANGELOG.mdとバージョン番号の更新が含まれています。
Release Pleaseで作成されるPR
バージョン番号はコミットメッセージに以下の接頭辞が付くと自動的に変更をPRに含めてくれます。
fix: バグの修正を表し、SemVer パッチを上げるfeat:新機能を表し、SemVer のマイナーを上げるfeat! fix!:refactor!:破格の変更を表し、SemVer のメジャーを上げる
{
- "version": "1.4.2",
+ "version": "1.4.3"
}
コミットメッセージに前述の接頭辞を付けるのをよく忘れてしまうので、コマンドラインで接頭辞を選択できるgit-cz や、コミット前にコミットメッセージがConventional Commitに沿っているかチェックしてくれるcommitlint がおすすめです。
Release Pleaseで作成されたPRがmainブランチへマージされたときに、novasell-uiの公開作業を行うようにします。Release Pleaseで作成されたPRがマージされたかの判断は、
${{ steps.release.outputs.release_created }} によってできるので、この条件がtrueのときのみnpm publish コマンドが実行されるように設定しています。
on :
push :
branches :
- main
name : release-please
jobs :
release-please :
runs-on : ubuntu-latest
steps :
- uses : google-github-actions/release-please-action@v3
id : release
with :
release-type : node
- uses : actions/checkout@v3
if : ${{ steps.release.outputs.release_created }}
- uses : actions/setup-node@v3
with :
node-version : 16
cache : 'yarn'
registry-url : 'https://npm.pkg.github.com'
scope : '@raksul'
if : ${{ steps.release.outputs.release_created }}
- run : yarn install
if : ${{ steps.release.outputs.release_created }}
- run : yarn build
if : ${{ steps.release.outputs.release_created }}
- run : npm publish
env :
NODE_AUTH_TOKEN : ${{ secrets.GITHUB_TOKEN }}
if : ${{ steps.release.outputs.release_created }}
novasell-uiを他のリポジトリで使う
次に、公開したnovasell-uiをGitHub Organization内にある他のリポジトリからインストールする方法について紹介していきます。
novasell-uiを使用するためには他のリポジトリのRead権限が必要なので、Creating a personal access token を参考に、read:packages権限の Personal access tokens を生成します。
生成したPersonal access tokens をプロジェクト配下に作成した.npmrc へ追加することで、インストールすることができます。
@raksul:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=<Personal access tokensを追加する>
yarn addするときはバージョンを指定してインストールします。
yarn add @raksul/novasell-ui@1.1.0
Github Actiionsでyarn installをするときは、リポジトリデフォルトの secrets.GITHUB_TOKEN では権限が足らないため、インストールに失敗してしまいます。先ほど作成したものでも構いませんが、GITHUB_TOKENとは異なる名前で、read:packages権限の Personal access tokens を環境変数に追加することでyarn installができます。今回の場合はGH＿TOKENとしています。
name : build and test
on : push
jobs :
build :
runs-on : ubuntu-latest
steps :
- name : Checkout repository
uses : actions/checkout@v3
- name : Setup Node.js
uses : actions/setup-node@v3
with :
node-version : 16.x
registry-url : 'https://npm.pkg.github.com'
scope : '@raksul'
- name : Cache dependencies
uses : actions/cache@v1
with :
path : ./node_modules
key : ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys : |
${{ runner.os }}-node-
- name : Install packages
run : yarn install --frozen-lockfile
env :
NODE_AUTH_TOKEN : ${{ secrets.GH_TOKEN }}
- name : Build app
run : yarn run build
おわりに
novasell-uiを始めとしたデザインシステムは作るだけではなく、社内に浸透させていくことが重要になります。ノバセルにはデザインシステムを構築する専任のチームは存在しないため、普段の業務とは別に、毎週決まった時間にペアプロをしてnovasell-uiのコンポーネントを作るなどしています。
まだまだやるべきことはたくさんあるので、デザインシステムを一緒に育ててくれる方を募集しています！ご応募お待ちしております。
①ウェビナーを使わずに、司会（2人）が写っている間は、全画面ピン止めしたいという要望を叶えるために、ZoomでMeetをモニターを全画面共有。これでコメントが流れます
