技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
ライブラリ選定のときに使えるツールあれこれ
自分が使ってるやつを紹介します。 GitHub Star History 指定したGitHubリポジトリのスターの増加数をグラフで見れるサイトです。 たとえば、👇の3つのReactのUIライブラリを例に見てみます。 mui chakra-ui shadcn-ui ▲https://star-history.com/#shadcn-ui/ui&chakra-ui/chakra-ui&mui/material-ui&Date こんな感じで、一目でライブラリの人気度合いをざっくり比較できます。 使い方 テキストボックスに、比較したいライブラリのGitHubリポジトリURLを入力するだけです。 また、「Align timeline」にチェックを入れると、グラフのスタートを揃えれます。 たとえば、Prisma ORMとDrizzle ORMを比較するとPrismaの方が圧倒的に見えますが、スタート
MySQLを使っても会社は潰れない
MySQLを使っても会社は潰れない そんな話は聞いたことがない。AWS Lambdaが再帰実行されて潰れた会社の話は実際に聞いたことがあるが。 つい先日、私が書いた記事がとんでもなく大事になってしまい、大変な賛否を巻き起こした。 まさかこんなに読まれると思っていなかったので、大変驚いたのと同時にインターネッツの恐ろしさを体感した。 その中でも特に物議を醸したのが「MySQLを使うと会社が潰れる」というフレーズだった。 「MySQLを使うと会社が潰れる」とはなんだったのか 私がこのフレーズを選んだ理由は、言うまでもなく単に読者の注意を引く表現を使いたかったからである。 このフレーズがセクションの先頭にあったら、「なにをいってるんだこいつ？」と先を読んでみようという気になると思った。 そして続きを読んでいくと「なんだそういうことか」と意図を汲んで、それで同意するかしないかは人それぞれだろうなと
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています はじめに 昨年末にこんなツイートをしたら、ちょっとバズってしまいました。 https://x.com/Panda_Program/status/1864333831886786971 色々コメントを頂くことで考えを深めてブログを書きますと言っていて、まだ着手していなかったのでざっと書くことにします。ただ、今日はクリーンアーキテクチャが対象です。 簡単に自己紹介をすると、私は現職でフルスタックエンジニアをしています。また、「バックエンドのためのフロントエンド入門」 というテーマで登壇をしたり、自分のエンジニア人生を変えた書籍リストにクリーンアーキテクチャを挙げており、TypeScript でクリーンアーキテクチャを実践する という記事では Web からでも CLI からでも動かせるアプリケ
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
こんにちは！某製造業で新米DXエンジニアをしているものです。 先月から Rust の学習を始めました。 学習している理由としては 今までインタプリタ言語を使ってきたので、コンパイル言語に挑戦したい 爆速で動くコードを書きたい ネイティブアプリの開発をしてみたい WebAssembly を使えるようになって、Web アプリ開発の幅を広げたい といったところです。 そんな中、Rust でデスクトップアプリを開発するために Tauri を使ってみました。 正月の暇をつぶすために軽い気持ちで始めましたが、色々苦しんだので備忘録を残しておきます。 今回は長くなりそうなので、目次をご活用ください m(._.)m アプリの概要 今回作ったアプリは、ざっくり言うと 主要形式の画像を次世代拡張子である AVIF,WEBP に圧縮、変換するデスクトップアプリです。⚡️ 制作期間は5～7日くらいです。 GitH
新規プロダクト開発では新しい技術をどう採用するのか？ カオナビでの運用経験をリスクヘッジに生かし挑戦を成功に導く！〔ヨジツティクス開発者インタビュー〕 - はてなニュース
株式会社カオナビでは、社員の個性や才能を発掘するタレントマネジメントシステム「カオナビ」を主力プロダクトとして、HR領域の機能開発に2012年から注力しています。 そして2024年4月、隣接する経営管理領域のSaaS「ヨジツティクス」を独自に開発してリリースしたことで、マルチプロダクト戦略にかじを切りました。 現在の開発組織で新規プロダクトの経験がない中、どのようなことに気を使いながら開発を進めたのでしょう。プロダクトオーナーを務める福田健（ふくだ・けん）さんと、フロントエンドでの技術選定などをリードした別城慎治（べっき・しんじ）さんに話を伺いました。 ※この記事は株式会社カオナビによるタイアップ広告です。 カオナビ エンジニア採用サイト テクノロジーで社会の仕様をアップデートする 採用サイトを見る スプレッドシートに限界を感じて予実管理を楽にしたい Next.jsでApp Routerの
Recoil 終了のお知らせ
Recoil 終了のお知らせ Recoilが2025年始にarchivedされたようです。 冗長的な書き方をせずにglabal stateを扱えるライブラリだったので、度々使用していましたが、何かしらの影響で開発停止となりました。 This repository has been archived by the owner on Jan 2, 2025. It is now read-only. 理由を調べてみた 元Metaのメンテナーの方が、以下のようなポストをしていました。 翻訳すると、 これは言われていることですが、まったく予想通りです。Meta が Douglas Armstrong を解雇した後、私は Recoil の唯一のメンテナーになりました。その後、私も解雇されました。社内の多数のプロジェクトでまだ使用されていますが、誰も責任を引き継ぎたくありませんでした (これはパフォー
Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブに変化する UI では、状態管理が複雑化し、コードの可読性が低下することがあります。その結果、バグが発生し、予測しにくい動作を引き起こすことも少なくありません。 そこで今回は、 zustand を導入
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」 Reactの状態管理ライブラリ、みなさんも選択に悩んだことありませんか？確かに2025年の今、選択肢の多さに頭を抱えてしまいますよね。Redux、Zustand、Jotai、Recoil、Valtio、XState、TanStack Query...それぞれに「これがウリ！」というポイントがあって、どれを選べばいいのか正直迷っちゃいます。 特にReact 18の登場で状況が更
StorybookとPlaywrightではじめるインタラクションテスト - enechain Tech Blog
この記事はenechain Advent Calendar 2024の21日目の記事です🎄 はじめに こんにちは。enechainでソフトウェアエンジニアをしている@nakker1218です。 私たちのチームでは、電力の取引仲介を行う同僚(ブローカー)たちが使う、注文の統合管理システムeNgineの開発しています。 ブローカーは日々1分1秒を争いながら収益を上げているため、システムが停止したり機能に不具合が生じると、事業に非常に大きな影響を与えてしまいます。 一方、電力業界はドメインが複雑で、要件や機能も多いため、バグが発生するリスクが高いです。 実際にこれまで以下のような問題が発生したことがありました。 Validな注文なのに、バリデーションが通らなくなった 特定の選択肢が選択されているときに表示されるはずのフォームが表示されない ショートカットキーを使ったインタラクションが一部正しく
Jotai を使った Dependency 管理とテスト技法 - 一休.com Developers Blog
この記事は一休.com Advent Calendar 2024の23日目の記事です。 一休レストランのフロントエンドアーキテクトを担当してる恩田(@takashi_onda)です。 はじめに 先日の JSConf JP 2024 で「React への依存を最小にするフロントエンドの設計」という内容で登壇しました。 speakerdeck.com 発表では駆け足になってしまった、React への依存をしていない Vanilla JS 部分をどのように構成しているのかを、Dependency 管理とテストの文脈でご紹介したいと思います。 Dependency とは Dependency Injection の Dependency です。 タイトルも「Jotai を使った DI とテスト技法」とした方が伝わりやすいとは思います。 ですが、厳密には injection していないので、あえて
選定の方針 ログイン機能があるような、ユーザーが極端に多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリ開発に集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 EditorはCursorがおすすめ 開発用のエディタはCursorがおすすめです。 LLMへの質問や修正を依頼する時に、修正対象と一緒に関連しそうなコードも送ってくれるので質問に対する回答の精度が高くなる (既存のコードに合わせた回答・修正をしてくれる) コードをLLM側の学習に使わないようにしてくれる設定もあるのでセキュリティ的にも安心 (1) エディタ右上の歯車のマークをクリック (2) Privacy Mode を enabled に変更する より詳細な機能の解説はこちらの記事がわかりやすかったです。 (僕は契約できていませんが、GitHub
フロントエンドの状態管理の改善に対する取り組み
こんにちは！株式会社COMPASSの井上です。プロダクト開発ユニット、システム開発部、アプリケーション開発チームに所属しています。普段はキュビナマネージャー（QM）のフロントエンドエンジニアとして、新規機能の開発、既存機能の改修などを行っています。海外を放浪することが好きで、コロナの時には一度断念せざるを得ませんでしたが、最近ではベトナムやタイに滞在していました。今後は東南アジアの様々な国を訪問してみたいと思っています。 本記事では、キュビナのフロントエンド開発における状態管理について、現状抱えている課題とその解決方針について書いていきます。現在取り組み中の内容になっており、ある程度大きな方針については検討をしているものの、解決までの道のりはまだ少し長いかなという状況です。ですが、少しでも共通の課題を抱えている方々の参考になればと考えています。 この記事はこんな方におすすめ キュビナ（特に
こんにちは、Jotaiの作者です。Jotaiが生まれるまでに様々な取り組みをした歴史を短い記事にしてありますのでよろしければご覧ください。今後のJotaiの発展に期待します。 以下、ChatGPTによる翻訳です。 はじめに この投稿では、なぜ私がJotaiの開発を始めたのか、その背景にあるストーリーを共有したいと思います。JotaiはしばしばRecoilと似たような解決策と見なされますが、その開発にはもっと長い歴史があります。 React Hooks React Hooksが最初に発表されたのは2018年10月のことでした。Reactコンポーネントの外でロジックを開発するというアイデアが気に入り、すぐに多くのライブラリがこのアプローチを採用するだろうと考えました。何か開発したいと思い、グローバル状態管理という分野を選びました。私のモチベーションは、Reduxのセレクター、当時「mapSta
こちらは「medicalforce New Year's Blog 2025」8日目の記事です。 今回はUI構造が変わっても状態を保持したいときに便利なReact-Reverse-Portalというライブラリを紹介しようと思います。 解決する課題 例えば、タブレット向けの画面実装で横向きのときは2-column型のレイアウトで表示して縦向きのときはタブを使ったレイアウトで表示したいということがあったとします。 Reactのコードで表現するとおおよそ以下のような実装になるかと思います。 export default Page = () => { // 中略 return isLandscape ? ( <Grid cols={2}> <GridItem> <Content1 /> </GridItem> <GridItem> <Content2 /> </GridItem> </Grid>
2024-12-15 Shinyai.js #1
こんにちは、株式会社ACES でテックリードをしている奥田(@masaya_okuda)です。 リポジトリで利用するライブラリを適宜バージョンアップするのは、現場によっては当たり前かもしれません。しかし、プロダクトを前に進めるため日々機能開発を行うスタートアップにおいて、継続してバージョンアップを実施するのは容易ではありません。 本記事では、入社後半年で全てのライブラリを最新にバージョンアップし、2024年1月からこの状態を保ち続けている取り組みについてご紹介します！ なぜライブラリのバージョンアップを継続的に行うのか？ 入社時は責任者が曖昧な状態 入社後半年で全てのライブラリを最新に CIで守りながら毎日自動でバージョンアップ ライブラリバージョン以外もメンテナンスする 技術ロードマップの策定 Takepepeさんを技術顧問に迎え、Next.js App Routerへ移行！ おわりに
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
この記事は株式会社カオナビ Advent Calendar 2024の23日目の記事です。 Jotai は、Reactで使えるステート管理ライブラリとしては、現状筆者が最も好んでいるものです。その理由は単純で、ステート管理アーキテクチャとして優れていると思うからです。Recoilが現役のころは同じ理由でRecoilを好んでいました。 Jotaiは2023年1月にv2がリリースされました。非同期処理の扱いがv2はそれより前と異なっており、簡単に言うとJotaiのコアから非同期処理（Promise）に対する特別扱いが排除されました。これにより、コアのAPIをReactから切り離すことができたとされています。JotaiはReactから使われることが多いとはいえ、以下のスライドでもJotaiが「Reactに依存しないライブラリ」として評価されていることからも分かるように、このような特徴は技術の普及
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sictu_study)です。 2025年に入ってReact界隈に衝撃が走りました。これまでメンテナンスが全然されていなかった状態管理ライブラリ『Recoil』のプロジェクトが凍結されました。 2023年にMeta社のレイオフをきっかけにメンテナンスが半年以上されなくなっていたところに、React19が登場して対応できなくなった結果完全にRecoilはなくなりました。 Recoilは使いやすくMeta社が開発していたこともあり多くのプロジェクトで採用されていたため、代替に乗り換える必要が
こんにちは。株式会社AI Shiftの安井です。今回は約1年前に行った技術選定の振り返りと1年間運用したことで得られた知見をもとに新しく立ち上がったプロジェクトではどのような技術選定と設計をしたのかまとめたいと思います。 前提 私たちはLLMを活用した業務効率化プラットフォームをtoB向けに開発しています。現在はブラウザで利用されることが前提にありますが、立ち上げ当初はMicrosoft Teamsアプリ上で利用されるケースも想定していました。 所属する開発チームはBackend（2人）、Frontend（私含め2人）、Designer（1人）の構成です。このメンバーで現在2つのサービスを運用しています。そして今回立ち上がったプロジェクトを含めると合計3つになります。 またtoBのプロダクトのためLighthouseなどパフォーマンスの指標を追求する必要はありませんが、ユーザ（利用する従業
Jotaiのatomを自由にテストしたいときに見る記事
Jotaiのテスト方法に関する記事があんまりないので書きました。 公式ドキュメントにもテストに関するページはあるのですが、わりとあっさりしていて実際テストしようと思うと手探り感が強いです。 この記事では、公式の内容に加えて、Reactに依存せず必要なatomのみをテストする方法をまとめます。 環境＆バージョン viteのテンプレでReactのアプリを作って、JotaiとVitestを入れます。すべてテンプレのデフォルトまたは執筆時の最新版です。そのほかlinter等（biome, eslint）は好きに調整してください ※ 後述しますが、テストのやり方によってはここまでフルセットに色々入れる必要はないこともあります。ここに書いたのこの記事で書かれているテストを動かすための全部入り構成です。 { "dependencies": { "jotai": "^2.10.0", "react": "
昨日、たまたまRecoilのリポジトリが元日にアーカイブされていたのを知って、ツイートしたらすごい反響になってました。 せっかくなので、私が過去に書いたJotai関連のZenn記事をリストアップしてみようと思います。新しい順に載せますので、もし時系列を追いたい場合は下の方から見てください。あまり内容のある記事を書いていませんが、もしこれがきっかけで何か参考になれば幸いです。
ハナユメのフロントエンドにSvelte/SvelteKitを採用しています - Ateam Tech Blog
こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことについてお伝えします。 Svelte/SvelteKitを選んだ理由と実際に開発して良かったこと コード量が少なく書ける 以下は、ReactとSvelteで入力内容を同期してテキストを表示するコンポーネ
株式会社ヘンリーでSREなどをしている戸田です。弊社では技術勉強会略してギベンを毎週開催しておりますが、このたび個人の方がネットで簡単にサービス販売できるプラットフォームを開発、提供していらっしゃるMOSH株式会社の皆さんと合同で技術勉強会を開催いたしました。MOSH株式会社様の公式Zennでも開催報告を上げていただきましたので、あわせてご覧ください： zenn.dev 弊社からは3名のITエンジニアが発表しておりますので、その内容を軽くご紹介いたします。 GitHubでTerraformできる！tfmigrate & tfactionのご紹介 両社の採用技術の共通点であるTerraformに着目して、筆者（id:eller）が弊社でtfmigrateとtfactionを導入するに至った経緯についてお話ししました。 図1 非公開資料より。tfmigrateとtfactionはとても便利です
React Server ComponentでJotaiをうまく使う方法を探索中、サーバーオンリーAtomができました
Waku/Jotaiの統合を探索する実験プロジェクトです。 以下、箇条書きで： この実験がしたかったからWakuの開発を始めたのですが、もう2年も経ってしまいました WakuもJoitaもまだリリースされていないバージョンを使っています 基本atomはクライアント側のステートです サーバ側でクライアントのatomを読むことができます クライアントのatomに変更があればサーバで再度レンダリングします サーバオンリーのatomを書くこともできます サーバ側のJotai storeはリクエスト毎に消えます（ステートレス）
フロントエンドの開発における負債化の要因
概要 バックエンドのプロダクトに比べ、フロントエンド開発が負債化しているチームに出会うことは珍しくありません。特に、設計や実装方針が揺らぎやすいフロントエンド開発では、技術的な負債が蓄積しやすく、結果的にプロダクトの品質や開発効率が低下することが少なくありません。 これまで様々な現場に携わり、なぜフロントエンド開発において統一的な設計(ディレクトリ構造、コンポーネントの分離方針、状態管理の一貫性)が維持が難しい理由を考え、その理由を今回整理してみました。 本記事は、過去の経験を基にした一個人の意見です。そのため、何かお気づきの点やご指摘がありましたら、ぜひお知らせいただけると嬉しいです。また、主にReactに関する話になりますが、Vue.jsやSvelteにも適用できる話題を意識して書いています。なお、専門用語についての説明は省略していますので、その点はご了承ください。 この記事を読むこと
概要 Jotai, primitive and flexible state management for React Jotai は Recoil からインスピレーションを受けて開発されたグローバルステート管理ライブラリです。コア API が厳選されており良い意味で少なくて機能もシンプルなので Recoil を利用した事がある人であれば直ぐに理解できるでしょうし、そうでない人でも useState に近い使用感なので比較的直ぐに理解して使えるようになると思います。 他のグローバルステート管理ライブラリと共通する Context や useState だと起きやすい以下の問題を解決します。 props のバケツリレーによる依存関係や影響範囲の複雑化 多数の Provider を管理することによる複雑化 これらの影響による過剰なメモ化による再描画対策 Recoil と比較した特徴としては T
Theme 第 167 回のテーマは 2024 年の Yearly Ecosystem です。 Show Note 2024 年のチェックポイント Vite の覇権を Turbopack, RSPack が奪えるか? Storybook は覇権をとって、Chromatic もすごくなりそう Next App Router が本当に広がるか RSC 対応の Bundler が増えて Next 以外の解が見れそう アプリケーションの Rust 化くるか? React Forget Figma Config 2024 の Adobe の影響 State Management どうなってく? (Context, Jotai, SWR, Signal) ESLint to flat config or Biome AI driven FE Development CSS の新しい方法論 今年のキーワ
ゆめみでフロントエンドエンジニアをしているゆーけんです🐈 新卒一発目でアサインされた案件で、Jotaiで状態管理されているプロジェクトをZustandで作り直すというパワー系リファクタを経験したので記事に書きます。 開発したプロダクト 一覧画面 新規作成画面 編集画面 がある以下の画像のような管理画面を、先輩と2人で0から開発しました。 一覧画面 新規作成画面 詳細画面 フォームの値をリアルタイムでプレビューに表示するため、フォームの値をJavaScriptで管理する必要があります。 コンテンツの値を状態管理したい コンテンツは新規作成、削除される コンテンツのプロパティ入力フォームに様々なバリデーションを実装したい これらの条件はJotaiのatomFamilyを使うことで柔軟に設計できそうだったので、はじめはJotaiを使って設計・実装しました。 Jotaiで実装する 設計 コンテン
目次 はじめに TL;DR OpenHandsとは 触ってみる その他の機能 OpenHandsのアーキテクチャ ロードマップ まとめ はじめに 皆さん Devin はご存じでしょうか。 DevinはAIスタートアップのCognitionが2024年3月に発表しました。 Devinは自律型AIソフトウェアエンジニアと紹介されていて、Copilotによるコーディングのサポートなどとは異なり、コードを書き、実行し、テストすることができます。他にもいろいろなことができるみたいです。 そんなDevinが先日、2024年12月10日に一般公開されました。さっそく触ってみようと思ったのですが、エンジニアリングチーム向けに月額500ドルからのプランしかなかったので断念しました。。 ただ！ Devinを参考にした OpenHands というOSSを見つけました。元々OpenDevinという名前だったみたい
この記事はjsysアドベントカレンダー25日目の記事です 私たちは筑波大学学園祭実行委員会 情報メディアシステム局です。現在は50名弱のメンバーが在籍しており、筑波大学の学園祭「雙峰祭（そうほうさい）」の開催のために必要なIT・映像など技術的な部分で幅広い活動を行っています。ここでは2024年に私達がやったことを100個ご紹介します。 いち学生組織としては非常に多岐にわたる活動をしていると自負しておりますので、ぜひ最後まで御覧ください！ 1. 本番ウェブの準備 学園祭の実施期間に公開される、その年の学園祭を象徴するウェブサイトです。例年、非常に手の込んだウェブサイトを作成しています。Astroで作られています。 ウェブサイトのデザイン・情報収集・実装など、作成にかかる作業は幅広く、それぞれを得意な人が分担して作業を進めています。 本番ウェブはなんとしても学園祭当日に間に合わせる必要があるた
個人的にはJotaiの方が大規模開発に向いているのではないかと思うのですが、現状だと大規模開発にはZustandの方が優勢のようです。 質問は「大規模」ではなく「複雑」なので、正確性に欠けますが。 個人的に大規模に向かないと思った一つの理由はSlicingの対応です。もともと、Slicingの仕組みはZustandには備わっておらず、コミュニティによって発展した使い方です。JSの場合はそれほど困らないのですが、TSの場合は型づけが複雑でドキュメントになってはいるものの、自分ではあまり使う気になりません。また、Slicingする場合は、各Sliceが独立するようにNamespacingするのが一般的だと思いますが、それもできません。 Namespacingはだいぶ以前に求められてきた機能ですが、仕組みが複雑になりがちなのと、実現方法が複数あることから、Zustand本体では対応しないことにし
状態管理ライブラリ Jotaiの使い方
今回は React アプリケーションの状態管理ライブラリの中でも人気の高い "Jotai" の使い方を記事にしたいと思います。豊富な機能の中から本記事では以下の機能について記載しています。 atom, useAtom, useSetAtom, useAtomValue atomWithReset, atomWithLocation ( searchParams ) Read Only Atom, Write Only Atom Atom Creator 記事内に掲載しているソースコードは Github でも確認できます。 Jotai とは 🤔 Jotai は @dai_shi さんが作った React アプリケーションのための状態管理ライブラリです。軽量で使いやすく主に次のような特徴があります。 Atom（アトム）と呼ばれる小さな単位で状態を管理できる 使い方が直感的で、学習コストが低い
状態管理ライブラリのJotaiに入門する
はじめに 先日、Reactの状態管理ライブラリとして知られていたRecoilのリポジトリがアーカイブされたことが話題になりました。 This repository has been archived by the owner on Jan 2, 2025. It is now read-only. これまでRecoilを利用していた開発者も多く、戸惑った方もいるかもしれません。その中で、RecoilからJotaiへ移行したという事例も見かけるようになりました。 私自身も今回、Jotaiを使ってみたのでその基本的な使い方をまとめてみました。 また、Jotai特有の派生状態( Derived Atom )の活用例も紹介しているので参考になったら嬉しいです。 Jotaiはどんなことができるのか JotaiとはReact向けの状態管理ライブラリです。 主に以下のようなことが可能です。 グローバルな
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
TypeScript で Web 開発をする際の候補メモ
クリーンアーキテクチャはなぜフロントエンドに合わないのか - パンダのプログラミングブログ
Rust/Tauriに入門したので画像変換デスクトップアプリを開発してみた
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita
【2024年12月】Next.jsで新規アプリの構成と開発でのLLM活用
Jotaiはどのようにして誕生したのか、単なるRecoilの代替手段なのか？
ReactでUI構造が変わっても状態を保持したい - React-Reverse-Portal -
React 19 + Jotaiを試して気づいた�注意点
半年でライブラリを最新化！スタートアップが実践する継続的メンテナンス - ACES エンジニアブログ
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Jotai v2を使いこなすために実は必須級な“async sometimes”パターンの解説
【図解解説/入門】ReactとJotaiを使って実用的なNotion風ノートアプリを開発するチュートリアル【Convex/TypeScript/MDXEditor】 - Qiita
1年越しの反省を活かしたフロントエンドの技術選定と設計
Recoilリポジトリアーカイブのニュースを受けて、Jotaiの過去記事をまとめてみた
株式会社MOSHの皆さんと合同勉強会を開催しました - 株式会社ヘンリー エンジニアブログ
React の状態管理ライブラリ Jotai の詳説と Tips
ep167 Yearly Ecosystem 2024 | mozaic.fm
JotaiプロジェクトをZustandで作り直した話
もうSEはいらない??生成AIでアプリを作るOpenHands(旧OpenDevin) - Qiita
筑波大学学園祭実行委員会情報メディアシステム局のしごと100選
Zustandって大規模な状態管理に使えるの？Zustand-Slicesを作ったワケ