React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える - Qiita
Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: Framer Motion Variants 01 https://codesandbox.io/s/react-typescript-framer-motion-variants-01-862dkh コンポーネントごとのアニメー
GitHub - catnose99/team-blog-hub: RSS based blog starter kit for teams
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
Server ComponentはReact単体の機能ではなく、バンドラーなどを巻き込んだシステムを作ろうとしている。 In our bundler plugins we'll enforce that a .server.js file cannot be imported in that environment. First, they make code splitting automatic: Server Components treat all imports of Client Components as potential code-split points.
ReactにおけるDOM構築について ReactはDOMを仮に構築する仕組みを備えており、仮想DOMを設計してからリアルDOMを作成するため、従来のDOMやフレームワークで構築されたDOMに比べて処理のスピードが速く、Webページの表示を高速で切り替えることができます。 DOMについて DOM（Document Object Model）は、HTMLファイルのソースコードのことではなく、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたDOM（ツリー）を指します。DOMはChromeやFireFox、Safari、IEなどのブラウザ上で、Webページを描画するために構築されます。 Chromeの開発者ツールのElementsタブでDOMツリーを見てみます（イメージ）。 ここで表示されているものはHTMLのソースコードそのものではなく、ブラウザ上にwebペー
Mantine UI
Mantine UI 123 responsive components built with MantineBuild your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.
We officially launched 1Password for Linux today! 🎉 What makes this release even more amazing is it was created from scratch and developed using new languages and techniques most of our team never used before. Almost everything you can name we did in a new way: from team organization, programming languages and toolkits, design language and processes, all the way through to new deployment and pack
自分内 SWR vs React Query のメモ
SWR と React Query どっち使ってるの 2021年12月の現状として、ついこの間まではSWRを使っていたが、最近React Queryに乗り換えた。 両方触ってみた感じ、たしかにReact Queryのほうが多機能（そのぶんバンドルサイズもデカいけど） ただ解決したい課題と解決手法は同じなので、APIはほとんど一緒。 腐敗防止層になる中継ファイルを作り、適切にAPIやOptionsを中継しておけば、乗り換えはそのファイル内の書き換えのみで済む。 機能比較ページ： https://react-query.tanstack.com/comparison React Queryの優位性（2021/12現在） キャッシュを参照しないオプション 乗り換えに至った直接的な理由。 あるリソース詳細を取得済みだったとしても、そのリソースの編集フォームではそのキャッシュを使いたくない。 なぜな
CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
はじめに ウェブアプリを書いていてよく出てくるUIの一つに「タブ」があると思います。 UIライブラリを導入していれば、大抵のライブラリにはその機能を実現出来るコンポーネントが実装されていることからも、よく求められる機能の一つといえるでしょう。 そして、数あるUIライブラリのうちの一つ Ant Design にも、以下のように書ける便利なタブコンポーネントが含まれています。 リファレンス ところでこのコードの「<Tabs> の下に <TabPane> を置くとそれがタブUIとして表示される」というライブラリデザイン、どうやって実装しているのか気になりませんか？ <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPa
Figmaは非常に優秀で、Reactのコンポーネントをよく表現できると日々感じています。 だからこそ、Reactを実装しているエンジニアとFigmaで作成しているデザイナーとで、微妙に噛み合わない…シーンが出てきます。 お互いに「あ！ここが違うのか！」ということを知っておくと、コミュニケーションが楽になるのでは？と思ったので、まとめてみます。 こんな人におすすめ Reactは実装できるが、Figmaではどんなことができるのかよく知らない Figmaでコンポーネントを作成することはできるが、どう実装されるのかよくわかっていない できるだけFigmaの設定とReactでの表現を合わせて書くようにするので、それぞれの対応表みたいな形で使ってもらえると嬉しいです。 プロパティ・Props編 Figma:プロパティ と React: props は同じものと考えてよい コンポーネントという単位で考え
koba04.com
koba04.com 2025 著作権. 不許複製 プライバシーポリシー
はじめに こんにちは、フロントエンドエンジニアをしている大倉です。 この記事では、個人的に興味があったReactのProps Drilling問題について焦点を当て、この課題を解決するための効率的なコンポーネント設計について学んだことを紹介します。 本記事はHRBrain Advent Calendar 2023の6日目の記事です。 Prop Drilling問題とは？ Prop Drillingは、Reactのコンポーネント構造において、データ（Props）を親コンポーネントからその子孫コンポーネントへと階層を下っていく形で渡していくプロセスのことです。 Reactアプリケーションは多くのコンポーネントで構成され、これらはツリーのような階層構造を形成しています。Reactには、アプリケーションの状態管理を単純化し、データの流れを追跡しやすくするため「データは常に親から子へと一方向に流れる
React DnDでかんばんボードを作ってみる
※本記事はSansan Advent Calendar 2020の3日目になります。 はじめに 自分はSansanが展開しているtoC向けの名刺管理サービス Eight を開発しています。 先日EightのWebページでReact DnDを利用した並び替えを実装していたので、そのときの経験を踏まえてかんばんボードを作成してみました。 できあがりのサンプルはこちら、ソースコードはこちらになります。参考としたのは本家のSortable Simpleです。 本記事では以下の流れで簡単な解説をしていきます。 React DnDの概要 環境構築 Sample作成 まとめ React Dndの概要 React Dndは2014年から開発されているReact用のドラッグ＆ドロップを実現するライブラリです。 Reduxの作者であるDan Abramovさんによるものとしても知られています。 READMEで
GitHub - emilkowalski/vaul: A drawer component for React.
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
GitHub - reflex-dev/reflex: 🕸️ Web apps in pure Python 🐍
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
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
コンポーネントの挙動をテストしたいときに使える手段が増えてきており、新たに導入する際にはどの方法を選べばいいか迷います。 ここでは、コンポーネントテストの方法を 4 つ紹介し、それぞれのメリット・デメリットを比較します。 この記事で比較するコンポーネントテストの方法 jsdom (or happy-dom) + Vitest (or Jest) + Testing Library Storybook play function Playwright Component Test Vitest Browser Mode 除外したもの：Cypress component testing Cypress にも Component Testing がありますが、今回の調査対象からは外しています。 個人的・社内的に Cypress の使用例がなく、新たに導入するモチベーションがない Playwrig
ReactコンポーネントのDOMをユニットテストする
React コンポーネントのDOM構造を自動テスティングをするとしたら、スナップショットテストするのが一般的です。 スナップショットテストは、構造に変化があれば警告するという仕組みであり、その中身はあまり意識しません。 ところが、特定の事情により、どうしてもDOM構造そのものを保証しなければいけない事例のときには、DOM構造をユニットテストしたくなるんですが、そういうことをやってる事例を見つけられなかったので、記事にしました。 スナップショットテスト さて、本題のテストを記述する前に React コンポーネントのスナップショットテストのおさらいです。 import React from 'react' import { create } from 'react-test-renderer' test('hoge-', () => { const tree = create(<div>ほげー
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH
💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテゴリで上位独占中の『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。今版は全 3 巻構成となっており、本書はその第 1 巻「言語・環境編」です。 最新のフロントエンド環境構築ツール Vite の使い方に始まり、JavaScript（ES2022）、関数型プログラミング、TypeScript までをカバー。JS のパワーをフル活用する React を使いこなすための基礎力を固めます。 「フロントエンドの開発になぜ Node.js が必要なの？」「使っている各種のツールは何をしてくれてるの？」「import はどうやってファイルを読
秩序あるRecoilの使い方を考える
Recoilは比較的シンプルな状態管理ライブラリで使い方に自由度がありますが、無計画に使ってしまうとコードの統一感がなくなり将来悲惨な状態になってしまうことは想像に難くないです。 そのためRecoilを導入する前に、まず秩序を持ったRecoilの使い方を検討する必要がありました。 今回考えたRecoilの使い方を、具体例としてアカウント情報を扱うatomを取り上げて紹介します。 今回作成したサンプルはこちらに置いてあります。 Recoilの基本的な解説については公式ドキュメントの参照をお願いします。 詳細 各ファイルと役割 src/modules ├── account │ ├── types.ts │ ├── atoms.ts │ ├── operations.spec.ts │ ├── operations.ts │ ├── selectors.spec.ts │ └── select
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 ４つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
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
In this post you'll learn how to use React.useRef() hook to create persisted mutable values (also known as references or refs), as well as access DOM elements. Before I go on, let me recommend something to you because I know that the path to becoming a professional JavaScript developer isn't easy... I recommend certificates.dev’s Official JavaScript Certification — a practical, expert-led program
Build better business applications, faster.No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development. Get Started Call Java services directly from ReactUse @BrowserCallable to make a Spring @Service class available to your browser. Hilla uses Spring Security to ensure only the right people have access. @Bro
本記事は電通国際情報サービス Advent Calendar 2021の 13 日目の記事です。 執筆者は 2021 年新卒入社の XI 本部 AI トランスフォーメンションセンター所属の山田です。 はじめに React Hooks とは useState useState を使うユースケース useEffect useEffect を使うユースケース useContext useContext を使うユースケース useReducer useReducer を使うユースケース useMemo useMemo を使うユースケース useCallback React.memo と useCallback useCallback を使うユースケース React Hooks を正しく使うために おわりに はじめに 本記事では React Hooks の代表的なフックについて、その使い方とユースケ
GitHub - glideapps/glide-data-grid: 🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.
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 のパフォーマンスチューニングにハマっており、どのようなコードを書くのが最適なのか気になったため色々と調べてきました。 今回の記事では、パフォーマンスチューニングの中でも React Hooks の useCallback に絞って、適切な使い方・使い時について詳しく解説します。 useCallback とは React Hooks の useCallback について解説します。 公式ドキュメントには以下のように記載されています。 https://ja.reactjs.org/docs/hooks-reference.html#usecallback メモ化されたコールバックを返します。 インラインのコールバックとそれが依存している値の配列を渡してください。useCallback はそのコールバックをメモ化したものを
GitHub - clauderic/dnd-kit: The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more. Built for React: exposes hooks such as useDraggable and useDroppable. and won't force you to re-architect your app or create additional wrapper DOM nodes. Supports a wide range of use cases: lists, grids, multiple containers, nested conte
GitHub - mdx-editor/editor: A rich text editor React component for markdown
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
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
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ※クローン=見た目についてです。 実際のNetflixにある機能で今回実装してしていない部分もあります。 作れるもの React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションです。 完成するとこんな感じになります。 Netflixの映画一覧を取得し、カテゴリー毎に表示しています。 映画をクリックすると、youtubeのプロモーション映像が流れます。 学べる事 ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 React Hooksによるstate管理 TypeScriptで外部APIを扱い、非同期通信でデータを取得 movie-trailerにyoutubeを組み込む Firebaseでデプロイ こんな人に読んでほしい Rea
Effects are an escape hatch from the React paradigm. They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component’s state when some props or state change), you shouldn’t need an Effect. Removing unnecessary Effects will make
こんにちは！ CastingONE の岡本です。 はじめに 弊社のフロントエンドは今まで Nuxt2 を使って開発を行っていました。しかし、Vue2 の EOL が今年の末までということで Nuxt3 にリプレイするか、React にリプレイスするかを検討した結果、後者の React にリプレイスすることにしました。弊社のフロントエンドエンジニアは自分も含め React の開発経験がほとんどなかったので、毎週 1 時間、React の理解を深めるための勉強会を開催することになりました。今回はその勉強会で行っていることについて紹介していきます！ やっていること Vue と React の比較 前のセクションで述べた通り、弊社のアプリケーションのフロントエンドは Nuxt2 で作られていたため、Vue2 に慣れているエンジニアが多数いました。そこで、Vue2 と React の書き方の違いにつ
Flutter Performance Optimization Techniques - Aglowid IT Solutions
Redefining Possibilities with AI & Tech Harness next-gen technology to stay ahead of the curve. Get Started Now
React Fast Refreshを調べる
react-refresh このパッケージは、Fast Refreshをバンドラーに統合するために必要な配線を実装します。Fast Refreshは、実行中のアプリケーションで状態を失うことなくReactコンポーネントを編集できるようにする機能です。これは「ホットリロード」と呼ばれる古い機能に似ていますが、Fast Refreshの方が信頼性が高く、Reactによって正式にサポートされています。 このパッケージは、主にバンドラープラグインの開発者を対象としています。作業中の場合は、このパッケージを使用したFastRefresh統合の大まかなガイドを次に示します。
How to Use Framer Motion with React to Build Progressive Web Applications
This article discusses the process and code of using Framer Motion with React to build Progressive Web Applications (PWA). Whether it’s a personal project or a professional one, building a fast-growing application, there are a lot of nuances to building features. Sometimes, you want to get that hover effect up and running without making many CSS changes. Or you don’t want to spend hours debugging
はじめに 主にフロントエンドの領域でお仕事をさせていただく中で、どのようなことを意識して開発を行っているのかを自己理解を含めて記事として残しておきたいと思います。 これからフロントエンド開発に従事する方々の多少なりとも参考になりますと幸いです。 なお、最近の業務ではVue.js（Nuxt.js）を使った開発に携わることが多いのですが、個人的な趣向としてはReact.js、TypeScriptを好みますので記事に出るコードはこちらを用いて表現したいと思います。 UIに対して意識したこと 前提としてUI/UXはデザイナーだけで考えるものでなく、エンジニアでも考えてコーディングをする必要がある箇所だと思っています。 なお私がUIについて調べ、認識をしている定義はユーザーが触れるweb上のパーツ等の当たり前に考慮がされてあり、考慮が出来ていないとユーザーを困らせるものであるという認識を心がけていま
はじめに 今までは実装方法がわからず調査し試行錯誤して実装できた方法を書いたりしていましたが、 今回は実装自体はできているが、より良い実装はないか？という方向性で書いてみたいと思います。 書いていく内容は Next.js で実装された一覧と検索機能を持った画面のコンポーネントと状態管理のファイル分割と設計についてです。 自分は Next.js(React) については書き始めて1年位で、仕事では書いたことなく他PJの構成をほぼ知らないですが、一旦自分の中の設計が落ち着いたので書こうと思った次第です🙏 解説するページ 今回解説するページは自分が実装しているサイトのツイッターの呟き一覧をキャラとLPで検索できるページです。 このページの新旧のファイル構成や状態管理の設計について解説していきます。 旧 まず、旧設計のファイル構成を紹介します。 components common details
React Final Form
High performance subscription-based form state management for React From day one, Final Form and React Final Form were designed to be modular: you put the pieces together to build the form library that fits your requirements. Why should your users need to download complex code for handling arrays of fields when your signup form is just four fields? Only two peer dependencies: React and Final Form.
GraphQL入門 - Qiita
はじめに 対象読者 GraphQLについてざっくり学びたい人 公式ドキュメント読むのがしんどい人 Apollo/Relayどっちを使うか迷っている人 GraphQL概論編 RESTful API 代表的なWeb APIである、REST APIについて、簡単にまとめつつ、 GraphQLでできることについて、書いていこうと思います。 RESTful API(REST API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたものです。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいます。 RESTful APIでは、URL/URIですべてのリソースを一意に識別し、クライアントがHTTP（あるいはHTTPS）で要求
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Server Componentの情報と考察が集まるスクラップ
【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！ - Qiita
Behind the scenes of 1Password for Linux
【React】カッコよく書けるタブコンポーネントを自作する
エンジニア・デザイナーに知ってもらいたいFigmaとReactの違い
ReactにおけるProps Drilling問題を意識したコンポーネント設計 - Qiita
Apollo Clientのキャッシュの仕組みとローカルの状態管理について
コンポーネントテストの方法4種類比較してみる（2025年版）
React + Tailwind CSS+APIで天気アプリケーション作成 | アールエフェクト
GitHub - ktny/bukumanga: はてなブックマーク数を元にwebマンガをまとめたサイト
React useRef() Hook Explained in 3 Steps
Build better business applications, faster, with Hilla
React Hooks を理解しよう - 電通総研 テックブログ
【React】useCallbackの適切な使い方とパフォーマンス
Release 2.0.0-beta.1 · vercel/swr
【React+TypeScript】Netflixのクローンを作るチュートリアル - Qiita
You Might Not Need an Effect
弊社で行なっているReact勉強会について
2021年のフロントエンド開発の中で意識をしたこと - Qiita
【Next.js】コンポーネントと状態管理のファイル分割と設計
www.icom.co.jp
anond.hatelabo.jp
wnmu.edu
yanmaga.jp
www.jomo-news.co.jp
unidenholdings.jp