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

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

npm link で OSS 活動の効率を上げる

npm

npm にはlinkというコマンドが用意されており、これを使うことで npm パッケージの開発効率が上がる。 既存のパッケージに手を加えた際の動作確認にも使えるので、OSS 活動の効率も上がる。 この記事では、npm linkの仕組みと、それをどのように利用できるの…

npm パッケージを CLI ツールとして機能させる仕組みについて

npm パッケージのなかには、CLI ツールとしての機能を持っているものがある。 ESLint や Mocha、Jest などは、多くの人が使っていると思う。 この記事では、それらのパッケージがどのようにして CLI ツールとして機能しているのか、その仕組みについて説明す…

ツリー図を簡単に作れるウェブアプリを作った話と、抽象的思考力の話

他の図形も作れるようにしたい気持ちはあるが、今はツリー図だけ。 shape-painter.numb86.net ソースも公開している。 github.com 作った動機 単純に、自分が欲しかった。 図形を作成するツールは、もっと高機能で高品質なものが、他にたくさん存在する。だ…

package.json の resolutions を使って依存パッケージのバージョンを指定する

package.jsonのresolutionsフィールドを使うことで、依存ツリーの深い部分にあるパッケージのバージョンを固定することが可能になる。 現在のところ Yarn でのみ使える機能だが、サードパーティが公開しているライブラリを使うことで npm でも使えるようにな…

package.json やロックファイルによるパッケージの依存関係の管理

この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認…

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

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

『GitHub Actions 実践入門』を読んだ

タイトル通り、GitHub Actions の入門書。いわゆる技術同人誌で、商業出版されたものではない。 「技術書典 応援祭」で、電子版と紙版のセットを買った。 techbookfest.org 「技術書典 応援祭」は既に終了しているが、電子版は今も BOOTH で買える。 booth.p…

『ハイパフォーマンス ブラウザネットワーキング』を読んだ

ウェブに関するネットワーク技術について網羅的に扱った書籍。 TCP や UDP のようなトランスポートプロトコルの話から、WebSocket や WebRTC のようなブラウザで使える API まで、幅広く扱っている。 www.oreilly.co.jp 読書メモは Gist に置いた。 『ハイパ…

ルーティング機能を自作して学ぶ History API

History API は、HTML5 で導入された API。 これを使うことで、JavaScript で URL の履歴を管理できるようになる。 多くの場合、そういった操作は React Router や Vue Router などのルーティングライブラリを通して行うことになる。そのため、History API …

store.replaceReducer で reducer を入れ替える

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

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 の状態管理についての論点整理

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

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

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

forwardRef と useImperativeHandle

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

React Ref の基本

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