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

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

ブラウザによるキャッシュの仕組み

ウェブサーバは、キャッシュに関する情報をレスポンスヘッダに含めることで、そのレスポンスで返したリソースをどのようにキャッシュすべきかをウェブクライアントに指示することができる。ウェブクライアントはその指示に基づいた処理を行う。 この記事では…

フォーム送信時の HTTP リクエストについて

この記事では、フォーム送信時に実際にどのようなデータが送信されるのか、ファイルを送信するためにはどうすればよいのか、などを Deno や curl で確認しながら見ていく。 動作確認に使った実行環境やツールのバージョンは以下の通り。 Google Chrome 85.0.…

Deno や curl で Cookie を扱う方法

Cookie そのものについての説明は、別途記事を書いているのでそちらを参照。 numb86-tech.hatenablog.com numb86-tech.hatenablog.com 動作確認に使った実行環境やツールのバージョンは以下の通り。 Google Chrome 85.0.4183.121 Deno 1.4.4 curl 7.54.0 Den…

Escodegen でサロゲートペアを扱う

Escodegen は AST からソースコードを生成する npm パッケージ。 互換性のある AST を渡せば自動的にソースコードを生成してくれるのであまり悩むことはないのだが、絵文字などのサロゲートペアを扱うときには注意が必要になる。 Power Assert Deno の開発時…

Power Assert Deno を作った

Deno で Power Assert を利用するためのモジュールを作った。 github.com Power Assert とは、テスト失敗時に詳細な情報を表示する仕組みのこと。 例えば以下のようなテストコードがあるとき、通常はx()とy.zのそれぞれの結果と、それらが一致しないことのみ…

AST で JavaScript のコードを変換する

ソースコードを AST(抽象構文木)と呼ばれるデータ構造に変換することで、ソースコードの検証や変換をプログラムによって行えるようになる。 例えば ESLint では、ソースコードを AST に変換して、それに対してチェックを行っている。 また、V8 などの Java…

Deno で CLI ツールを作る

Deno.argsやDeno.exitなどの機能を使い、Deno で CLI ツールを作っていく。 Deno のバージョンは1.3.1で動作確認している。 コマンドライン引数の受け取り方 渡されたコマンドライン引数は、Deno.argsで取得することができる。 例えば$ deno run cli.ts a b …

npm パッケージ はどのように利用されるのか

npm パッケージは、Node.js アプリによって使用されるだけでなく、モジュールバンドラがバンドルを行う際に使用されたり、CDN 経由でブラウザから使用されたりする。 この記事ではそれぞれのケースにおいて、npm パッケージとして配布されるファイルのうち、…

ブラウザにおける ES Modules の利用とパフォーマンスについて

現代の主要なブラウザでは、ES Modules(以下、ESM)を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のフ…

ES2020 でリリースされた import.meta について

ES2020 でimport.metaがリリースされた。 この機能を使うと、モジュールのメタ情報を取得することができる。 例えば、当該モジュールのパスを取得することができる。 モジュールのメタ情報を取得する機能であるため、CommonJS や Script モードで使用すると…

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 作った動機 単純に、自分が欲しかった。 図形を作成するツールは、もっと高機能で高品質なものが、他にたくさん存在する。だ…