タグ React
人気順 5 users 10 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などを使って、フロントエンドとバックエンドの両方に携わっています。... 続きを読む
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 の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む
Rules of React を経典に React を書いて心の安寧を保つべし - Qiita
2024/10/04
144 users
Qiita
安寧
hook
経典
パク
こんにちは、とまだです。 React は Hook の効果もあり、書けばとりあえず動いてくれるので楽しいですよね！！！！！！！ ただ、本当に正しいコードを書いているか不安になったことはありませんか？ React は自由度が高い分、書き方によってはバグが発生しやすかったり、パフォーマンスが低下することもあります。 （そ... 続きを読む
アクセシビリティが考慮された 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 として分かれて開発を進めていま... 続きを読む
【完全版】これ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 への依存が最小になるように心掛けています。 今... 続きを読む
【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の使用を検討すべきかについて考えていきたいと思います... 続きを読む
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
2024/07/03
97 users
figma
Notion
yjs
Array
フレームワーク
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用で... 続きを読む
React Server Componentsを理解したい
2024/06/27
74 users
React Server Components
RSC
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦し... 続きを読む
React 19を概念から理解する
2024-05-29うひょさんに聞く！ React 19アップデートの勘所 #React19_Findy 続きを読む
React 19の新機能まるわかり
2024/05/29
87 users
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。 続きを読む
「Bluesky」「Python」「Vim」「404」「ぬるぽ」などIT関連のかわいい高品質ロゴを作りまくる人物現る、BlueskyやReact公式が早速ロゴを実装するなど爆発的な盛り上がり
2024/05/01
287 users
Bluesky
vim
GitHubリポジトリ
プログラマー
IT関連の高品質な自作ロゴを大量に含むGitHubリポジトリが、プログラマーやゆっくり実況者として活動するさわらつき氏によって公開されました。当該リポジトリは公開直後から大きな注目を集めており、すでにBlueskyでは「Kawaiiモード」の実装が進んでいるほか、Reactの公式サイトにもさわらつき氏のロゴを表示する隠し... 続きを読む
React のルール – React
2024/04/21
136 users
セクション
アプリケーション
概念
プログラミング言語
ルール
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コー... 続きを読む
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
2024/03/25
250 users
マネージャ
フレームワーク
ライブラリ
プロダクト
技術選定
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要... 続きを読む
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
2024/03/23
317 users
Tailwind CSS
入門
メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。 続きを読む
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
2024/03/18
166 users
jQuery
htmx
珠玉
CEO
エッセイ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。... 続きを読む