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

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

プログラミングを独学する上で実際に役に立った本

この記事を書いた文脈 みんな自分が好きな「おれはこれで独学した、文句あるか」記事を定期的に書いてこう— keiichiro shikano λ♪ (@golden_lucky) 2021年1月7日 twitter.com みなさんもぜひ思い出書いてみて欲しい。 https://t.co/ZqomOZD6Ob— V (@voluntas…

React の Concurrent Mode を使ってみる(2020年12月版)

React で開発が進められている Concurrent Mode。 まだリリース前の開発中の機能だが、「実験的機能」として提供されており、Experimentalビルドをインストールすることで利用できる。 Experimentalはリリース間の安定性を何も保証しておらず、破壊的変更が…

趣味で作っている SPA の Performance スコアを 40 点上げた

Lighthouse の Performance スコアを52から94に上げた。 Before。 After。 施策として具体的に何を行ったのか、書いていく。 経緯 以前、Shape Painter という SPA を作った。 構成はシンプルで、エントリポイントはひとつだけ。そしてそこで、ライブラリの…

webpack のコード分割の初歩

JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、…

ブラウザのレンダリングとスタイルシートについて

スタイルシートのダウンロードや実行が終わるまで、ブラウザはレンダリングをブロックする。 そのため、スタイルシートの配信やダウンロードを最適化することは、ウェブサイトのパフォーマンス向上につながる。 この記事では、スタイルシートのダウンロード…

requestIdleCallback を使って優先度の低い処理を後回しにする

ブラウザ内部で行われる処理は、基本的にシングルスレッドで行われる。 そのため、処理に時間がかかるタスクがひとつあると、後続のタスクの処理がその分だけ遅れることになる。 この「タスク」には、JavaScript の実行も含まれるし、画面の描画、ユーザーの…

テキストリソースを圧縮してウェブサイトのパフォーマンスを改善する

ウェブサーバが配信するリソースのサイズは、ウェブサイトのパフォーマンスを左右する重要な要素。 画像や動画を最適化するのと同様に、テキストリソースのファイルサイズも削減することで、パフォーマンスによい影響を与える。 圧縮したテキストリソースを…

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

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

フォーム送信時の 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 の他…