
私は2020年12月からWebエンジニアとして働いている小市民です。

## 2022/1
世の中のフロントエンドプロジェクトではstorybookなるものが使われているらしいな...
とりあえず神ツールであるReactとWebpackで使ってみるとするか...
最新のWebpack5だとWebpack4->5からの破壊的変更のせいでstorybookがそのまま使えないだと？！！バッチが配布されているらしいが...
じゃあWebpackではなく何やら爆速と話題のesbuildは、、、cssをインポートできないというブログがちらほら...？

[公式](https://esbuild.github.io/content-types/#css-from-js)によると、CSSモジュールとしてのインポートはまだできないって書いてある。
>You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js. Here's an example of importing a CSS file from JavaScript:
>```javascript
>import './button.css'
>
>export let Button = ({ text }) =>
>  <div className="button">{text}</div>
>```
>Note that esbuild doesn't yet support CSS modules, so the set of export names from a CSS file is currently always empty. Supporting a basic form of CSS modules is on the roadmap.


ふーん。とりあえずstorybookとviteをインストールして...ん？
今webpackって見えたような...webpackいるな...



```javascript
while (何かいいの見つかればな〜){
  （...GitHubで「storybook vite」で検索）
  （...!!...😣）
}
```

この文章はなんの役に立つんですかね？（疑問）


へっぽこエンジニアの技術選定時の頭の中



### 伝えたいことの結論
「リファクタリング」という言葉には新機能の追加タスクでも既存コードベースの改修が含まれる。

#### 自己紹介
前提として、私自身は小さな受託システム開発会社（50人規模）で働くWebエンジニアで主に新規開発を転々とやっています。


### いつやるか
コードを触る機会があったなら、それは常にリファクタリングするタイミング。

### 例え話
料金を表示するコードがあったとする。

```jsx
const price = 100

return (
  <div>
    {{
      price.toLocaleString("ja-JP", {
        style: "currency", currency: "JPY",
      })
    }}
  </div>
)
```

もし料金を国別の表にするという変更があったら、次のようにしたとする。  

```jsx
const priceJP = 100
const priceUS = 1

return (
  <div>
    <div>日本: {{
       priceJP.toLocaleString("ja-JP", {
         style: "currency", currency: "JPY",
       })
    }}</div>
    <div>米国: {{
       priceUS.toLocaleString("en-US", {
         style: "currency", currency: "USD",
       })
     }}</div>
  </div>
)
```

priceだったものが暗黙の了解として日本料金を示していたが、他の国が入ったことで暗黙の了解は崩れそれぞれを明示するに至った。  
私はこれをいい変更だと考えるものとして次の話に進む。  

### 実際によくあるやつ
この部分を既存コードの変更を嫌がって次のようにすることってまま稀によくあると思う。

```jsx
const price = 100 // 名前の変更もしない
const priceUS = 1 // 新しく追加
```

私はこういう時、変更の箇所が増えて自分が負わないでいい責任を負ってる感覚を味わうことがあるが、そこも含めてリファクタリングや仕様変更と呼びたい。  


しかもこういった部分は `price` のままにするとレビュワーからは差分にならないのでGitHub上から見えづらい。  

そのためレビュイーに頼る部分が多くなるが、善意でバグを発生させようとも善意を持ちたい（静的解析ツールを存分に頼ろう）

社のチーム内での共有に書いたメモの一部

ikmnjrd.github.io

ポエムの投稿記事一覧