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

バーチャルスクロールの限界を突破する

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

コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ

2024/09/12 7 users TypeScript Reac Python https 以下

120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「Reac... 続きを読む

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】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？

2024/09/06 85 users コンポーネント

こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めていま... 続きを読む