create-react-app(ver2)でTypeScriptとStoryBookを使う

# 概要

[create-react-app(react-scripts)](https://github.com/facebook/create-react-app)は2018年10月のversion2.0系のリリースからCSS-Modulesが公式サポートされています。
さらに、2018年11月のversion2.1系のリリースからTypeScriptも公式サポートされています。
なので、version1系の時と違ってejectなどの特別なことをしなくてもCSS-ModulesやTypeScriptを割と簡単に導入できるようになっています。

当記事では、執筆時点(2019-01-20)で最新バージョン(2.1.3)のcreate-react-appを使って公式ドキュメントに従ってTypeScript等の設定を追加し、確認用のサンプルコンポーネントをStoryBookで表示できるところまでやってみた知見の共有になります。

[参考：create-react-app(adding-a-sass-stylesheet)](https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet)
[参考：create-react-app(adding-typescript)](https://facebook.github.io/create-react-app/docs/adding-typescript)
[参考：create-react-app(developing-components-in-isolation)](https://facebook.github.io/create-react-app/docs/developing-components-in-isolation)

[参考：CSSモジュール ― 明るい未来へようこそ](https://postd.cc/css-modules/)
[参考：StoryBook](https://storybook.js.org/)

# 執筆時（2019年01月20日）のバージョン

|  |version  |
|---|---|
|create-react-app |2.1.3 |
|storybook |4.1.7 |
```shell
$ grep \"react-scripts\" package.json
    "react-scripts": "2.1.3"

$ sb --version
4.1.7
```

# やったこと
<font color="red">※下記手順以外にもエラーの解消のためにひとつだけ追加で実施したことがあります。その内容については、最後の「【補足】AP起動時にエラー！？」に書いてあります。</font>

## ・SASS,TypeScript,StoryBookを追加
公式ドキュメント（「概要」に書いてあるリンク先参照）に書いてある通りにcreate-react-appから生成したAPの初期状態に対してSASS、TypeScript、StoryBookの設定を追加しただけ。

```
npx create-react-app my-app
cd my-app
yarn add node-sass
yarn add typescript @types/node @types/react @types/react-dom @types/jest
npx -p @storybook/cli sb init
```
## ・サンプルコンポーネントの追加
TypeScriptやCSS-Modulesで書いたコンポーネントがちゃんと動くか確認するためのコンポーネントを作成します。
Sample.tsxがTypeScriptで実装したコンポーネントです。
tsxファイル以外はCSS定義で、CSS-ModulesやSASSの書式を使ってみてます。

＜sampleコンポーネント関連ファイルリスト＞

```
Sample.tsx
Sample.css
Sample.module.scss
Sample.scss
Variables.scss
```

＜Sample.tsx＞

```react
import React from 'react';

// style with normal css
import './Sample.css';
// style with sass
import './Sample.scss';
// style with CSSModules(with sass style)
import style from './Sample.module.scss';
// define variable with type.
const sampleStr: string = 'CSS-Modules and SASS-Style';
// enum of Typescript
enum SampleEnum {ENUM1, ENUM2};

const Sample = () => (
  <div>
    {/* Sampleコンポーネントに閉じた".sample"CSSクラスの定義 */}
    <div className="sampleStyle">Normal-CSS</div>
    <div className="sass sassSampleStyle">SASS-Style</div>
    <div className={style.sassSampleStyle}>{sampleStr} : {SampleEnum[0]}</div>
  </div>
);

export default Sample;
```

＜Sample.module.scss＞

```scss

@import './Variables.scss';

.sass {
  // SASSの文法が有効である確認のため無意味に入れ子にしてます
  &SampleStyle {
    padding: 1rem;
    background-color: $colorOfCssModules;
  }
}
```

## サンプルコンポーネントのApp.jsとStoryBookへの追加
＜src/App.jsにSampleコンポーネントを追加＞

```react
import Sample from './sample/Sample';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Sample />
// ～省略～ 
```

＜StoryBook (src/stories/index.js)にSampleコンポーネントを追加＞

```react
import Sample from '../sample/Sample';
// ～省略～ 
storiesOf('Sample', module)
  .add('Sample', () => <Sample />);
```

# 確認する

AP本体は```yarn start```コマンドで起動できます。
![SampleComponent.PNG](https://qiita-image-store.s3.amazonaws.com/0/41110/cc8bea03-866e-835f-15c7-b5da2ff73b9f.png)

StoryBookは```yarn storybook```コマンドで起動できます。
![SampleComponent2.PNG](https://qiita-image-store.s3.amazonaws.com/0/41110/99aa47fc-0a2d-07c8-5e6e-fd09b19c41ef.png)

**どちらも、追加したSampleコンポーネントが問題なく表示できてますね！**
ソースはgithubにもアップしています。よかったらgit cloneして実際に動かしてみて下さい。
https://github.com/kinocoffeeblack/my-create-react-app-with-storybook-ts

#【補足】AP起動時にエラー！？

基本的には"やったこと"に書いたやり方で行けるはずでしたが、今回は最初の"yarn start"での起動時に下記のようなエラーで起動が失敗してしまいましたので、ひと手間追加してます。

```
$ yarn start
yarn run v1.12.3
$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
... 
```

Version2.1.3のcreate-react-appが"babel-loader"の"8.0.4"を必要とする一方で、StoryBookの設定を追加したときに"^8.0.5"のバージョン指定がpackage.jsonに追加されるので、不整合が起きているようでした。  

## ひと手間内容

エラーメッセージ内容を手掛かりに下記の変更を行ってみたところ、とりあえずはエラーは解消できました。

- package.jsonの"devDependencies"に設定されていた"babel-loader"のバージョン指定を"^8.0.5"から変更して"8.0.4"に固定

```
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.7",
    "@storybook/addon-links": "^4.1.7",
    "@storybook/addons": "^4.1.7",
    "@storybook/react": "^4.1.7",
    "babel-loader": "8.0.4" ←コレ！
  }
```

- "yarn.lock"ファイルをいったん削除
- "yarn install"のやり直し

おそらくこの問題は一時的なもので、近い将来のcreate-react-appのマイナーバージョンアップ等で改善されるのかなと思ってます。
改善されたら（改善されたことに自分で気付けたら）この記事も修正しておきますね。