# xapping-front改善案

## 難易度???(聞きたいもの)

### GenerateGetCompany.jsでgenerateしているファイルは事前にかける気がする

なぜファイルを作る書き方をしてるのかお聞きしたいです！

#### answer

crypoしたいため

### storage/index.js

これはなんでしょう？👀

#### answer

ゆくゆく消えそう？

アポロのときに必要っぽい

### 配信の仕方について詳しく聞けると嬉しいです

配信のインフラを最適化することでより早くデリバリーできる可能性があるなと思いました

#### answer

cloud storage -> [stack path](https://www.stackpath.com/)

## 難易度⭐︎(すぐに着手できて1週間ほどでリリースができるぐらいのタスク)

### npm scriptの見直し

npm scriptの命名があまり見ない命名（主観）をしているので、命名を見直したり設定の書き方を見直す
例えばwebpackのfileがdevとprdで分かれているがそこで分けずに1つのファイルで簡潔させる代わりに環境変数で刺せるようにしたほうが管理がしやすくメンテナビリティが高くなる

### dependencyの見直し

bootstrapやmaterial-uiなどのような作用が被りそうなものがはいっているので本当に必要なのか見直すのが良いかもしれない

### webpack.configの見直し

現状分かれているwebpack.configは環境変数で書き換えることができるので、1ファイルで管理した方がよいと感じる

### distをgit管理に含めない

distは作ったローカルのものとremoteのものがconflictする可能性があるので含めるのはあまりしない気がしました

### index.jsのgetCidとgetDomで被った実装はDRYすると良いかも

xpCidTagを得る箇所はかぶった実装をしているのでDRYできるかと思いました

### useCallbackの活用

コンポーネント内部でfunctionを作る場合は、useCallbackを使ってメモ化しないとコンポーネントの再レンダリングのたびに関数が再生成されるので、useCallbackを使うのがよい

### keyにloopのindexを渡すのは避けるべきコードなので実装を考えなおす

loopをする場合、keyを指定するがそれにindexに指定してしまうとloopする側が増えた場合、indexがずれるので再レンダリングで不具合を起こすため避けるべき

### マジックナンバーをなくす

durationなどでマジックナンバーが散見されたのでマジックナンバーをなくす

### function句で書くのとarrow functionで書くのを揃えた方がよさそう

書き方を揃える方がぱっと見でこれがreact componentなのかfunctionなのかが分かりやすくなります！

### cookieを記述する際はjs-cookieなどを活用した方が実装が綺麗になる

cookieに直接値を書き込む場合はhttps://github.com/js-cookie/js-cookie を使うともう少しきれいに書ける気がします

GetInflowCode.jsとかにある `setCookie` や `getCookie` も不要になります

## 難易度⭐︎⭐︎⭐︎（少し時間がかかるがやっておくと吉）

### .js to .jsx

.jsで書いているReactのコードを.jsxで書くのが良いと感じました。多くのエディタは.jsxや.tsxに対してsyntax highlightやLSPを動かすので.jsxにするのがベター

### ReactDOM.renderを複数のDOMに対してレンダリングするを止める

index.jsのloopの中で複数ReactのコンポーネントをReactDOM.renderでレンダリングしてるのは、マウントポイントが複数に増えてしまいReactの差分検知のシステムにうまく乗れないのでパフォーマンスが劣化すると思われるので、１つ大きいコンポーネントをレンダリングして、差分検知をReactに任せた方がいい

### ReactのコンポーネントをforwardRef使ってる部分の解決

基本的にrefは使わない（videoなどは別）ので、LikeButtonなどでforwardRefしてるのは不要に思えるため実装を見直したほうが良い気がします

### useImperativeHandle

refと同じようにReactの公式docsでも使用をなるべく避けるように書いているので避けたい

### lintの導入

eslintを使うとより堅牢なシステムが作れるのでeslintを使うと良い
typescriptに置き換えてからやるならGoogleのTypeScript Guideである gts を使うとメンテフリーで行えるので比較的簡単に実装できます
https://github.com/google/gts

### SendPvコンポーネントなどはcustom hooksを作ることで実現できそう

SendPvは Send というメソッドをuseImperativeHandleで実装しているが、custom hooksにするのがReact wayだと思う

## 難易度⭐︎⭐︎⭐︎⭐︎⭐︎（1~2ヶ月ほどを要するが、モダンなWeb開発の実装）

### TypeScript化する

基本的に今のwebはTypeScriptで記述するのが多いのでまだコード数が少ないうちにTS化してしまったほうが今後の運用も楽になるなと感じました

### Preactの導入を検討する

React（2.8KB）、ReactDOM（39.4KB）に対してpreact（4KB）でReactと同じ書き心地変わらないのでオススメです

### storybookの導入

componentsの下のcomponentsのUIがズレてないかや、UIの実装をする時に便利です

### webpackの最適化

https://qiita.com/mizchi/items/418be9abee5f785696f0
mizchiさんの記事とかみながら最適化するとより小さくできたりするかも？

### webpackのcachegroupsを活用する

reactやreact-domなどのライブラリはコンポーネントによってダブる可能性があるので最近はframework.jsみたいにその実装だけをまとめることをよくします。これがwebpackのcacheGroupsです。hiroppyの記事がわかりやすい気がします