はじめに
これまで簡単な個人開発の範囲で Node.js/React/Next.js などを利用していましたが、
最近になって新しくライブラリ/パッケージを知る機会があったため
紹介を兼ねてまとめたいと思います。
パッケージ紹介
① simple-git-hook
simple-git-hooksは、Git フックの管理をしやすくするためのツールです。
Git フックは、Git でコマンドを実行する直前もしくは実行後に特定のスクリプトを実行するための仕組みです[1]。
使い方としては、package.json に次のように記載し、
npm install することで .git/hooks 配下にhook用のファイルを作ることができます。
これによって、Commit 前に任意のスクリプトを走らせることができます。
開発チームで統一してコミット前はコードの整形をするとなったときに便利です。
{
// 他の項目は省略
"scripts": {
"prepare": "simple-git-hooks",
},
"simple-git-hooks": {
"pre-commit": "npx lint-staged",
}
}
② Font Awesome
Font Awesomeは、ボタンやラベルの装飾などに利用できるアイコンを提供してくれているサービスです。
これを使用することで自分たちでアイコンを用意しなくても、次のようなデザインされたアイコンを利用することができます。
実際にアイコンを利用する場合には、以下のパッケージをインストールします。
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
使い方を詳しく知りたい場合は以下のリンクを参照してください。
③ Prism
Prismは、OpenAPIドキュメント[2]からモックサーバを提供してくれるライブラリです。
これを使用することでバックエンドのコードがなくてもモックサーバが利用できます。
そのため、フロントエンドとバックエンドが分かれて製造する場合に、
バックエンドの製造完了を待たずにモックサーバを用いてフロントエンドの製造を行うことができます。
Prismを利用する場合には、以下のパッケージをインストールします。
npm install -g @stoplight/prism-cli
サンプルとして、以下のようなOpenAPIドキュメントを用意しました。
/booksというパスにGETメソッドでリクエストすることで、
本の情報をJSON形式のレスポンスとして返却するAPIです。
openapi: 3.0.0
info:
title: Book API
description: A simple API to manage books
version: 1.0.0
paths:
/books:
get:
summary: Get a list of books
operationId: getBooks
responses:
'200':
description: A list of books
content:
application/json:
schema:
type: array
items:
$ref: '#/components/schemas/Book'
components:
schemas:
Book:
type: object
required:
- id
- title
properties:
id:
type: string
example: "1"
title:
type: string
example: "The Great Gatsby"
以下のコマンドを実行することでモックサーバを立ち上げることができます。
prism mock [yamlのフルパス]
では実際にリクエストを送ってみましょう。
CURLコマンド[3]で、上記URLと定義したパスにリクエストを送ると、定義したexampleの値が返却されていることがわかります。
とても便利なので、モックサーバが欲しいときにはぜひ利用してみてください。
さいごに
パッケージをいくつか紹介しましたが、ぜひ使ってみてください！
また、他にも様々なパッケージがあると思いますので
もしこういう便利なパッケージがあるよというのを教えていただけると助かります。
参考記事
[1] : Git フックの基本的な使い方
[2] : 【備忘】（今更ながら）OpenAPIとは
[3] : よく使うcurlコマンドのオプション