Chapter 10

【余談】Joy.uiによるUIの変更

ますみ / 生成AIエンジニア
ますみ / 生成AIエンジニア
2024.12.21に更新

Joy UIとは?

Joy UIはUIコンポーネントで、 MUIと同様、React用のコンポーネントライブラリです。

Joy UIは、MUIより後にリリースされ、まだBeta版です。しかしながら、MUIとは異なりマテリアルデザインの仕様に合わないデザインにも対応できる UI コンポーネント集になっており、デザインもMUIより好みなので開発でも使用しています!

また、Joy UIにはすでにできあがったデザインのテンプレートがいくつか提供されていて、それを使用すれば1からデザインする必要がないので爆速で作ることができます!

Joy UIのインストール

Joy UIを導入するために、pnpmで以下のコマンドを実行します。

pnpm add @mui/joy @emotion/react @emotion/styled

テンプレートのインストール

こちらのテンプレートを使っていきます。

まず、このcodesandboxからファイルをダウンロードして、必要なところだけコピーしていきます。

https://codesandbox.io/p/sandbox/modest-visvesvaraya-wl82n2?file=/useScript.ts

ファイル追加した後の構成はこちらです。

.
└── my-app
		├── README.md
		├── next-env.d.ts
		├── next.config.mjs
		├── package.json
		├── pnpm-lock.yaml
		├── public
		│   └── images
		│       └── test.svg
		├── src
		│   ├── app
		│   │   ├── api
		│   │   │   └── chat
		│   │   │       └── route.js
		│   │   ├── error.tsx
		│   │   ├── favicon.ico
		│   │   ├── globals.css
		│   │   ├── layout.tsx
		│   │   ├── loading.tsx
		│   │   ├── not-found.tsx
		│   │   ├── page.tsx
		│   │   └── provider.tsx
		│   ├── common
		│   │   ├── hooks
		│   │   │   └── useScript.tsx
		│   │   ├── states
		│   │   │   └── data.tsx
		│   │   ├── types
		│   │   │   └── index.tsx
		│   │   ├── useScript.ts
		│   │   └── utils
		│   │       └── index.ts
		│   └── components
		│       ├── AvatarWithStatus.tsx
		│       ├── ChatBubble.tsx
		│       ├── ChatListItem.tsx
		│       ├── ChatsPane.tsx
		│       ├── ColorSchemeToggle.tsx
		│       ├── Header.tsx
		│       ├── MessageInput.tsx
		│       ├── MessagesPane.tsx
		│       ├── MessagesPaneHeader.tsx
		│       ├── MuiLogo.tsx
		│       ├── MyMessages.tsx
		│       └── Sidebar.tsx
		└── tsconfig.json

pnpm dev で確認してみましょう!

レスポンシブやナイトモードにも対応しているので、ここから機能の追加やスタイルのカスタマイズを行なっていけば、クオリティの高い開発が高速でできます!

宣伝:もしもよかったらご覧ください^^

AIとコミュニケーションする技術(インプレス出版)』という書籍を出版しました🎉

これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。

かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^