【React】AG-Boostで開発しているプロダクトでお世話になっているライブラリの紹介

こんにちは。AG-Boost事業部開発部の宇野です。現在開発しているプロダクト（社内のデータを管理出来るツール）があるのですが、そのプロダクトのフロントエンドはJavaScript(React)で開発を行っています。開発を行っていく上で様々なライブラリを使用すると思います。そこで現在お世話になっているライブラリ達を紹介していこうと思います。

@coreui/react

上記の画像のような管理画面やダッシュボードで使われるいい感じのコンポーネントが豊富にあり、扱えるライブラリとなってまして、とても重宝してます。公式にたくさんのコンポーネントが用意されてますので、気になる方は覗いてみてください。

coreui.io

dayjs

JavaScriptの日付操作ライブラリです。よく使うものを少し載せておきます。詳しくは公式を確認ください。

各日付情報の取得
dayjs().date() // 日
dayjs().month() // 月 (0~11)
dayjs().year() // 年
dayjs().day() // 曜日 0(日曜日)~6(土曜日)
dayjs().format('YYYY/MM/DD') // フォーマットして表示

加算、減算
dayjs().add(1, 'year') // 年に1を加算
dayjs().add(1, 'month') // 月に1を加算
dayjs().subtract(1, 'year') // 年に1を減算
dayjs().subtract(1, 'month') // 月に1を減算
dayjs().add(-1, 'year') // このようにやるとaddでも減算出来ます

day.js.org

clsx

Reactでクラス名を動的に変更したい場合に使うライブラリです。以下は簡単な例です。

import { useState } from 'react';
import dayjs from 'dayjs';

const component = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div styleName={clsx('text', isOpen && 'red')}> // isOpenがtrueの時に文字が赤くなる
      Hello
    </div>
  )
}

www.npmjs.com

lodash

便利な関数をまとめて提供しているライブラリです。あまりに多いためよく使用しているものを紹介します。

_.each -> forEach

_.each([1, 2], (val) => {
  console.log(val);
});
// => 1
// => 2

_.get

const object = { a: 'hoge' };
_.get(object, 'a');
// => hoge

_.transform

_.transform([1, 2, 3], (ret, val) => {
  ret.push(n *= n);
}, []);
// => [1, 4, 9]

_.filter

const users = [
  { user: 'hoge', age: 25, active: true },
  { user: 'fuga', age: 30, active: false },
];
console.log(_.filter(users, (val) => { return !val.active }));
// => [{ user: 'fuga', age: 30, active: false }]

_.some

const users = [
  { user: 'hoge', active: true },
  { user: 'fuga', active: false },
];
console.log(_.some(users, (val) => val.user === 'piyo'));
// => false

react-intersection-observer

ページをスクロールした際に表示されているコンポーネントに対するページ内リンクのボタンのみアクティブにする機能を作成する際にreact-intersection-observerが使用されました。オプションも多数あるので興味のある方はドキュメントをご覧ください。試しに確認してみたい方向けに雑ですが下記がサンプルコードです。

import React, { useRef, useCallback } from 'react';
import { useInView } from 'react-intersection-observer';

const Component = () => {
  const firstRef = useRef(null);
  const [inFirstViewRef, inFirstView] = useInView();
  const secondRef = useRef(null);
  const [inSecondViewRef, inSecondView] = useInView();
  const thirdRef = useRef(null);
  const [inThirdViewRef, inThirdView] = useInView();

  const createRefs = (ref, viewRef) => {
    return useCallback(
      (node) => {
        ref.current = node;
        viewRef(node);
      },
      [viewRef],
    );
  };

  const buttonStyles = { width: '200px', height: '60px' };
  return (
    <div>
      <div style={{ display: 'flex', position: 'fixed', top: '80px' }}>
        <button style={ inFirstView ? { background: 'black', ...buttonStyles } : buttonStyles} />
        <button style={ inSecondView ? { background: 'black', ...buttonStyles } : buttonStyles} />
        <button style={ inThirdView ? { background: 'black', ...buttonStyles } : buttonStyles} />
      </div>
      <div ref={createRefs(firstRef, inFirstViewRef)} style={{ background: 'red', height: '100vh' }}/>
      <div ref={createRefs(secondRef, inSecondViewRef)} style={{ background: 'blue', height: '100vh' }}/>
      <div ref={createRefs(thirdRef, inThirdViewRef)} style={{ background: 'yellow', height: '100vh' }}/>
    </div>
  );
};

github.com

さいごに

今回は現在開発しているプロダクトで使用している一部のライブラリを紹介してみました。有名なライブラリが多い紹介となってしまいましたが、微力ながらみなさんの力になれれば幸いです！