Sunsetting Create React App – React

2025/02/14 10 users

Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework. When we released Create React App in 2016, there was n... 続きを読む

2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita

2025/02/14 7 users Recoil redux Qiita Jotai 現役

2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」 Reactの状態管理ラ... 続きを読む

バックエンドエンジニアのためのフロントエンド入門 #devsumiC

2025/02/13 227 users バックエンドエンジニア OOP 足がかり コンポーネント指向

本スライドはオブジェクト指向プログラミング（OOP）を理解しているバックエンドエンジニアの方向けに、フロントエンドのコンポーネント指向を解説することで、フロントエンドを開発するための足がかりを作ることが狙いです。OOPとの違いを意識することで、フロントエンド特有の設計思考を身につけましょう。Reactと… 続きを読む

Dockerでバインドマウントするのやめません？もうCompose Watchでいいでしょ？

2025/02/09 8 users Docker Vue node_modules 賛同 沢山

はじめに Dockerを使用してVueやReactなどの開発を行う方は多いかと思いますが、その際結構ハマるのがnode_modulesあたりではないでしょうか？沢山の賛同の声ありがとうございます。そうですよね！(🤔) 1. node_modulesをバインドマウントする時の罠 Docker Compose Watchの説明をする前にnode_modulesをバインドマウン... 続きを読む

React→Hotwireへ 技術スタック変更した話

2025/01/29 119 users Hotwire 技術スタック

自己紹介 nao (Fukuoka) • エンジニア歴：2021/3/31〜 (4年目) ◦ Railsは2年ぐらい • main：株式会社ヤマデン ◦ 営業支援部(DXチーム)エンジニア • sub：合同会社プログラム・キッチン ◦ ソリューションエンジニア • x： (mmm_bbb72) • hobby：チャリ🚲、登山、音楽 続きを読む

React で Modal や Confirm の実装を簡単にする react-call というライブラリがアツい！！！

2025/01/21 104 users ReactComponent modal confirm

タイトルの通り、めちゃくちゃ良さげなライブラリ react-call を見つけたので紹介するコーナー 実際の動きはわかりやすいデモページがあるので見てください👍 react-call とは react-call がもたらす効果は「ReactComponent を手続き的に処理できるようにする」というのが私の理解です。 これが何を意味するのかというと... 続きを読む

「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答

2025/01/06 8 users メタフレームワーク エンジニア Next.js アンケート

「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答 JavaScriptに興味を持つ世界中のIT技術者1万4015人が回答したアンケートの結果をまとめた「State of JavaScript 2024」が公開されました。 State of JavaScript 2023の発表... 続きを読む

HTML Drag and Drop APIの紹介と導入【React】

2025/01/03 90 users マウス操作 ドラッグ＆ドロップ アプリケーション開発 要素

はじめに Web アプリケーション開発において、ユーザー体験を向上させる重要な機能の 1 つに、ドラッグ&ドロップが挙げられます。 シンプルなマウス操作で要素を移動したり、ファイルをアップロードしたり、 直感的な操作性を実現することができます。 今回は、HTML Drag and Drop API について調査したので、基礎的な内... 続きを読む

Reactは初回レンダリングを特別扱いしない - honey32

2025/01/02 11 users イベントハンドラ ステート レンダー パラダイム ロジック

#Reactというパラダイムについて React の画面インタラクションの実装は、 イベントハンドラの実行→ ステートの更新→レンダー（コンポーネントたる関数の実行）→エフェクトの実行（→ステートの更新→…） という流れになっている。 実は、たいていのロジックは「イベントハンドラ→ステート更新→レンダー」だけで書けるので... 続きを読む

React 19 + Jotaiを試して気づいた�注意点

2024/12/15 15 users Jotai 注意点

2024-12-15 Shinyai.js #1 続きを読む

React でTodoListを作ってみた！ - iimon TECH BLOG

2024/12/11 10 users ToDoList iimon tech blog

はじめに コンポーネントの構成について 準備 Headerの実装 Itemのスタイル実装 Itemの実装 Footerの実装（チェックボックスに状態を持たせる） Footerのチェック機能 Footerの削除機能 まとめ 参考文献 はじめに こんにちは、ｉｉｍｏｎ新卒エンジニアの「ばんり」です。 本記事はアドベントカレンダー11日目の記事にな... 続きを読む

React19: useOptimistic を用いた楽観的UI更新と内部実装の解説 - Qiita

2024/12/10 10 users Qiita useOptimistic const Name

import React, { useOptimistic } from 'react'; function ContactForm() { const [optimisticData, addOptimisticData] = useOptimistic( { name: '', email: '', message: '' }, (prevData, newData) => ({ ...prevData, ...newData }) ); async function handleSubmit(formData) { // 楽観的な更新を適用 addOptimist... 続きを読む

React v19 – React

2024/12/05 93 users Stable React DOM React v19

React 19 is now stable! Additions since this post was originally shared with the React 19 RC in April: Pre-warming for suspended trees: see Improvements to Suspense. React DOM static APIs: see New React DOM Static APIs. The date for this post has been update to reflect the stable release date. In... 続きを読む

フロントエンドのテストを書きたい！ - iimon TECH BLOG

2024/12/05 21 users フロントエンド iimon tech blog テスト 種類

はじめに テストの種類 テストレベル テストタイプ テスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合 カスタムフックのテスト まとめ 参考記事 はじめに こんにちは、株式会社iimo... 続きを読む

【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita

2024/11/30 184 users Qiita getter CSS Vue.js HTML

TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(... 続きを読む

[React] 新規作成画面と編集画面の実装で気をつけていること

2024/11/28 93 users SaaS コンポーネント コンポーネント設計 実装 一見

SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。 これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。 この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。 コンポーネント設計につい... 続きを読む

「お前の口調、角が立ってて相手からみたら不快だから治せ」的な指摘は、東大、東工大院卒の新人なら半数くらいは言われる→社会は正論で殴りあってはいけない

2024/11/25 311 users 正論 口調 半数 東大 指摘

ナシェモン @nassyemon 最近はBigQueryばかり書いてます。プロマネもやってますが、本業はエンジニアです。 React/node.js/flask/AWS+terraform+serverless/BQ/elasticsearch スクール→weblab.t.u-tokyo.ac.j ナシェモン @nassyemon 「お前の口調、角が立ってて相手からみたら不快だから治せ」の趣旨の指摘は、東大、東... 続きを読む

React への依存を最小にするフロントエンド設計

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 続きを読む

【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita

2024/10/28 8 users Qiita TypeScript tailwindcss

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみ... 続きを読む

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 の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む