Posted at

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

こんにちは!

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

webkitmozなどのブラウザープロパティを入れなくても, 一つの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のバックエンドサーバーで、データをバリデートしてくれるのでたくさん使います。

まだ使ってないけど使ってみたいパッケージはたくさんあります。

見つけたら足していきたいと思います。