React v19 – React
React 19 is now stable! Additions since this post was originally shared with the React 19 RC in April: Pre-warming for suspended trees: see Improvements to Suspense. React DOM static APIs: see New React DOM Static APIs. The date for this post has been updated to reflect the stable release date. In our React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. I
Pricing
Pricing that scales with youYou’re never charged for users who sign up and never come back. Your first 10,000 active users and 100 active organizations are free.
Clerkで"ラクラーク"に認証・認可周りを実装する
はじめに アプリケーションの開発では、やっぱり認証・認可の部分は辛みが多い部分かなと思います。 SupabaseやFirebaseのAuthenticationやNextAuthなど認証・認可のサービス・ソフトウェアは様々ありますね。 先日のVercel Shipでも発表があったClerkという認証サービスを個人開発に導入してみたのですがかなり開発体験が良く、従来の認証・認可の実装の際にぶち当たる辛みがかなり少なかったので、今回はClerkを使った認証・認可周りの知見を共有できたらと思います。 Clerkとは Clerkとは、Clerk社が提供するフロントエンドフレームワーク(example: Next.js, React)向けの認証・認可サービスです。認証処理の提供のみならず、Clerkが標準で提供する認証情報コンポーネント(例えば、新規登録フォームのコンポーネントである<SignUp
Next.js の Middleware で Hono を使う
株式会社 CoeFont でフロントエンドエンジニアをしている uzimaru です。 Next.js の Middleware で Hono を使ってみたのでそれについて記事にまとめます。 モチベーション Next.js の Middleware はアプリケーションに1つだけしか設定出来ず、どの path で実行するかの設定も config を使って正規表現や Header, Cookie を指定して設定するかリクエストの pathname を見て処理を分岐する必要があります。 シンプルな実装のみなら良いのですが、path によってログインしているか確認したい、いくつかの処理を Middleware で適応したい、というように要件が複雑になると管理が大変になっていくと思います。 そこで、Hono のようなシンプルなフレームワークを Middleware で動かして実装をシンプルにしようと
Honoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog
HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => c.json({ message: "Hello, Hono!" })); export default app; HonoはWeb標準準拠を謳っているフレームワークです。それを聞くとなんだか小難しく感じます。 Web標準とは Request と Response のインスタンスを扱うということです。これらは主にブラウザ上のJavaScriptのfetch関数が取り扱うオブジェクトですね。 RequestはfetchでHTTPリクエストを送信するときに、データをまとめておくオブジェクトです。例えば送信先のURLやHTTPメソ
zustandを初めて使ってみた - Qiita
はじめに reactの状態管理ライブラリのzustandを今更ながら初めて知り、以前recoilを使っていましたがzustandの方がシンプルに状態管理できそうだったのでキャッチアップ&実務で活用してみました。 今回はzustandの大まかな紹介になります。 zustandとは 公式ドキュメント：https://zustand-demo.pmnd.rs/ 冒頭でも軽く説明していますが、Zustandは状態管理ライブラリであり小さく、シンプルに管理することができる。 またミドルウェアのサポート(永続化、デバック、非同期など)がいくつか提供されている。 そしてアプリケーション全体にアクセスできるグローバルステートの管理ができます。 zustandはドイツ語で「状態」を表している。開発元はドイツの「Poimandres」という会社でJSのライブラリをいくつか開発しており、zustandと同じ状態
Recoilを剥がしている話
2024/12/10に開催された3社合同フロントエンド合同勉強会で話した内容 https://prtimes.connpass.com/event/335335/
React18で追加されたhooksとその使い方 - 株式会社ライトコード
useId 今回は、2022年3月安定版リリースのReact 18で追加された新Hooksの紹介をしていきます！ useIdはhtmlのID生成をサポートするhookです。ハイドレーション時の不整合を防ぎ、サーバーとクライアント間で一意のIDを生成できます。 使い方 useIdを呼び出すコンポーネントごとに一意のIDが提供されます。 必要なIDが1つであればそのまま使用してOKですし、複数のIDが必要な場合は任意の接尾辞をつけます。 【注意】 1. keyに使うものではありません。公式ドキュメントでも注意されてますが、map使用時などのkey等に使うものではありません🙅♀️ 2. 自動生成されるIDに任意のプレフィックスを付与可能です。hydrateRoot、ReactDOMServerの設定を追加することで、ID自体に任意のプレフィックスをつけることが可能です。 1import {
React ref Callback Use Cases | JulesBlom.com
Ref has two, related meanings in React, confusingly so. So before we start, let’s get this out of the way: The “ref object” returned by the useRef hook: a plain JavaScript object with a single property named current, which you can read or set to any value 1. Host elements — JSX representing DOM elements — have a special “ref attribute” that can be used to access its corresponding DOM element 1. Th
【2023年】SWR & TanStack Query比較
はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。（2023/08/26時点でLatest） SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
【2024年版】ReactのUIコンポーネントライブラリ23選
【2024年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
ReactプロダクトにおけるButtonコンポーネント実装の最適解を探し続けた結果
2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"
Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧
Vis.gl – Uber Vis Team Uber社がオープンソースとして公開している可視化ツールでは「deck.gl」が有名ですが、他にもUber社の持つ巨大なデータセットを分析するために作成されたさまざまなデータ可視化ツールがオープンソースとして公開されています。「Vis.gl」はそれらUber社が作成し公開している可視化ツールをまとめた呼び名で、現在では11点ほどのデータ可視化に有用なツールが公開されており今なお増え続けています。 ここでは、「Vis.gl」スイートとして公開されているツールを一通りざっと紹介したいと思います。（一部、Vis.gl以外でUber社が公開しているツールも含んでいます） ■データビジュアライゼーションフレームワーク ・deck.gl WebGLを用いて大量のデータを可視化することに長けたフレームワーク。 レイヤーベースのコンポーネントとして作られていて
Reactアニメーションライブラリって結局何がいいの？
はじめに みなさんはReactでアニメーションを実装する時、どのライブラリを使っていますか？ Reactでアニメーションを実装するライブラリはたくさんありますが、どれを使えばいいのか迷ってしまいますよね。 比べてやろうじゃないか... というわけで、今回はReactの人気アニメーションライブラリ2点＋ライブラリなしでの実装を比較し、どれがいいのかを考察していきます。 比較するライブラリ 1. ライブラリを使用せず実装(JS only) ライブラリを使用しない場合はWeb Animations APIを使用することで比較的楽にアニメーションを実装することができます。今回はこれを使用します。 2. Framer Motion Framer MotionはFramer社が開発しているアニメーションライブラリで、エレメントタグを拡張する形でアニメーションを実装することができます。 3. react
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zustand
React Splide - Splide
【deck.gl】react-map-glを使って背景地図を表示する - Qiita
【React】OpenStreetMapのベクトルタイルを表示する - Qiita
