この記事はLIFULL Advent Calendar 2018の19日目の記事とされている恐れがあります
謝罪
wasmとSWとReactのフロント全部盛りマンやります 🙋
部署が代わり開発領域も変わってしまい、ジェイクエィリでDOM操作をし過ぎた反動でフロントに関する知識を忘却してしまいました。誠に申し訳ございません。
どアタマでの謝罪により万に一人に楽しみにされていた方がいらっしゃった時の可能性を潰しておきます。
ここから本題
ここ1年の中で 
しまくった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.