最近のフロントエンド開発のライブラリ／ツールの紹介

2023/11/22

React Hook Form
1. 参考記事
Yup
1. 参考記事
Zod
1. その他参考記事
chromatic
1. 参考記事
hygen
1. 参考記事
感想

こんにちは、エンジニアの仁木です。

最近はフロントエンドの開発について調べており、色々ネット上の記事を見漁っています。
調べている中で、Webアプリケーションの開発などでよく使われているライブラリやツールが何なのか、少しですが把握できてきたので、忘備録も兼ねてご紹介したいと思います。

紹介するものは、公式のドキュメントがしっかり書かれていることや、QiitaやZennなどでも多く取り上げられており、知見を多く得られるので、開発にも安心して取り入れられそうです。

React Hook Form

https://react-hook-form.com/

Reactのフォーム作成ライブラリです。
React Hook Formライブラリを使わない場合に比べて、簡単にフォームの入力値の状態管理やバリデーション、送信時のイベント処理を実装することが可能になります。

参考記事

https://zenn.dev/yuitosato/articles/292f13816993ef#3.-yup%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A6%8B%E9%80%9A%E3%81%97%E3%81%AE%E8%89%AF%E3%81%84%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B

Yup

https://github.com/jquense/yup

フォームの入力項目のデータ構造を定義（スキーマ）して、バリデーションルールを宣言的に記述できるJavaScriptのライブラリです。
↑のReact Hook Formと組み合わせて利用されます。

yupを使うことで、バリデーションルールを submit イベントの中やコンポーネントのDOM層に書かなくて良くなるので、コードの可読性や保守性が良くなりそうです。
またメールアドレスやURL、文字数や数値の最小／最大値などのほとんどのフォームで必要になるバリデーションルールが用意されているため、自分で実装しなくて良いのも◎です。

参考記事

https://zenn.dev/highgrenade/articles/c378deb2ec3eea
https://codezine.jp/article/detail/13518

Zod

https://github.com/colinhacks/zod

TypeScriptでデータ構造をバリデーション・パースできるライブラリです。
フォームのバリデーションチェックや、APIの返り値が期待する型で返ってきているかなどをチェックするために使われるようです。

また、バリデーション成功時と失敗時にそれぞれデータをパースして返すことができるようです。

https://qiita.com/YudaiTsukamoto/items/37ee62d3a7ff6e2d52f9

zodは、yupと似た機能を提供しているため、比較されることが多いようです。
フォームのようなバリデーションルールにはyupの方が扱いやすいといった意見の記事もありました。

https://zenn.dev/wintyo/articles/6122304cb56c86

zodでは、APIの返り値の型チェックで利用されている記事などがあります。

https://note.com/navitime_tech/n/n4fc1cf9b71bf

その他参考記事

https://zenn.dev/ynakamura/articles/65d58863563fbc

chromatic

https://www.chromatic.com/

Storybookで管理しているコンポーネント（UI）ライブラリをホスティング・リグレッションテスト（※）できるサービスです。

フロントエンドで実装したコンポーネントをエンジニア以外のメンバーも簡単にブラウザ上で確認できます。

各コンポーネントにはコメントをつけることができ、実装したコンポーネントのフィードバックを得ることもできるようです。
ビルドごとに履歴が残り、前回のデプロイ時からの見た目やHTMLの差分を確認することができます。

サービスは有料プランと無料プランがあり、無料プランの方では以下のような機能に制限があります。

連携できるStorybookの数
コラボレーターの数
スナップショットの数
コンポーネントのバージョン管理

https://www.chromatic.com/pricing

※リグレッションテスト

リグレッションテスト（regression test）とは、プログラムの一部分を変更したことで、ほかの箇所に不具合が出ていないかを確認するためのテストです。

「回帰テスト」「退行テスト」とも呼ばれており、プログラムの修正後にこれらのテストをもう一度行って不具合がないかを検証します。
バグの修正に限らず、プログラムに何らかの修正や変更を加えたときは、リグレッションテストを実施し、全体への影響を確認する必要があります。

引用元… https://hnavi.co.jp/knowledge/blog/regression-test/

参考記事

https://dev.classmethod.jp/articles/chromatic-storybook-review-and-deploy/
https://zenn.dev/fullyou/articles/3b2d1bd1e6ce79
https://buildersbox.corp-sansan.com/entry/2022/08/01/110000

hygen

https://www.hygen.io/

ソースコードのテンプレートを生成するCLIのジェネレーターです。

テンプレートを用意して、コマンドで複数ファイルを一度に生成することができます。
コンポーネント作成時に、ストーリーブックやテストのファイル、cssなどの雛形を一度に生成することができるので、毎回同じコードを書かなくて良くなるのと、実装者が違ってもコンポーネントのコードやファイル構成にある程度一貫性をもたせることもできそうです。

テンプレートには変数を設定することが可能なことや、コマンド実行時に対話形式で変数の値を入力できるので、高い自由度でソースコードを生成できます。