React/Recoilを使い始めました
やっほ〜めろたんだよ〜。
ヘッダーの画像は岐阜にある彼岸花の名所だよ！この記事とは一切関係ないよ！
最近はサイバーパンクな街で大企業を破壊したり田植えとかしたりしてたよ！
サイバーパンクな街では以下のような遊びをしてます。
最近はこういうことして遊んでます#サイバーパンク2077 #PS4share pic.twitter.com/XbLMaUvVza
— 挫折亭めろたん🐒 (@renyamizuno_) December 26, 2020
はい。
ということで技術ブログっぽいのを久しぶりに書くよ！
去年の11月頃にbosyu Jobsという採用ツールをリリースしました！
経緯については以下のnoteをみてください〜！
bosyuの方ではVue.jsを使っていたのですが、いい機会だし思い切って変えてみるか！と思い立ち「よ〜〜しじゃあお父さんはReactを使っちゃうぞ〜！」という軽い気持ちでReactを使うことにしました。
なぜReactに？
まあ軽い気持ちというのは半分くらい冗談で、Vue.jsがcomposition apiをやっていくぞ！となっているのをみて、Reactでいいのでは？となったのがあります。(完全に個人的な感想ですが)
またTypeScriptも使っている現状があるので各種補完が効きやすいReactを使うことにしたという背景があります。(Reactがほしかったというかjsxがほしかったという感じな気はする)
ということで、Reactを使うことにしました〜。
Reactどう使ってるの？
React使うぞ！としてますが、bosyuではあまりフロントエンドは頑張らない方針で作っています。
基本的には各画面でフロントエンドで軽いバリデーションをしたいとか、入力補完等を行いたいとか、プロフィール画像の編集とか、シームレスに編集画面を出したいとかでしか使っていません。
SPAをゴリッとやるとかはしていません。
結局サーバサイドでバリデーション等を行う以上、あまりロジックを分散させたくないというのがあり、UIを切り替えるとか軽く制御したい以外では頑張りすぎず、あくまでコンポーネント(UIを構成する部品)というものでしか使わないような感じでやっています。
とはいえ、フロントエンドでユーザーの体験を高めたい画面があり、そういうところは頑張ろうという感じでやっております。
そうするとSPAにしないと…等が出てきます。
そこで状態管理しないとね…。というのがあり、Recoilを使うことにしてみました！
Recoil?
Facebookが作ってる(まだベータ)状態管理のライブラリになります。
Redux等とは違い、useSateのような感じでhooksを使うように状態をこねこねできます。
くわしくは上のリンクのページをみてね！
まだベータな感じなんですが、実戦投入してみて割と普通に使えるな〜というのと選択肢としても悪くはないかな〜と思いました。
どこでつかってる？
で実際にReactやRecoilをつかっているページは、bosyu Jobsの「カンタン履歴書メーカー」でつかっております。
ユーザーがボタンをポチポチ押したり簡素な説明とかを軽く入力したりすることでカンタンに履歴・経歴が入力できるというものになります！
この入力画面が全入力項目をガバっと出すと圧がすごいし、かと言って分けてチマチマ画面遷移を挟むのも体験良くない。
入力後すぐに次のページの表示がされることや、間違えて入力を修正するためにすぐに前のページに戻れる必要があると考え、SPAにしました。
実際つかってみてどうだった？
だいぶ使いやすく比較的小さいアプリケーションにはとてもマッチしているかなと感じました。
逆に大きいアプリケーションで全体を管理する必要がある場合は、現状だとちょっと大変かもしれないなというのが率直な感想です。
useState感覚で触れてしまうので気を抜くとあらゆるところで値を書き換えまくり太郎になってしまって、ちょい大変なことになりやすくなってしまうかなという感じです。
うまく設計して使えばいいのでは？というのがありますが、万物においてそれはそうなのではい。
Reduxを使うまででもないけどなぁというときにパッと使いやすいものかなぁと思いました。
まあまだベータというか実験中みたいなアレなので絶対に使え！というものではないです。
とはいえ普通に使えるのと便利なAPIも結構あるので、小さいものでカンタンにサッと実装するとかには役立つかなと思います。
そんなかんじ
そんなかんじでReactとRecoil使ってるよ〜という話でした〜。
実際にどんなんか気になる人は、
に登録して使ってみてくだされ〜！ 🙏🙏🙏🙏🙏