React コンポーネントの「制御・非制御」を意識しない方法
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
React Router v6のOutletとReact.lazyの組み合わせが便利
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo
React状態管理ライブラリ Zustandを使ってみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 Zustandとは ZustandはReactの状態管理ライブラリの一つです。シンプルで使いやすく、他の状態管理ライブラリと比べてもコード量が少ないです。 ちなみに同じ状態管理ライブラリ、jotaiやvaltioもZustandと同じPoimandresが提供しています。 valtioに関しては、こちらのエントリで記述しています。 試してみた Next.jsを使用して、プロジェクトを作成します。 $ npx create-next-app sample-zustand --ts プロジェクトに移動し、Zustandをインストールします。 $ yarn add zustand // または $ npm install zustand useStore Zustandでは、状態を管理するuseStoreフックを作成
Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
Deno で 学ぶ React のサーバサイドレンダリング - 30歳からのプログラミング
Deno で React のサーバサイドレンダリング（以下、SSR）を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーションまで行う。 また、React で SSR する方法を調べたところ、ほとんどの記事が Next.js を前提としていた。確かに Next.js を使わずに SSR するケースはあまりないだろうし、記事としても需要がないのだと思う。 しかし、Next.js のようなフレームワークが裏側で何をやってくれているのかを知ることで、SSR に対する理解を深めることができる。 事実、私は SSR をほとんど使ったことがなかったが、この記事を書くことでかなり考えを整理することができた。 Deno のバージョンは1.11.2で動作確認している。
【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
React v18 での Effects に関する変更内容(予定)
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
一番文句言われなさそうな React コンポーネントの書き方
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
[React] カスタムフックを作るときにこころがけていること | DevelopersIO
カスタムフックを作るときに、私が気をつけているいくつかのことを例を用いながらその理由を書いていきます。 私がカスタムフックを作るときにこころがけていることがいくつかあります（こうするべきだ、と主張するものではありません）。 React の Hooks にスタイルを合わせる - https://sbfl.net/blog/2020/08/21/use-react-hooks-easy/ 関数は useCallback で包む - https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ テストをできるだけ書く React の Hooks にスタイルを合わせる React のカスタム Hooks をカジュアルに使ってコードの見通しを良くしよう 上記の記事に非常に影響を受けました。とてもすばらしい記事なので先に読んでおくことを
![[React] カスタムフックを作るときにこころがけていること | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する React + Typescript で実装されたフロントエンドにreact-beautiful-dndを使ったドラッグ＆ドロップ機能を実装しました。 全体の流れ 本記事でやることの全体の流れです。 React + Typescript で簡単な画像のリストを作成する react-beautiful-dndを導入してリストのアイテムをドラッグ＆ドロップできるようにする 成果物 React + Typescript プロジェクトの雛形を作成する ドラッグ＆ドロップを実装する前準備です。 create react app コマンドでプロジェクトの雛形を作成します。言語は Typescript を指定します。 npx create-react-app sample_dd
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 Chromeだとiframeの埋め込み越しにセルのドラッグができないみたいなので直接CodeSandboxに行くか、別のブラウザでアクセスしてください😿 (Drag A
react.christmas - react リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得して
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
