RemixをCloudflare Workersで動かす & KVでデータをキャッシュする
2022/12/04 追記 RemixをCloudflare Pagesで動かせるようになりました。 詳しくは Deploy a Remix siteをチェックするのがおすすめです。 前回の記事 この記事ではRemixをCloudflare Workersにデプロイしつつ、Workers KVで外部APIから取得したデータをキャッシュしてみたいと思います。 Remixをローカルで開発
2022/12/04 追記 RemixをCloudflare Pagesで動かせるようになりました。 詳しくは Deploy a Remix siteをチェックするのがおすすめです。 前回の記事 この記事ではRemixをCloudflare Workersにデプロイしつつ、Workers KVで外部APIから取得したデータをキャッシュしてみたいと思います。 Remixをローカルで開発
GitHub - apitable/apitable: 🚀🎉📚 APITable, an API-oriented low-code platform for building collaborative apps and better than all other Airtable open-source alternatives.
APITable provides a range of amazing features, from the personal to the enterprise. Advanced technology stack and open-source Realtime collaboration allows multiple users to edit together in real time, or simultaneously with the Operational Transformation (OT) Algorithm. Extremely smooth, user-friendly, super-fast database-spreadsheet interface in <canvas> Rendering Engine. Database native archite
ログラスのReactの技術選定について🐳
はじめに こんにちはログラスのフロントエンドエンジニアの @Yuiiitoto です。 「次世代型経営管理クラウド」のSaaSを開発しています。 今回Reactを使って開発しているログラスのフロントエンドがどういう技術を使っているのか、なぜそれを選んだかについて解説していきます。 Reactはライブラリの数が豊富な反面で群雄割拠している領域が多く、技術選定がとても大変です。 同じ悩みを抱えるフロントエンドエンジニアの方に少しでも力になれればと思って記事にしました。 ログラスのフロントエンド 似たようなサービスの場合に特に参考にできる場合が多いと思うので、記事の前提としているサービスについて少し説明します。 ログラスはいわゆるtoBのSaaSの業務システムみたいな立ち位置です。 ほぼ全てのページに認証が入り、画面の中の要素はtoCのサイトより多めです。 Next.jsで構成されていて、SSG
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナ
はじめに 筆者はOpenAPIスキーマからRTK Queryのコードを生成するrtk-query-codegen-openapiに2020年頃からコントリビュートを続けていました. rtk-query-codegen-openapiは現在rtk-incubatorリポジトリではなく、redux-toolkit/packages/rtk-query-codegen-openapiに統合されています. 今回は、RTK Queryを幾つかの現場で本番運用して得られた優位性を公開します. 他ツールとの機能比較 RTK QueryとReact Queryが作成したマトリックスがある為、リンクだけ貼って省略します RTK Queryが作成したマトリックス React Queryが作成したマトリックス Best Futures of RTK Query 他のdata fetchingライブラリと比べても
GitHub - heroui-inc/heroui: 🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Announcing SWR 1.0 – SWR
Almost 2 years ago we open sourced (opens in a new tab) SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR! What’s New Smaller Size Performance is one of the most important features of SWR. In 1.0, we made the library significantly smaller without removing any existing features: 41% smaller core (24% smaller when gzipped, 3.9
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
React Trends in 2025
Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem. React Server ComponentsWe've come a long way with React Server Components (RSC). The first
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使えるように保存されます。 dependencies: CalculateValueのコード内で参照されるすべてのリアクティブ値の配列。リアクティブな値に含まれるのは、プロパティと状態、およびコンポーネント本体に直接宣言された変数と関数です。React用に設定されたリンターであれば、リアクティブな値がすべて依存関係に正しく指定されているかを
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
GitHub - tajo/ladle: 🥄 Develop, test and document your React story components faster.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
"use client"; import { parseAsInteger, useQueryState } from "nuqs"; export function Demo() { const [hello, setHello] = useQueryState("hello", { defaultValue: "" }); const [count, setCount] = useQueryState( "count", parseAsInteger.withDefault(0), ); return ( <> <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button> <input value={hello} placeholder="Enter your name" onChange={(e) =>
Next.jsのServer Actionとreact-hook-formでフォームを実装した - BASEプロダクトチームブログ
はじめに 本記事はBASEアドベントカレンダー2024の20日目の記事です。 Pay IDのフロントエンドエンジニアをしているnojiです。 以前執筆した システムリニューアルでNext.jsのApp Router/Server Actionを使って便利だと思ったところ に記載したように、Pay IDのアカウント管理画面ではNext.jsを採用し、Server Actionを活用しています。 今回は、そのServer Action導入時に行ったフォームバリデーション周りの取り組みについて紹介します。 react-hook-formを使ったフォームバリデーション アカウント管理画面の特性上、ログインだけでなく名前や住所など登録情報の編集といったフォーム操作が必須です。そのため、以下の要件を満たすフォームバリデーションが必要でした。 入力中 or 入力後にエラーを検出し、ユーザーに即座に通知で
Micro State Management with React Hooks | Web Development | Paperback
Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
ReactのCSSの選択肢を比較してみた
世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。その中でも私が一番使いやすいなと思っているのが、React Queryです。 実際、今携わっているプロジェクトでは Redux を使っているのですが、action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。 React Queryの特徴としては 取得したデータをキャッシュに持たせる キャッシュされたデータをどのコンポーネントからでも簡単に利用可能 Fetch の状態を返してくれる(isLoading, error など) があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。 そこで、実際に携わっている Redux のプロダクトに Rea
Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita
What should the default form library be in Blitz apps? BlitzがどのFormライブラリをデフォルトにするかの議論が参考になったので要約しました。 formik react-final-form react-hook-form の３択で，結論としては，React Final Formを推奨とする形に落ち着きました。 最初のコメント Blitz.jsの作者であるBrandon(@flybayer)さんがコメントしています。要約するとこんな感じ。 Formik 以前使ってたけど，パフォーマンスめっちゃ悪いって気づいたから，Formikは無しで。 React-final-form 最近ずっと使ってるけどいい感じ。 React-hook-form ほとんど使ったことない。 React-final-formをReact-hook-formに書き
Deno (ディノ) Advent Calendar 17日目の記事です。 今日は Deno 用のフロントエンド開発ツールの packup を紹介します。 packup is 何 packup は Deno 用の parcel です。HTML ファイルをエントリポイントとして、js / css をバンドルして、シングルページアプリを生成します。 JavaScript のバンドルには WASM 版の esbuild を使っています。 使い方 次のコマンドでインストールできます。
Avoiding race conditions and memory leaks in React useEffect
Let us take a look at an implementation of getting data from an API request and see if there is any possibility of race conditions happening in this component: import React, { useEffect} from 'react'; export default function UseEffectWithRaceCondition() { const [todo, setTodo] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://jsonplaceholder.
こちらのイベントで使用した登壇資料です！ https://thecoo.connpass.com/event/269188/
Hawkins: Diving into the Reasoning Behind our Design System
Stranger Things imagery showcasing the inspiration for the Hawkins Design Systemby Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves Hawkins may be the name of a fictional town in Indiana, most widely known as the backdrop for one of Netflix’s most popular TV series “Stranger Things,” but the name is so much more. Hawkins is the namesake t
実務で使った React-Hook-Form × Zod の事例紹介 - バイセル Tech Blog
はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 こんにちは！ テクノロジー戦略本部 開発二部の小林です。 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ
Understanding useMemo and useCallback • Josh W. Comeau
Understanding useMemo and useCallback A roadtrip through two of React's most notorious hooks Filed underReactoninAugust 30th, 2022.Aug 2022.Last updatedoninMay 9th, 2025.May 2025. IntroductionIf you've struggled to make sense of useMemo and useCallback, you're not alone! I've spoken with so many React devs who have been scratching their heads about these two hooks. My goal in this blog post is to
はじめに みなさんは、Reactを使用して開発する時、Componentで使用するlogicをどこに実装していますか？ 私はComponentをContainer ComponentとPresentational Componentの二つに分けて、Container Componentにlogicを書いてました。 しかし、Custom Hooksを使用することでわざわざComponentを分けなくても良い、ということを最近知りました。 本記事は、それを実践してみよう、というものです。 まず用語を簡単に確認してから、サンプルコードを用いてCustom Hooksを実装していきたいと思います。 Container Componentとは Dan Abramov氏のブログから引用します。 You’ll find your components much easier to reuse and r
Slinkity
To eleventy and beyond Follow along on Twitter for project updates ❤️ ⚠️ Slinkity is no longer maintained. The project owner (@bholmesdev) now works on Astro full-time. If you want to build component-driven content sites, give Astro a try! If you're committed to 11ty and want to use client components, consider 11ty's WebC project. Slinkity is the simplest way to handle styles and component framewo
How Astro Works Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML
ToKyoto.js #02 https://kyotojs.connpass.com/event/302442/
"The Testing Trophy" 🏆 A general guide for the **return on investment** 🤑 of the different forms of testing with regards to testing JavaScript applications. - End to end w/ @Cypress_io ⚫️ - Integration & Unit w/ @fbjest 🃏 - Static w/ @flowtype 𝙁 and @geteslint ⬣ x.com
GitHub - concrete-utopia/utopia: Design ❤️ Code
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Techfeed Conference 2022 #React
GitHub - facebook/react-strict-dom: React Strict DOM (RSD) standardizes the development of styled React components for web and native.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
アソビュー流、SWRの使い方。可読性・保守性の高いhooks活用法 - asoview! Tech Blog
はじめに アソビュー！ Advent Calendar 2022の8日目です。 2019年ごろから基本的にReact hooksを使用しており、REST APIを呼ぶ際も以前紹介したこちらのようにhooksベースで行っています。今回はその中でSWRに着目してご紹介したいと思います。tech.asoview.co.jp SWRとは？ SWRとはstale-while-revalidateの考えに基づいたデータ取得用のライブラリのことで、stale-while-revalidateは直訳すると「再検証している間は古いまま」というようなニュアンスの意味になります。 公式ドキュメントにも記載されておりますが、APIリクエストがされたら、まずそのAPIのキャッシュを返却し、APIのレスポンスが返ってきたらその最新の取得結果をキャッシュと置換するというのが、一番基本的な機能です。 SWRを使用すること
React Email
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
Lucide Icons
Lightweight & ScalableIcons are lightweight, highly optimized scalable vector graphics (SVG). Clean & consistentDesigned with a strict set of design rules for consistency in style and readability.
Cluster Tech Blogははてなブログへお引越ししました 引き続きそちらで記事を発信していきますので、ぜひご覧ください！
GitHub - zthxxx/react-dev-inspector: jump to local IDE code directly from browser React component by just a simple click
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご
React Router v6.4 が、破壊的変更を伴わないマイナーバージョンアップながら、機能追加の内容としてはかなり新しい世界観を追加してきたので、5 分くらい眺めて気づいたことをメモしておきます。 Routing と Data Loading/Mutation の統合 まずはリリースノートがこちら。 そしてリリースノート内に貼り付けられている動画がこちら。 1:45 しかない動画なので、動画を見ていただければこの記事はあんまり読まなくてもいいかもです。 さて、動画内では、次の 2 つの機能を <Route> コンポーネントへと統合した話題が語られています。 データ読み込み（Data Loading） 0:00〜 0:28〜 エラーハンドリングの話題もあり データ更新（Data Mutation） 0:52〜 <Route> に統合された API は、ざっくりと次のような形です。 <R
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TanStack Routerでサクッと始める型安全ルーティング
React Routerはルートをどうランク付けしているか
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
textareaをカスタマイズできるReact用のライブラリを作成しました
nuqs | Type-safe search params state management for React
REST API なら React Query がファーストチョイス
Deno 用のフロントエンド開発ツール packup について
propsのバケツリレー対策でGlobal_Stateを使うその前に
Container Componentに書いていたlogicをCustom Hooksに書いてみる
Introducing Astro: Ship Less JavaScript | Astro
ありがとう、create-react-app
The Testing Trophy and Testing Classifications
How useEvent would change our applications
サイトの負債と向き合うweb技術選定｜cluster - メタバースプラットフォーム
React Router v6.4はClient Side Remix
coozoo.hatenablog.com
www.kyoto-np.co.jp
kintore123.xsrv.jp
townwalker.net
www.asahi.com
anond.hatelabo.jp