UXPin Merge + TypeScript + Storybookの環境 ゼロから作る

これは何

Emotionを使う準備

ライブラリのインストール

まずはこちらのコマンド。

(Emotionにはstyled-component記法でスタイルを書くための@emotion/styledもありますが、筆者がstyled-component記法をあまり好まないためこの記事では省略しています。)

JSX Pragmaを省略するために

1yarn add -D @emotion/babel-preset-css-prop
01  {
02    "compilerOptions": {
03      "target": "es5",
04      "module": "commonjs",
05      "esModuleInterop": true,
06      "forceConsistentCasingInFileNames": true,
07      "strict": true,
08      "skipLibCheck": true,
09-     "jsx": "react"
10+     "jsx": "react-jsx",
11+     "jsxImportSource": "@emotion/react"
12    }
13  }
01  module.exports = {
02    stories: [
03      "../stories/**/*.stories.mdx",
04      "../stories/**/*.stories.@(js|jsx|ts|tsx)",
05    ],
06    addons: [
07      "@storybook/addon-links",
08      "@storybook/addon-essentials",
09      "storybook-css-modules-preset",
10    ],
11+   babel: async (options) => ({
12+     ...options,
13+     presets: [...options.presets, "@emotion/babel-preset-css-prop"],
14+   })
15  }

上記の設定はしなくても動くのですが、そうするとtsxファイルの先頭に毎回

1/** @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用の記述がいくらか残っていますので綺麗にします。

01  ...
02  module: {
03    rules: [
04      {
05        loader: ['babel-loader', 'ts-loader'],
06        test: /\.tsx$/,
07        exclude: /node_modules/
08      },
09-     {
10-       test: /\.css$/,
11-       use: [
12-         {
13-           loader: 'style-loader',
14-         },
15-         {
16-           loader: 'css-loader',
17-           options: {
18-             importLoaders: 2,
19-             modules: true
20-           },
21-         },
22-       ],
23-     },
24    ]
25  }
26  ...
1  ...
2  addons: [
3    "@storybook/addon-links",
4    "@storybook/addon-essentials",
5-   "storybook-css-modules-preset",
6  ],
7  ...
1yarn remove @types/css-modules css-loader storybook-css-modules-preset style-loader

あとは module.css ファイルを消せばOKです。

最後に

この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。

この記事は、綿貫様にご執筆いただきました。元記事は、こちら

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you