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


# はじめに

Carbon Design Systemをあまり聞いたことが無い方が多いと思いますが、IBMのオープンデザインシステムです。
[Carbon Design System公式](https://www.carbondesignsystem.com/)

こういった角張った？特徴的なデザインです。（キャプチャは公式サイトより）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191958/238dfdeb-d903-47e6-787a-ff69beecc90e.png)

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;
```

このような表示がされれば成功。それっぽい画面になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191958/8d39cd25-a205-3e7e-6d00-8cf8df6ac8fd.png)

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

# 参考サイト
- [新しい React アプリを作る](https://ja.reactjs.org/docs/create-a-new-react-app.html)
- [Carbon Design System公式](https://www.carbondesignsystem.com/)