ワイが個人的に便利だと思っていてよく使っているJavaScriptモジュール(npm)たち
ワイが個人的に便利だと思っていてよく使っているJavaScriptモジュール(npm)たち:
この記事はLIFULL Advent Calendar 2018の19日目の記事とされている恐れがあります
どアタマでの謝罪により万に一人に楽しみにされていた方がいらっしゃった時の可能性を潰しておきます。
ここ1年の中で 
しまくったgithubリポジトリを年末調整すると同時に、
使っていて個人的に便利だなと思っているものを簡単に紹介しようと思います。
魂のviewフレームワーク
Facebook謹製
Flux思想の状態管理ライブラリ
React使うならだいたい使うはず
インタラクティブなUIコンポーネント(ReactとかVueとか)のテストツール
「文字数が多いときスタイルが崩れていないかのテスト」みたいなことをする時に縄文時代へ戻らずに済む
CSS in JSの筆頭
CSSは切り出してブラウザ毎にオートプレフィクサーかけなきゃいけないとかじゃなくてささっと書きたいときは楽なのでだいたいこれ使う
普通にやる時のコンポーネントスタイリングは私はReact使うのでCSS Modulesでやってます
テストライブラリ
ゼロコンフィギュレーションでオールインワンなところが売り
Facebook謹製
コード整形ツール
vscodeの拡張機能を体感してしまうと便利すぎて他のエディタは使えない(宣戦布告)
無法地帯のJSに型とか付けられるやつです
Microsoft謹製
JSのリントツール
TSのリントツール
最強のwebサーバフレームワーク
各レイヤーにミドルウェアとして処理を注入できるので柔軟性があり使いやすさNo.1
HTTPクライアント
APIがシンプルで多機能
HTTPクライアント
シンプルさに極振りしてるのでちょっと使うならこっちでも問題ない
バンドルツール
いろんなファイルを1つにまとめるすげーやつと覚えて帰ってください
トランスパイルツール
ナウいJS構文をジオ(時代遅れ)なJS構文にも変換してくれます
関数型プログラミングしたい時使います
csvファイルやjsonファイルなどをJSで扱う際には必須級のライブラリ
ファイルの読み込み/書き出しを初めに、配列のデータ操作などのAPIも豊富でかつtsdoc対応してるのでdocumentも読みやすい
JSONファイルに書いた内容をそのままJSONとしてレスポンスしてくれるHTTPサーバを30秒で構築できます
これを使えばBFFやAPIサーバの開発を待たずにI/Oだけ揃えたJSONだけ用意しておけばフロントエンドエンジニアは止まることはありません(団)
Node.jsで動くヘッドレスなChromeです
E2Eテストなどを記述したり、煩雑なブラウザ作業を自動化したい時に使ってます
Google謹製
PWA用ライブラリ
PWA≒SWみたいなとこがあるので実質SWライブラリ
SW周りの煩雑なアレコレを一手に担ってくれるのでSW入れるなら必須
Google謹製
Reactフレームワーク
ゼロコンフィギュレーションでES Moduleで書けたりES6構文使えたり、SSRも簡単なのでReact使うなら必須という感じ
天下のVue.js様で言う所のNuxtです
静的リソースのホスティングサーバライブラリ
画像ファイルとかHTML/CSS/JSとかを返したいだけの時はこれ使う
簡易サーバ
expressの縮小版みたいな感じ
ログ表示がイケてるので私はこっち使ってます
now用のCLIライブラリ
私の隠しアカウントで zeit/now-cli を使ってpublicなhttps環境へNode.jsアプリケーションを高速デプロイしてドメインまで取得する(タダで) という記事を書いているので興味のある方はこちらもどうぞ
便利なツールしか作れない集団、zeit
GraphQLクライアントライブラリ
私はcomponentにべっとり張り付かれるのが嫌なので、データのfetchにだけ
GraphQLサーバライブラリ
だいたいみんな
Node.jsアプリケーションのプロセスマネージャ
demon化やLBなどプロダクション環境には欠かせない機能を提供してくれる
時間を操れるライブラリです
シェルおじさんではないので、JSでシェルおじさんする時に使ってます
最初に初期設定があるようなデカめのライブラリを使う時に最初に出てくるQ&Aのあの部分
CLIからインタラクティブに何かしたいみたいな時に使います
ロギングライブラリ
見やすいのでいつも使ってる
銀河系最速のバンドラー
��
スピードテスト(和訳)
シェルおじではないので
国際的なレスバをする際に必須のライブラリです
reduxは初期学習コストがとんでもないので、初学者はこっちから入ると雰囲気が掴めて良いのかも
この規模でreduxは草だけど流石にstoreとactionは別で管理したいって時はredux-zeroがオススメ
先輩エンジニアのおもしろLGTM画像を作る際に必須ライブラリとなります
文字列を指定したフォントでそれっぽいロゴにしてくれます、SVGで（倒置法）
自分のリポジトリの
ドキュメンテーションライブラリ
Facebook謹製
文章校正ツール
ルールを自分好みにカスタマイズできたりして鬼便利
Node.jsのワオなライブラリまとめ
JS書く前に読んでおいた方が良さそうなことしか書いてないのでおすすめ
JSのプロジェクト始めるならまず読んでおいて損はないのでおすすめ
JSの非同期実行周りのチートシート
いかがでしたでしょうか。
今回はあまりフロントエンドに関するお話ができませんでしたが、記憶が戻り次第、マスターリクエストのHTMLを受け取ってからピクセルへ描画されるまでのブラウザ内部の挙動やデベロッパーツールのニッチな使い方などを紹介させていただきたいと思っています。
明日は メキシコ帰りの男 の異名を持つ mochio によるSET(Software Engineer in Test)に関するエントリとなる予定です。ほどほどにお楽しみに。
fin.
この記事は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.
コメント
コメントを投稿