JavaScript
Node.js
npm
Mexico
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.