初めまして、プログラマーを始めて3年目の山田です。今回、日本発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。 ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。 Yamada UIとは 一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。 現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。 しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が
リアルタイム検索最適化：Reactアプリにdebounce処理を組み込む - Techtouch Developers Blog
はじめに そもそも debounce 処理って？ 本題 今回作りたかったもの 検討したこと useDebounce useDebouncedValue 実装したもの 最後に はじめに テックタッチのフロントエンドエンジニアの ozaan (@shzawa) です。関西 (兵庫県姫路市) 在住のため、普段はフルリモートのメンバーとしてサービス開発に取り組んでいます。 最近はスクラム開発の一環でバックエンドのコード (golang) を触らせてもらっていました。golang だと書き方が統一されているためか GitHub Copilot の補完機能がかなり効くので書いていて面白かったです。 そもそも debounce 処理って？ 対象のイベントが発生してから指定した時間が経過するまでは、同じイベントの発生を抑制する仕組みです。 input 要素の onChange イベントのような短い間隔で連
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
こんにちは。 フロントエンドエンジニアのぴです。 近頃社内のフロントエンドエンジニアの間で、自動テストをもっと導入していきたいという意見が自分の耳に入るようになってきました。サイト制作系の案件が多くどうしても自動テストに関する知見が少なかったので、自動テストを書く上で知っておいた方が良さそうな基礎知識から、ハンズオンの部分までを最低限まとめてみます。 この記事のターゲット この記事の想定するターゲットは以下です。 自動テスト全然わからないけど書いてみたい人 自動テストいろんな手法あるけど、どれ選べばいいんだっけって悩む人 フロントエンドエンジニアの人 こんな人をターゲットに、テストに関する概要的な知識から、コンポーネントの単体テストと結合テストに触れていきたいと思います。 自動テストの概要 まず、自動テストとは、ソフトウェアを使って、テストの作成や実行を自動化する事を指します。手動テストに
Modern.js
A Progressive React Framework for modern web development.
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
JollyUI
New name, new themes, CLINew name, theme customizer, CLIJollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
背景 Atomic Design ベースのディレクトリ構成になっていたが、 molecules と ogranisms のルールが定まっておらず、コンポーネントがどっちに入るのかが個々人の感覚になっていた 一部の機能は機能ごとにディレクトリを切っていてルールが曖昧になっていた テストと実装が別ディレクトリにあって、集約性の観点で見通しが悪かった 一行まとめ Atomic Design ベースから features （機能ごと）に分ける方向にディレクトリ構成を変更した。 方針 （フィロソフィー） 関心が近いものは近い場所になるべく集約させる ガチガチに縛るよりはある程度レールを引くのに止める 特に features の中のルールは固められないと判断して決定を遅らせる ルール化できそうなものをLintエラーで管理する 実はまだやってない。インポートの制約に関するルールを追加する予定 採用したル
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
こんにちは！PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 背景と目的 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページでバックエンド生成の HTML + jQuery の実装が残っています。 ご利用企業様のプレスリリースを掲載するプレスリリースページ（下スクリーンショット）もその一つで、機能追加や改修のニーズはありながら、大きな変更を行うことが難し
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
こんにちは、23卒の新卒エンジニアのfujinoです。今回は弊社のサービスでReactのフレームワークであるRemixを使い始めた話をしようと思います。 背景 弊社では今までVue.jsのフレームワークであるNuxt.jsを用いてフロントエンドを実装していました。 これは、採用当時は生のhtmlが使えるのが良いと思っていたことや、Vue.jsの経験のあるフロントエンジニアがチームにいたことが理由でした。 しかし、最近ではTypescriptとの親和性や、コミュニティの大きさなどの理由からReactの方が勢いがあるように感じます。 弊社でも少し前からReactに移行することを決定し、現在進行形でNuxt.jsからReactへの移行プロジェクトを進めています。 Reactの主要なフレームワークとして、Next.jsとRemixが挙げられます。 両者の違いとして、Next.jsはSSG（Stat
前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」ということでした。 素のReactの挙動を理由に自分が思い描いていたのは「コンポーネントはネスト順に実行される」だったのでこれは衝撃的でフレームワークについて何も知らなかったな、と思わせる内容でした。 ここでは、Reactコンポーネントの実行順序を再確認し、RSC、フレームワークについても確認していきます。 Reactコンポーネントの実行順序 ここでの対象はクライアントコンポーネントです。 このようなネストしたツリーを用意しました。Aと
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X（旧 Twitter）のいいねボタンがあります
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
#metaをのぞいてみると、より詳細な記録が残っている。だいたい1年おきに当時興味のあったフレームワークを学ぶために作り直していたが、ここ2, 3年は使い慣れたRubyでフルスクラッチしたシステムで落ち着いていた。だけど、ここにきて今回興味のあったNext.jsを学ぶために作り直すことになった。 途中でブログサービスなどに投稿していた記事をインポートしたり、ドメインを移したり、リポジトリを分割したり統合したりしながら、今のブログに至る。 ブログというのはWebフロントエンドのフレームワークを学ぶためのお題として実益も兼ねていて気に入っていて、今後も何度も作り替えるんだろうなと思っている。 ReactやNext.jsは以前から触っていたためだいたい理解していたが、Next.js v13.4で導入されたApp Routerであったり、最近のReactについてキャッチアップできていなかったことが
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
StyleX
The styling system that powers facebook.cominstagram.comwhatsapp.comthreads.netGet StartedThinking in StyleX
http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバー上でのみ実行されることで、以下のような利点があります。 クライアントに JavaScript が送信されないため、バンドルサイズを削減できる コンポーネントを非同期関数として、直接データベースや外部 API からデータを取得でき、パフォーマンス上の利点がある React Server Components は、サーバー上でのみ実行されるため、クライアント側でのイベントハンドリングや状態
SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。 このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。 動作確認した環境 関連がありそうな依存を記す。 "dependencies": { "@remix-run/node": "^2.8.1", "@remix-run/react": "^2.8.1", "@remix-run/serve": "^2.8.1", "react": "^18.2.0", "react-dom"
Reactでは様々なスタイリングの手法があり、その上に構築されるコンポーネント実装も多くの選択肢があります。 styled-componentsやemotionといった CSS in JSライブラリによるスタイリングや、それらのライブラリ上に構築されたMUIやChakra UIといったコンポーネントライブラリ。一方でTailwind CSSやCSS ModulesなどCSS寄りなスタイリング手法があります。 私自身としてはTailwindを利用し、コンポーネントに関しては自作することが多いです。Tailwind CSSをベースにしたコンポーネントライブラリはいくつかありますが、自分の肌に合うものはありませんでした。 しかし、最近ちょうどいい選択肢と思われるshadcn/uiというものを見つけました。 一言でいうと、カスタマイズ性が高く、使いやすいUIコンポーネント集です。 本記事では、sh
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】RailsAWS初心者個人開発Next.js はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間
useEffectEvent という react フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、useEffectEvent は イベントリスナーを設定する useEffect とセットで使うフック です。 useEffectEvent を使うと、エフェクトとイベントリスナーを分離できます。そして、イベントリスナーの deps の変化時にエフェクトを再実行せずに済みます。 …とまあ、抽象的な説明だけでは分かりづらい と思うので、以降では useEffectEvent がどういう課題を解決するのか、また具体的にどういうケースで
上記構成で作りました。 バックエンドとフロントのビルドを統合したかったので、GraphQL サーバは、Remix に載せる形になっています。この構成の凄まじいのは、ローカル環境からコマンドを実行して約 17 秒で、CloudflarePages にビルド込みでデプロイされることです。 Next.js から Remix への移植理由 もともと React のフレームワークは Next.js を使っていました。しかし商利用も可能で制限がゆるい Cloudflare Pages をインフラとして使いたかったので、相性の良い Remix に移植することにしました。 一応 CloudflarePages でも Next.js は動くのですが、私の Blog システムで Edge 設定を行うと、謎のビルドエラーが出ました。配置したファイルの数を減らすと内容に関係なく何故かビルドが通ります。容量的に問題
![[すべて無料]Remix+Cloudflare Pagesでブロクシステムを作成する | 空雲 Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed9277c5ca4f5f68fe2b0724e09e8d8657e91d2e/height=288;version=1;width=512/https%3A%2F%2Fogp.croud.jp%2F%3Ftitle%3D%255B%25E3%2581%2599%25E3%2581%25B9%25E3%2581%25A6%25E7%2584%25A1%25E6%2596%2599%255DRemix%252BCloudflare%2520Pages%25E3%2581%25A7%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%25B7%25E3%2582%25B9%25E3%2583%2586%25E3%2583%25A0%25E3%2582%2592%25E4%25BD%259C%25E6%2588%2590%25E3%2581%2599%25E3%2582%258B%26name%3D%25E7%25A9%25BA%25E9%259B%25B2%2520Blog%26image%3Dhttps%253A%252F%252Fimage.croud.jp%252F%253Ftype%253Dpng%2526url%253Dhttps%25253A%25252F%25252Fstorage.googleapis.com%25252Fmd-blog-8ff35.appspot.com%25252F3dc889cf-05c0-43c7-93fd-c743f984be43-%25255BPoy8CkeLlIqBKopOUMlkZZvm0145QtWap0qRCnBxuwA%25255D)
Server Actions が Next.js 14 からStableに！古参フロントエンドが消失しないために知っておくこと
思い出します2年前・・・ VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 定番なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js Conf 、朝まで大忙しでしたね。 （ねむい・・・） Server Actions の一般的な誤解 まず最初に、SNSで話題になっている Server Actions に関する一般的な誤解についてです。 (1) 生のSQLが書かれているというアンチパターン？🤔 一部のサンプルコードでは、生のSQLを直書きしているところがあります。 しかし、以前のプレゼンテーションでも述べられているように、 React Server Component や Server Actions で、この書き方を推奨しているわけではありません。 あくまで「こんなこともできるようになっ
Relay-style GraphQL
🇰🇷 한국인 (Korean) translation available (courtesy of Yujin Lim) “The future Relay-style GraphQL is already here – it’s just not evenly distributed.” – William Gibson, probably ”Relay-style GraphQL” is an opinionated way of consuming GraphQL in a React application, and probably better than whatever you’re currently doing. It follows the ideas pioneered by Meta’s open-source GraphQL library, Relay.
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. These docs are still a work in progress. More documentation is available in the React Compiler Working Group repo, and will be upstreamed into these docs when they are more stable. React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the com
7月21日、Sveltrisを使用して相互運用可能なReactとSvelteアプリを構築する方法が発表されました。 Sveltrisは、ReactとSvelteの独自の強みを組み合わせることで、より効率的でカスタマイズされたソリューションを提供します。 この記事では、Sveltrisの詳細な説明と、ReactとSvelteを組み合わせてアプリを構築する際の利点と欠点について紹介します。 7月21日、Sveltrisを使用して相互運用可能なReactとSvelteアプリを構築するためのツール「Sveltris」がリリースされました。 Sveltrisは、ReactとSvelteの独自の強みを組み合わせることで、より効率的でカスタマイズされたソリューションを提供します。 この記事では、Sveltrisの詳細な説明と、ReactとSvelteを組み合わせてアプリを構築する際の利点と欠点について紹
この記事では、ReactにおいてDOMへのアクセスが必要な理由と、その際にRefがどう役立つのかを見ていきます。また、useRef、forwardRef、useImperativeHandleという3つのフックについて説明し、これらを適切に使用する方法を紹介したいと思います。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useRefを使用してReactでDOMにアクセスする 親から子にRefをpropとして渡す forwardRefを使用して親から子にRefを渡す useImperativeHandleを使用した命令型API useImperativeHandleを使用しない命令型API Reactには
Next.js Server Actions Next.js 13.4 で、新機能として Server Actions[1] が追加され、バックエンド側のコードをあたかもクライアントから直接呼び出せるかのようにコードを書くことができるようになりました。 リリースブログに掲載されていた Server Actions のコードを見てみましょう。 // app/post/[id]/page.tsx (Server Component) import kv from "./kv"; export default function Page({ params }) { async function increment() { "use server"; await kv.incr(`post:id:${params.id}`); } return ( <form action={increment}
ReactPy
This documentation is still under construction 🚧. We welcome your feedback! ReactPy is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components which look and behave similarly to those found in ReactJS. Designed with simplicity in mind, ReactPy can be used by those without web development experience while also being powerful enough to grow w
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. React's props model is extremely powerful. One of its most useful features is the ability to pass a component as a prop. This lets you create composable pieces of UI, helping to make your components more reusable. The trouble is that this can often be difficult to type correctly. Le
RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5
RSC From Scratch. Part 1: Server Components In this technical deep dive, we'll implement a very simplified version of React Server Components (RSC) from scratch. This deep dive will be published in several parts: Part 1: Server Components (this page) Part 2: Client Components (not written yet) Part 3: TBD (not written yet) Seriously, this is a deep dive! This deep dive doesn't explain the benefits
GitHub - react-hookz/web: React hooks done right, for browser and SSR.
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
yoshiko さんが提唱された 『React のステート 3 分類』 すなわち 「1. サーバーデータのキャッシュ, 2. Global State, 3. Local State」の 3 種類に分ける 考え方は、みなさんご存じかと思います。 この分類をさらに一般化かつ微細化して、React で登場する変数（または const, 引数）および状態が、それぞれ異なった長さのライフタイムを持っている、と捉えなおすことで、満たしたい仕様をシンプルな方法で、かつ精密に実現するコードを書けるようになります。 ライフタイムは大まかに 4 種類に分けられます。短→長（すなわちスコープの狭→広の順）に並べると、以下のようになります。 アクション ライフタイムは最も短い・スコープは最も狭い 「クリック」など、特定のアクションによる処理の間だけ 一度っきりの一時変数 レンダー React コンポーネントのレ
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 - connpass https://findy.connpass.com/event/296449/
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本発のReact UIコンポーネントライブラリ 『Yamada UI』
CodeMirror v6によるZennのMarkdownエディタの作り方
拡張性に優れた React Aria のコンポーネント設計
バグをボコボコなぎ倒す👊自動テスト導入でWebアプリを守ろう！
フロントエンドのディレクトリ構成を変えた 2023 - kobayang
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
Remixを使い始めた話 | Money Forward Kessai TECH BLOG
React Server Componentの実行順序とフレームワークでの注意点
楽観的更新を行うための React の useOptimistic フック
ReactのコンポーネントからStorybookのファイルを自動生成してみた
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
ブログをNext.jsで作り直した
React Server Components を使うためのミニマムなフレームワーク Waku
SPA モードのRemixを GitHub Pages にデプロイする
ReactのUIコンポーネントならshadcn/uiがちょうどいい
useEffectEvent フックを使って useEffect ともっと上手く付き合おう
[すべて無料]Remix+Cloudflare Pagesでブロクシステムを作成する | 空雲 Blog
Reactの状態管理におけるuseReducerとuseContextの活用例
React Compiler – React
Sveltrisが公開 ー ReactとSvelteの「いいとこ取り」なフレームワーク
ReactにおけるRef：DOMへのアクセスから命令的APIまで | POSTD
Next.js Server Actions の裏側を理解したくて動きとコードを追う
How to Pass a Component as a Prop in React
React の変数・状態をライフタイムで分ける――アクション/レンダー/コンポーネント/ファイル
明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-