【Next.js Update!】v12リリースを踏まえ、Next.jsの採用を考える 本発表は以下URLでアーカイブ視聴が可能です。https://youtu.be/KaS3bgz_CA4 イベントページ:https://forkwell.connpass.com/event/228457/
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人/書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数( () => JSX.Element )として返ります。 React
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
Debounce で値を反映したいコンポーネントを作っていて、setTimeout 内で event から渡された event.target を使おうとしたら null になっていてエラーになり、なんもわからん… になってハマっていたのでメモ event.target が null になるコード useDebounceCallback.js import { useRef, useCallback } from 'react'; export const useDebounceCallback = (callback, delay = 300) => { const debounceTimer = useRef(null); const dispatch = useCallback((...args) => { debounceTimer.current && clearTimeout(d
How to use debounce on input change with React-hook-form library Recently, I've been using react-hook-form to create a login form. The library has a lot of examples on the github page. However, I could not find a case for my use. I wanted to use debounce on inputChange to avoid trigger validation on every keystroke from users. It took me a couple of days to get the result. Therefore, I decided to
こんにちは。エンジニアの根岸です。 コミューンには2年ほど前から副業で関わっていたのですが、昨年の12月に正社員としてジョインすることになりました。 コミューンのプロダクトには比較的長く関わっているのですが、知らないうちにフォームライブラリのReact Hook Formが導入されていました。 React Hook Formを使っていて、どうやって入力内容が変更されたことを検知しているのか疑問に思ったので調べてみました。 React Hook Formとは React Hook Formは軽量かつ高パフォーマンスなフォームライブラリです。 ReactのフォームライブラリにはFormikやredux-fromなどがありますが、それらと比較して高速であることが公式サイトでアピールされています。 React Hook Formは後発のライブラリですが、最近はだいぶ名前を聞くようになりました。 い
仕様は以下のUML図の通り、 Inputフィールドに入力 Inputフィールドに入力した内容でAPIリクエスト APIのレスポンスをstoreに保存 storeからpropsに渡してレンダリング 困ったこと その1 全角入力問題 Material-UIのInput API、onChangeを使って、毎度APIにfetchしにいくのですが、 全角入力の場合、「テスト」と入力すると、「t、て、てs、てす、てすt、テスト...」全てでfetchされるわけです。。 入力速度によっては、「テスト」と入力しているのですが、 「テスt」のような入力が確定以前の状態でfetchした情報がstoreに保存されてしまうという問題が発生しました。(なんでーーー。) 画面上では、「テスト」で検索かけているつもりが、受け取っているデータは「テスt」でリクエストしたデータになっていておかしい。。。 フロントのみでフィ
ReactとTypeScriptの使い方がまとめられた「React + TypeScript Cheatsheets」の「useRef」の情報にもとづいて、このフックの型づけと初期値の与え方について3つの定めを解説します。useRefフックの型には、試しやすいようにnumberを用いました。 const nullRef = useRef<number>(null); const nonNullRef = useRef<number>(null!); const nullableRef = useRef<number | null>(null);
Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、少し億劫になりますよね。 └── atoms └── Button ├── Button.stories.tsx ├── Button.test.tsx ├── Button.tsx ├── dependencies.ts ├── index.tsx └── style.module.css 作成時にButtonという名称だけ決めてしまい、CLI から雛形出力できれば、作業効率向上が見込めます。(story
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 (というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 memo: props が変更されていない場合に再レンダーをスキップする React は UI の更新時に必要となる高コストな DOM 操作の回数を最小化するために、内部的にいくつかの賢いテクニックを使用しています。多くのアプリケーションでは React を使用するだけで、パフォーマンス向上のための特別な最適化を苦労して行わなくても、レスポンスの良いユーザインターフェースを実現できますが、それでもなお、React アプリケーションを高速化するための方法はいくつか存在します。 本番用ビルドを使用する React アプリケーションでベンチマークを行う場合やパフォーマンスの問題が発生している場
まとめ Slackのような仮想リストを実現するのは難しい いずれのライブラリも上方向へのスクロールは難しい 普通に使う分には、react-virtuosoはいいぞ 環境 React Slackライクなメッセージアプリを作りたい 下方向に新しいメッセージが表示される 新規メッセージは下に追加される スレッドが存在している場合、スレッド元にジャンプできる 基本的にユーザは上方向へのスクロールを行う メッセージには画像や動画も添付でき、高さは不明 react-window doc: react-window npm: react-window - npm GitHub: GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular data bundlephobi
この記事ではReactで巨大なリストを効率よく表示するためのライブラリ react-window をご紹介します。 似たようなライブラリに react-virtualized というものがありますが、react-window は同じ作者による新しいライブラリです。 はじめに ナイーブな方法では、長大なリストを表示するにはその長さに比例するだけのレンダリングコストがかかります。ナイーブな方法とは下記のようにコンポーネントのリストを作って表示するだけの方法です。 import React from "react"; import styled from "styled-components"; const Container = styled.section` display: flex; flex-direction: column; `; const RowContainer = styl
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か? SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 コンテクストで深くデータを受け渡す useContext コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。 典型的な React アプリケーションでは、データは props を通してトップダウン(親から子)で渡されますが、このようなやり方は、アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ(例: ロケール設定、UI テーマ)にとっては面倒です。コンテクストはツリーの各階層で明示的にプロパティを渡すことなく、コンポーネント間でこれらの様な値を共有する方法を提供します。 コンテ
最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。 やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/mai
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く