10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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のバックエンドサーバーで、データをバリデートしてくれるのでたくさん使います。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
10
Help us understand the problem. What are the problem?