タグ React
人気順 5 users 50 users 100 users 500 users 1000 usersReact への依存を最小にするフロントエンド設計
2024/11/23
128 users
最小
依存
フロントエンド設計
JSConf JP 2024 での発表資料です 続きを読む
【React】知らなかったReact Developer Tools、20分で手軽に８つReact コンポーネントのデバッグテクニックをマスターする - Qiita
2024/11/13
199 users
Qiita
デバッグテクニック
Props
コンポーネント
前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、Rea... 続きを読む
UI用のアニメーションがかわいくて楽しい！ 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons
2024/11/11
58 users
一筆書き
icons
アイコン
スマホアプリ
時計
WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。 ハンバーガー用の×に変化するアニメーション、＠を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っていま... 続きを読む
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
2024/11/09
129 users
UIフレームワーク
ライブラリ
マル
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史... 続きを読む
【無料公開】560万円かけて開発したサービスのソースコード
2024/11/04
428 users
ソースコード
サービス
無料公開
TypeScript
両方
※月単価80万円を基準に、7ヶ月分の工数として560万円相当と換算しています。 最初に こんにちは！ 普段はIT企業でWebエンジニアとして働いています。 現在はフリーランスとして活動し、Ruby（Ruby on Rails）、TypeScript（Next.js, React）、Pythonなどを使って、フロントエンドとバックエンドの両方に携わっています。... 続きを読む
GitHub - rbbydotdev/someday: Free and open-source cal.com / calendly alternative built on Google-Apps-Script for Gmail users. Built with modern technologies like React, TypeScript, Shadcn/UI, and Vite. https://someday-demo.vercel.app
2024/11/02
14 users
GitHub
TypeScript
Someday
App
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 続きを読む
Reactのレンダリングとメモ化についてようやく理解したので書く - Qiita
2024/10/10
115 users
Qiita
Props
レンダリング
ユーティリティ関数
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? レンダリングとメモ化についてようやく理解したので書く なぜこの記事を書こうと思ったのか Reactを学び始めてから、props の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む
バーチャルスクロールの限界を突破する
2024/10/08
38 users
限界
レンダラー
TypeScript
Tauri
定石
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 Smoo... 続きを読む
Rules of React を経典に React を書いて心の安寧を保つべし - Qiita
2024/10/04
144 users
Qiita
安寧
hook
経典
パク
こんにちは、とまだです。 React は Hook の効果もあり、書けばとりあえず動いてくれるので楽しいですよね！！！！！！！ ただ、本当に正しいコードを書いているか不安になったことはありませんか？ React は自由度が高い分、書き方によってはバグが発生しやすかったり、パフォーマンスが低下することもあります。 （そ... 続きを読む
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
2024/10/01
43 users
TypeScript
フルスタックエンジニア
修行
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロント... 続きを読む
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
2024/09/25
11 users
Reac
コンポーネント
革命
フロントエンド
用語
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReac... 続きを読む
2024年9月 俺の eslint.config.js
2024/09/19
29 users
eslint
TypeScript
Prettier
筆者
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任... 続きを読む
GraphQL あるいは React における自律的なデータ取得について
2024/09/10
13 users
GraphQL
データ取得
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE 続きを読む
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
2024/09/07
51 users
ドラッグアンドドロップ
アクセシビリティ
Adobe
設計
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッ... 続きを読む
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？
こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めていま... 続きを読む
Reactが初回マウントされるまでの仕組みを理解する
2024/09/02
14 users
実装
プロセス
内部実装
初回
参考
今回はReactが初回マウントされるまでの実装を私自身が学習した流れに沿って解説したいと思います。「React Internals Deep Dive」というブログ記事がReactの内部実装を知るのに大変参考になります。 また、「React Internals Explorer」を使うとReactが実行するプロセスを視覚的に理解することができるため、大変おすす... 続きを読む
【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
2024/08/19
319 users
Qiita
フレームワーク
Sicut_study
完全版
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせない... 続きを読む
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
2024/08/13
234 users
Quill
リッチテキストエディタ
slate
既存
移行
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行... 続きを読む
React 研修 (2024)
2024/08/09
265 users
2024年度リクルート エンジニアコース新人研修の講義資料です 続きを読む
王道か邪道か？ タイムスタンプによるステート管理
2024/08/09
69 users
邪道
http
王道
ステート管理
API
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得す... 続きを読む
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
2024/08/05
177 users
Remix
ＣＴＯ
恩田
最小
フロントエンド
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今... 続きを読む
React 19によって状態管理はどのように変わるのか
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティ... 続きを読む
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
2024/07/14
246 users
Qiita
Sicut_study
えん
プログラミング
去年
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエン... 続きを読む
結局 useEffect はいつ使えばいいのか
2024/07/11
116 users
useEffect
タイミング
開発
目的
経験
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います... 続きを読む
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
2024/07/09
12 users
inSmartBank
サーバーサイドエンジニア
ミニマム
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとし... 続きを読む