jotai

はじめに こんにちは！エキサイト株式会社の就業型インターンシップ Booost!!! に参加した吉田です。 本記事では、1 ヶ月のインターンシップで私が行ったことや学んだことについてご紹介します。 はじめに 自己紹介 インターンでの業務内容 実務の観点で学んだこと Jotai を用いたグローバルな State 管理 グローバルな State とは？ Jotai の特徴と基本的な使い方 Jotai を用いた snackbar の作成 おわりに 自己紹介 私は現在大学院修士 1 年生で、情報学を専攻しています。人工知能分野の研究を行っており、普段は Python を使ってデータ処理・データ分析のた…

React で jotai を使って local storage に JTW を保存して永続化・リロード時に状態を復帰するのをやってみためも。 (※ サンプルなので local storage に JWT を保存するのはセキュリティ的によろしくないってのは今回考慮していません ) シナリオ ログインの際に API から JWT token とユーザー情報が返される JWT token は local storage に保存する ユーザー情報は React の state にする 初回アクセス・リロード時にユーザー情報を永続化された JWT から復元するシナリオ local storage に …

表題のまま。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 の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global として扱われる Provider の中で使用された atom は Provider の中で閉じられる Provider で囲われたコンポーネントから Provider の外の global な atom にはアクセスできない Provider の外の …

普段 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…

まとめ なんでもいい、どうでもいいと言い出すやつはだいたい内心でどうでもよくないと考えている Storeの話をするまえに https://react.dev/learn を読んでReactの基礎を理解しよう experimental state management frameworkと一生言い続けているライブラリをプロダクションで使うべきではない experimentalと一生言い続けているライブラリをプロダクションで使うならその部分は特に気をつけて疎結合にすべき ライブラリの話をしてないでreact.dev/learnのThinking in Reactを読もう とにかくreact.dev…

株式会社カオナビでは、社員の個性や才能を発掘するタレントマネジメントシステム「カオナビ」を主力プロダクトとして、HR領域の機能開発に2012年から注力しています。 そして2024年4月、隣接する経営管理領域のSaaS「ヨジツティクス」を独自に開発してリリースしたことで、マルチプロダクト戦略にかじを切りました。 現在の開発組織で新規プロダクトの経験がない中、どのようなことに気を使いながら開発を進めたのでしょう。プロダクトオーナーを務める福田健（ふくだ・けん）さんと、フロントエンドでの技術選定などをリードした別城慎治（べっき・しんじ）さんに話を伺いました。 ※この記事は株式会社カオナビによるタイア…

はじめに DIGGLE エンジニアのitoです。 DIGGLEではたびたびメンバーがカンファレンスに参加することがあります。今回、私は同じ開発チームの同僚のliuさんとともにTSKaigi Kansai 2024に参加しました。 kansai.tskaigi.org 参加した際には感想の記事を作成・公開することが慣習になっているためliuさんとともに参加した感想を書いてみたいと思います。 過去のカンファレンス参加記事はこちらから diggle.engineer diggle.engineer TSKaigi Kansai 2024について TSKaigi Kansai 2024は「2024年5…

Windows 10サポート終了とWindows 11への移行 M4 Mac mini用拡張ドッキングステーション Salesforceの営業AI Agentforceと営業マン雇用 ドコモの料金プランとAIのセット割 イオンカード不正利用とオフライン決済 Microsoft Teamsのハイブリッドワーク支援機能Microsoft Placesの新機能 ハッカソンでのDify活用事例 React依存を最小限にしたフロントエンド設計 日本のIPv6採用状況 LLMによる時系列データ分析にニュース情報を混ぜるアプローチ UI開発におけるヘッドレスUIライブラリの重要性とデザインシステムへの取り入…

2024/11/23 https://jsconf.jp/2024/ LT: UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方 azukiazusaさん https://speakerdeck.com/azukiazusa1/ui-kai-fa-niokeru-hetudoresu-ui-raiburarinozhong-yao-xing-todezainsisutemuhenoqu-riru-refang UI開発の難しさ ネイティブアプリのようなUIを求められる 自分でインタラクティブな要素を作らないといけない アクセシビリティも気にしないといけない…

2024/11/16 https://kansai.tskaigi.org/ TypeScriptの型システムは万能機械の夢を見るか？ canalun(かなるん)さん https://docs.google.com/presentation/d/1hnvPiSCI2UBIZ0x5OTl3ZFHvIGMIl3g37It1_Qd7hNA/edit 型システム 型システムでどこまで複雑な処理を解けるか 有限オートマトン booleanで返す問題を解ける チューリングマシン スタックを無限に伸びるテープにする アルゴリズムを実現できる これを超える仕組みはない TSの型システムでチューリングマシンを実…

こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことに…

こんにちは、TSKaigi Kansai プログラムチームです！ まずは、今回のプロポーザル募集にご応募いただいた皆さまに、心から感謝いたします。 予想を大きく上回る多くのご応募をいただき、総数 89件 のプロポーザルが集まりました。 皆さんのTypeScriptへの情熱を強く感じました。 厳正なる審査の結果、以下の方々が採択されました。おめでとうございます！ セッション枠とLT枠に分けて発表いたします。 採択者一覧 セッション枠（30分） 発表者 タイトル canalun(かなるん) TypeScriptの型システムは万能機械の夢を見るか？ ユーン 型付き API リクエストを実現するいくつ…

この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブ…

2024/9/6 https://yumemi.connpass.com/event/326311/ shadcn/uiから考えるコンポーネント設計 infixerさん https://speakerdeck.com/ryokatsuse/uitekao-erukonhonentoshe-ji shadcn/ui インストール不要でコピペで使うUIコンポーネント集 v0ではかれるコードで使われてる 大規模より小規模向き RadixUIベース cvaでスタイル指定をする Variant指定 formはReactHookFormを使ってる contenteditableと向き合う kichionさ…

CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.co…