2021年お世話になったReact関連ライブラリ10選　#techtekt Advent Calendar 2021

この記事は techtekt アドベントカレンダー2021 の 12日目の記事です。

こんにちは！テクノロジー本部エンジニアリング統括部サービス開発部でエンジニアをしている Yuto SAGAWA です。*1

皆様今年もReactライフを満喫できていますでしょうか？個人的にはたくさんReactに触れる機会があり、非常に満喫することができました！

そんな2021年の個人的にお世話になったReact関連のライブラリ、フレームワーク、ツールなどの紹介をしたいと思います。

Next.jsはReactのフレームワークで、昨今では使用例も多く人気のフレームワークであることが伺えます。

SSR / SSG だけではなく、ISR（Incremental Static Regeneration）など、 Webアプリケーションのパフォーマンス改善の手助けとなることが期待できます。個人的には新しくWebアプリケーションを作る際のフロントエンドはNext.js一択になりつつあります。

configの設定の楽さや、Vercelでのデプロイなど素早くWebアプリケーションの開発を始めることができます。

また、先日同じくReactのフレームワークとして、v1.0がリリースされたRemixも注目を浴びています。

今後はNext.jsと比較されて利用も増えてくるのでしょうか？

remix.run

redux-toolkit

redux-toolkit.js.org

Reactのプロジェクトでは状態管理にReduxやMobXが使われてることが多くあります。 redux-toolkitはReduxのヘルパーライブラリで、Reduxよりも記述するコード量が減り、より簡潔に状態管理することができます。

また、Sliceという概念があります。 Sliceとは、ストア全体から切り取った一部分のストアを表していて、それぞれのストアで、action, reducer, state をまとめて管理することができます。

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

refs: https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-state-slice

redux-toolkitよりもさらに簡潔にしたeasy-peasyについても紹介しておきます。

easy-peasy.vercel.app

graphql-codegen

graphql-codegenはGraphQLのスキーマからTypeScriptの型定義や、Hooksを自動生成してくれます。

GraphQL Code Generator www.graphql-code-generator.com

スキーマ

type Member {
  id: Int!
  name: String!
}

type Query {
  member(id: Int!): Member!
}

クエリ

query getMember($id: Int!) {
  member(id: $id) {
    id
    name
  }
}

↓ スキーマとクエリから、下記コードが生成されます。(一部抜粋)

// 型定義
export type Member = {
  __typename?: 'Member';
  id: Scalars['Int'];
  name: Scalars['String'];
};
export type Query = {
  __typename?: 'Query';
  member: Member;
};

// 型付きのHooks
export function useGetMemberQuery(
  baseOptions: Apollo.QueryHookOptions<GetMemberQuery, GetMemberQueryVariables>
) {
  const options = { ...defaultOptions, ...baseOptions };
  return Apollo.useQuery<GetMemberQuery, GetMemberQueryVariables>(
    GetMemberDocument,
    options
  );
}

Clientからの呼び出しのサンプルコードも教えてくれます

/**
 * __useGetMemberQuery__
 *
 * To run a query within a React component, call `useGetMemberQuery` and pass it any options that fit your needs.
 * When your component renders, `useGetMemberQuery` returns an object from Apollo Client that contains loading, error, and data properties
 * you can use to render your UI.
 *
 * @param baseOptions options that will be passed into the query, supported options are listed on: <https://www.apollographql.com/docs/react/api/react-hooks/#options;>
 *
 * @example
 * const { data, loading, error } = useGetMemberQuery({
 *   variables: {
 *      id: // value for 'id'
 *   },
 * });
 */

react-hook-form

react-hook-form.com

Reactでformを扱うのは入力の項目が増えてきた場合に少し面倒です。そこでformにもいくつかライブラリが存在しますが、その中からreact-hook-formの紹介です。

react-hook-formはその名の通り、hooksベースでシンプルに実装することが可能です。

import { useState } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [result, setResult] = useState("");
  const onSubmit = (data) => setResult(JSON.stringify(data));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First name" />
      <input {...register("lastName")} placeholder="Last name" />
      <p>{result}</p>
      <input type="submit" />
    </form>
  );
}

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

公式のドキュメントが綺麗に整備されていて、サンプルもたくさん用意されています。実装で困った場合はかなり手助けになります。

github.com

yup

github.com

yupはバリデーションライブラリになります。前述したreact-hook-formなどのformライブラリと合わせて使うことでさらに力を発揮します。

下記のようなフォームバリデーションをスキーマにまとめてreact-hook-formに渡すことができます。

const schema = yup.object({
  firstName: yup.string().required(),
  age: yup.number().positive().integer().required(),
}).required();

また、yupは様々なAPIが存在しており、数値や文字列といった型のバリデーションだけではなく、キャメルケースのチェックや、正規表現でのバリデーションなども可能です。

mui

mui.com

Material UIとして知られているUIライブラリが、v5からmuiへと進化しました。基本的なコンポーネントはMUI Coreとして提供されていて、潤沢なコンポーネント数は他のUIライブラリに勝っていると思います。

さらにdate pickerやtree viewなど、より複雑なユースケースにも対応できるようMUI Xも提供されています。

mui.com

v4以前では、コンポーネントのpropsを拡張する時は、ラッパーコンポーネントを実装していましたが、 v5からは直接コンポーネントの組み込み動作を拡張する機能が追加されました。

これによって容易にコンポーネントを拡張できることが期待されます！

refs: https://mui.com/customization/theme-components/#adding-new-component-variants

chakra-ui

chakra-ui.com

chakra-uiは汎用性の高いUIライブラリとなっています。前述したmuiではスタイルが強制されるため、カスタマイズするにはラッパーコンポーネントを作成したり、インラインでcssを記述する必要がありました。 chakra-uiではTailwind CSSのような記述や、hover や focus なども含めて容易にカスタマイズすることができます。

さらに、TypeScriptでの型補完が効くのも開発体験向上に繋がると思っています。

<Box
  _hover={{ bg: '#ebedf0' }}
  _active={{
    bg: '#dddfe2',
    transform: 'scale(0.98)',
    borderColor: '#bec3c9',
  }}
  _focus={{
    boxShadow:
      '0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)',
  }}
>
  Join Group
</Box>

refs: https://chakra-ui.com/docs/form/button#custom-button

また、chakra-uiはFigmaのUI Kitも提供されているため、デザイナとの連携の手助けとなることも期待できます。

refs: https://www.figma.com/community/file/971408767069651759

react-three-fiber

github.com

React用のThree.jsのレンダラ。 ReactでWebGLを使いたい時に活躍します。 Three.jsのクラス名や関数名も変わらず使えるので、Three.jsに慣れていればすぐに使いこなせるでしょう。

Three.jsのサイトにはたくさんのサンプルが用意されています。これらを見ているだけでも楽しいので是非見てみてください！

threejs.org

react-ztext

github.com

react-ztextもWebGLのライブラリになります。マウスカーソルでグリグリ動かすことができます。

任意の文字列や絵文字でも動かすことができます。

<Ztext
  depth='1rem'
  direction='both'
  event='pointer'
  eventRotation='30deg'
  eventDirection='default'
  fade={false}
  layers={10}
  perspective='500px'
  style={{
    fontSize: '4rem'
  }}
>
  <span role='img' aria-label='emoji'>
    👽
  </span>
</Ztext>