memo化について Reactのコンポーネントをmemo化するとき、再レンダリングを防ぐという記述を見かけることがあります。それは誤解であり、実際にmemo化で出来るのは以下のようになものです。 関数の再評価(ロジックの再実行)は防げる 仮想DOMの差分比較は防げない 最終的なレンダリングは確定した仮想DOMの状態次第なので、memo化に関係なく差分があるかどうかでDOM操作が決定する Reactは仮想DOMの値に変化があった場合に、DOMを書き換える構造になっています。memo化は仮想DOMの生成結果をキャッシュしているに過ぎません。親コンポーネントが再評価されれば、子コンポーネントはmemo化の可否に関わらず差分比較の対象です。 簡単な例 ソースコード import React, { memo, useState } from 'react'; const Test1 = memo((

はじめにこんにちは。親から送られてくる家庭菜園の動画に癒されている kimizuy です。 今回は要素の外側をクリックすると閉じるドロップダウンのコンポーネントを React Hooks で実装した例を紹介します。 紹介するコンポーネントは以下のような動きになります。 「Toggle dropdown」を押すとドロップダウン（メニューリスト）を表示するドロップダウンの外側をクリックするとドロップダウンが閉じるCodesandbox のデモも用意しました。実際に触って試してみてください。 tldrさっそくドロップダウンコンポーネントの実装例を紹介します。 useState でドロップダウンの表示・非表示の状態を管理しています。また useRef でドロップダウンの要素を参照し、useEffect で要素外のクリックを検知することでメニューを閉じられるようにしました。 function Dro

import classNames from "./foo.module.css"; export const Foo = () => <div className={classNames.foo}></div>; from global の使いみち CSS Modulesを使うと、全てのクラスにハッシュが付いてくれるので便利な半面、ハッシュなしのクラスを使えたほうが良い場合もあります。(:global的な使い方ではなく) グローバルなクラスセレクタと連携したい場合 ハッシュ付きクラス名とハッシュなしクラス名を子結合子や子孫結合子を組み合わせる場合 ファイル間を横断して作用させたい場合 特にスタイルに依存した理由でハッシュなしクラス名を使用したい場合、js側で追加するよりも、CSS側で指定できたほうが、責務を適切に閉じられます。 当然影響範囲が広がればリスクも生じるので、適切な管理のもとに

Next.jsのloading UIについて解説しています。Next.jsのloading UIはApp Router内では、loading.jsを使うだけで簡単に実装ができます。ただし、これらの挙動を理解する上でReact 18のSuspenceの挙動を理解する必要があるので、こちらについてもこの記事で解説しています。

www.youtube.com Meta(当時Facebook)のReact Core Teamの主要人物たちに直接インタビューしたドキュメンタリー動画 タイムライン 2012年まで 最初はFacebook社内でReactが普及するまでの道程。 当時世の中的にはクロスブラウザの解決策はjQueryに落ち着き、モバイルアプリ化の流れでAPIサーバーとViewは切り離される傾向にあり、JavaScriptのクライアントサイドで大きいアプリケーション作るためにMVCフレームワークとか取り入れないとね〜という雰囲気だった Facebook社はマーク・ザッカーバーグがHTML5に賭けていた頃*1にBolt.jsというFacebook版Backbone.jsを開発していた 広告プラットフォームのコードは当時Bolt.jsを中心に構成されていたが、Jordan Walkeが関数型プログラミングのアイデア

2023/3に正式リニューアルされたreactのドキュメントを改めて読む。 https://react.dev/learn のLEARN REACTの部分で気になったところをまとめていく。 Describing the UI Your First Component 特になし Importing and Exporting Components componentをdefault exportとnamed exportどっちにするかは、チームで統一する場合もあるが、特に公式でどちらかを推してるわけではない。 Writing Markup with JSX JSXの利点: ロジックにマークアップをsyncできる。マークアップ上のコンポーネントごとにロジックを分離できる HTMLをJSXに変換してくれる便利ツールがある。class -> classNameとかの属性名変換もやってくれる Jav

マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに

参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }

pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu: pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実装を担当しています。 shu: 2022年3月に入社したshuです。Next.js化ではフロントエンドの設計、実装を担当しています。 mog: エンジニアとしてアルバイトをしているmogです。Nex

HTMLのマークアップでアクセシビリティーを向上させる方法として、WAI-ARIA（ウェイ・アリア）があります。HTML要素の属性に aria-* を追加することで音声読み上げの精度を高められます。 WAI-ARIAの特徴として、状態を示す属性が存在します。たとえば、aria-selected 属性。名前の通り、該当のHTML要素が選択状態であるかを示すことができます。ウェブサイトのUIパーツにはタブやアコーディオンなど動的なものがあります。こういった動的なパーツの「状態」はHTMLのマークアップだけでは示すことが難しく、JavaScriptの実装が不可欠です。 ▲本記事で解説するサンプル。タブの切り替えによって、aria-selected属性を動的に切り替えている。JavaScriptの制御が必要である。 よく利用される例としてタブ型のユーザーインターフェイスを題材とし、流行りのJSライ

どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構

Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ

はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。

React Hooks自体の解説記事はいくつかあるけど, Hooksの登場によってReactがどう変わったのかについて書かれている記事が無かったので書いた 継承, Mixin, HOC, render props, Hooksの登場によって, Reactの副作用分割パターンがどう変遷していったのか分かるようにすることがこの記事の目的

昨年のはてなリモートインターン2021で講義を担当したフロントエンドブートキャンプ の資料をご覧頂いたことをキッカケに連絡を頂いて、マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました。 その際に使用したワークショップ資料について、マネーフォワードさんにも確認して、Scrapboxの以下のページに公開しました。 構成としては DOMとレンダリングパフォーマンス React入門ハンズオン フロントエンドツールチェインについて という3本立てになっています。 フロントエンドのモダン化を進める中で、普段の業務とは別にまとまった時間でチームメンバーにReactやフロントエンドに関するインプットをしたり手を動かしたりしたいというお話だったので、ハンズオン形式でReactで簡単なアプリケーションを作るハンズオンを中心としたワークショップ形式にまとめました。 はてなインター

kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている​ 現状 今後 フロントエンドが技術的にもチーム的にも分割されている​ モノリスな構成からの脱却 アーキテクチャとチーム（

いい本が出たと聞いたので買って、しばらく積んでいたのをついに読んだ。手は動かしていない……。 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス 作者:Alex Banks,Eve PorcelloオライリージャパンAmazon 普段からフロントエンドアプリケーションを書いているけど、読んでみて網羅的な知識を再確認できたのでよかった。現代におけるReactコンポーネントの書き方にとどまらず、Reactの過去からSuspenseを使ったデータ取得といった実験的な技術まで教えてくれてありがたい。 Reactがどうやって動いているのか、脱糖したコードを手書きするところから始めて、このようにトランスパイルされます、と順を追って説明してくれるので、原理が気になる人も安心できるのではないか。日本語でReactに入門したいと聞かれたら最初におすすめする本だと思う。

はじめに この記事では以下のアクセシビリティ要件を満たすモーダルを実装します。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-describedby 属性が付与されている モーダルを開くと、モーダル内の最初の focusable な要素に自動でフォーカスされる モーダルが開いている間、モーダル以外の要素に aria-hidden 属性が付与される モーダルが開いている間、モーダル以外の要素のスクロールが無効化される モーダルが開いている間、モーダル内でフォーカスがトラップされる Esc キーを押下すると、モーダルが閉じる モーダルの外側をクリックすると、モーダルが閉じる モーダルを閉じると、モーダルが開く前にフォーカスされていた要素にフォーカスが戻る

React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事では Concurrent Features のひとつであるstartTransitionと、それを使いこなす上で重要な概念である「トランジション」について説明する。 この記事ではコンセプトの説明や具体例の提示のみを行う。詳細を知りたい場合は以下を参照。 一年前の記事であるため古くなっている部分もあるが、根幹は大きく変わっていないと認識している。 なお、上記の記事には「Concurrent Mode」という用語がタイトルに入っているが、これは今後は使われなくなってい

Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある 追記: 従量課金が採用された！Vercel Proプランの料金体系の変更とNext.js での対策に関して Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。 とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration（ISR）が実現できるのかあまり分かっていない そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。 何かご存知の方はぜひコメントをお願いします🙏