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

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

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

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 を手続き的に処理できるようにする」というのが私の理解です。 これが何を意味するのかというと... 続きを読む

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

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

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

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

【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などを使って、フロントエンドとバックエンドの両方に携わっています。... 続きを読む

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

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

こんにちは、ダイニーの 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 のように利用で... 続きを読む