こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しよう React を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog を同時に定義している hook const Dialog = memo<{ progress: number, ...
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ
120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「React」「Python」の4つです。今回は試しに「JavaScript」をクリック。 スペースキーまたはエンターキーを押してゲームスタート。 ゲームのプレイ動画は以下から確認できます。なお、プレイヤーはプログラミング未経験者です。 エンジニア向けタイピングゲーム「UnTyping」にプログラミング未経験者が挑戦してみた - YouTube ゲームが始まると以下のようにコードが表示されるのでタイピングしていきます。 一つのコードに
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する！Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 このサイトでは、入力してもらったテキストをURLに反映して、入力状態をそのままシェアできる機能を実装しています。TypeScript PlaygroundやReact Compiler Playgroundのような感じです。 例えば次のようなURLをシェアすることができます。 https://stinbox.github.io/lz-string-vs-compression-stream?source=eJx73Nj0uHHV48b5jxvXKxSXZObpJuXkpys8blz3uHnV4-bNj5vWP26a9GJH_-Omy
A collection of dependency-free React hooksCarefully developed React hooks that you can copy and paste into your projects.
Web Developer Conference 2024 (2024/09/07) での発表資料 https://web-study.connpass.com/event/321711/
React 19 is near. The React Core Team announced a React 19 release candidate (RC) this past April. This major version brings several updates and new patterns, aimed at improving performance, ease of use, and developer experience. Many of these features were introduced as experimental in React 18, but they will be marked as stable in React 19. Here’s a high-level look at what you need to know to be
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合 | ドクセル
Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合
Reactのコアアーキテクチャは、与えられた関数（すなわちコンポーネント）を繰り返し呼び出します。この仕組みはReactのメンタルモデルを単純化し、その人気に一役を買いましたが、同時にパフォーマンスの問題が生じる原因にもなりました。関数のパフォーマンスコストが高いと、アプリの動作は総じて遅くなります。 開発者はReactにどの関数をいつ再実行するか手動で指示しなくてはならなかったため、パフォーマンスチューニングが悩みの種になっていました。Reactチームが最近リリースしたReact Compilerというツールは、コードを書き直すことにより、開発者が手動で行っていたパフォーマンスチューニングの作業を自動化します。 React Compilerはコードに何をするのでしょうか？裏ではどのような処理が行われるのでしょうか？使った方がいいのでしょうか？こうした疑問について詳しく見ていきたいと思いま
扱わないこと この記事では具体的なReactディレクトリ/コンポーネント設計を扱いません。具体的なデザインパターンも扱いません。 では、何を紹介するのか？ Reactの思想とSOLID原則を用いると、どのようにReactディレクトリ/コンポーネント設計を考えることができるのかを考察したいと思います。 SOLID原則はいかなるシステム開発においても転用できる原則だと思います。 更に、Reactディレクトリ/コンポーネント設計は複雑になりがちで、TypeScript、状態管理ライブラリ、CSS、コンポーネントライブラリ、フェッチライブラリ、テストライブラリと考えることが多く、ケースバイケースだと思います。よって、具体的な解を持つよりも、抽象的な考え方を理解したほうが良いと思いました。 よいディレクトリ/コンポーネント構造はなんだろう？ シンプルに以下の2点だと思います。 見つけやすい 変更に強
【60分でマスター】Reactで画像ジェネレーターを作ろう！【TypeScript/Supabase/StabilityAI/TailwindCSS】 - Qiita
【60分でマスター】Reactで画像ジェネレーターを作ろう！【TypeScript/Supabase/StabilityAI/TailwindCSS】TypeScriptReacttailwindcssSupabase はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 アプリを作る上で事前に手札が多いほうが、実現できるアイデアの幅も広くなります。 今回は「AIによる画像生成」「ストレージへの保存」をメインとした画像ジェネレーターをReactで実装するアプリケーションを作成していきましょう。 今回はNext.jsの開発元であるVeceltとパートナー強化がされた「Supabase」を利用して素早く実装します。 今後Supabaseはより選択肢になる可能性が高くなる素晴らしいBaaSです。触ったことない方でもわかるように丁寧に解説しています。 動画で更に詳しく解
React 19 Cheat Sheet
Get Extremely Good at React
自分でコードを書かずにどこまでやれるか？「GitHub Copilot」をフル活用してReact＋ExpressのWebページ実装に挑戦
本連載ではコーディング支援AIツール「GitHub Copilot」のさまざまな機能や活用例を紹介しています。前回はGitHub Copilotのより詳細な操作方法とシーン別の活用法を説明しました。最終回となる今回は、クライアント側にReact、サーバー側にExpressを利用したWebページを、GitHub Coplotに全面的に頼り、できるだけ自分でコードを書かずに実装する事例を紹介します。 はじめに 「GitHub Copilot」は、プログラムのコーディング支援を想定したAIツールです。本連載では、GitHub Copilotの便利な機能や利用法を、複数回にわたって紹介しています。 図1 GitHub CopilotのWebページ 前回記事では、ショートカットキーやコマンドといった、GitHub Copilotのより詳細な操作方法と、学習時や開発作業時といったシーン別の活用事例を紹
React でネタ画像ジェネレーターを作った話 Twitter でこのツイートを見たこと、ありませんか？ 今回、僕が作ったネタ画像ジェネレーターの宣伝ツイートなのですが、たまたまたくさんの人に見てもらうことができて、その結果 10 万回以上このジェネレーターで画像を作られてしまいました (これはボタンに GA4 イベントを設置して計測した値なので、もっと多いかもしれません)。この Qiita の記事では、技術的な面から「どのように作ったのか」「どんな課題があったのか」「どんな工夫をしたのか」について書きます。 どのように作ったのか 使用している技術は、以下の通りです。 Astro (ウェブサイトのフレームワーク) React (ジェネレーター部分) Canvas API (画像生成部分) Astro Astro である理由は全くないのですが (笑) ウェブサイト用フレームワークとしてトレン
持続可能なReactを書くための簡易チェックリスト✅
どんな人が読むと良い記事か？ Reactで実装はできるけど、もう一段階良いコードを書きたいと思っている方向けです。 扱わない内容 フックについて ESLintの設定で概ねルール化できるかつ、React公式でわかりやすく解説されているので、チェックリストには入れませんでした。 useMemo、useCallback、memoなどのメモ化について メモ化することによってのパフォーマンス上の影響はそこまで大きくなく、優先的に実施するものではないと思ったので、チェックリストには入れませんでした。 持続可能なReactの定義 「持続可能なReact」は、コンポーネントやフックが何をしているのかをコードだけを見て理解できるメンテナンス性の高いソースコードと定義します。 そのために、React公式の思想を取り入れる必要があります。 僕の意見ですが、状態に基づいて動的に変化するUIライブラリという原則を重
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
GitHub - 47ng/nuqs: Type-safe search params state manager for Next.js - Like React.useState, but stored in the URL query string.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
自分でコードを書かずにどこまでやれるか？「GitHub Copilot」をフル活用してReact＋ExpressのWebページ実装に挑戦
プロジェクトの生成 最初に、実装のもととなるプロジェクトを作成していきます。 Reactプロジェクト 「TypeScriptを利用したReactプロジェクトの生成方法」をCopilot Chatに質問すると、図2の通り、Create React Appを利用する方法を提案してきました。 図2 Copilot Chatが提案したReactプロジェクトの生成方法 しかし、Create React Appを利用する方法は、Reactの古いページには記述があるものの、現在の公式ページには記述がなく、方法として古い点が気になります。そこで「create-react-appは古いのでは」とCopilot Chatに質問すると、図3の通りViteを利用した方法を提案してきました。 図3 「create-react-appは古いのでは」と質問した様子 本記事ではこの提案に基づき、Viteを利用して、リスト
React のダブルクリック（多重クリック）対策一覧
概要 React アプリにおけるダブルクリック（多重クリック）対策の実装とそのデモを一覧でまとめてみました。コーディングのヒントになれば幸いです。 ※本記事で紹介する実装は React SPA アプリを想定し、ボタンに対するダブルクリックに焦点を当てています。 ダブルクリックの問題点 ダブルクリックで問題となるのがクリックアクションに紐づく API 呼び出しが複数回行われてしまうことです。 API 側で問題にならないよう設計されてれば安心ですが（トークンを利用するなど）、そうでなかったりそもそも API 側で対策すること自体が難しい場合もあるかもしれません。 今回は TODO アプリのタスク追加機能を想定します。 タスク名を入力し「追加」ボタンをクリックすると、タスクの作成処理（時間のかかる API 呼び出しを想定してください）が実行されタスクが追加されます。 ユーザーが「追加」ボタンをす
今回は認証・認可サービスであるClerkのSDKについて解説をします。Clerkといえば基本的な認証・認可機能はもちろんのこと提供されているReact Componentを配置するだけで認証フローが完結する特徴があります。 https://clerk.com/ しかし、React Componentを配置するだけで認証が完結するというのはあまりにも簡単でブラックボックス化しているため、内部の実装を確認してその詳細を見ていきたいと思います。 はじめに 本記事ではClerkの提供するSDKに着目して解説をするため、具体的なClerkの使用方法や個別の認証方法については触れません。 また、Next.jsやRemix、TanStack StartなどさまざまなFrameworkに対応していますが、今回はReact + Viteの構成を前提とします。 SDKのGithub Repositoryは下記
本書はReactベースフレームワーク「Next.js」を利用したWebアプリ開発手法を解説した入門書です。フロントエンドとバックエンドの両方の開発手法について、Next.jsによるWebアプリ開発に精通する著者の三好アキさんが解説しています。 コードを1行1行書きながら、1つのWebアプリケーションを作成するプロセスを丁寧に解説しているので、初心者の方でも挙動を確認しながら安心して学習できます。 Next.jsを利用したWebアプリの開発手法を知りたい方におすすめの1冊です。 目次 Chapter 1 基礎知識と開発ツールの準備 Chapter 2 バックエンド開発の準備 Chapter 3 アイテム操作機能 Chapter 4 ユーザー登録とログイン機能 Chapter 5 バックエンドのデプロイ Chapter 6 フロントエンド開発の準備／ Reactの書き方／ サーバーコンポーネン
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir() - Qiita
React(next.js)とかで開発してる時に深い階層のObjectデータをデバッグ用に吐き出すならconsole.log()ではなく、console.dir()JavaScriptTypeScriptReact なんてことはない話なのかもしれないですが…こんな書き方知らなかったよ！ということで。 普通にフロントエンドのjavascriptならconsole.log()でいいんですよ。 ただ、reactなどのバックエンドjavascriptでは普通にconsole.log()を使うと多段の階層では表示されない問題が起きます。 結論で言うとこのように書けばOK。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
GraphQL あるいは React における自律的なデータ取得について
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
React useで非同期処理を簡単に扱う | stin's Blog
Nova.js - A collection of dependency-free React hooks
React Aria で実現する次世代のアクセシビリティ
What’s new in React 19 - Vercel – Vercel
React Compilerについて理解する | POSTD
React公式&SOLID原則からReactディレクトリ/コンポーネント設計を考察⚡
はじめて React で作った画像ジェネレーター (超バズった) の裏側の話 - Qiita
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
ClerkのReact Componentが便利すぎるので覗いてみる
Next.jsによるWebアプリ開発の入門書、『動かして学ぶ！Next.js/React開発入門』発売