こんにちは!
Frog Advent Calender 2018年の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のバックエンドサーバーで、データをバリデートしてくれるのでたくさん使います。
まだ使ってないけど使ってみたいパッケージはたくさんあります。
見つけたら足していきたいと思います。