会社で使っているReactパッケージ+Githubお助けツール

こんにちは!
[Frog Advent Calender 2018年](https://adventar.org/calendars/2875?fbclid=IwAR3Eir0r6UdkI9_s0amfQnKk56Va4Ai8wq9hoipOfsGh9ChDoTqom-DeA6M#list-2018-12-01)の25日のトリ担当Saayamanです。

今日は会社で使っているReactパッケージ+Githubお助けツールについて書きます。
`react`, `react-dom`, `redux`, `webpack` や　`babel`などのミドルウェア系などと、書かないモジュールもあります。

##（自分にとって）絶対不可欠

#### eslint
https://eslint.org/
ECMAScript/JavaScriptのコードのパターンを美しく一律化してくれる。
殆どの会社プロジェクトは使っていることでしょう。

#### dotenv
https://www.npmjs.com/package/dotenv
`.env` ファイルをローカルに作って環境変数(environment variable)を入れておくことで、localhostでもサードパーティーアプリなどをテストで見ることができる！`.gitignore`で、このファイルを無視しておくとアップロードされずに済見ます。

#### axios
https://www.npmjs.com/package/axios
axiosの関数を使うことでリクエストが楽に書けます！

#### classnames
https://www.npmjs.com/package/classnames
cssのためのクラス名を条件文で追加したり外したりできる。

#### enzyme
https://airbnb.io/enzyme/
javascriptのテストツールヘルパーで、Reactコンポーネントのレンダー結果を吐き出して、前回と比較したりできます。

#### jest
https://jestjs.io/
コンポーネントごとにテストケースなどを作って結果を吐き出してくれるツール。

#### react-helmet
https://github.com/nfl/react-helmet
metaデータなどのSEO関係タグをページごとにレンダーしてくれるツール。1ページアプリならでのモジュールですね。

#### lodash
https://lodash.com/
javascriptの面倒な関数を簡略化してくれる、スーパーコードヘルパー。
jsを理解して入ればしているほど、使っているイメージ。

#### nodemon
https://nodemon.io/
何かを変更して、保存したらサーバーを再起動してくれる。なのでRefreshしなくても最新のプロジェクト状態が見れるのだ！reactプロジェクトだったら大体入っている。

#### react-media
https://www.npmjs.com/package/react-media
画面のサイズによって、条件文を足したり引いたりできるスーパー便利ツール。

#### moment
https://www.npmjs.com/package/moment
React以外でもすごい使われる、時間に関しての全てを担ってくれるjavascriptツール。
例えば、現在の時間を好きな形式で結果を出せたり、タイムゾーンや計算などもしてくれます。

#### postcss-loader
https://github.com/postcss/postcss-loader
`webkit` や `moz`などのブラウザープロパティを入れなくても, 一つのcssだけがあれば、全て変換してくれるツール

#### query-string
https://www.npmjs.com/package/query-string
`?foo=bar'`などのクエリをこんな感じで`{foo: 'bar'}`オブジェクト化してくれる便利ツール。

#### slugify
https://www.npmjs.com/package/slugify
regExっぽい。stringに色々と条件を出して、望ましい結果を出ししてくれる。例えば複数のstringを`-`とつなげるなど。


#### stylelint
https://www.npmjs.com/package/stylelint
eslintみたいに、styleのファイルを綺麗にしてくれるツール

#### react-click-outside
https://www.npmjs.com/package/react-click-outside
設定したコンポーネント以外をクリックすると関数を走らせることができる。モデルなどを開いた時、モデル以外をクリックすると閉まるような使い方をしています。

#### react-loadable
https://github.com/jamiebuilds/react-loadable
コンポーネントをダイナミックに必要な時にimportさせてくれる！こうすることでプロジェクトがロードされるのが早くなる


## あるとボーナス！

#### validator
https://www.npmjs.com/package/validator
メールチェック、パスワードなど色々な入っているバリデーター!フォームやインプットなどに使えます。

#### react-pose
https://popmotion.io/pose/
色々な滑らかなアニメーションを含んでいるライブラリ

#### search-query-parser
https://www.npmjs.com/package/search-query-parser
サーチなどで、複数の単語をサーチする時にオブジェクト化してくれるツール

#### react-copy-to-clipboard
https://www.npmjs.com/package/react-copy-to-clipboard
その名の通り、ボタン一つで何かをコピーしたいときに、クリップボードにコピーさせてくれるお助けツール

#### react-infinite-scroller
https://www.npmjs.com/package/react-infinite-scroller
これも、その名の通り。永遠に等しい検索結果やリストがある場合、スクロールその場所にたどり着いた時にで内容を読み込む。

#### path-to-regexp
https://www.npmjs.com/package/path-to-regexp
`/user/:name`などのstringをregular expressionに変換してくれるツール

#### platform
https://www.npmjs.com/package/platform
Webかmobileか、どのデバイスを使っているか判定してくれる！さらにどのモバイルの種類まで当ててくれる。

#### lottie-web
https://github.com/airbnb/lottie-web
after effectsで作ったアニメをjsonファイルに変換したものを使います。タイミングを図ってループしたり好きな時にストップしたり、インタラクティブなアニメが作れる。

#### entities
https://www.npmjs.com/package/entities
HTML/XMLをエンコード・デコードしてくれる。フロントサイドではあまり使わないです、どちらかというとjavascriptのバックエンドサーバーで、データをバリデートしてくれるのでたくさん使います。


まだ使ってないけど使ってみたいパッケージはたくさんあります。
見つけたら足していきたいと思います。