【フルリモート/週5】React 複雑系UI・アーキテクト(DOMの限界突破とリアルタイム協調編集基盤の極限追求)

案件要件
- 職種
- エンジニア
- 業務内容
- システム開発・運用SES
- 報酬目安
- 4,400 ~ 5,100円/時
- 稼働時間目安
- 週5日 (時間目安 160時間)
- はたらく場所
- フルリモート
- スキル
【フルリモート/週5】React 複雑系UI・アーキテクト(DOMの限界突破とリアルタイム協調編集基盤の極限追求)
お任せしたいこと
自社で展開する、オンラインホワイトボード(FigmaやMiroのようなクリエイティブツール)、または秒間数千のデータが明滅する金融・トレーディングダッシュボードにおいて、標準的なReact(Virtual DOM)のパフォーマンス限界を突破する「複雑系フロントエンド・アーキテクチャ」の設計と実装をお任せします。
「何でもかんでもuseStateに突っ込んで無駄な再レンダリング(Re-render)を乱発し、画面をカクつかせる」といったフロントエンドのアンチパターンを徹底的に排除し、Canvas / WebGLへの描画オフロードや、Web Worker / WebAssemblyを活用したメインスレッドの解放、さらにはCRDT(競合解決データ型)を用いたリアルタイム協調編集を泥臭く実装することで、ブラウザ上でネイティブアプリを凌駕する60fpsの滑らかなUXを牽引していただく中核的なポジションです。
具体的な業務内容
・Reactの宣言的UIの利点を活かしつつ、高頻度な更新が求められるコンポーネントのみを抽出して、Virtual DOMを介さずに直接DOMやCanvas API(PixiJS, Konva等)へ描画するハイブリッド・アーキテクチャの設計
・大量のデータ処理や複雑な計算ロジック(フィルタリング、ソート等)を、メインスレッドからWeb Worker(Comlink等)や WebAssembly(Rust等)へオフロードし、UIのフリーズ(Jank)を泥臭く防ぐ実装
・Yjs や Automerge 等のCRDT(Conflict-free Replicated Data Type)と WebSocket を活用した、複数人によるリアルタイム同時編集(マルチプレイヤー機能)の強固な基盤構築
・Zustand や Jotai を用いた極小単位でのステート(状態)管理の最適化と、複雑なUndo / Redo(履歴管理)ロジックのメモリセーフな実装
・Chrome DevTools(Performanceタブ、Memoryタブ)を駆使した、ミリ秒単位のロングタスク(Long Tasks)の特定と、ガベージコレクション(GC)のスパイクを引き起こすメモリリークの泥臭いプロファイリング
・React Three Fiber などを利用した、3D表現やデータビジュアライゼーションを伴うリッチでインタラクティブなUIコンポーネントの実装
・複雑なキーボードショートカットや、ドラッグ&ドロップ、無段階ズーム等の高度なイベントハンドリング機構の設計と、イベントリスナーの徹底的な最適化
・テストが困難なCanvas描画領域や複雑なインタラクションに対する、Playwright や Cypress を用いた泥臭い自動テストパイプラインの構築
必須スキル・経験
・React(Hooks)を用いた複雑なWebアプリケーション(SPA)の開発実務経験(目安として4年以上)
・ブラウザのレンダリングパイプライン(Layout, Paint, Composite等)、およびイベントループに関する極めて深い知識
・Canvas API、WebGL、または SVG を用いたグラフィック・データビジュアライゼーションの実装経験
・Web Workerの利用、またはパフォーマンスチューニング(Core Web Vitalsの枠を超えたUIの滑らかさの追求)の実務経験
・Git / GitHubを用いたチーム開発、および高度なTypeScriptの型定義スキル
歓迎スキル・経験
・Figma、Miro、Notionのような「複雑なインタラクションを持つツール系SaaS」の開発経験
・CRDT(Yjs等)や Operational Transformation(OT)を用いたリアルタイム協調編集の実装経験
・Rust、C++等を用いた WebAssembly (Wasm) モジュールの開発・組み込み経験
・PixiJS、Three.js、Konva.js などの描画ライブラリの深い知識と運用経験
・フロントエンドにおける複雑なステートマシン(XState等)の実装経験
開発・業務環境
開発言語:TypeScript, (一部 Rust 等の Wasm 活用あり)
UIフレームワーク:React
描画・ビジュアライズ:Canvas API, WebGL, PixiJS, Konva, React Three Fiber
状態管理・リアルタイム:Zustand, Jotai, Yjs (CRDT), WebSocket, XState
パフォーマンス最適化:Web Workers (Comlink), WebAssembly
テスト・品質管理:Playwright, Vitest
プロファイリング:Chrome DevTools (Performance, Memory)
コミュニケーション・管理:GitHub, Jira, Figma, Slack, Zoom
プロジェクトチームについて
「メインスレッドは神聖な場所であり、1ミリ秒たりともブロックしてはならない」という強烈なパフォーマンスへの執念を持ち、Webブラウザという制約だらけのプラットフォーム上で魔法のようなUXを実現するコアUI開発チームへの配属となります。
「Reactが重いから仕方ない」というフレームワークへの責任転嫁を極めて嫌い、Virtual DOMのオーバーヘッドがボトルネックになれば、躊躇なくuseRefを用いた直接操作やCanvas描画へと脱出(Bypass)する手堅いカルチャーです。本番環境でユーザーから「ドラッグ時の反応が鈍い」と報告された際にも、ネットワーク回線を疑う前にフレームグラフを泥臭く読み解き、微小なオブジェクトのガベージコレクションによる数ミリ秒のポーズをパズルを解き明かすように特定する実直なメンバーが集まっています。
求める人物像
・「サーバーから受け取ったJSONをDOMに並べるだけ」のCRUDアプリ開発に飽き足らず、ユーザーの指先に吸い付くようなピクセルパーフェクトなインタラクション設計にエンジニアとしての美学を持てる方
・Reactという便利な抽象化レイヤーの「内側(裏側)」で何が起きているのかを探求し、必要であればその抽象化を自ら剥がして限界を突破できる知的好奇心を持った方
・CRDTのような複雑なアルゴリズムや、WebAssemblyのような異種の技術エコシステムを前向きに学習し、フロントエンドの領域を泥臭く拡張していける方
仕事の魅力
SaaSの競争が激化し、「機能の有無」ではなく「触り心地(UX)の圧倒的な良さ」がプロダクトの勝敗を直接的に決める現代において、ブラウザの描画限界に挑むフロントエンド・アーキテクトは極めて希少な存在です。Reactの表現力と、ネイティブアプリに迫るパフォーマンスを融合させる泥臭い経験を通じて、単なる「Web制作者」を完全に凌駕し、世界中のトップSaaS企業やクリエイティブテック企業が最も高額な条件で渇望する「インタラクティブUI・アーキテクト(複雑系フロントエンドエンジニア)」としての圧倒的な市場価値を築くことができます。
働き方
リモート環境
[フルリモート] 基本的にフルリモートで働いていただけます。
株式会社Kaizen Tech Agent
株式会社Kaizen Tech Agentは、「人と技術をつなぐ」ことを企業理念に掲げ、日々向上していく『技術』と『人』を最適な形でむつび付け提供することで、
お客様にとって真にプラスとなる価値でありたいと考えております。
私たちはそれぞれの個性を尊重し、ほっとする和みの社風でありながら、変化する時代に対して受け身にならず、未来への挑戦心を宿しています。
事業領域は、WEBアプリ開発、業務システム開発、スマホアプリ開発、インフラ構築など幅広く展開しており、
フリーランス様に対して最適な案件をご提案させて頂いております。どんな些細な事でも結構ですので是非いつでもお気軽にご相談ください。
