Edited at
LIFULLDay 19

ワイが個人的に便利だと思っていてよく使っているJavaScriptモジュール(npm)たち

この記事はLIFULL Advent Calendar 2018の19日目の記事とされている恐れがあります


謝罪


wasmとSWとReactのフロント全部盛りマンやります 🙋


部署が代わり開発領域も変わってしまい、ジェイクエィリでDOM操作をし過ぎた反動でフロントに関する知識を忘却してしまいました。誠に申し訳ございません。

どアタマでの謝罪により万に一人に楽しみにされていた方がいらっしゃった時の可能性を潰しておきます。


ここから本題

ここ1年の中で :star: しまくったgithubリポジトリを年末調整すると同時に、

使っていて個人的に便利だなと思っているものを簡単に紹介しようと思います。


モジュール


React

のviewフレームワーク

Facebook謹製


Redux

Flux思想の状態管理ライブラリ

React使うならだいたい使うはず


storybook

インタラクティブなUIコンポーネント(ReactとかVueとか)のテストツール

「文字数が多いときスタイルが崩れていないかのテスト」みたいなことをする時に縄文時代へ戻らずに済む


styled-components

CSS in JSの筆頭

CSSは切り出してブラウザ毎にオートプレフィクサーかけなきゃいけないとかじゃなくてささっと書きたいときは楽なのでだいたいこれ使う

普通にやる時のコンポーネントスタイリングは私はReact使うのでCSS Modulesでやってます


jest

テストライブラリ

ゼロコンフィギュレーションでオールインワンなところが売り

Facebook謹製


Prettier

コード整形ツール

vscodeの拡張機能を体感してしまうと便利すぎて他のエディタは使えない(宣戦布告)


TypeScript

無法地帯のJSに型とか付けられるやつです

Microsoft謹製


ESLint

JSのリントツール


TSLint

TSのリントツール


express

最強のwebサーバフレームワーク

各レイヤーにミドルウェアとして処理を注入できるので柔軟性があり使いやすさNo.1


axios

HTTPクライアント

APIがシンプルで多機能


got

HTTPクライアント

シンプルさに極振りしてるのでちょっと使うならこっちでも問題ない


webpack

バンドルツール

いろんなファイルを1つにまとめるすげーやつと覚えて帰ってください


babel

トランスパイルツール

ナウいJS構文をジオ(時代遅れ)なJS構文に変換してくれます


ramda

関数型プログラミングしたい時使います


data-forge-ts

csvファイルやjsonファイルなどをJSで扱う際には必須級のライブラリ

ファイルの読み込み/書き出しを初めに、配列のデータ操作などのAPIも豊富でかつtsdoc対応してるのでdocumentも読みやすい


json-server

JSONファイルに書いた内容をそのままJSONとしてレスポンスしてくれるHTTPサーバを30秒で構築できます

これを使えばBFFやAPIサーバの開発を待たずにI/Oだけ揃えたJSONだけ用意しておけばフロントエンドエンジニアは止まることはありません(団)


puppeteer

Node.jsで動くヘッドレスなChromeです

E2Eテストなどを記述したり、煩雑なブラウザ作業を自動化したい時に使ってます

Google謹製


workbox

PWA用ライブラリ

PWA≒SWみたいなとこがあるので実質SWライブラリ

SW周りの煩雑なアレコレを一手に担ってくれるのでSW入れるなら必須

Google謹製


zeit/next.js

Reactフレームワーク

ゼロコンフィギュレーションでES Moduleで書けたりES6構文使えたり、SSRも簡単なのでReact使うなら必須という感じ

天下のVue.js様で言う所のNuxtです


zeit/serve

静的リソースのホスティングサーバライブラリ

画像ファイルとかHTML/CSS/JSとかを返したいだけの時はこれ使う


zeit/micro

簡易サーバ

expressの縮小版みたいな感じ

ログ表示がイケてるので私はこっち使ってます


zeit/now-cli

now用のCLIライブラリ

私の隠しアカウントで zeit/now-cli を使ってpublicなhttps環境へNode.jsアプリケーションを高速デプロイしてドメインまで取得する(タダで) という記事を書いているので興味のある方はこちらもどうぞ

便利なツールしか作れない集団、zeit


apollo-client

GraphQLクライアントライブラリ

私はcomponentにべっとり張り付かれるのが嫌なので、データのfetchにだけ apollo-link-http をスタンドアローンで使ってます


apollo-server

GraphQLサーバライブラリ

だいたいみんな apollo-server-express 使うと思います


PM2

Node.jsアプリケーションのプロセスマネージャ

demon化やLBなどプロダクション環境には欠かせない機能を提供してくれる


date-fns

時間を操れるライブラリです


shelljs

シェルおじさんではないので、JSでシェルおじさんする時に使ってます


Inquirer.js

最初に初期設定があるようなデカめのライブラリを使う時に最初に出てくるQ&Aのあの部分

CLIからインタラクティブに何かしたいみたいな時に使います


signale

ロギングライブラリ

見やすいのでいつも使ってる


pax

銀河系最速のバンドラー


emoj

🙋


speed-test

スピードテスト(和訳)


fkill-cli

シェルおじではないので


iponmap

国際的なレスバをする際に必須のライブラリです


redux-zero

reduxは初期学習コストがとんでもないので、初学者はこっちから入ると雰囲気が掴めて良いのかも

この規模でreduxは草だけど流石にstoreとactionは別で管理したいって時はredux-zeroがオススメ


gifify

先輩エンジニアのおもしろLGTM画像を作る際に必須ライブラリとなります


logo.svg

文字列を指定したフォントでそれっぽいロゴにしてくれます、SVGで(倒置法)

自分のリポジトリの README.md に物足りなさを感じた時に使います


Docusaurus

ドキュメンテーションライブラリ

.md ファイルを作るだけでいい感じにwebサイトっぽくしてくれます

Facebook謹製


textlint

文章校正ツール

ルールを自分好みにカスタマイズできたりして鬼便利


読み物系リポジトリ


awesome-nodejs

Node.jsのワオなライブラリまとめ


clean-code-javascript

JS書く前に読んでおいた方が良さそうなことしか書いてないのでおすすめ


project-guidelines

JSのプロジェクト始めるならまず読んでおいて損はないのでおすすめ


async-javascript-cheatsheet

JSの非同期実行周りのチートシート


You-Dont-Need-Lodash-Underscore

_ へのアンチテーゼ


最後に

いかがでしたでしょうか。

今回はあまりフロントエンドに関するお話ができませんでしたが、記憶が戻り次第、マスターリクエストのHTMLを受け取ってからピクセルへ描画されるまでのブラウザ内部の挙動やデベロッパーツールのニッチな使い方などを紹介させていただきたいと思っています。

明日は メキシコ帰りの男 の異名を持つ mochio によるSET(Software Engineer in Test)に関するエントリとなる予定です。ほどほどにお楽しみに。

fin.