ReactにCarbon Design SystemのUIを導入してみた

はじめに

Carbon Design Systemをあまり聞いたことが無い方が多いと思いますが、IBMのオープンデザインシステムです。
Carbon Design System公式

こういった角張った？特徴的なデザインです。（キャプチャは公式サイトより）

React、Vue、AngularといったメジャーなUIフレームワークで利用することが出来ます。
今回、関わっているプロジェクトでCarbon Design Systemを使ったUIを作ることになったので導入手順、動作確認までの手順をまとめてます。

環境

• Windows 10
• Node.js v12.16.3
• npm 6.14.4
• yarn 1.22.4

手順

• ディレクトリ作成

# アプリのコードを管理するディレクトリを作成
$ mkdir app
$ cd app
# クライアントのコードを配置するディレクトリを作成
$ mkdir client

• Carbon Design Componentの導入

$ cd client
# my-app=アプリ名（任意のものでOK） ※npxはnpm 5.2 から利用できるパッケージランナーツール
$ npx create-react-app my-app
$ cd my-app

yarn add carbon-components carbon-components-reac @carbon/icons-react carbon-icons --save

# scssを使うために必要 バージョンを指定してインストールする
$ yarn add node-sass@4.14.1 --save

• client/app-name/ にindex.scssを作成

index.scss

@import 'carbon-components/scss/globals/scss/styles.scss';

• index.jsをindex.scssを読み込むように修正

index.js

import './index.scss';

• client/app-name/ App.css -> App.scssにリネーム(せっかくなので。やらなくても良い)

これで準備完了。動作確認をします。
↓を参考にヘッダーを付けてみます。
https://www.carbondesignsystem.com/components/UI-shell-header/usage

• App.jsを修正

App.js

import React from "react";
import { render } from "react-dom";

import Search20 from "@carbon/icons-react/lib/search/20";
import Notification20 from "@carbon/icons-react/lib/notification/20";
import AppSwitcher20 from "@carbon/icons-react/lib/app-switcher/20";
import {
  Header,
  HeaderName,
  HeaderGlobalAction,
  HeaderGlobalBar,
  HeaderNavigation,
  HeaderMenu,
  HeaderMenuItem
} from "carbon-components-react/lib/components/UIShell";

import { Button } from 'carbon-components-react';

import './App.scss';

function App() {
  return (
    <div className="App">
      <div className="container">
        <Header aria-label="IBM Platform Name">
          <HeaderName href="#" prefix="IBM">
            [Platform]
          </HeaderName>
          <HeaderNavigation aria-label="IBM [Platform]">
            <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
            <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
            <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
            <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
              <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
              <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
              <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
            </HeaderMenu>
          </HeaderNavigation>
          <HeaderGlobalBar>
            <HeaderGlobalAction aria-label="Search" onClick={() => {}}>
              <Search20 />
            </HeaderGlobalAction>
            <HeaderGlobalAction aria-label="Notifications" onClick={() => {}}>
              <Notification20 />
            </HeaderGlobalAction>
            <HeaderGlobalAction aria-label="App Switcher" onClick={() => {}}>
              <AppSwitcher20 />
            </HeaderGlobalAction>
          </HeaderGlobalBar>
        </Header>
      </div>
    </div>
  );
}

export default App;

このような表示がされれば成功。それっぽい画面になりました。

更新履歴

• 2022/1/4 実行するコマンドが分かりづらかったので、表記を修正

参考サイト

• 新しい React アプリを作る
• Carbon Design System公式