Hatena Blog Tags
はてなブログ トップ
react
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

react

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
KENTEM TechBlog•3日前

【React】PointerEventで要素を動かそう

はじめに こんにちは。KENTEMでフロントエンドを担当しているM・Sです。 ユーザーのドラッグやタッチによって要素を移動させたいときありますよね。 基本的にはDragEventやMouseEvent, TouchEventなどを使うことが多いかと思いますが、今回はPointerEventを強く推していきたいと思います。 結論から言うと、PointerEventを用いることでマルチデバイス対応が非常にシンプルになります。 はじめに PointerEventとは？ サンプル イベントを快適にするプロパティ currentTarget.setPointerCapture(pointerId) cu…

#フロントエンド#PointerEvent

関連ブログ

TECHSCORE BLOG•3日前

状態管理を Recoil から Jotai に移行した話

移行の背景と課題 弊社のコアプロダクトである Synergy! は、フロントエンドのフレームワークとして React を採用しています。React の状態管理には、Recoil というライブラリを利用してきました。 しかし SNS で、React 19 では Recoil が正常に動作しないという情報を入手しました。これは大きな課題です。以前から Recoil はメンテナンスの頻度が低下しており、今後も継続して使用することに不安を感じていたところでした。 もちろん、ビジネスの継続的な成長と最新技術への対応のため、React 19 へのアップグレードは避けて通れない道です。そんなこんなしているう…

#Next.js#状態管理#フロントエンド
PLAY DEVELOPERS BLOG•5日前

React 17 から React 19 への段階的なバージョンアップと Legacy Context の話

皆様はじめまして。 24卒で新卒入社いたしました、OTTサービス技術部の篠原です。 本稿では、React 17 から React 19 へのバージョンアップに伴い実施した対応について紹介します。 前提 React 19 への移行のポイント 全体の移行方針 この移行方法を採用した背景 React 19 への移行で発生した問題と対応 React 17 の時点で対応した修正 React 17 → React 18 への移行で発生した問題 原因 対応 React 18 → React 19 への移行で発生した問題 原因 対応 codemod を使った自動移行の試み codemod とは codemod…

#react#react 19
LayerX エンジニアブログ•5日前

Storybook Play functionでAHA testingのすゝめ

バクラク事業部でソフトウェアエンジニアをしている @ta1m1kam です。 フロントエンド開発において「どのテストをどれだけ書くべきか？」という問いは、誰もが一度は悩むテーマです。ユニットテスト？E2Eテスト？ビジュアルリグレッション？それぞれに役割があり、バランスが求められます。 Testing Trophy そんな悩みに対する一つの指針として、Kent C. Dodds氏が提唱した 「Testing Trophy（テスティング・トロフィー）」 という考え方あります。（提唱自体は2021年ごろなので、今では割と一般的になっているかなと感じています。） kentcdodds.com ポイント…

#フロントエンド#Storybook#react#フロントエンドテスト#testing
くちたと計算記•7日前

UI上の振る舞いを意識したReactコンポーネント設計

概要 Reactコンポーネントの設計における基本的な内容について考えます。 元々は、子コンポーネントがsetXXXという名前のプロパティを持つのは変だと思うという話をしていました。 ここでは、サンプルコードを提示したうえで、サンプルコードにある問題点と改善案を考えていきます。 useStateのsetXXXを子に渡して、子側で親のStateを弄るのってどうなのかね……見れば見るほど、やっちゃいけないんじゃないかって気がしてくる。— くちた える (@kuchita_el) 2025年2月21日 すごく言葉足らずだったと思った。子のプロパティ名がsetXXXだから、それがモヤモヤしているって感じ…

#プログラミング#フロントエンド
タオルケット体操•13日前

シンプルさに極振りしたSPAルーターが欲しかった

古くはReactRouterとか、Remixとか両者の統合とか（コロコロコロコロ変わるからもうよくわかってない）…… いまはPages RouterとかApp Routerとか（複雑すぎてわかってない）…… とにかくルーティングライブラリは複雑な割に破壊的変更がはいりまくりまくって本当にしんどいです。 ていうかあたしディレクトリ構造とページを一対一にしたいモチベーション全然わかんないし…… 主戦場がちょっと特殊なのでRSC採用する必要ないし…… というかRSCとかその辺とルーティングって密結合にしないとダメなの？なんかmiddleware的な仕組みでプラガブルにできないん（マジでよくわかってな…

#react#remix
OPTiM TECH BLOG•18日前

第3回 React Tokyo ミートアップに参加してきました

はじめに こんにちは！DXビジネス開発部の菅原、亀田です。当社ではReactとNext.jsを活用した開発を積極的に行っており、フロントエンド開発の重要な基盤技術として位置づけています。 3月21日(金)にOPTiM東京本社で開催された、第3回React Tokyo ミートアップにOPTiMから3名で参加しました。 当社エンジニアの高橋による「ClineにNext.jsのプロジェクト改善をお願いしてみた」というLTセッションも行われ、実際の開発現場でのAIツール活用に関する知見を共有させていただきました。 当社のプロダクト開発でもReactを採用し、特にNext.jsを用いたWebアプリケーシ…

#Event#react#Next.js#frontend
AKARI Tech Blog•23日前

Vitest と GitHub Copilot で Frontendの単体テストを書く

改めまして、燈株式会社 AI SaaS事業本部VPoEの小田川です。 燈株式会社のデジタルビルダーでは最近、フロントエンドのテストコードの拡充を行っています。 このテスト拡充の背景には、デジタルビルダーが請求書処理を含む業務フローにおいて高度なカスタマイズを許容しているという特性があります。 このカスタマイズの多様性により、「どの条件で何が表示されるべきか」「各ボタンがどのように機能すべきか」といった振る舞いのパターンが増え、仕様の複雑性も高まっています。 こうした仕様を品質保証（QA）工程にのみ依存するのではなく、開発の初期段階から自動化されたユニットテストで担保し、CI上で高速かつ頻繁に実…

#react#vitest#frontend test#Vite#frontend
虎の穴ラボ技術ブログ•1ヶ月前

個人的にReactをさわりはじめた時に知りたかったこと

こんにちは、虎の穴ラボFantiaエンジニアのNSYです。 Fantiaではフロントエンドに、JavaScriptのライブラリであるReactを一部採用しており、特に複雑な画面を作る際に積極的に使っています。 今回は初心者向けに、個人的にReactをさわりはじめた時に知っておきたかったなと感じたことを3つ紹介したいと思います。 1. カスタムフックによるロジックの分割 Reactには便利なフックが多く存在します。 それら便利なフックを使用することでパフォーマンスを意識した開発をすることができます。一方で要件が複雑になると、コードも複雑になり段々と苦しくなる場合があったりします。 カスタムフック…

#react
バイセル Tech Blog•1ヶ月前

プロダクト特性を理解したフロントエンドテスト戦略

プロダクト特性を理解したフロントエンドテスト戦略 はじめに 背景と課題 あるべき姿 プロダクトについて理解を深める テスト観点 テスト分類 テストの優先順位 テスト戦略を決めた効果 今後の展望 まとめ はじめに こんにちは、開発1部で出張訪問アプリケーションVisitの開発担当をしている望月です。 今回は、Visitチームでフロントエンドのテスト戦略を考え運用を始めたことについてお話しします。 VisitはReactをベースにしたクライアントサイドレンダリングのみをサポートする純粋なSPAです。 私たちのチームでは機能が増えるにつれQAチームの手動テストの負担が増加していました。 このことから…

#frontend#react#frontend test