UXPin Merge + TypeScript + Storybookの環境 ゼロから作る
これは何
- この記事は、綿貫様にご執筆いただきました。
- この記事には、Part 1とPart 2の続きになります。
- UXPin Merge をTypeScriptとともに導入するための記事となります。
- 前回はCSS Modulesを導入しましたが、筆者はCSS in JSの方が好みなため更に入れ替えます
- 使い慣れているのもあり、Emotionの導入を説明します
Emotionを使う準備
ライブラリのインストール
まずはこちらのコマンド。
yarn add -D @emotion/react
（Emotionにはstyled-component記法でスタイルを書くための@emotion/styledもありますが、筆者がstyled-component記法をあまり好まないためこの記事では省略しています。）
JSX Pragmaを省略するために
yarn add -D @emotion/babel-preset-css-prop
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
- "jsx": "react"
+ "jsx": "react-jsx",
+ "jsxImportSource": "@emotion/react"
}
}
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-css-modules-preset",
],
+ babel: async (options) => ({
+ ...options,
+ presets: [...options.presets, "@emotion/babel-preset-css-prop"],
+ })
}
上記の設定はしなくても動くのですが、そうするとtsxファイルの先頭に毎回
/** @jsxImportSource @emotion/react */
と記載しないといけなくなってしまいます（JSXプラグマというもので、詳しくはこちらをご覧ください）
毎回書くのは地味に面倒ですし、うっかり忘れて動かなくなることもあるので対策しておくためのコードでした。
（2021年11月現在、実はEmotion公式は@emotion/babel-preset-css-propではなく@emotion/babel-pluginを推奨しているのですがStorybookで上手く動いてくれませんでした。そのためこの記事では@emotion/babel-preset-css-propを使用しています。）
Emotionを使う
ここまで来たら各コンポーネントのスタイル指定をCSS Modulesの記法からEmotion式に変えるだけでOKです。
こんな記事を書いておいて何ですが、実はEmotionを使うにあたりUXPin自体の設定変更は必要ありません笑
ただ、自分が導入しようと思ったときは「実質セット」であるStorybook側の設定に色々悩まされたのでこのタイトルで記事を投稿しています。
お片付け
前回導入したCSS Modules用の記述がいくらか残っていますので綺麗にします。
...
module: {
rules: [
{
loader: ['babel-loader', 'ts-loader'],
test: /\.tsx$/,
exclude: /node_modules/
},
- {
- test: /\.css$/,
- use: [
- {
- loader: 'style-loader',
- },
- {
- loader: 'css-loader',
- options: {
- importLoaders: 2,
- modules: true
- },
- },
- ],
- },
]
}
...
...
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
- "storybook-css-modules-preset",
],
...
yarn remove @types/css-modules css-loader storybook-css-modules-preset style-loader
あとは module.css ファイルを消せばOKです。
最後に
この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。
この記事は、綿貫様にご執筆いただきました。元記事は、こちら。
