Carbon Components Angular: Carbon を Angular に組み込む手順と対応範囲
IBM 向けの Carbon Design System の Angular 実装。これで、npm start を実行して、アプリケーションの構築を開始できるようになりました。
ひと目でわかる
- これは何？
- An Angular implementation of the Carbon Design System for IBM. Now we can run npm start and start building out our application!
- 誰に向いている？
- この資料だけで本番適性や性能を断定することはできません。carbon-design-system/carbon-components-angular の README に示された用途が自分の構成と一致する人は、記載された導入手順と具体的なサンプルを隔離環境で確認してください。
- 商用利用できる？
- できます。Apache-2.0 は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 5 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月14日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
プロジェクト概要
Carbon Components Angular は、TypeScript で書かれたオープンソースプロジェクトで、Carbon Design System の Angular 実装を提供します。リポジトリのメタデータによると、プロジェクトの説明は「An Angular implementation of the Carbon Design System for IBM.」です。現在、スター数は 564、フォーク数は 319、オープンイシューは 231 で、デフォルトブランチは master です。プロジェクトのホームページは https://angular.carbondesignsystem.com で、Carbon エコシステムにおける Angular 向けの実装としての役割を示しています。
はじめ方
README では、SCSS を使用した新しい @angular/cli プロジェクトから始めることを推奨しています。まず `npx @angular/cli new my-project --style=scss` を実行し、プロジェクトディレクトリに移動して、`carbon-components-angular`、`@carbon/styles`、`@carbon/icons` の 3 つのパッケージをインストールします。次に、`src/styles.scss` で `@use '@carbon/styles/scss/config' with (...)` を使用して `$use-flexbox-grid: true` と `$font-path: '@ibm/plex'` を設定し、`@use '@carbon/styles'` を追加して、html 要素で `styles.theme(styles.$white)` を呼び出します。最後に、`@carbon/icons/*` モジュールを宣言するための `module.d.ts` ファイルを作成します。
バージョンとサポートマトリックス
README には 2 つのサポートマトリックスがあります。1 つ目は Angular バージョンと Carbon Components Angular のメジャーバージョンとの互換性で、v3 は Angular 6 から 8、v4 は Angular 7 から 15（9 を除く）、v5 は Angular 14 から 21 をサポートしています。2 つ目はコミュニティサポートとアクティブサポートの定義で、v1 と v2 は完全にサポート外、v3 と v4 はコミュニティサポートのみ、v5 が現在アクティブにサポートされているバージョンです。README は、最新リリースと前回のリリースをサポートする計画であり、それ以降は保証しないと述べています。
コントリビューションガイド
コントリビューターは、リポジトリをフォークしてローカルにクローンし、`npm install` を実行して依存関係をインストールし、`npm run storybook` で Storybook を起動します。新しいコンポーネントを追加する場合は、`src` の下にコンポーネントコード、スタイル、テスト、ストーリーを含むフォルダを作成し、`index.ts` からモジュールをエクスポートします。修正を提供する場合は、ドキュメントを更新し、テストケースの追加や変更を検討します。PR を提出する前に、`npm test` と `npm run lint` を実行してテストと lint が通ることを確認します。README には、`npm run build` で dist を生成するコマンドや `docs:build` でドキュメントをビルドするコマンドなども記載されています。
イシュー提出とコードスタイル
イシューガイドラインでは、1 つの欠陥につき 1 つのイシューを開き、コンポーネントとバージョンを含む説明的なタイトルを付けることが求められています。イシューには、影響を受けるバージョン、問題の説明、再現手順、期待される動作、現在の動作、必要に応じてスクリーンショット、関連するコードスニペットを含める必要があります。bug、accessibility、design、discussion などのラベルを追加することが推奨されています。コントリビューターは Angular スタイルガイドに従い、プロジェクトの wiki にあるスタイルガイドとコンポーネント API ガイドラインを参照する必要があります。IBM 社員は、オープンソースプロジェクトへの貢献前に W3 Developer の手順を完了するよう指示されています。
プロジェクトの哲学
README は明確な哲学を述べています: コンポーネントは最小の計算単位であるべきで、ページやアプリケーションは多数のコンポーネントから構成されます。コンポーネントは可能な限りコンシューマーに委譲し、アプリケーションを単一の情報源として維持すべきです。コンポーネントは 1 つのことをうまく行い、過度に特化せず、必要な状態のみを保持し、ステートレスコンポーネントを優先します。スタイルガイドを一字一句実装する必要は必ずしもなく、ガイドは全体的な機能を提供し、コンポーネントは余分な機能を組み込まずに製品固有のデザインを可能にすべきです。
ライセンスとテレメトリー
このプロジェクトは Apache-2.0 ライセンスで提供されており、著作権と特許ライセンスを含む、複製、修正、配布、サブライセンスの権利をユーザーに付与します。ライセンステキストは定義、貢献、配布条件をカバーしていますが、サポート、セキュリティ、保証については言及しておらず、これらはライセンスの範囲外です。また、README は、このパッケージが IBM Telemetry を使用して匿名化されたメトリクスデータを収集し、インストールによって同意したとみなされるが、提供されたドキュメントを介してオプトアウトできると述べています。 初期化の手順は Angular CLI の新規プロジェクトを前提にしています。npx @angular/cli new my-project --style=scss で作成し、carbon-components-angular、@carbon/styles、@carbon/icons を npm で追加します。src/styles.scss では @carbon/styles/scss/config を読み込み、Vite 対応の font-path とグリッド設定を指定し、html に白テーマの CSS 変数を含めます。@carbon/icons の宣言ファイルには module.d.ts という .d.ts ファイルを使います。対応表では Angular 6 から 21 までと Carbon 側の v3、v4、v5 の組み合わせが示されているため、既存アプリの Angular 版だけで判断せず、採用する Carbon Components Angular 版の行まで照合します。 導入前の確認では、使用する版と実行環境を記録し、README の記載と実際の結果を照合します。資料にない機能や保証は推測で補わず、確認できなかった点を採用条件として残します。テスト入力と実行ログを保存し、更新後にも同じ手順を再実行できる状態を作ります。
編集部の結論
この資料だけで本番適性や性能を断定することはできません。carbon-design-system/carbon-components-angular の README に示された用途が自分の構成と一致する人は、記載された導入手順と具体的なサンプルを隔離環境で確認してください。採用前には依存関係、対応バージョン、失敗時のログ、ライセンス条件を対象プロジェクトの実データで確認し、資料にない保証を前提にしない判断が必要です。
コミュニティノート