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

f:id:yuto_sagawa:20211210163805p:plain

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

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

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

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

next

nextjs.org

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のような記述や、hoverfocus なども含めて容易にカスタマイズすることができます。

さらに、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>

Expo

expo.dev

ExpoはReact Nativeの開発ツールになります。 Expoの最大の特徴はOTA Update。 通常ネイティブアプリのアップデートにはストアの審査が必要になりますが、OTA Updateではストアの審査なしで配信することができます。

さらに、ホットリロードが有効になっているため、 シミュレータはもちろん手元の端末にも反映でき、開発体験の向上につながります。

f:id:yuto_sagawa:20211210164519p:plain
expo

最後に

React関連のライブラリなどを10個紹介してみました!

既に使っているライブラリなどもあったかと思いますが、

この記事がきっかけで新たに使い始めるライブラリが、どれかひとつでもあることを願っています!

Yuto SAGAWA

Yuto SAGAWA

エンジニアリング統括部 サービス開発部 第1グループ エンジニア

大学在学中に飲食店で利用する滞在時間管理システムやお弁当宅配サービスなどの開発に携わる。卒業後はECシステムのパッケージ開発にフロントエンドエンジニアとして従事。現在はパーソルキャリアにてSalariesの開発に携わっている。

※2021年12月現在の情報です。

▶エンジニアリング統括部の求人ページはこちら