はじめに
似たようなボタンやフォーム部品を、プロジェクトごとに何度もコピペして作り直していないでしょうか。デザインシステムを整備しても、実際にコードとして再利用する仕組みがなければ、結局は「見た目だけ揃った別々のコンポーネント」が量産されてしまいます。
Bitは、この「コンポーネントを作ったのに使い回せない」問題を解決するために作られた、コンポーネント駆動開発のプラットフォームです。個々のコンポーネントを独立した単位としてビルド・バージョン管理・公開でき、リポジトリの壁を越えて別のプロジェクトから直接インストールして使えるようにします。
この記事では、Bitの特徴からインストール、実際のコマンド例までを解説します。
Bitとは
Bitは、Meta出身のエンジニアらが立ち上げたteambit社が開発する、コンポーネント単位で開発・バージョン管理・共有を行うためのプラットフォームです。GitHub上で18.5k以上のスターを集めており、公式サイトのbit.devではコンポーネントの検索・閲覧ができるレジストリも提供されています。
通常のGitリポジトリは「プロジェクト」を単位に管理しますが、Bitは「コンポーネント」を最小単位として扱います。1つのリポジトリの中にある複数のコンポーネントを、それぞれ独立したバージョン番号で管理し、必要なものだけを別のプロジェクトへエクスポートできるのが最大の特徴です。
主な特徴
- コンポーネント単位のバージョン管理 - モノレポ内の個々のコンポーネントに独立したバージョン番号を付け、変更履歴を追跡できます
- 依存関係の自動解析 -
bit createで作成したコンポーネントが使う依存パッケージをBitが自動で検出し、コンポーネント単体でもビルド可能な状態に保ちます - 多言語・多フレームワーク対応 - React、Angular、Vue、Node.js、React Nativeなど幅広いスタックのコンポーネントを同じワークスペースで扱えます
- リポジトリを越えた再利用 -
bit exportで公開したコンポーネントは、別のリポジトリからnpm install感覚で取り込んで使えます - AIエージェント向けの構成要素 - コンポーネントごとに明確な境界と仕様があるため、AIコーディングエージェントに変更を任せる際の影響範囲を絞りやすい設計になっています
インストール
BitはNode.js製のCLIツールで、専用のバージョンマネージャー「BVM（Bit Version Manager）」経由でインストールします。
# BVM経由でBitをインストール（npm / npx を利用）
npx @teambit/bvm install
# インストール後、bitコマンドが使えるか確認
bit --version
BVMを使うのは、Bit本体のバージョンをプロジェクトごとに切り替えられるようにするためです。グローバルにbitコマンドが使えるようになったら準備完了です。
基本的な使い方
Bitはローカルのワークスペースを初期化し、CLIコマンドでコンポーネントを作成・管理するツールです。ブラウザだけで完結するライブラリではなく、Node.js環境とファイルシステムを前提とした開発ツールのため、この記事ではオンラインプレイグラウンドではなく、実際のコマンド例で使い方を紹介します。
まず、プロジェクトのルートでワークスペースを初期化します。
# 組織名/プロジェクト名を指定してワークスペースを初期化
bit init --default-scope my-org.my-project
続いて、React向けのコンポーネントを1つ作成してみます。
# reactテンプレートでpages/loginコンポーネントを作成
bit create react pages/login
# ワークスペース内のコンポーネント一覧を確認
bit status
bit createを実行すると、コンポーネント本体・テストファイル・ドキュメント（コンポジション）が一式生成されます。ここに実装を書き加えていくのが、Bitでの開発の基本的な流れです。
作成したコンポーネントは、bit startでローカルにUIを立ち上げてプレビューしながら開発できます。
# コンポーネント一覧とプレビューが見られるローカルUIを起動
bit start
実践的なユースケース
Bitの使い方は、開発フェーズごとに大きく3つのパターンに分かれます。
コンポーネントのバージョン管理と公開
複数人でコンポーネントを開発していると、「誰かの変更で別の画面が壊れた」という事態が起こりがちです。Bitでは、コンポーネントに変更を加えるたびにbit tagでバージョンを打ち、bit exportで公開することで、利用側は明示的にバージョンを指定してアップデートを取り込めます。
# 変更内容を確認してからタグ付け
bit status
bit tag --message "ログインフォームのバリデーションを追加" --patch
# リモートスコープ（bit.dev上のレジストリ）へ公開
bit export
--patchを--minorや--majorに変えることで、セマンティックバージョニングに沿った変更範囲を明示できます。破壊的変更を含む場合は--majorを使い、利用側に注意を促す運用にするとよいでしょう。
別プロジェクトへのコンポーネント取り込み
公開したコンポーネントは、別のBitワークスペースからbit installで取り込めます。ここが従来のGitサブモジュールやコピペ運用と大きく異なる点で、依存関係やビルド設定を意識せずに、npmパッケージと同じ感覚でコンポーネントを再利用できます。
# 別プロジェクトのワークスペースで実行
bit install my-org.my-project/pages/login
# 取り込んだコンポーネントの一覧を確認
bit list
チーム内で共通のUIコンポーネント群をBitスコープに集約しておけば、新しいプロジェクトを立ち上げるたびに、必要な部品をbit installで呼び出すだけで済むようになります。
既存コンポーネントの改変とフォーク
取り込んだコンポーネントをそのまま使うのではなく、プロジェクト固有の要件に合わせて調整したい場合は、bit forkでローカルにコピーを作り、独立したコンポーネントとして育てていけます。
# 取り込み済みのコンポーネントをローカルでフォーク
bit fork my-org.my-project/pages/login pages/login-custom
# フォーク後は通常のコンポーネントと同様にtag/exportできる
bit status
元のコンポーネントとの依存関係が切れるため、共通部品をベースにしつつも、プロジェクトごとに自由に手を加えられるのがbit forkの利点です。
まとめ
Bitは、コンポーネントを「プロジェクトの一部」ではなく「独立した再利用可能な資産」として扱うための開発プラットフォームです。bit createでコンポーネントを作り、bit tag・bit exportでバージョン管理しながら公開し、別プロジェクトからはbit installで取り込む、という一連の流れを押さえれば、社内に散らばりがちなUI部品を一元管理する基盤として活用できます。
まずは既存のリポジトリにbit initでワークスペースを追加し、よく使うコンポーネントを1つbit createしてみるところから始めてみてください。