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 - pascalw/dashbling: Hackable React based dashboards for developers, inspired by Dashing.
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
Next.jsのフォルダ構造 | ページレベル最適化と効率的な開発のためのベストプラクティス - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクト構成 Next.jsにおけるプロジェクト構成とディレクトリの役割 ルートディレクトリファイル 最後に はじめに 前回のNext.js入門に続き、本日はNext.jsでプロジェクトを構造化する方法について説明していきます。 前回の記事は以下となります。 dev-k.hatenablog.com Next.jsに適したフォルダ構造を自分で考えることは一般的です。 Next.jsにはページレベルでの最適化が存在し、ビルド時にログに記録されたページが表示されます。 すべてのコンポーネントファイルは「pages」フォルダ内でページとして処理されます。 そのため、ページに関係のないコンポーネントを「pages」フォルダに配置すると、ビルド時に不要なコンポーネントがページとして処理され、ビルド時間が増加してしまいます。 今回は、個人開発や小規模なチーム開発向けのNext.jsフォル
useSelectorとuseDispatchでcontainer componentを排除する - stmn tech blog
はじめに こんにちは。株式会社スタメンでフロントエンドエンジニアをしております@0906kokiです。 React Hooksが2019年にリリースされてから、Reduxの実装でコンポーネントがstoreと接続する方法に選択肢が増えました。 具体的に言うと、今までconnect関数でstoreにあるstateやactionをpresentational componentに対してpropsとして渡していましたが、hooks時代ではuseSelectorとuseDispatchによってconnect関数を書かなくても、storeとの接続が可能になりました。 実装の広がりが出たと同時に、connect関数とuseSelector + useDispatchのどちらを使えばいいのか、いざ実装しようと思った際に悩むかもしれません。 現在、弊社では後者のuseSelectorとuseDispatch
react-robot
# react-robot Table of Contents react-robot Installation API License The react-robot package provides the useMachine hook for use with React. import React from 'react'; import ReactDOM from 'react-dom'; import { createMachine, state, transition } from 'robot3'; import { useMachine } from 'react-robot'; const machine = createMachine({ off: state( transition('toggle', 'on') ), on: state( transition(
GitHub - shuding/react-wrap-balancer: Simple React Component That Makes Titles More Readable
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 Hooks ライブラリ「SWR」をNext.jsで試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsと同じチームによって作成されている、データ取得のための React Hooks ライブラリとして「SWR」というライブラリがあります。 今回はこのライブラリの一番基本の部分をNext.jsのプロジェクトで試してみたいと思います。 SWRとは 公式サイトにも以下のように記載されていますが「SWR」という名前はHTTPキャッシュ無効化戦略であるstale-while-revalidateに由来しています。 “SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に
【2025年版】ReactのUIコンポーネントライブラリ23選
【2025年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア
Using Next.js is not an official part of Expo's universal app development workflow. Next.js is a React framework that provides simple page-based routing as well as server-side rendering. To use Next.js with the Expo SDK, we recommend using @expo/next-adapter library to handle the configuration. Using Expo with Next.js means you can share some of your existing components and APIs across your mobile
Magicというマジックリング認証に特化したサービスを知ったので素振りしてみた記録。 サーバーサイドまで含め入ったサンプルは公式のチュートリアルにある https://magic.link/guides 逆にSPAのようなクライアントログインの最低限パターンのサンプルが見当たらなかったので、素振りを書いてみた サンプル import { Magic } from 'magic-sdk' import { useState, useEffect } from 'react' // Dashboardに表示されたpublishable keyを持ってくる。これは公開してよいキー const MAGIC_LINK_PUBLIC = "pk_test_****************" // hooksに処理をまとめる const useMagicLogin = () => { const [is
% git clone https://github.com/sprout2000/vite-react-typescript.git % cd vite-react-typescript % docker-compose up localhost:3000 を開きましょう。これだけです。 ローカルに Node.js がインストールされていなかったり、インストールされていてもこのコンテナで利用されているバージョンとは異なっていたりしても同じ（仮想）環境でプロジェクトが起動します。
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.
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactにおけるDOM構築について ReactはDOMを仮に構築する仕組みを備えており、仮想DOMを設計してからリアルDOMを作成するため、従来のDOMやフレームワークで構築されたDOMに比べて処理のスピードが速く、Webページの表示を高速で切り替えることができます。 DOMについて DOM（Document Object Model）は、HTMLファイルのソースコードのことではなく、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたDOM（ツリー）を指します。DOMはChromeやFireFox、S
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には、アプリケーションの状態管理を単純化し、データの流れを追跡しやすくするため「データは常に親から子へと一方向に流れる
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
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で
RTK Queryおもしろそうなので調べてみたり触ってみたりした。 どちらかというと雰囲気を伝えることを目的とした記事で、勘違いしている可能性もあるかもしれないので(つっこんでほしい) 詳細については公式を読んでください。 対象 Reactを使ってるひと Reactでのデータ取得のキャッシュの扱いとか管理がしんどいなってひと Reduxは分からなくてもOK RTK Query is 何？ Redux Toolkitのチームが作ったデータ取得とキャッシングのためのツール。 データを取得するのが楽になる。キャッシュのロジックを手書きする必要がなくなる。 最近のReactコミュニティでは「データの取得とキャッシュ」は「状態管理」を別のものとして管理したいという需要があった。 → RTK Queryは「データの取得とキャッシュ」に特化したツール。(Reduxは「状態管理」に特化したツール) 実際の
はじめに 現在携わっているプロジェクトの技術選定で 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>ほげー
秩序ある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. 1. Mutable values useRef(initialValue) is a built-in React hook that accepts one argument as the initial value and returns a reference (aka ref). A reference is an object having a special property current.
本記事は電通国際情報サービス 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 fast react 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
🚀 Vaadin Create 2025 | Check out the conference for developers building web apps with Vaadin
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to make Storybook 2-4x faster
Using Next.js with Expo for Web
Magicを使ったマジックリンクログインをReactでの素振りサンプルと感想
Docker で React + TypeScript の開発環境
React Server Componentの情報と考察が集まるスクラップ
【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！ - Qiita
Behind the scenes of 1Password for Linux
【React】カッコよく書けるタブコンポーネントを自作する
エンジニア・デザイナーに知ってもらいたいFigmaとReactの違い
ReactにおけるProps Drilling問題を意識したコンポーネント設計 - Qiita
Redux ToolitのRTK Queryについて - Qiita
Apollo Clientのキャッシュの仕組みとローカルの状態管理について
コンポーネントテストの方法4種類比較してみる（2025年版）
React + Tailwind CSS+APIで天気アプリケーション作成 | アールエフェクト
GitHub - ktny/bukumanga: はてなブックマーク数を元にwebマンガをまとめたサイト
React useRef() Hook Explained in 3 Steps
React Hooks を理解しよう - 電通総研 テックブログ
【React】useCallbackの適切な使い方とパフォーマンス
Full-Stack React Framework for Spring Boot | Vaadin
2ndart.hatenablog.com
b.hatena.ne.jp
tomokutchi.hatenablog.com
toyokeizai.net
kakuyomu.jp
yurury.hatenablog.com