はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
Fully compatible with React 18 and the upcoming use hook. Now with a store interface that can be used outside of React. Jotai takes an atomic approach to global React state management. Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar de
Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js" integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> Use <ReactModal> tag inside your React CDN app. General Usage The only required prop for the modal object is isOpen, which indicates wheth
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
Reactアプリケーションを整理して構築し、保守を簡単にするためにHigher-Order Componentsを使用する方法について説明します。純粋関数でコードをクリーンに保つ方法や、同じ原理をReactコンポーネントに適用する方法を紹介します。 純粋関数 以下のプロパティに従っている場合、その関数は純粋であると見なされます。 取り扱うすべてのデータが引数として宣言されている 与えられたデータやその他のデータを変化させない(多くの場合、副作用と呼ばれる) 同じ入力には、常に同じ出力を返す たとえば、以下のadd関数は純粋です。 function add(x, y) { return x + y; } しかし以下のbadAdd関数は純粋ではありません。 var y = 2; function badAdd(x) { return x + y; } badAdd関数は直接与えられていないデー
ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ!」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
Installation (for standard modern project) npm install react-icons --save Usage import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } } Installation (for meteorjs, gatsbyjs, etc) If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
The Best Toast in Town.Smoking hot React notifications.
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
はじめにReact TypeScript ESLint Prettier VSCode(Visual Studio Code) の組み合わせで、プロジェクトを作成し、リンター、コードフォーマッター環境を構築しました。 何番煎じだよっ!とは思いますが、create-react-app のソースコードを基準に調整していくやり方で、いきなり結論を出さず、一個一個確認しながら進めて行きます。(急ぐ場合、手順まとめ に飛んでください。) 【検証環境】 Windows 10 Pro x64 Visual Studio Code 1.69.0 Raspberry Pi Desktop OS(Linux raspberry 4.19.0-13-amd64) node 14.16.0 npm 6.14.11 create-react-app 5.0.1 eslint 8.19.0 prettier 2.7.
Create React App の ESLint のカスタマイズと VSCode での使用 〜Prettier を添えて〜ESLintVSCodecreate-react-appprettier 本記事について Create React App(以下 CRA)で作成されたアプリの ESLint を Visual Studio Code(以下 VSCode)で使えるように設定する機会があった。 また合わせて ESLint のカスタマイズもできるようにした。さらに Prettier も一緒に使えるようにした。 そのときは開発中のアプリの設定をいじる形だったので、1 から CRA でアプリを作成する場合にも再現できるように手順を整理したのが本記事。 結局 1 から作成してみた場合もやったことは変わらなかったので、開発中のアプリの ESLint のカスタマイズも本記事のやりかたと同様にできるはず
やりたいこと VSCodeで開発しているReactのアプリケーションを、VSCode上でデバッグしたい。 Chrome の開発者ツールでもデバッグできるけど、いちいち開くのがめんどくさいし、VSCodeの方が扱いやすく、生産性も上がるので。 開発環境 OSWindows 11Package ManageryarnJavascript/TypescriptTypescriptIDEVSCode 手順 Reactのアプリケーションを作成する yarnでcreate react appコマンドを実行する。 yarn create react-app my-app VSCodeでアプリケーションフォルダを開く cd my-app code . VSCodeにデバッグ用の構成を追加する 1.VSCodeの「実行」>「構成の追加」をクリックする。 2.デバッガーに「Webアプリ(Chrome)」を選択
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く