More than 1 year has passed since last update.

React/Next.jsでのIBM Carbon Design Systemの始め方

Last updated at 2024-03-04Posted at 2024-02-23

やりたいこと

IBMのCarbon Design SystemをReactで使いたいので、以下のようなボタンUIをまず実装してみる

方法はこのドキュメントに従った

プロジェクト作成

Reac/Next.jsのプロジェクト作成

$ npx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / **Yes**
✔ Would you like to use ESLint? … No / **Yes**
✔ Would you like to use Tailwind CSS? … **No** / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to customize the default import alias (@/*)? … **No** / Yes

cd my-app

Carbon Design Systemのインストール

npm install @carbon/react

Carbonを使えるようにファイルの編集

We need to run a Sass build as the Carbon styles are authored in Sass, so run the following command to install sass as a dependency.

ということらしいので、以下コマンドも実行

npm install node-sass

In src directory, rename globals.css as globals.scss and change the import in layout.js from global.css to globals.scss.

加えて、/srcディレクトリ内のglobal.css をglobal.scssにリネームして、layout.jsのimport文もそれに合わせて書き換えるようにということ。

globals.scssにはとりあえず、ファイルのtopに@use '@carbon/react';を追記。既存のコードは消してよい

globals.scss

@use '@carbon/react';

src/app/layout.tsxも以下のようにimport "./globals.scss";とする

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.scss";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

src/app/page.tsxに'use client'とimport { Button } from '@carbon/react';を追加

page.tsx

'use client'
import { Button, Checkbox } from '@carbon/react';

export default function Home() {
  return <Button>Example usage</Button>;
}

実行

次は実行してみる。

npm run dev

http://localhost:3000/ にアクセスすると表示される。これでCarbon Design Systemが使えていることを確認。

自動でブラウザを開く設定

package.jsonの

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

の "dev": "next dev",を "dev": "open http://localhost:3000 && next dev",に変更する

package.json

"scripts": {
    "dev": "open http://localhost:3000 && next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up