こんにちは。AG-Boost事業部開発部の宇野です。現在開発しているプロダクト（社内のデータを管理出来るツール）があるのですが、そのプロダクトのフロントエンドはJavaScript(React)で開発を行っています。 開発を行っていく上で様々なライブラリを使用すると思います。そこで現在お世話になっているライブラリ達を紹介していこうと思います。
@coreui/react
上記の画像のような管理画面やダッシュボードで使われるいい感じのコンポーネントが豊富にあり、扱えるライブラリとなってまして、とても重宝してます。公式にたくさんのコンポーネントが用意されてますので、気になる方は覗いてみてください。
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でも減算出来ます
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>
)
}
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>
);
};
さいごに
今回は現在開発しているプロダクトで使用している一部のライブラリを紹介してみました。有名なライブラリが多い紹介となってしまいましたが、微力ながらみなさんの力になれれば幸いです！
