こちらは金属加工プラットフォームを開発・運用するCatallaxyのCatallaxy Advent Calendar 2022の12/12の記事となります。
Mantine
React component library、Typescriptベースで、Next.jsにも対応しており、
- 見た目がかわいい
- デフォルトの色が青色ベース
なので使ってみたくなりました。
クライアント側だけで完結するもので、何か面白そうなものはないかと2分ほど考えました。CSSの使い方で特にflex、すぐに分からなくなって使うたびに調べるなあと思ったので、視覚的にflexの動きを追えるようなサイトでも作るかと思い作ってみました。
CSS sandbox
ソース
デモ
最大の問題は作ろうと思っていたflexの表示が全然できてないことですが、とりあえず動くものができたのでヨシ！少しずつ作っているので、そのうち出来るかもしれません。
最近見た以下のサイト、まさにこんな感じの見た目を実装したかったというのが出来ているのでおすすめです（宣伝）！
構成
以下の構成で作っています
- Next.js
- Mantine
- pathpida
- Recoil
- client stateのみで、かつコンポーネントで共有するstateが多いので、使ってみてます
- 単純に
Contextを使う場合よりも記述量が減って楽な気がする
Next.js + Mantine
Next.jsベースで必要なMantineの最小限のパッケージをインストール
yarn create next-app --typescript
or
npx create next-app --typescript
yarn add @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react
or
npm install @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react
以下の公式サイトにNext.js用テンプレートのGitHubへのリンクがあるので、それをcloneして使う方が便利かもしれません。
Pathpida
また、Next.jsの内部pathを取り扱うために、pathpidaを入れてます。
例えば、今回のサイトでマージン用ページの内部pathは
/styles/margin
なのですが、pathpidaを使うとpathを文字列ではなくネストしたオブジェクトとして取り出せて、かつそのままnext/routerに渡せば画面遷移できます。
import { useRouter } from 'next/router'
import { pagesPath } from 'lib/$path'
...
router.push(pagesPath.styles.margin.$url())
pathpidaをwatch状態にしておけばpathの変更は自動検知してくれるので、内部リンク指定で文字列を使うことなく安全にpathが設定出来るので便利です。
コンポーネントの配置
Mantineがデフォルトで用意しているAppShellを使うと、header + navbar (左メニュー) + aside (右メニュー)という構成を用意してくれるので、それをそのまま利用。右メニュー（aside）に表示されたつまみなどを調整すると、真ん中に表示されている図形の位置や形状が変化したり、右ニュー上にあるテキストが変化します。
CSSのmargin値の指定方法が全部で4種類あり、数字3つの場合どこのmargin指定だっけ？というのがすぐに分からなくなるので、
- 視覚的にどこのmarginが変わっているのか？
- 設定値としてどう変わっているのか？
というのが同時に分かるような作りにしてみました。
Mantineの良いところ
- デフォルトの見た目が良い（2回目）
- デフォルトが青い（2回目）
- コンポーネントが充実してる
- Typescriptサポート
- 基本的なhooksが充実している
-
use-disclosure: モーダル開閉制御など -
use-debounced-state: フォームのonChangeで保存するときなど -
use-resize-observer: コンポーネントのリサイズ検知 - 他にもたくさん
-
- 公式のドキュメントが充実している
- 例もあって、基本的に公式ドキュメントを見ればわかる
- 各種コンポーネント・カスタムフックドキュメントに、それぞれのソースのリンクがあるのも良い
- 更新が早い
- 作り始めたときは5.6.3だったけど、今最新は5.9.2（2022/12/8時点）
まとめ
Mantine使いやすくて良いですね。Flexは気長に実装したいと思います。