Recoil

はじめに RecoilというReactの状態管理ライブラリが存在します。 自分はよく、/user/meから取得したユーザー情報をこのRecoilのStateに入れて保管しています。 しかしただログイン状態を入れるだけでは、複数タブで同じページを開いている場合に片方がログアウトしたという状態になっても片方はまだユーザーがRecoilに保持されていてログインしているように見えてしまうという問題があります。 なのでこの記事では、StateをBroadcastChannel APIを使用して同期してみようと思います。 Atom Effects RecoilにはAtom Effectsという非常に便利な…

表題のまま。Firebase Authentication を使ってログインした際に返される user を Recoil の atom に保存すると、signout や再度 signin が実行された際にエラーになる 環境 react 18.2.0 recoil 0.7.7 firebase 9.20.0 😱 TypeError: Cannot assign to read only property 'currentUser' of object '#<AuthImpl>' 下記の例では Firebase で Google ログインを監視して useEffect 内で Recoil の us…

「たったこれだけで "ひととおり" って言うな！」というツッコミは甘んじて受けます。 触ったもの useReducer + useContext 👍 React 本体の知識だけで使える ❌ reducer に非同期処理を書けない ❌ Context が増えてきたら非常に読みづらくなる ❌ 結果的に劣化 Redux ができがちなので、よっぽど小規模でない限りわざわざ採用するメリットは無い Redux Toolkit 👍 素 Redux と比べてボイラープレートコードは減った ❌ 非同期処理の絡むコードは必ずしも読みやすくない（私見） 非同期の処理は extraReducers という所に分けて書…

普段 React の状態管理には Recoil を愛用しています jotai という Recoil ライクな軽量ライブラリがあると聞いたので試してみました 👻 jotai @reduxjs/toolkit vs jotai vs react-redux vs recoil vs redux | npm trends この記事を書いた時点では Recoil 23.5KB で jotai が 2.3KB 確かに小さいです!! (Recoil が思ったより大きかった) 環境 jotai 2.0.3 React 18.2.0 TypeScript: 4.9.3 状態 (state) = atom jo…

こんにちは、ラクス入社1年目のkoki_matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリのRecoil部分をリファクタするとともにパフォーマンスを上げるためにどうするかについてご紹介させていただきます。 もし、前回の記事を読んでいない方は下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp アジェンダは以下の通りになっています。 Recoilを用いたToDoアプリの問題点 複数人でRecoilを使うときに意図しない状態変更が行われる可能性 無駄な部分まで走る再レンダリング …

この記事は Enigmo Advent Calendar 2022 の 5日目の記事です。 こんにちは。フロントエンドエンジニアのWooです。 エニグモへ入社して3年目、主にBUYMAの購入者側のページをReactで構築しています。 BUYMAではReactのグローバルステート管理のために主にReduxを使用していますが、今回は新しい取組としてRecoilを導入し、開発を行なってみましたので、その経験を共有しようと思います。 まず、軽くRecoilについて理解し、Recoilを導入するようになった理由、Recoilで開発する時に良かった点や困ったこと、他にリリースする際に失敗した話、最後にはこ…

こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Recoilの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の3部目です。 「Redux編」「Redux-Toolkit編」もあるので、下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp tech-blog.rakus.co.jp Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。

All men have secrets and here is mineSo let it be knownFor we have been through hell and high tideI think I can rely on youAnd yet you start to recoilHeavy words are so lightly thrownBut still I'd leap in front of a flying bullet for you So, what difference does it make?So, what difference does it m…

【注意】 ※本作に強い思い入れがある方、否定的な文章が嫌いな方は、この先読むのをお控え下さい。 引用元:https://lycoris-recoil.com/ 3話で限界 アレな世界観 ループするトレンド 小島監督 ガンアクション なぜ3話で切ったか フキについて 若年層の厚い支持 二次創作の盛り上がり イナゴ絵師 なぜ百合が受けるのか 百合営業の浸透 価値観の変化 未熟を肯定する リコリコが怪作たる所以 大ヒットの事実 3話で限界 いわゆる3話切りになりました。 正確には、1話2話はそれなりに楽しめたが、3話でこの作品の性質が分かり視聴を辞めた。という経緯です。 引用元:https://ly…

はじめに 今回はフロントエンドの状態管理について調査してみます。 フロントエンドにおける状態管理とは フロントエンドにおける状態管理とは、ユーザーインターフェース（UI）のデータやその変化を一貫性を持って管理する手法を指します。 ここで言う「状態（State）」とは、サーバーから取得したデータ、UIの現在の表示内容など、アプリケーションの動作に影響を与える全ての情報を意味します。 ユーザーからの入力も状態に含まれます。 今回は自分の考えにも近いこちらの記事を参考に状態管理周りを調査してみます。 2020年に立ち上げたWebフロントエンド構成の振り返り 状態が必要な理由 状態管理を行わない、もし…

