GitHub - dai-shi/will-this-react-global-state-work-in-concurrent-rendering: Test tearing and branching in React concurrent rendering
With useTransition Level 1 ✓ No tearing finally on update (7990 ms) ✓ No tearing finally on mount (4608 ms) Level 2 ✓ No tearing temporarily on update (12955 ms) ✓ No tearing temporarily on mount (4546 ms) Level 3 ✕ Can interrupt render (time slicing) (7926 ms) ✕ Can branch state (wip state) (6655 ms) With useDeferredValue Level 1 ✓ No tearing finally on update (9568 ms) ✓ No tearing finally on mo
Why Elixir Is the Best Language for Building a Bootstrapped, B2B SaaS in 2024 | SleepEasy Website Monitor
Why Elixir Is the Best Language for Building a Bootstrapped, B2B SaaS in 2024 [This article is the companion to my presentation for CodeBEAM America 2024, Elixir is the One-Person Stack for Building a Software Startup. You can download the slides as a PDF or view them in Google Slides.] I’d like to share why I chose Elixir as the programming language (and really, as we’ll discuss, the full stack)
Fully compatible with React 18 and the upcoming use hook. Now with a store interface that can be used outside of React. Jotai takes an atomic approach to global React state management. Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar de
2022 / 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2021年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2021年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.js、2020年の総合ランキングはDenoです。 以下は2021年のランキング、2021 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2021 6回目のJa
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
はじめに 今フロントエンド/バックエンドの垣根を超えて巷を賑わせている T3 Stack について調べてみました。要素技術一つ一つが濃密なので、本記事ではあまり深入りはしませんが、「それらがどういう旨みを持ってT3 Stackを成しているのか」、「少し動かしたことがあるよ」と読み終わる頃には人に説明できるようまとめてみました。 キーワードは full-stack typesafety(フルスタックな型安全) です。📝 T3 Stack T3 Stack とは、Theo 氏によって提唱された Web 開発技術スタックで、以下の思想に焦点を当てています。 simplicity(シンプルさ) modularity(モジュール性) full-stack typesafety(フルスタックな型安全) The “T3 Stack” is a web development stack made by
Props のバケツリレー (Props Drilling) を解決するときに、安易に Context を使ったり、状態管理ライブラリ(Recoil, Jotai, Redux)に頼っていませんか？ そんなことをせずとも、「CompA が CompB を使い、CompB が CompC を使い、 CompC が ...」という依存関係のチェーンを浅くするのが最善の解決策である場合があります。 「ローカルとはいえない、真にグローバルな状態1 である」なら、Recoil や Jotai が使えますし、 Context には Context の活躍できる場面2 があります。今回はそれらの話はしません。 KISS (Keep It Simple Stupid) という名言があるように、「Props を渡すだけ」というわかりやすい方法を取ることで、将来のコード読解が楽になり、メンテナンスが容易になり
概要 気づいたらこの記事書いてからまた1年経っていたので続編。 前回、前々回とは趣向を少し変えて昨今のフロントエンドの事情も踏まえて個人のポエムを書きます。 昨今のフロントエンド事情 脱CSR → SSR 徐々に徐々にこの方向に寄っているなと感じてはいたのですが、決定的に感じたのはReact18, Next13が出たタイミングでした。 去年の今頃でもこの風潮はやや感じていたのですが、「Reactが良いとされているCSRから脱却するなんて有り得るのか?」と懐疑的でしたが、どうやらこの流れは止まらない気がします。 今はNextのappもprodutionではありませんが、そう遠くなくproductに入ってきそうですね。 ↑このブログがとても良いなと思いました。 確かにCSRはUXを上げるものではあったのですが、クライアント側の処理が増えることで複雑性が増し、セキュリティ的にも考えることが多いと
Building data-centric apps with a reactive relational database
Building apps is too hard. Even skilled programmers who don’t specialize in app development struggle to build simple interactive tools. We think that a lot of what makes app development hard is managing state: reacting and propagating changes as the user takes actions. We’re exploring a new way to manage data in apps by storing all app state—including the state of the UI—in a single reactive datab
はじめに 株式会社Awarefyというメンタルヘルス領域のスタートアップでフロントエンドを中心に担当している @nitaking です 2023年4月頃に構築したWEBサイトの構築した際の構成の経緯、技術選定、トラブルシューティングを備忘録として記録しておきます。 すぐ陳腐化する技術の世界なので（もう半年経って状況変わっているし）スナップショットとして活用ください。 また社内ドキュメントにもしてしまおうの趣旨なので、その点をご留意ください 時期 2023年4月頃、Next.js AppRouter(appDir)がbetaだった時期 背景 メインプロダクトはモバイルアプリ（Flutter） バックエンド通信はgRPC 全社的にクリーンアーキテクチャを導入 基本構成 React, TypeScript, Next.js React React・Next.jsの方向性にやや懐疑的な点もあったの
Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)
Home Definitive answers and clarification on the purpose and use cases for Context and Redux Introduction 🔗︎ "Context vs Redux" has been one of the most widely debated topics within the React community ever since the current React Context API was released. Sadly, most of this "debate" stems from confusion over the purpose and use cases for these two tools. I've answered various questions about Co
JotaiはReactの新しい小粒な状態管理ライブラリ
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Introduction If someone has already looked into package.json in the jotai library, they may find "exports" field. https://github.com/pmndrs/jotai/blob/v1.6.4/package.json#L18-L31 "exports": { "./package.json": "./package.json", ".": { "types": "./index.d.ts", "module": "./esm/index.js", "import": "./esm/index.mjs", "default": "./index.js" }, "./utils": { "types": "./utils.d.ts", "module": "./esm/u
AnimationAnimation adds soul to otherwise boring things. These libraries let you build the web app equivalent of Pixar's Intro Animation, but in React. Both libraries have similar APIs and support spring physics over time-based animation, though Framer Motion seems to be used more often on GitHub. Framer Motion Framer Motion is an animation and gesture library built by Framer. The added benefit of
祝！Jotai v2リリース
それだけだと怒られそうな気もするので、一応👇 リンク集 雑多なメモ v2 API自体はv1.11.0からpre-releaseしていたので、今回の変更は古いコードを消しただけ Webサイトがリニューアルされたことの方が意味が大きいかも v2 APIはRecoil互換の決別とも言える ずっとやりたかったstate branchingはあきらめた、Reactから機能が提供されないと無理で、その見込みがないため その結果、store APIを作ることができ、zustandに近づいた store APIは乱用されそう、できるだけ使わない方が良い Jotai Labsのorg nameをjotaijsにした
Reactの状態管理ライブラリを比較してベストな選択をしよう！ | Reactおじさんブログ
Reactの状態管理ライブラリを比較してベストな選択をしよう！2022-11-032023-01-04 どうもReactおじさんです。 昨今のReact、Next.jsの進化の早さにはとても驚いています。 それはReactに追従するライブラリも同様です。 特にReactの状態管理ライブラリは戦国時代を迎え、様々な状態管理ライブラリが台頭してきました。 今回はライブラリの紹介、これから使用されていくであろう物にフォーカスして自分なりにまとめてみようと思います。 ※2022年版に更新しました。 結局、状態管理ライブラリは何が人気なのか？？JavaScript Rising StartsのState Management部門(2022)とnpm trendsを見ていきましょう。 JavaScript Rising Starts ※ JavaScript Rising StartsとはGithub
はじめに 本記事ではJotaiというReactのライブラリを紹介します。名称は日本語の「状態」から来ています。最近、Zustandというライブラリのメンテナスを任されているのですが(紹介記事)、その議論の中でZustandの枠には収まらないアイデアが出てきて、じゃあもう一つ作ればいいじゃん、となりました。Zustandはドイツ語の「状態」なのですが、誰かが日本語の「状態」を調べて、Jotaiって言うんだ、npmでもまだ使われていないパッケージ名だ、となりました。 そんなこんなで9月にリリースしました。リリース時のツイートがこちら we are releasing JŌTAI today https://t.co/T66zQVyKcz 🎉 this is @dai_shi 's take of the atomic state model. quite similar to recoil
🥳 前置き：君は最高のバウンディングボックスを知っているか 🥳 「バウンディングボックス is 何？」って方、これです↓ 出典： 複雑GUIの会( https://scrapbox.io/guiland/ ) イラレやFigmaのようなデザイン系のアプリには100%用意されてる、あのハコです。 知らん人にはマジどうでもいい話かもなのですが、GUI沼界隈においてはこのバウンディングボックスはHelloWorldであり鬼門であり永遠に辿り着けない理想の終着駅です。 界隈の人間が新しいプロダクト作る時は、とりあえずフルスクラッチでバウンディングボックスから作り始めたりするし、勉強会で集まるとバウンディングボックスだけで2時間くらい語れる人がウヨウヨでできます。 それくらいみんな大好きバウンディングボックス。既に若干引かれていそうな気もするけど、この記事はそんな憎愛を前提に温かい目でお読みくだ
今回、個人開発（2名）でslii.xyzというサイトを作ってみました。モダン目なフロントエンド技術を採用しているので、どんな開発技術を採用しているか全部公開していきます。特にコメントの必要のない箇所はノーコメントにしてます。 （改修したいとこはたくさんあるけど、やっとひと段落したー。） 開発技術一覧 作りたいものを作っていく中で、色々と試していけたらと思っています。今回はバックエンドでSupabaseや状態管理のjotaiを試してみて、非常に扱いやすく開発体験も素晴らしいことが分かりました。 デザイン 1.figma 最初はデザインせず開発進めてたのですが、全体のまとまり感とかなくなってしまったので、最低限のUIはfigmaで作成しました。UI先に作成しておくとコーディングも捗りますね。 参考：https://figma.com 1.[言語]javascript/Typescript 用途
![[全公開]モダンな個人開発で採用した技術・ツールの全て！](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bc99f7cd31ee94256791720114b5dfd7988f6c2/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ENsVWv1b--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E5%252585%2525A8%2525E5%252585%2525AC%2525E9%252596%25258B%25255D%2525E3%252583%2525A2%2525E3%252583%252580%2525E3%252583%2525B3%2525E3%252581%2525AA%2525E5%252580%25258B%2525E4%2525BA%2525BA%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252581%2525A7%2525E6%25258E%2525A1%2525E7%252594%2525A8%2525E3%252581%252597%2525E3%252581%25259F%2525E6%25258A%252580%2525E8%2525A1%252593%2525E3%252583%2525BB%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252581%2525AE%2525E5%252585%2525A8%2525E3%252581%2525A6%2525EF%2525BC%252581%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aik_takagishi%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEzZWE2ZjIxMGMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AGohan%252520DAO%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2E0YzZhNmQ4NGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2022年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2022年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年～2019年の総合ランキング1位はVue.jsが4連覇、2020年の1位はDeno、2021年の1位はzxです。 以下は2022年のランキング、2022 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2022 7回目のJavaScript ライジングスターにようこそ！ 毎年恒例、2022年の12か月におけるJavaScriptエコシステムの
導入 Reactive ProgrammingではSignalという概念があるらしいですが（実はもっと古くからある概念）、SolidJSが導入してReact Hooksとの差が明確になったのかと思います。 「Signal」は Solid のリアクティビティの基礎となるものです。これらには、時間とともに変化する値が含まれており、Signal の値を変更すると、それを使用しているすべてのものが自動的に更新されます。 とのことです。ObservableとかStreamとかも似たようなものですかね。 SolidJSのポイントはSignalを使ってfine-grained reactivityを実現しているところだと思います。ReactのようにVirtual DOM（とはもう呼ばないらしい、DOMじゃないので。でも、以下VDOM）を使わずに局所的にDOMを直接更新するのでパフォーマンスが良いとのこと
はじめに React Developer Roadmap 2024 を眺めつつ筆者の独り言を書く記事です。筆者の React 歴は 3 年ちょっとです。 Visit JavaScript Roadmap React のロードマップは JavaScript の勉強が最初。Promise を基本とした非同期処理やクロージャ周りを理解しておくと、React への理解も更に深まった記憶がある。 非同期周りはこの本に助けられた。 CLI Tools Vite Create React App 新規に CSR の SPA を作る場合 Vite 一択だと思う。理由は、設定簡単 + 早い + 拡張性 ◎ + エコシステムが大きい。Vite は SSR もできるがライブラリ作者向け。 (宣伝) Vite を使用した環境構築方法は先日記事にしました。 なぜ Create React App が使われなくなりつ
React 用状態管理ライブラリ「Jotai」に入門
こんにちは．株式会社ゆめみの Keeth こと桑原です． 今回は Jotai という React 用の超軽量な状態管理ライブラリを触ってみたので勉強ログとしてまとめました．軽く使ってみた感触としては非常にシンプルで分かりやすく，導入も簡単でしたのでしたね． ただ，既に Jotai リリース後ある程度時間が経っており，Google で検索していただくとわかるかと思いますが，Jotai に関する記事もいくつかありますので，二番煎じな内容もありますことをご了承頂ければと思います． ※一応自分が手を動かしたコードのリポジトリも載せておきます 👇 https://github.com/kkeeth/my-jotai-demo TL;DR とにかく軽量で簡単 Redux が冗長に感じ，もっとライトなものを探している人にオススメ 軽量な分ルールが少ないのでカオスにならないように注意 Jotai の概要
ReactカスタムフックからヘッドレスChromeまで！リアルタイム静止画編集機能の作り方を、リチカのエンジニアに聞いてきた
――現在、どんなプロダクト開発に従事していらっしゃいますか？ 杉本：誰でもかんたんにマーケティング動画や静止画を作れるWebサービス『リチカ クラウドスタジオ』を開発しています。 『リチカ クラウドスタジオ』は、業種別や配信媒体別の数多くのフォーマット（型）をベースに、クオリティの高い動画を誰でもかんたんに作成できるのが特徴です。当社は元々制作会社だったため、社内にプロのクリエイターが多数在籍しているので、彼らによって制作されるフォーマットが大きな強みのひとつです。 朝賀：昨年後半からは、『リチカ クラウドスタジオ』の新機能の開発プロジェクトが進行していて、現在は主にそちらの開発に従事しています。 ――どのような新機能か、伺ってもよろしいですか？ はい、大きく分けて2つありまして、静止画のリアルタイム編集機能と、比率違いの静止画を一括制作できる機能です。 これにより、ブラウザ上で作成したイ
Reactの状態管理ライブラリであるRecoil, Jotaiは宣言的かつシンプルにデータフローグラフを構築するライブラリです。 原始的な機能の集合体であり、直感的に状態管理を実装できる反面、潜在的に壊れやすいコード(Reactの哲学と反するコード)もかけてしまいます。 コンポーネントとAtomが密結合になっている例 Atomを外部に公開してしまうと、途端に状態管理が無秩序となります。 内部データの取り扱いや更新ロジックなどの解釈が利用者へ委ねられるためです。 これによって、状態の不整合が発生しやすくなります。 行儀よく状態を扱うには、DIKWピラミッドの考え方が参考になるかもしれません。 DIKWピラミッド DIKWピラミッドは情報をデータ、情報、知識、知恵の4階層構造に分ける考えで、情報に関するものであればどのような分野でも応用の効く考え方です。 データや情報だけでは、文脈がわからない
更新履歴 2023.8.15 前提セクションを更新しました。 結論 以下のコードで実現できます。 コード import { useEffect, useState } from "react"; function usePolling( intervalActive: number, intervalBackground: number ) { const [isActive, setIsActive] = useState<boolean>(true); const [isPollingSuccess, setIsPollingSuccess] = useState<boolean>(false); useEffect(() => { let interval: NodeJS.Timeout; const pollingFunc = async () => { try { await f
Jotai vs. Recoil: What are the differences? - LogRocket Blog
Yaroslav Lapin I'm a self-taught software engineer with over 10 years of experience. I like Elixir/Erlang and React/TypeScript. You can follow me on Twitter @JLarky. It’s practically a meme at this point that React has too many state management libraries, but no one is going to stop creating new ones anytime soon. It looks like apart from using plain old React state, approaches for state managemen
【受験生が作る】リアルタイム性を重視した新感覚チャットアプリ「のーろぐちゃっと」 | Next.js + WebSocket
きっかけ 受験勉強に疲れて開発に飢えていたその時、閃いてしまったのです、このアプリのアイデアを...！開発あんまめんどくなさそうだし作るっきゃねぇなという思いでサクっと作りました。 ちなみにというかタイトルに書いてますが自分は受験生です。この記事が公開される3日後ぐらいに共通テストを控えてます。ホントなにやってんでしょうね。 作ったもの 「のーろぐちゃっと」というリアルタイムチャットアプリを作りました！！ 普通のチャットアプリとは違ってログが直近3件までしか残らないという仕様で、リアルタイムさを追及した設計になっています。オープンチャットなので思いがけない人と会えるかも...？ 技術的な話 技術の選定 サクっと作りたかったのでフロントエンドは自分が慣れてるNext.jsで作りました。ただUIは目新しいのが好きなのでMantine UIを使って、React Contextがちょい使いづらかっ
eslint-plugin-import-accessで「そこからそれはimportしないでください！！」を防ぐ
eslint-plugin-import-accessで「そこからそれはimportしないでください！！」を防ぐ この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 16日目の記事です。 3行で eslint-plugin-import-accessで「ディレクトリの他の階層からimportしてほしくないメンバ」を定義できるよ！ さらに defaultImportability: "package"を指定するとちょっと初見殺し感があるけどかなり強力になるよ！ re-exportを使う場合はビルドパフォーマンスやバンドルサイズに影響する可能性があるから気をつけよう！ eslint-plugin-import-accessとは アプリケーションなどを開発しているとき、あるモジュールの範囲内でのみ使用してほしい（=あるモジュールの中に隠蔽したい）変数や関数を定義したくな
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
JSer.info #630 - Node.js v18.14.0がリリースされました。 Node v18.14.0 (LTS) | Node.js Node.js v18.14.0は、npm 9.3.1へのメジャーアップデートが含まれています。 npm 9には、いくつかのコマンドの削除やデフォルト設定の変更などが含まれています。 npm v9.0.0 released | GitHub Changelog npmのアップデートによるパッケージのNode.jsのテストに失敗がないこと、ロックファイルが自動で変更されないことなどを条件に、Node.jsのminor updatesに含まれることになりました。詳しい条件は次のページにまとめられています。 Integrating with node · npm/cli Wiki または、Node.js v19.6.0では、npm v9.4.0が同
Professional React Development 2022年に最も普及するReactの技術スタック Screaming Architecture - Reactのディレクトリ構成を進化させる プロフェッショナルなReactプロジェクトの立ち上げ方 React開発者のためのGitワークフローとGitHubセットアップ (こちらの記事の和訳です) React開発者としてのキャリアをスタートさせたいなら、難しい決断に迫られる。次のプロジェクトでは、どのライブラリとツールを使うべきでしょうか。Reactのエコシステムは巨大です。常に新しいハイプがあり、あまりにも多くの矛盾した意見があります。どうしても混乱する... しかし、決断は簡単です。最も人気のあるライブラリやツールに焦点を当てるのです。これらは、実際のプロジェクトでも広く使われている可能性が高い。こうすることで、あなたの技術スタ
Jotaiは手軽に使える状態管理ツール
株式会社パルケの手を動かすCTO、みつるです。 この記事は先日ツイートしたものを加筆修正したものとなります。 少し前まで、Reactの状態管理ツールはZustandがファーストチョイスでした。 今は考えが変わってJotaiがファーストチョイスとなっています。 以前、状態管理ツールの沼にハマって試行錯誤した経緯はこちらの記事に書きました。 この後、状態管理ツールに対する考えに変化があり、今は私にとってJotaiがファーストチョイスとなっています。 状態管理ツールの責務が軽減された TanStack Queryを積極的に使い始めてから、サーバーと同期するようなトランザクションデータはTanStack Queryのキャッシュ任せになりました。 そうすると、状態管理ツールが担っていた役割がどんどん少なくなっていきました。 結果として残ったのは、コンポーネントのPropsで受け渡しをするには面倒な、
はじめに 初めましての方は初めまして 土佐犬です。 この記事は私がゆめみのサマーインターンを通して得られた経験、知識、ゆめみの魅力などを書き記していくものとなっています。 インターンに応募した経緯 最初はサークルの友達にゆめみがインターンやってるらしいということを聞いて、以前からQiitaなどでよく目にしていたので気になっていたのもあって応募してみました。 選考フローは書類選考、コードテスト、面接といった一般的な感じでした。 ただ他社にはなかった選考フローの要素が「フィードバック」でした。 コードテストが終わって選考結果メールを見たとき私は「すごいなこの会社」って思ったのが本当に正直な感想でした。 その理由が、「私が書いたコードにおける、いい点、わるい点を指摘した上で選考結果を伝えたこと」でした。 それまでいろんな会社のサマーインターンの選考を受けてきましたが、コードテストにおけるいい点悪
Vitest の Browser Mode (experimental) でファイル読み込みのテストを書く - ジンジャー研究室
趣味でブラウザ上に画像や音声を読み込んで作業する React アプリを作っているのだが、 Vitest + Testing Library でテストをしようと思ったらファイル読み込み部分でつまづいた。Node.js 上でブラウザ環境をシミュレートしている部分がそのままでは上手く動かないので、 polyfill を入れたり沢山モックを差し込んだりするとなんとか動く。が、色々弄りすぎて本当にテスト出来ているのか怪しいし、やはりリアルなデータでテストしたい。 で、リアルなブラウザ環境でテスト出来ないかなと調べていたところ、２つの候補が挙がった。 Browser Mode | Guide | Vitest Experimental: components | Playwright 両方とも experimental 。前者は Vitest をそのままブラウザ上で実行するというもので、後者は Pla
When it comes to React applications, state is an integral part of what makes the application dynamic and interactive. Without state, applications would be static and unresponsive to user input. State management is the process of handling the state of an application optimally. It is a crucial part of the development process. In this article, we will take a look at the different state management opt
こんにちは。株式会社インプルの平澤です。 Reactの状態管理（グローバルステイト）で迷われたこと、迷っていることはありませんでしょうか？ そんな方々へReactの状態管理の有名ライブラリをご紹介致します。 はじめに 最初に言いますが、どの方法が良いかの正解はありません。「個人的な相性」・「開発チームの相性」・「パフォーマンス」など、どこに重点を置くかでも選択は変わってきます。 それを踏まえた上でご自身のベストプラクティスを見つけてみましょう。 本記事では 1. Zustand 2. XState 3. Jotai 4. Recoil 5. Redux 6. React Hooks(useContext + useReducer) のサンプルコードと使用感をまとめました。 選定理由 JavaScript Risingstars 2021 において状態管理ランキングで選出された上位5つ +
「りあクト！」、2 年ぶりのメジャー改訂本日 2022 年 9 月 8 日、『りあクト！ TypeScript で始めるつらくない React 開発』の第 4 版をリリースしました。BOOTH にてすでに販売していますので、能書きはいいから早く買わせろという方はまずそちらをどうぞ。 それにしても第 4 版とは感慨深いです。初版が出たのが 2018 年 10 月でしたから、ほぼ 4 年もこのタイトルに携わってきたことになります。当時は契約を切られて次の職場も決まってないフリーランスというか無職でしたが、そこからずっと「りあクト！」シリーズの売上だけで生活できてるとは自分でも驚きです。そして先日、シリーズ累計の実売で 2.5 万部を突破しました。技術同人誌でこれだけ売れたのは、おそらく世界史上初じゃないでしょうか。 ただ主力タイトル『りあクト！ TypeScript で始めるつらくない Rea
React 状態管理ツールの沼にハマった話
2020年に、株式会社パルケのCTOに就任してから、Reactでいくつかのサービスを開発してきました。 状態管理ツールの選定に悩みに悩み、試しに試してブレまくってしまい、プロダクトでどのように状態管理ツールを使っていくのか混沌としてしまっていた時期がありました。 その時期にプロダクト開発に携わっていただいて、いろいろ混乱させてしまった開発メンバーの方には、この場を借りてお詫びしたいと思います。 なお、この記事は当時の個人の体験・印象に基づくものであり、事実とは異なる場合、現状とは異なる場合があります事をご了承ください。 状態管理ツールに求める事 コンポーネント間のデータの受け渡しをPropsを介在せずにできる事、データの変更に応じて関連するコンポーネントの再描画する事の２点だと思います。 これらはどの状態管理ツールでも問題なく実現できますので、選定にあたってはそれ以外の開発体験（という開発
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jotai, primitive and flexible state management for React
JavaScript ライジングスター 2021 - Qiita
【今さら聞けない?!】T3 Stack によるフルスタックWebアプリ開発 - Qiita
【React】Context を使う前に #1 無駄なコンポーネントの層を削れ - Qiita
【ロードマップ】React2年やってみて - Qiita
【Next.js】AppRouter beta時代の技術構成・選定・トラブルシューティングログ
How Jotai Specifies Package Entry Points
Keeping up with React Libraries - Max Rozen
Jotai: 状態?! 日本語っぽい名称のReact用ステート管理ライブラリ - Qiita
🎉🎉最高にイカしたバウンディングボックスを紹介するぜ🎉🎉 - Qiita
[全公開]モダンな個人開発で採用した技術・ツールの全て！
【JavaScript】JavaScript ライジングスター 2022 - Qiita
Signalって何？jotai-signalからのjotai-uncontrolled、これすごいです
React Developer Roadmap 2024 を眺める
Recoil, Jotaiの設計論とDIKWピラミッド
任意のエンドポイントにポーリングしていろいろアレするReact hook
【JavaScript】JavaScript ライジングスター 2023 - Qiita
2023-02-08のJS: Node.js v18.14.0(npm 9.xへアップデート)、Interop 2023、 Learn Images
2022年に最も普及するReactの技術スタック(和訳) - Qiita
株式会社ゆめみのインターンに参加してきました - Qiita
The modern guide to React state patterns - LogRocket Blog
Reactの状態管理で悩む全ての人へ【2022年】 | ramble - ランブル -
『りあクト！』第4版をリリースしました - くるみ割り書房ブログ