この記事は Adventure Advent Calendar 2018 10日目の記事です。

フロントエンドエンジニアの嶋谷です。

みなさんnpmパッケージ使ってますか?
コマンド一つインストールするだけで使うことができる機能がたくさんあって便利ですよね。
そんなnpmパッケージで僕が携わっているプロジェクトの中で個人的に便利と感じたものをまとめました。

内容について

僕が携わっているホテルのプロジェクトではReact + Reduxを使用し、開発環境としてBabel + Webpackの構成で開発しています。
この辺りのパッケージも大変便利ですが、今回は省略して、基本的に有名ではないが便利なパッケージを紹介します。

humps

多くの開発の場合、フロントエンドとサーバサイドの開発言語が違うことは当たり前のようにあり、フロントエンドからAPIでデータを取得しようとするとサーバ側開発言語のコーディング規約の事情でスネークケースだったりすることありますよね？
けれどjsの規約であるべきなのはキャメルケース。
そんなときに使えるのがこのhumpsでObjectのキー名をスネークケース→キャメルケースに変換でき、その逆も対応可能です。

See the Pen humps demo by Osamu Shimaya (@adv-o-shimaya) on CodePen.

platform

UAの判定はサーバサイドでもできますが実装を進めれば進めるほどフロントエンド側でのユーザーエージェントの判定が必要になるということがあると思います。そんなときに使えるのがplatform.jsです。
このライブラリはユーザーエージェントをもとにブラウザやOSの名称をオブジェクトとして返してくれ、ブラウザ個別の処理を書くときに便利です。

See the Pen platform demo by Osamu Shimaya (@adv-o-shimaya) on CodePen.

raven-js

これはフロントエンドでも使えるログ収集サービスのSentryで使うパッケージです。
raven-for-reduxと一緒に使っており、チェックが漏れてしまったバグもキャッチしてくれるので問題を見つけるまでの流れが非常にスムーズになります。

redux-persist

ホテルのプロジェクトではreact + reduxの構成で実装していますが、この中で厄介なのが画面の再読込が行われると中で保持したデータが消えてしまうことです。そこで使えるのがredux-persistです。これはActionで実行した内容をローカルストレージに都度保存して、再読込の際にstateを読み込むことができる機能です。なお、ローカルストレージ以外にもセッションストレージやLocalForageのようなライブラリも記録に使えます。

prettier

このパッケージだけはものすごく便利なので挙げさせてください。コードのフォーマットをするパッケージです。
従来のlintでは構文の誤りやルール違反は指摘してくれましたが、インデントや改行までは教えてくれませんでした。しかしprettierを使うことによってそれが解決されました。ルールを設定すれば誰が書いても同じコードをかけるようになり、特にReactの環境ではjsのコードだけではなくjsx(≒reactのhtml)に関わる部分も自動でインデントしてくれることが、開発上非常に効率的です。VSCodeやSublimeなどのエディタ用のプラグインもあり、ファイルを保存するだけで整形することもでき大変便利です。

最後に

npmパッケージのようにOSSのライブラリを使うと時間や人手が少ないような状況でもスムーズに開発を進めることができるため大変便利です。
一方で更新がアクティブではない、ライブラリに依存しすぎて開発の柔軟性がなくなるといった問題もあります、実際にプロジェクトに導入する場合、ベストかどうか検討してみてください。

=======

株式会社アドベンチャーではフロントエンドエンジニアの募集をしています。
興味がありましたらぜひ応募してくださいね。