30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

React

fetch-mock で Fetch API のモックを作る

fetchは、JavaScript で HTTP 通信を行うための API。SPA で Web API とやり取りを行う際などによく使われる。 例えば以下のコンポーネントでは、ボタンを押下するとfetchによるリクエストが発行され、そのレスポンスに応じて表示内容が変わる。 import Reac…

store.replaceReducer で reducer を入れ替える

Redux では原則として、ひとつのアプリに対してひとつのstoreを作成する。 アプリ内に複数のstoreを共存させることも可能ではあるが、基本的には単一のstoreを利用するべきであり、公式ドキュメントでもそのように説明している。 Store Setup | Redux Style …

React (+ Redux) アプリの state 更新に関するパフォーマンス戦略

コンポーネントの再レンダリングを適切に抑制していくことが、React アプリのパフォーマンス改善の基本。 コンポーネントの再レンダリングが発生する要因はいくつかあるが、「親の再レンダリングによって発生する子の再レンダリング」については、以下の記事…

React アプリのモーダルを dialog 要素で実装する

モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが…

React.Suspense と React.lazy でコンポーネントを動的に読み込む

React.SuspenseとReact.lazyを使うことで、import()で動的に読み込んだコンポーネントを通常のコンポーネントとしてレンダリングすることができる。 動的読み込みはパフォーマンス向上のためなどに使われるが、それを簡単に React アプリに取り入れることが…

React Test Renderer の createNodeMock で ref 属性のモックを作る

React Test Rendererのcreateメソッドは、オプションでcreateNodeMockという機能を使うことができる。 ref属性を使っているコンポーネントのテストに便利なのだが、初見では理解しづらい機能だったので、整理しておく。 React Test Rendererについてはこちら…

サードパーティライブラリを使わずに React コンポーネントのユニットテストを書く

React コンポーネントのユニットテストを書くときは、React Testing LibraryやEnzymeなどのサードパーティライブラリを使うことが多いはず。 だがそれらを使わなくても、公式が提供している機能だけでも十分にユニットテストを書くことが出来る。 この記事で…

React のプレリリースチャンネルで実験的な機能にアクセスする

React は公式に3つのリリースチャンネルを用意しており、これを利用すれば安定版以外の React もインストールすることが出来る。 Latest いわゆる安定版のリリースを行うチャンネル。セマンティックバージョニングに準拠している。安定性や段階的移行を重視…

React.memo を使ったパフォーマンス最適化について

パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばい…

React の状態管理についての論点整理

なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有の…

forwardRef と useImperativeHandle

コンポーネント内の DOM 要素にRefオブジェクトを渡すための機能であるforwardRefと、コンポーネントにメソッドを生やす Hooks であるuseImperativeHandleについて、説明する。 どちらもRefオブジェクトやref属性を使った機能なので、それらを理解しているこ…

React Ref の基本

React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて考えたほうが理解しやすい。 まずRefオブジェクトについて扱い…

React のクラスコンポーネントの bind は何を解決しているのか

クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決しているのか。 Hooks が登場したことで今後はクラスコンポーネント…

宣言的な React と、ミュータブルな this

宣言的と命令的の対比 React の特徴のひとつとして、UI を宣言的に記述する、というものが挙げられる。 これは、UI の最終結果だけを記述する、ということである。 データと UI が一対一で、このデータのときはこのような UI になる、という書き方をする。 …

React Router v5.1 で導入された Hooks API について

React Router のv5.1で Hooks API が導入された。 reacttraining.com URL パラメータやhistoryオブジェクトなどを、より簡単に取得できるようになった。 これまでの書き方も使えるが、今後のバージョンアップで非推奨になる可能性が高いとのことなので、今の…

なぜ useEffect では無限ループが起こり得るのか

React のuseEffectは、その仕組み上、書き方によっては無限ループが発生してしまう。 それはなぜ発生するのか、そしてどう対処すればいいのか。一度理解してしまえば大した話でもないのだが、自分の理解を整理するために書いておく。 動作確認に使った React…

React の関数コンポーネントが再呼び出しされる条件

マウントされた関数コンポーネントが再び実行されるのは、どのようなケースか。 stateが更新されたら再実行されるんでしょ、くらいの曖昧な理解だったので、検証して整理した。 reactとreact-domのバージョンは16.10.2。 動作確認にReact Developer Toolsも…

React Hooks + Redux Hooks + TypeScript で SPA を構築する(追記あり)

2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/…

Error Boundary で React アプリ内のエラーを捕捉する

Error Boundary は React のv16から導入された機能で、これを使うとコンポーネント内で発生したエラーをキャッチすることが出来る。 主に、エラー用のUIを表示したり、エラーを記録したりすることに使われる。 前者にはstatic getDerivedStateFromErrorとい…

useEffect の概要と async function を使う際の注意点

使用している React のバージョンは16.8.4。 レンダー後の処理を指定するための仕組み React Hooks の一つであるuseEffectは、レンダー後に実行したい処理を React に伝えるための仕組み。 useEffect(fn)と記述すると、DOMの更新が終わったあとにfnを実行す…

Redux Middleware の仕組みと作り方

Redux の機能を拡張し、非同期処理などを書きやすくする仕組みである Redux Middleware について書いていく。 この記事で使っているライブラリのバージョンは以下。 redux@3.7.2 react-redux@5.0.7 react@16.2.0 react-dom@16.2.0 Redux の基本については、…

Reactをv16に上げるために行ったこと

去年の9月、Reactのv16がリリースされた。 自分も、15.xからバージョンアップする機会があった。 破壊的変更もいくつかあるが以前からアナウンスされていたし、あまり難しくはないはず。 何より、公式が丁寧なドキュメントやツールを用意しているから、それ…

Higher-Order Components と Recompose の初歩

Higher-Order Components(以下、HOC)は、Reactのコンポーネントを作る際のパターン。 HOCを使うことで、複数のコンポーネントで使っている処理を共通化したり、SFCにライフサイクルメソッドを追加したりすることが出来る。 基本的な構造 HOCは、以下のような…

Enzymeのv3でshallowすると自動的にcomponentDidMountが呼ばれる

Reactのバージョンを16に上げるのに伴いEnzymeのバージョンを3にしたら、一部のテストが壊れた。 調べたところ、v3からshallowの挙動が変わったことが原因だった。 https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md#life…

Reactのコンポーネントにpropsを渡さない場合のFlowの書き方

Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Compo…

ReactのコンポーネントにFlowの型をつける

以前の記事でFlowの導入が完了し、Reactを使って書いたコードに型を付けることが出来るようになった。 ここからは実際に、Reactのコンポーネントに型を付けていく。 Flow導入の記事はこちら。 なお、この記事を書いている環境のFlowのバージョンは、0.46.0。…

ReactにFlowを導入して型チェックを行う

JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…

React Router v4 の基本的な考え方と使い方

React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: …

webpack2の初歩

今まで、複数のファイルのバンドルにはbrowserifyを使っていた。 特に不満はなかったのだが、webpackに乗り換えていくことにした。 ネット上の記事を見てもwebpackを使っているケースは多いし、webpack-dev-serverという開発用サーバーも簡単に立てられるら…

JestでReactのテストをする(6) 非同期のテスト

経験を重ねることでテストの書き方にも少しずつ慣れてきたのだが、非同期のテストには未だに苦手意識がある。 今回書いた内容についても、これがベストプラクティスだとは思わない。 実戦でやろうとすると、いろいろと課題が出てくると思う。 ただ、自分なり…