Reactのトランジションで世界を分岐させるハンズオンReactのSuspense機能に付随するトランジションは、使いこなせば有用ですが裏で何が起こっているのか分かりにくい機能です。この本では、手を動かすことでトランジションの機構をしっかりと理解することを目指します。
React Hook Form + MUI Autocomplete で絞り込み検索機能付きのプルダウンリストを作ってみた | DevelopersIO
React を触り始めてからそろそろ１年くらいの下田です。 沢山ある選択肢の中からいくつかのデータを指定するようなケースにおいて、ユーザーが延々とプルダウンリストをスクロールしたり、大量のデータの中から目的とする選択肢を目視で探すという状況は非常に辛いものがあります。また、そういった UI が提供された場合に利用者の立場で考えると体験があまりよろしくないというのは容易に推測できます。 Web アプリ開発を始めたばかりの頃（の私）は漠然と、「絞り込み検索機能付きのプルダウンリストって作るのが難しいんだろうなぁ」と考えておりましたが MUI（旧名称：Material UI）の Autocomplete というコンポーネントを利用すると頑張らずに実装できることが分かりました。 そこで今回は、react-hook-form v7 と組み合わせた絞り込み検索機能付きのプルダウンリストの実装サンプルを
TypeScript環境でReact Hook Formのフォーム作成の基礎を学ぶ | アールエフェクト
React Hook Form は React 用のフォームバリデーションライブラリです。input 要素に入力した値を取得するだけではなくバリデーション機能なども備えており簡単にフォームを実装することができます。入力フォームの作成が嫌いな人もライブラリの力を借りることでフォーム作成の手間を軽減することができます。入力した値に対するバリデーションは React Hook Form 自身も備えていますがバリデーションライブラリの Zod を利用することも可能です。 本文書ではすぐに実践で活用できるようにバリデーションやエラーメッセージの表示などフォームを作成する上で必要な機能を中心にシンプルなコードを利用して説明しています。Zod を利用した場合の設定方法についても説明しています。 利用する React Hook Form ライブラリのバージョンは 7 で React のバージョンは 18.
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
GraphQLライブラリをApollo→Relay→Urqlにハシゴした話 | 株式会社ヌーラボ(Nulab inc.)
GraphQLクライアントライブラリ乗り換え遍歴 私達のプロジェクトではReactのフロントエンドとバックエンドの通信にGraphQLを使っています。 GraphQLは、たいていの場合はHTTP POSTリクエストで リクエストボディ：GraphQLクエリ（文字列）と引数（オブジェクト）からなるJSON レスポンスボディ：データJSON をやりとりするだけというだけのシンプルなプロトコルなので、全てfetch関数で頑張るストロングスタイルで行けないこともないですが、やっぱり専用のクライアントライブラリを利用したほうが楽です。 そのライブラリとして一番有名なApollo Clientから始まってRelay、Urqlと、3ヶ月くらいの間に2回も乗り換えてしまったので、反省の意味も込めて記事にしたいと思います。 GraphQLクライアントライブラリがいろいろあってどう違うんだろうと迷った方の助け
ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
Next.js にテストを導入し hooks のテストを書く
はじめに 前回コンポーネントと状態管理のファイル分割と設計について記事を書き、設計のメリットとして「テストのしやすさ」を上げました。 今回は前回のブログで作った hooks を例にしてテストについて書いていこうと思います。 導入 Next.js 公式ドキュメントを参考に導入していきます。 Cypress, Playwright, Jest and React Testing Library の3つ紹介されていますが、今回は Jest and React Testing Library を導入します。 インストール 既に Next.js の PJ を作っていくるので Manual setup を参考にインストールします。 npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-do
リリースから5年、Webフロントエンドの経年劣化と向き合う
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack、Core Web Vitalsの登場によりWebフロントエンドの技術構成は日々進化しています。 時代の流れに合わせてAmebaNewsでは、脱AMP、脱SPAやTypeScript化などを行いましたので紹介いたします。
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
React開発を快適にするChrome拡張を公開したので見てください！
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
Why Every React Developer Should Learn Function Composition
Imagine you’re building a React application. There are a number of things you want to do on just about every page view of the application. Check and update user authentication statusCheck currently active features to decide which features to render (needed for continuous delivery)Log each page component mountRender a standard layout (navigation, sidebars, etc)Things like this are commonly called c
VueをReactにリプレイスしてEasyからSimpleにした話
はじめに こんにちは、株式会社マイベストでフロントエンドのテックリードをしているteppeitaです。 弊社が運営している mybest の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪 mybestのフロントエンド紹介 まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。 フロントエンドの技術構成 - TypeScript - React - ApolloClient（APIがGraphQLです） - Storybook（VRTやinteraction testsを実行しています） - Jest - Cypress ↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。 画面構成 mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。 その
React/Next.jsでの俺的ベストプラクティスを見てくれ
木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。 この記事で用いる基本的なhooksをいくつか紹介します。 useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => { c
Container Componentに書いていたlogicをCustom Hooksに書いてみる
はじめに みなさんは、Reactを使用して開発する時、Componentで使用するlogicをどこに実装していますか？ 私はComponentをContainer ComponentとPresentational Componentの二つに分けて、Container Componentにlogicを書いてました。 しかし、Custom Hooksを使用することでわざわざComponentを分けなくても良い、ということを最近知りました。 本記事は、それを実践してみよう、というものです。 まず用語を簡単に確認してから、サンプルコードを用いてCustom Hooksを実装していきたいと思います。 Container Componentとは Dan Abramov氏のブログから引用します。 You’ll find your components much easier to reuse and r
正しく使う ReactContext
みなさん、 React の Context は正しく使えていますか？この記事ではパフォーマンスの観点で Context を少しでも正しく使うための方法や理由などを書いていこうと思います。 なお、この記事の内容が最も正しいと主張するつもりではありません。ぜひ PR や コメント でよりより使い方を共有してください！ 想定する読者と記事の範囲 一番この記事を読んでいただきたいのはこういった方々です Context についてなんとなくしか分かっていない とりあえず redux や recoil 等を使えば良いと思っている しばしば recoil と Context を比較するといった趣旨の記事があったりしますが、 Context について正しく使えていないが故に、適切に比較できないものがあったりします。僕自身は Context よりも recoil を使うことが多いのですが、思考停止で reco
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React フレームワークの 動向と選定基準
useState with URLs: How to persist state with useSearchParams - LogRocket Blog
オープンソースのReact / Next.js製Webアプリまとめ
