React ライブラリで
Web をちょっとリッチに
もりしん / Magic Moment

おまえだれよ
もりしん
● 本名は盛 慎 (Makoto Mori)
● 株式会社 Magic Moment
● フロントエンドエンジニア
● 普段は TypeScript / React ばかり書いている
● ハッカソンが好き (企画・運営経験もあり)
● 趣味はフォートナイト、バドミントン、ボルダリング
● Another works のイベントは1年1ヶ月ぶり2回目

ハッカソンでの “あるある”
必要なところだけにフォーカスしてつくる
(MVP、プロトタイプ、モック)
しかし最近のハッカソンは昔ほど無骨ではない印象
どのチームにもデザイナーがいてなんか完成度高そうな雰囲気
デザイナーがいなくてもなんとなく良く見せたい
そのための便利な API がある、React ライブラリがある
今日はそれを紹介
(React そのものとはあまり関係ない内容... ごめんなさい)

紹介基準
● 私が知っている
● なんかリッチに感じる
● 学習コストが低い (比較的簡単に使える)
● 既存のプロジェクトへの後入れが容易
● React 用のライブラリが用意されている
● きちんと更新されている (React 18 で動作する)

紹介基準
● 私が知っている
● なんかリッチに感じる
● 学習コストが低い (比較的簡単に使える)
● 既存のプロジェクトへの後入れが容易
● React 用のライブラリが用意されている
● きちんと更新されている (React 18 で動作する)
(ということで、みんなお馴染み背景のやつらは紹介しないよ)

解説のために架空のタスク管理サービスを拡張していく
“みんなで ToDo 管理する” グループタスク管理サービス「みん ToDo」

React Icons
Ant, Bootstrap, Fontawesome, Material Design など、
様々なアイコンが全て詰まったアイコンパック
npm i react-icons
import { FiPlus } from 'react-icons/fi'
...
<Button onClick={handleClick}>
<FiPlus />
{children}
</Button>

Boring Avatars
seed 文字列からアバターを自動生成できる便利な API ...の React ライブラリ
類似のもので DiceBear というのもある (こちらの方がスタイルは豊富)
npm i boring-avatars
import Avatar from 'boring-avatars'
...
<User>
<Avatar
size={20}
name="morishin"
variant="beam"
/>
morishin
</User>

React Spinners
様々な種類のローダーが用意されており、サイズや色の指定などカスタマイズも容易
(もちろん本来はローディングを感じさせないくらい早いサービスが理想的)
npm i react-spinners
import BeatLoader from 'react-spinners/BeatLoader'
...
<BeatLoader
color=”#fc0”
loading={loading}
/>

React Lottie Player
Web アニメーションライブラリ Lottie の React 用プレイヤー
Lottie Files のサイトでカスタマイズした JSON を読み込ませるだけ
npm i @lottiefiles/react-lottie-player
import { Player } from '@lottiefiles/react-lottie-player'
...
<Player
autoplay
src="https://assets8.lottiefiles.com/packages/lf20_lp7qD9RDx1.json"
/>

他にも色々 (時間の関係で割愛)
reactour
● プロダクトツアー (チュートリアル) 用のライブラリ
● サービス上の「ココ！」って場所にスポットライトを当てられる
● react-joyride ってやつの方が有名っぽい
framer-motion
● アニメーションライブラリ Framer の React 用
react-popper
● Popover (ツールチップ) でおなじみ popper.js の React 用
● ブラウザが Popper API に対応すれば、いずれ要らない子に...？
さらに高機能なものを知りたいなら Awesome React を眺めると幸せになれるかも

ということで以上

WE ARE HIRING

Fin.
Ask me anything