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

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

Node.js における ES Modules を理解する

記事執筆時点での最新版の Node.js では、モジュールシステムとして ES Modules を使うことができる。 また、CommonJS で書かれたモジュールを ES Modules で読み込むこともできる。 Node.js のモジュールシステムは複雑すぎて苦手意識があったので、整理し…

Let's Encrypt と Route 53 でローカル開発環境を HTTPS 化する

ブラウザの機能のなかには、HTTPS でないと利用できなかったり、HTTPS か HTTP かで挙動が変わったりする機能がある。 そのため、ローカル開発環境を HTTPS で構築したいことがある。 一番簡単なのは自己署名証明書を作成し利用することだと思うが、その場合…

『DNSをはじめよう ~基礎からトラブルシューティングまで~ 改訂第2版』を読んだ

DNS の入門書。かなり初歩的な内容で説明も丁寧なので、初心者でも問題なく読み進められる。 mochikoastech.booth.pm 必要な前提知識はほとんどなく、ウェブ開発に関する仕事をしたことがある人なら、誰でも読めると思う。 図や事例が豊富で、理解しやすい。…

『プログラミングTypeScript』を読んだ

非常によかった。TypeScript をきちんと学びたいという人は、是非読んだほうがいい。 ネットだとどうしても断片的な知識しか得られないが、本書を読むことで網羅的に学ぶことができる。 www.oreilly.co.jp 翻訳も素晴らしく、まったく問題なく読める。 現在…

Yarn のワークスペースの初歩

Yarn にはワークスペースという機能があり、これを使うとひとつのリポジトリで複数の npm パッケージを開発できるようになり、効率的に作業を進められるようになる。 この記事の内容は、Yarn のv1.22.4で動作確認している。 シンボリックリンクが作られ、パ…

TypeScript の型定義ファイルの探索アルゴリズム

npm パッケージは基本的に、JavaScript ファイルで配布されている。TypeScript で開発しているパッケージであっても、JavaScript にビルドしたものを配布している。 そのため、型定義ファイルによって型付けしないと、インポートした際にモジュール全体がany…

TypeScript の esModuleInterop フラグについて

esModuleInteropフラグを有効にすると、コンパイル時にヘルパーメソッドが生成されるようになり、モジュールシステムの相互運用性が高まる。 これにより、defaultをエクスポートしていない CommonJS 形式のモジュールを、ES Modules でデフォルトインポート…

TypeScript における変性(variance)について

プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはな…

TypeScript の共用体型(Union Types)は or ではない(追記あり)

〜2020/7/8 追記〜 本記事に対して指摘を頂いた。 qiita.com 「余剰プロパティチェックの存在やそのルールによってorではないかのように見える(ことがある)というだけで、型システム的にはorである」と、私は解釈した。 特に「余剰プロパティチェックは、…

TypeScript の条件型(Conditional Type)と infer キーワード

TypeScript には条件型(Conditional Type)という機能があり、これを使うと型定義に条件分岐を持ち込むことができる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 条件型の基本 T extends U ? A : Bが、条件型の構文。 TがUに割り当て可能…

TypeScript の型ガードの注意点と解決法

TypeScript には型を推論する機能があり、条件分岐の際に自動的に型を絞り込んでくれる。この仕組みを型ガード(Type Guard)と呼ぶ。 ただし万能ではなく、自動的な絞り込みが機能しないケースもある。その場合、isを使って開発者が TypeScript に型を教える…

TypeScript のルックアップ型と keyof キーワード

TypeScript のルックアップ型を使うと、定義済みの型の一部分を取り出すことができる。 keyofキーワードと組み合わせることで、オブジェクトの各キーの型を取り出すこともできる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 ルックアップ型…

TypeScript のジェネリック型の初歩

ジェネリック型は、型を定義したときには具体的な型を指定せず、型を利用する際に具体的な型が決まる仕組み。 後述するが、プレースホルダや関数のパラメータのようなものだと考えると、分かりやすい。 ジェネリック型はそれ自体が便利だし、TypeScript の他…

TypeScript の「オーバーロード」について

オーバーロードとは、関数に対して複数の型を定義すること。 複数の型を持つ関数を「オーバーロードされた関数」と呼んだりする。 オーバーロードによって、「渡された引数の数によって各パラメータの型が変わる関数」や「パラメータの型によって返り値の型…

Deno のモジュール管理やロックファイルについて

Deno では外部モジュールを利用する際、URL を指定してインポートする。 Node.js とは異なり、npm やpackage.jsonも使用しない。 ではどのようにモジュールを管理していけばよいのか。公式ドキュメントに書かれてある内容をまとめ、整理した。 Deno のv1.1.1…

Deno でも Visual Studio Code の支援を受けられるようにする

最近 Deno を触り始めた。 エディタには Visual Studio Code を使っているのだが、現状では、通常の TypeScript での開発のような「ゼロコンフィグで様々な支援を受けることができる」という状態にはなっていない。 Deno での構文がエラーになるし、インテリ…

script タグの書き方でウェブベージの表示速度やスクリプトの実行順序はどう変化するのか

ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。 そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。 この記事…

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があるが…