が，今年発売されるらしいです．こういうの． うーん，正直 Labradar か？と思いました．これのことね． まあ形が似るのは仕方ないか．こんな感じに使うのも一緒． ただ大きさは Caldwell の新製品の方がちょっと小さいかな？そういえば二年ほど前の Shot Show でお披露目されていたものと名前が同じだけど，見た目は違いますね．ということはあっという間にディスコンになったのでしょうか． weekendhunter.hatenablog.com ともあれ特徴としては弾頭の BC 値が計算されて表示されると言うことが挙げられるようです，まあ飛んだ先の弾速が分かれば，自分でも計算できるとは…

はじめに こんにちは、torihaziです 土日でリリース予定ですが、とりあえず今日は更新と削除まで行きたいと思います。 昨日少しやる気が云々とか言ってましたが 今日は少し大丈夫な気がしなくもない。 つべこべ言わずにやりましょう。 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため(=> approuter では動かないそう。今後は要検討) react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから axios => htt…

今回は2本立てです 前回89式買ったのもそうなんですがじつは今、人生の曲がり角にきており場合によってはサバゲー・ミリ趣味関連の頻度も激減しそうなので今残ってるやりたいことをできるだけ解決しときたいなと思ってました これらのやり尽くしの果てに軍拡欲求も雲散霧消してくれればいいけどね……まあ無理でしょう まず次世代MP5SD6あのいかついサプもいいが、取り回し重視でKMのフェザーウエイトサプに換えたとこだった しかし、もうちょい全長を縮めたくなりさらにS&Tの2000円くらいのハイダーに換えた 単に全長を縮めるだけならマズルプロテクタが最適なのだが、まあ銃として最低限の整合性は欲しかったのもある …

はじめに みなさん、こんにちは torihaziです 今日は午前中にはauthorization付きのリクエストを送ってそれを元に diaryの一覧ページを表示させることを完成させ、午後からは crudのページ関連を作り込んでいこうと思います。 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから axios => httpリクエスト送るのはこれでは？ recoil …

はじめに おはようございます！ torihaziです 今日もやっていこうと思います 昨日の宣言通り、diaryのcrud画面とそのapiくらいは作りたいと思います！ 技術選定 [frontend] Nextjs(pages router) => App Routerの理解に苦しんだため MUI => 調べたランキングでtopだったため react-hook-form => フォーム管理と言ったらこれでは？ zod => 少しだけ使い慣れてるから axios => httpリクエスト送るのはこれでは？ [backend] Rails 7 => 使い慣れているため devise => 定番だから …

Reactの上達へのきっかけを掴んだ8月の学習の振り返りをしたいと思います。 8月の学習時間 結果：96.25時間 半年合計：705.25時間 HCに入って半年、本当に自分の時間のすべてを使って勉強して半年で700時間を達成できました。 もともとの目標が600時間だったため（年間1200時間ペース） 半年で700時間（年間1400時間ペース）はかなり上出来だと思っています。 しかしながら、まだロードマップは半分も進んでいません。やはりHCのロードマップは難しく 最新の技術を学ぶことは並大抵のことではないと感じています。 どうしても自分のポートフォリオをモダンな技術を使ってフルスタックで作成した…

アニメ「リコリス・リコイル POP UP SHOP in PARCO」が錦糸町PARCOを含む全国5店舗にて開催決定！ キャラクターグッズの商品企画・製作・販売を行う中外鉱業株式会社コンテンツ部は、「リコリス・リコイル POP UP SHOP in PARCO」にて新商品を販売。 当イベントは2024年9月12日(木)より、錦糸町PARCO含む PARCO 5店舗にて順次開催する。 ◆「リコリス・リコイル POP UP SHOP in PARCO」が開催決定！ 大きなリボンがアクセントの華やかなワンピースにドレスアップした千束とたきなの新規描き下ろしイラストを使用した「アクリルスタンド」や「B…

箱庭双世 去る9月1日にろーどないつのTRPG例会が開催されました。 今回の参加者は、主催者1人を含めて9人でした。 卓の状況 nano recoil TRPG 箱庭双世 nano recoil TRPGはこの同人TRPGです。いわゆるハクスラ系だそうです。 www.dlsite.com 箱庭双世は例によって、OGA秋季大会のテストプレイでした。おかげさまで、よい知見が得られました。OGA秋季大会は来週です！！ OGA秋季大会の #TRPG システム一覧ゲスト鈴吹太郎先生ブレイド・オブ・アルカナ/15日・16日久保田悠羅先生アリアンロッド２E/15日FINAL FANTASY 14 TTRPG…

2024/8/27 https://cyberagent.connpass.com/event/325969/ FastlyとfalcoでNode.jsレスなWebサーバーの構築: IPTV版ABEMAアプリのインフラ刷新 Tadahiro Noguchi (@nodaguti)さん https://speakerdeck.com/nodaguti/building-web-server-using-fastly-and-falco-without-node-dot-js-for-iptv-abema-app IPTV版ABEMA ABEMAをテレビで見ることができる Linuxを搭載していて…