React.js UI/Container分離 × Hooks × Composition で責務を整理してみた話
1 年以上前から、チームメンバーの提案で Container/Presentational パターンを現代的にアレンジした設計を導入し、徐々に改良を重ねてきました。 Hooks が普及して、関数コンポーネント内で状態管理や API 呼び出しができるようになって便利になった一方で、いくつかの困りごとがありました。 「見た目だけテストしたいのに、なんで API モックの準備が必要なんだろう...？」 「このコンポーネント、何の責務を持ってるんだっけ...？」 「新しいメンバーが入ったとき、どこを変更すればいいか分からない...」 確かにファイル数は Hooks だけの時より増えてしまいますが、責務分離により各ファイルが単純になり、特にチーム開発では「単純明快なルール」の方がうまく機能することが分かってきました。 そこで、一時期「もう古い」と言われがちだった Container/Presenta
React Flow の紹介と導入【React】
はじめに 先日、React の勉強会で、React Flow の実装について取り上げました 🫐 フローチャート、マインドマップ、ネットワーク図など、 視覚的にわかりやすい UI/UX は、モダンな Web アプリケーションにおいて重要な要素です。 今回は、ReactFlow について調査したので、基礎的な内容をまとめました！ 時間の節約になれば、嬉しいです 🙌 React Flow とは？ React で、インタラクティブなダイアグラムを、簡単に実装できるのが、React Flow です。 figma や miro のような、ドラッグ＆ドロップ可能な GUI で、 フローチャートやマインドマップが構築できます！ Webermes という会社によって、 活発に開発・メンテナンスされており、多くの機能を提供してくれるのが、特徴の一つです。 React Flow の使い方 React Flo
Reactでサイドピークを実装した
こんにちは！CastingONEの大沼です。 始めに Notionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思ったため、Notionを参考に実装しました。 この記事では弊社ではどんな感じで実装したのか、簡易アプリを用いて説明したいと思います。 作ったもの 今回検証用で作ったものは以下になります。HOME画面でボタンをクリックしたら該当するページがサイドピークで表示され、サイドピークのヘッダーではこれを閉じたり全画面表示に切り替えることができます。またサイドピークはオーバーレイかエクスパンドのどちらを選択でき、後ろに隠れても良いからサイドピークをより広く使いたい場合も対応しています。 なお、ダミーの文章は Lorem JPsum
Web 上で Cursor や Copilot のようなタブ入力補完を実装する
Cursor[1] や Copilot、便利ですよね！ これらのツールが提供する大きな機能として入力補完が挙げられ、人間が雑に書いたコードを修正してくれたり、ある箇所を修正すると他の箇所もまとめて修正[2]してくれたりします[3]。また、複雑なショートカットを必要とせず、それらの提案を Tab キーの一押しで適用／棄却できる点も優れた UX であると感じています。 さて、このような機能が他の様々なエディタ、特に Web サイトの入力フォームに実装されれば大変有用だと感じたため、React を用いて入力補完を再現してみることにしました。やや複雑 GUI みがあったので、その際の実装の知見をご紹介します。 つくったもの ユーザがフォームに入力を進めていくと、適宜 Cursor 風に補完内容が提案されます。ユーザは、Tab キーを押すことでその提案を適用するか、あるいは提案を棄却して入力を続行す
React Router v7 + HonoをClineと共に開発した感想
流れ もともと自分が作っていたWebアプリを刷新したいなぁとずっと思っていましたがなかなか重い腰が上がらず・・・ 昨今の生成AIのおかげで面倒なこともサクッとできる感じがしてきたので、ちょっとやってみようか、となりました。 せっかくなのでモダンなFWとか使いたいなぁと思っていたところで、RemixとReact Routerが統合されたとのニュースを聞いたのをきっかけにReact Router v7でWebアプリを作ってみることにしました。 前提 筆者はVueやNuxtをメインで触っているので、Reactはほぼ初心者です。 SPAやMPAの概念や知識はあるものの、Reactにおけるベストプラクティスなんかはあんまり知らないです（一応Remixについては社内勉強会で知っています）。 技術スタック React Router v7 今回の肝になります。ReactをベースとしたFWで、デフォルトでは
React Server Componentsを理解する | POSTD
React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダリングしつつ、抽象化によりクライアントとサーバーの隔たりを感じさせないユーザビリティを実現することができます。Client ComponentsとServer Componentsをコード内に混在させることで、すべてのコードが1カ所で実行されているように見せることができます。 しかし、抽象化には常にコストが伴います。そのコストとはどのようなものでしょうか。RSCはいつ「使える」のでしょうか。バンドルサイズが小さくなると、帯域幅も狭まるのでしょうか。RSCを「使うべき」ときはいつでしょうか。RSCを適切に使う上でデベ
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上あり、入力したテキストからスライドを自動生成できるだけでなく、オリジナルで作成することも可能です。 いわゆる、複雑フロントエンドの事例です。ブラウザ上でAI経由でスライドを生成して、それをUIから編集でき、最終的には PDF や パワーポイントとしてエクスポートします。 LCP や CLS ではなく、 TBT やメモリリークの調査がメインになります。 長くなったので最初に要約します。以下の内容を含みます。 泥臭い CRA => Vite 移行
React Compilerを有効にして9ヶ月が経ちました
はじめに React Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至ります これまでに起きたことや感想を共有したいと思います 前提 技術スタック Next.jsのPages Routerを使用し、サーバー側で動く処理はほぼない react-hook-formを使用 reactStrictModeはtrue 導入時にeslint-plugin-react-compilerを使った検査では違反なし 各ライブラリのバージョンアップは随時行っている // 2024年7月末の導入時 next: 15.0.0-rc.0 react: 19.0.0-rc-01172397-20240716 babel-plugin-react-compiler: 0.0.0-experimental-938cd9a-20240601 rea
TanStack Form と React Hook Form の Dirty 判定の挙動を比較してみた
このように、TanStack Form は「一度でも編集されたら isDirty = true」という履歴型の判定を採用しています。 ただし、TanStack Form のコミュニティからは「現在値 ≠ 初期値」のような差分型の判定も求められており、そのため今後は「isDefaultValue」の導入が進められています。これにより、将来的には履歴型と差分型の両方のアプローチを柔軟に使い分けられるようになる予定です。こちらに関しては後述します。 なぜ TanStack Form は React Hook Form と異なる Dirty 判定を採用したのか？ TanStack Form が後発のライブラリでありながら、React Hook Form とは異なる「履歴型」の Dirty 判定を採用しているのには、いくつか理由があると考えられます。 まず、ユーザーが実際にフィールドを操作したかどう
【2025年】爆速でゼロイチ開発するための技術スタック
はじめに 個人開発やゼロイチの立ち上げに最適な技術スタックを書いていく。 なるべく安上がりな構成を目指す。 TypeScriptをベースに よっぽどパフォーマンスにこだわりがなければTypeScriptを採用したい。 1つの言語でフルスタック開発可 脳の言語スイッチング不要 型定義を使い回せる トレンドで将来性がある 小〜中規模開発ならこの恩恵はでかいため、フルスタックTypeScriptフレームワークを採用したい。 Next.js or React Router よっぽどパフォーマンスにこだわりがなければReact Routerを採用したい。 個人的にNext.jsはゼロイチ開発にはオーバースペックだと感じる。 以下のような点からNext.jsの採用は見送りたい。 Server/Clientの境界線がわかりづらい Server Components, Actions, Functions
Reactの文脈での「副作用」は2種類あるのではという話
皆さんこんにちは。Reactの話をする際に、副作用という言葉はよく出てきます。しかし、実は、我々は2つの異なる意味で「副作用」という言葉を使っており、そのせいで混乱が生じているのではないかと思います。 例えば、筆者が最近書いた以下の記事では、基本的にuseEffectの中でfetchするべきではないと説明しました。 このような話題に対しては、「useEffectの中でfetchして何が悪い」のような批判が寄せられることがあります[1]。つまり、useEffectは副作用を記述するフックで、fetchはネットワークリクエストという副作用を起こすのだから、useEffectの中でfetchするのは適切だろう、という意見です。 筆者の意見では、これは2種類の「副作用」を混同したことによる誤解です。 要するに、以下の2つの文で言われている「副作用」は、（まったく無関係ではないにせよ）実は少し異なる
Ink を使って CLI アプリを React で書く
Ink を使って CLI アプリを React で書く Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 プロジェクトを作成する 以下のコマン
React デザインパターン
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
フォームライブラリの新たな選択肢 - TanStack Form
はじめに みなさん、フォームライブラリは何を使っていますか？ React Hook Formがフォームの一時代を築いた後に、server actionに対応しているConformが登場したり、様々なフォームライブラリがあると思いますが、今回は最近v1になったTanStack Formについてご紹介します。 TanStack Formは、各入力フィールドを独立したコンポーネントとして提供します。これにより、フォーム全体を再描画するのではなく、変更が生じた特定のフィールドのみを選択的に再レンダリングすることが可能となり、パフォーマンスの最適化を実現しています。 TanStack Formの推しポイント👍 まずは、TanStack Formの推しポイントをいくつかご紹介します。 強力な型サポート TanStack系のライブラリ全般の特徴になりますが、TypeScriptでできているため型安全・
React Three Fiber入門 - ReactとThree.jsで始める3D表現 - ICS MEDIA
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
StorybookがViteと手を組みフロントテストの覇権を取りにきた
要約 Storybookがバージョン８以降から進化が凄まじい！ @storybook/experimental-nextjs-viteで、Next.JS環境でStorybookブラウザが爆速で立ち上がる！ 既存のVitestと統合されてテストのしやすさレベルアップ！testファイル内の普通のテストと一緒にテスト実行されるやん！ ブラウザ上からもコンポーネントテストできるようになってて便利だしモダンでかっこいい！ はじめに こんにちは！イノベーション開発チームのmiyaken85です！ 弊社が運営するITトレンドのフロントエンドでは、コンポーネント管理ツールとしてStorybookを使用しています。 そんなStorybookが、最近viteと手を組んでvitestでテストが行えるようになり、これまでのフロントテストの手法を激変させそうなので、今回はそのことについて、実際にITトレンドに導入し
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactJust
Next.jsと状態管理のプラクティス
Intent UI
