react

AIによって世界中のレストラン予約を行うサービス、AutoReserveのフロントエンドを担当している星野です。 AutoReserveの新規ユーザーは日々増え、約4割を海外の方が占めています。私たちはより多くのユーザーの幅広いニーズにお応えし、サービスを快適に利用いただけるよう、機能改善と新たな仕組みの導入に取り組んでいます。私はユーザーエンゲージメント向上を目的に、CVRやリピート率などのKPIを追っています。当社ではエンジニアもOKRの責任者となり、ビジネス数値を日常的に扱います。 本記事ではここ最近行った施策の一つを取り上げます。 多様な決済手段に対応する 海外ユーザーの多くは、主に訪…

さて、Reactです。 フックを使うとリアクティブな変数を定義できます。 useEffect関数で、値の変更で呼ばれる訳ですが、他の変数と絡んでの 変更になると無限ループになったり複雑になるようです。 その為の対策もあるようですが、改造ですので、大きく変更できないので 苦肉の策を取りました。（涙） そうasync , await の非同期関数です。 これでuseStateを順序シーケンスで更新して処理していく方法です。 公式お勧めではないとのことですが、やむを得ない事態になりました。 これは何をするかというとDOMの更新待ちとのことです。 イベントキューがあるみたいですね。 結局PostMes…

さて、Reactを改造していますが、AIを使ってます。 AIに聞くとコードを提示してくれますので、それをうまくアレンジしたり、 こういうことしたいというとコード提示します。またコードをアップすると 添削もしてくれます。 まさに個人用家庭教師な感じです。マンツーマンですね。 本当に勉強になります。アレンジして動作確認すると、一気に 理解がすすみました。 フック初心者ですが、使い方もわかってきました。 そうなるとフックだらけですな。（笑） というか使わざるをえないのです。 それにしても従来言語でのイベントなりが、フックになると本当に わかりずらいです。初見殺しもはなはだしい。 慣れで読めるようにな…

ViewTransitionAPIとは ページを遷移する際にスムーズなアニメーションを追加できるブラウザネイティブのAPI メリット 遷移アニメーションがスムーズ 記述が簡単 ブラウザネイティブの機能ため、JavaScriptによるアニメーションよりパフォーマンスが優れている developer.mozilla.org ReactでViewTransitionコンポーネントが利用できるようになる <ViewTransition> コンポーネントが実験的にReactに追加された github.com <ViewTransition> で子要素をラップすることで、それらの間の変化をアニメーション機…

はじめに JSX には条件式を記述できる。 その記述パターンは以下の５つがある。 論理積 三項演算子 即時関数 Null 合体演算子 外部関数 今回は、論理積と三項演算子に注目する。 論理積 論理積は && を用いて記述する方法である。 const Example = () => { const flag = true; return ( <div> <h1>{ flag && "Hello" }</h1> </div> ) } 最初のオペランドが falsy だった場合は残りのオペランドは評価されないため、レンダリングもされない。 簡潔に記述できるため、脳のメモリ消費を小さくしたい時に使って…

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

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