Next.jsの開発案件に参画して初めて知ったパッケージ紹介

# はじめに
これまで簡単な個人開発の範囲で Node.js/React/Next.js などを利用していましたが、
最近になって新しくライブラリ/パッケージを知る機会があったため
紹介を兼ねてまとめたいと思います。

# パッケージ紹介

## ① simple-git-hook
[simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)は、Git フックの管理をしやすくするためのツールです。

Git フックは、Git でコマンドを実行する直前もしくは実行後に特定のスクリプトを実行するための仕組みです[[1]](#参考記事)。 

使い方としては、package.json に次のように記載し、
```npm install``` することで ```.git/hooks``` 配下にhook用のファイルを作ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031330/1154a589-21dd-20e6-a7cc-e558a8aad44d.png)

これによって、Commit 前に任意のスクリプトを走らせることができます。
開発チームで統一してコミット前はコードの整形をするとなったときに便利です。
```:package.json
{
  // 他の項目は省略
  "scripts": {
    "prepare": "simple-git-hooks",
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged",
  }
}
```

## ② Font Awesome
[Font Awesome](https://fontawesome.com/)は、ボタンやラベルの装飾などに利用できるアイコンを提供してくれているサービスです。
これを使用することで自分たちでアイコンを用意しなくても、次のようなデザインされたアイコンを利用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031330/8c21c8ad-38b0-1858-1f41-fbb2ef646079.png)


実際にアイコンを利用する場合には、以下のパッケージをインストールします。

```
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
```

使い方を詳しく知りたい場合は以下のリンクを参照してください。

https://origin.fontawesome.com/v5/docs/web/use-with/react#using-icons-via-individual-use

## ③ Prism
[Prism](https://github.com/stoplightio/prism)は、OpenAPIドキュメント[[2]](#参考記事)からモックサーバを提供してくれるライブラリです。
これを使用することでバックエンドのコードがなくてもモックサーバが利用できます。

そのため、フロントエンドとバックエンドが分かれて製造する場合に、
バックエンドの製造完了を待たずにモックサーバを用いてフロントエンドの製造を行うことができます。

Prismを利用する場合には、以下のパッケージをインストールします。

```
npm install -g @stoplight/prism-cli
```

サンプルとして、以下のようなOpenAPIドキュメントを用意しました。
```/books```というパスにGETメソッドでリクエストすることで、
本の情報をJSON形式のレスポンスとして返却するAPIです。

```: sample.yaml
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のフルパス]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031330/ee33a548-0666-b5e2-9b33-9540df94dc18.png)

では実際にリクエストを送ってみましょう。
CURLコマンド[[3]](#参考記事)で、上記URLと定義したパスにリクエストを送ると、定義したexampleの値が返却されていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031330/31a59746-721d-d1aa-ba44-c99977f5ff9e.png)

とても便利なので、モックサーバが欲しいときにはぜひ利用してみてください。

# さいごに

パッケージをいくつか紹介しましたが、ぜひ使ってみてください！
また、他にも様々なパッケージがあると思いますので
もしこういう便利なパッケージがあるよというのを教えていただけると助かります。

# 参考記事
[1] : [Git フックの基本的な使い方](https://qiita.com/noraworld/items/c562de68a627ae792c6c)
[2] : [【備忘】（今更ながら）OpenAPIとは](https://qiita.com/MaSi1031/items/ada0854f3d1d93ee66f8)
[3] : [よく使うcurlコマンドのオプション](https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9)