useCallback

はじめに はじめまして。株式会社スタメンでエンジニアをしております永井です。 今回の記事ではReactでメモ化によるパフォーマンスを意識した実装方法について書きたいと思います。 なぜパフォーマンスを意識した実装が大切なのでしょうか。 なぜなら、ユーザーのある操作に対するレスポンスの速度を高めることは、UXの文脈において非常に重要な要素だからです。例えば、100ms未満のレスポンスに関してはユーザーは瞬時に感じられますが、100ms ~ 300msではすでに遅いと感じてしまいます。遅いことにストレスを感じたユーザーは、別のサービスにリプレイスしてしまうかもしれません。 Reactでパフォーマンス…

アソビュー！ Advent Calendar 6日目です。 フロントエンドエンジニアの野口です。今回はReactのHooks APIの一つであるuseCallbackの使い所について書いていきます。 useCallbackとは メモ化したコールバック関数を返すHooks APIです。useCallbackを使うことで再レンダー時の不要な関数の再生成を防ぐことが出来ます。 使い方 const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]) 公式のサンプルをもとに説明します。useCallbackは、以下の引数を取りま…

外側から受け取ったrefとは別に、コンポーネント内部で定義したrefも一緒に子コンポーネントに渡したい場合を調べた 調べたところ、カスタムhookで作る必要があった useMergeRefという名でよくutilとして実装されている模様 実装例： import { useCallback } from 'react'; function useMergeRef<T>(...refs: Array<React.Ref<T> | undefined>) { return useCallback((node: T | null) => { refs.forEach(ref => { if (!ref)…

年の瀬ですね。先週は週に 4 回も忘年会があり、かなり良い年末を過ごしています。さて恒例となった mast アドカレに関して、本当は銅鑼を鳴す度に NISA 口座*1へ S&P500 かオルカンが 100 円ずつ投資されるシステム*2を作り、煩悩の数だけ銅鑼を鳴らしまくってたのしく忘年！みたいな記事を書こうと思っていたのですが、諸々に忙殺している間に担当日を迎えてしまいました*3。そういうわけなので、最近軽く作ったものを紹介してお茶を濁したいと思います。本記事は mast Advent Calendar 2024 の 23 日目の記事です。22 日目は iorin__io さんの記事「iori…

immerというJavaScriptのライブラリの使い方を調べた immerjs.github.io immerは、JavaScript でイミュータブルなデータ構造を簡単に操作するためのライブラリ proxy を使って、オブジェクトを一時的に「仮想的にミュータブルに扱える」ようにしてくれる よく使うのは ReactのuseStateでの操作で、状態を更新する処理が簡潔に書けるようになる React & Immer | Immer const handleToggle = useCallback((id) => { setTodos( produce((draft) => { const to…

この記事は JMDC Advent Calendar 2024 20日目の記事です。 qiita.com まえがき プロダクト開発部に所属する八杉です。フロントエンドのイネイブリングチームとして社内のさまざまなプロダクトのフロントエンド開発をサポートする仕事をしています。今年取り組んだ仕事の中から、この記事では <dialog> 要素を React のプロダクトに取り入れた話を紹介します。実装の要点や <dialog> を利用する上での注意点を解説していますので、参考にしていただけたら幸いです。ただし、あくまで 2024 年現在の情報に基づいた内容になっていますから、その点はご留意ください。 …

Reactのjsxで、ref属性に関数を渡すやり方を見かけたので調べた react.dev ref属性に関数を渡すやり方はref callback functionと呼ばれ、refを利用してDOM要素やコンポーネントへの参照を取得する際に使う 基本構文 ref属性に関数を渡すことで、その関数がDOM要素やコンポーネントのインスタンスを受け取る形で呼び出される function MyComponent() { const handleRef = (node) => { if (node) { // nodeがDOM要素にマウントされたとき console.log('Ref received:',…

この記事は、NFLaboratories Advent Calendar 2024 6日目の記事*1です。研究開発部 研究開発担当のda13daです。 今回の記事では、パスワードレスな認証を可能とするパスキーを提供する「Hanko」というサービスをご紹介します。 はじめに パスキーとは Hankoの提供形態 OSSプロダクト Hanko Cloud 利用方法 projectタイプについて Hanko Passkey Infrastructure 実装について ログイン ユーザー情報の取得 パスキーAPIについて 主なAPIエンドポイント 終わりに はじめに 従来のID/パスワード認証は、多くの…

はじめに こんにちは。 ABEJAのシステム開発部でエンジニアをしている中島です。 こちらはABEJAアドベントカレンダー2024 8日目の記事です。 本記事では、英語のスピーチが苦手な中島がAIの力で英語を話すことに挑戦 そして挫折 する話をします。 今回の記事の対象者はソースコードをある程度読むことができる方を想定しています。 大枠として下記の構成で進行します。 先に結論 OpenAI Realtime API とは アプリケーション方針 リファレンス読解 アプリケーションの実装 まとめ 先に結論 OpenAIのRealtime APIのリファレンス実装を見ながら、リアルタイム翻訳機能を実…

はじめに Tiptapとは メールマガジン配信内製化プロジェクトについて 背景と特徴 Tiptapを使ったHTMLメール作成機能の実装 機能要件について エディター、プレビュー機能 保存、編集とHTML出力機能 エクステンションの拡張性 構成要素について 編集パネルとエディター画面 カスタムエクステンションの活用 カスタムエクステンションの定義について addAttributes renderHTML addNodeView コンテンツの情報入力パネル 情報更新と各種インタラクションの実装 入力パネルからの情報更新 左パネルで選択したコンテンツを右パネルに表示する データの取得と保存について …

先日、Amazon Q Developerを使ってドキュメントの生成をやってみました。 miyohide.hatenablog.com そんな中、先日のre:InventにてAmazon Q Developerにも色々と更新が入りました。詳細は以下のブログ。 aws.amazon.com 今回は以下のブログで紹介されたReactを使ったToDoアプリに対してAmazon Q Developerに対して入った/docと/testと/reviewをやってみます。 zenn.dev /doc プロジェクトの中身を見てREADMEの作成や更新をやってくれるのが/docということです。実際にやってみると…

はじめに 最近、ReactにuseEffectEventという実験的APIが存在することを知りました。 弊社で提供しているMiiTel Phoneにおいては、WebSocketやWebRTCなどによってさまざまなタイミングや箇所で非同期的にイベントが発生します。 その関係もあってuseEffectを広く活用しているのですが、そういった処理をこのuseEffectEventを使うことによって単純化できるのではないかと思い、調べてみることにしました。 注意 useEffectEventは現状では実験的APIです。安定版のReactでは利用することができません。もし試してみたい場合は、下記パッケージ…

みなさんこんにちは。 寒さが日に日に増してきた今日この頃、いかがお過ごしでしょうか？ アソビュー！株式会社でフロントエンドエンジニアをしております櫻井です。 今回は、画像から特定の範囲を切り出せるライブラリ「react-image-crop」を使って、弊社の「座席指定システム」を実装した事例をご紹介します。 座席指定システム 一般ユーザー向け機能 事業者向け機能 react-image-cropについて 実装例 ImageCropper コンポーネント Crop オブジェクトのインターフェース 今後の展望 まとめ We're hiring！ 座席指定システム まずは、今回実装した機能の概要をお…

最近、フロントエンドも触る必要があり、ReactとTypeScriptを触り始めました。このメモではReactのコンポーネントの一つであるReact Flowをの使い方をメモしておきます。 【公式ページ】 reactflow.dev 【GitHubページ】 github.com