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

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

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

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

SPA を GitHub Actions でビルドして GitHub Pages にデプロイする

デプロイの自動化と History API のフォールバック設定を行うことで、GitHub Pages で SPA を公開できるようにする。 具体的なゴールは以下の通り。 masterブランチにプッシュすると、自動的にビルドが行われる ビルドした内容が GitHub Pages として公開さ…

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

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

TypeScript で抽象クラスと抽象メンバを使って変更に強いコードを設計する

TypeScript にはabstractキーワードという機能があり、これを使うことで抽象クラスや抽象メンバを宣言することができる。 この機能を上手く使ってクラスを作ることで、可読性が高く、変更にも強いコードを設計できる。 abstractキーワードを使ったクラスやメ…

TypeScript でクラスを書くための初歩

TypeScript は、まだ ECMAScript に追加されていない提案段階の機能を積極的に先取りしている。 それはクラスも例外ではなく、例えば先日リリースされたv3.8では、現時点ではまだ提案段階であるプライベートフィールドが使えるようになった。 この記事では、…

never 型を使った TypeScript のテクニック

「発生し得ない値」などのように説明されるnever型。 概念としては分かるのだが、実際にどのようなケースで使えばよいのかイメージできずにいた。 neverを使ったテクニックを調べていて多少のイメージは掴めてきたので、整理しておく。 動作確認は TypeScrip…

TypeScript の構造的部分型とプリミティブ型について

TypeScript の構造的部分型という概念は、直感的で分かりやすい。 だが一方で、Freshness やプリミティブ型の挙動など、よく理解しておかないと戸惑ってしまうような挙動も多い。 例えば、なぜ以下のコードがエラーにならないのか、最初は分からなかった。 c…

SameSite 属性を使った Cookie のセキュアな運用を考える

Cookie に対しては「属性」というものを設定することができる。そして属性の設定内容によって、Cookie の生存期間を指定したり、送付先の制限を行ったりすることが可能になっている。属性のひとつであるSameSiteは、正しく使うことでセキュリティ対策やプラ…

Cookie 概説

Cookie とは、HTTP でステートフルなやり取りを実現するために、ブラウザとサーバ間で情報を送受信する仕組みである。 HTTP は本来ステートレスなプロトコルである。そのため、同一のユーザーが連続でリクエストを行っても、それぞれ独立したリクエストであ…

CSS で斜線を描画する

CSS

HTML や CSS に、斜線を描画するための仕組みは用意されていない。 だがlinear-gradientを利用することで、このような斜線を描画できる。 「Can I use...」で確認すると、主要なブラウザは全てlinear-gradientに対応している。 linear-gradientはその名の通…

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

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

Dynamic import() で JavaScript ファイルを動的に読み込む

ECMAScript では、モジュールを読み込むための仕組みとしてimport文を定義している。 // sub.js export const foo = 1; export default 2; // main.js import value, {foo} from './sub.js'; console.log(value, foo); // 2 1 import文は仕様上、トップレベ…

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 #2 Advent Calendar 2019の20日目の記事です。 パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解する…

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

この記事はReact #2 Advent Calendar 2019の17日目の記事です。 なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さ…

『白と黒のとびら オートマトンと形式言語をめぐる冒険』を読んだ

オートマトンの世界に触れることが出来る技術書、ではなくて、ファンタジー小説。 今年はいろいろとよい本を読めたが、これも非常によかった。 本当によく出来ていて、物語と学習が高度に融合している。 以下の出版社のサイトで、プロローグと1章が無料で公…

forwardRef と useImperativeHandle

この記事はReact #2 Advent Calendar 2019の6日目の記事です。 コンポーネント内の DOM 要素にRefオブジェクトを渡すための機能であるforwardRefと、コンポーネントにメソッドを生やす Hooks であるuseImperativeHandleについて、説明する。 どちらもRefオブ…

React Ref の基本

この記事はReact #2 Advent Calendar 2019の5日目の記事です。 React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて…

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

この記事はReact #2 Advent Calendar 2019の4日目の記事です。 クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決して…

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

この記事はReact #2 Advent Calendar 2019の3日目の記事です。 宣言的と命令的の対比 React の特徴のひとつとして、UI を宣言的に記述する、というものが挙げられる。 これは、UI の最終結果だけを記述する、ということである。 データと UI が一対一で、こ…

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

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

『基礎からわかるTCP/IP ネットワークコンピューティング入門 第3版』を読んだ

ネットワークの勉強のために読んだ。 www.ohmsha.co.jp 勉強したい分野の一つにネットワークがあり、何かよい本はないかと探していたとき、以下のツイートが流れてきた。 TCP/IPをコンピューターの側面から理解したい人にはしつこく『基礎からわかるTCP/IP …

『WEB+DB PRESS Vol.113』の「体験 ドメイン駆動設計 モデリングから実装までを一気に制覇」を読んだ

ドメイン駆動設計(以下 DDD)に関心があるので読んでみた。 私のような初心者にも分かりやすい内容だったので、DDD に興味を持ったけど挫折した、という人は読んでみるといいと思う。 gihyo.jp DDD に関心を持ったキッカケはよく覚えていて、今年の2月。 SP…

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

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

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

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

ターミナルで直前に実行したコマンドをクリップボードにコピーする

bash のバージョンは5.0.11(1)-release (x86_64-apple-darwin18.6.0)。 動機 Git のコミットメッセージに、その差分を生み出したコマンドを書くことがよくある。 例えば以下のように。 $ yarn run lint:fix $ git commit -am '$ yarn run lint:fix' コミット…

『アルゴリズム図鑑 絵で見てわかる26のアルゴリズム』を読んだ

プログラマとしての基礎体力をつける、が今の関心事なので、アルゴリズムとデータ構造についても勉強しようと思っている。 その第一歩として、評判のよかった本書を読んだ。評判通りの良書だった。 www.shoeisha.co.jp Apple の「Best of 2016」の一つにも選…

『TCP/IPの絵本 第2版 ネットワークを学ぶ新しい9つの扉』を読んだ

ネットワークについて(も)勉強しようと思っており、手始めに読んだ。 www.shoeisha.co.jp 「○○の絵本」というシリーズで既に何冊も出版されており、以前『UNIXの絵本』を読んだことがある。 シリーズに共通しているのだと思うが、見開き2ページで1セクショ…