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

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

『仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん』を読んだ

今まで読んできた Docker の入門書や入門記事のなかで一番分かりやすく、ようやく Docker に入門できた気がする。 Docker を学ぼうとして何度も挫折してきた人におすすめ。 本書の「はじめに」に書かれている通り入門者をターゲットにしており、それを徹底し…

Chrome に新しく実装された App History API で SPA を作ってみる

Single Page Application(以下、SPA)を構成する技術要素のひとつに、History API がある。この機能によってページ遷移の履歴を管理できるようになり、SPA を成立させることができる。 しかしこの History API はお世辞にも使いやすいとは言い難い。作られ…

Drop トレイトと Deref トレイトについて

この記事では、Rust のDropトレイトとDerefトレイトについて説明していく。 それぞれdropメソッドとderefのメソッドを必須としているが、これらのメソッドを明示的に呼び出すことは稀で、多くの場合暗黙的に呼び出される。 トレイトそのものの初歩については…

なぜ組織の透明性が大切なのか

個人的に、組織の透明性というものに関心を持っている。自分にとって大切なことだし、組織にとっても大切だと思っている。 この記事では、透明性に対する現時点での考えを書いていく。今の自分の頭のなかのスナップショットのようなものなので、あまり整理さ…

Rust のトレイトの初歩

トレイトを使うと、任意の振る舞いを抽象化し、それを複数の型に持たせることができる。 この記事では、トレイトの基本的な使い方を見ていく。 Rust のバージョンは1.55.0、Edition は2018で動作確認している。 基本的な書き方 例として、IceCreamとEnglishC…

動的コンテンツのキャッシュを最適化するプッシュ型アーキテクチャ

エッジサーバからのレスポンスは速い。 コンテンツを CDN のエッジサーバにキャッシュしてそれを返すようにするだけで、ウェブサイトの速度は目に見えて改善される。 特に、リクエストの度にサーバで動的に生成されるコンテンツの場合、キャッシュを利用する…

Deno で 学ぶ React のサーバサイドレンダリング

Deno で React のサーバサイドレンダリング(以下、SSR)を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーション…

Cloudflare Workers KV をキャッシュとして使う

Cloudflare Workers KV を使うと、ストアに保存した値を HTTP レスポンスとして使うことができる。 そのため、オリジンサーバに問い合わせて得られた結果をストアに保存しておくことで、キャッシュのように使うことができる。 この記事では、Workers KV をキ…

Cloudflare Workers KV の初歩

Cloudflare Workers KV は、Cloudflare のエッジサーバからアクセスできる、グローバルなキーバリューストア。 Workers スクリプトからアクセスして使う。 各エッジサーバ毎に存在するのではなく全てのエッジサーバが共有するストアであるため、API など様々…

Cloudflare CDN での Cookie の取り扱いと注意点

CDN のエッジサーバにキャッシュされたコンテンツは、最初にアクセスしたクライアント以外にも利用される。 例えば、キャッシュが存在しない状態で A というクライアントがhttps://example.com/someにアクセスした場合、オリジンサーバがコンテンツを返す。…

有効期限切れのキャッシュをそのまま再利用させないための must-revalidate ディレクティブ

レスポンスヘッダのCache-Controlフィールドに設定できるディレクティブとして、must-revalidateがある。 これは、有効期限が切れたキャッシュをそのまま再利用することを許可せず、必ずオリジンサーバに問い合わせることを指示するディレクティブである。 …

Cloudflare を使ったキャッシュの基礎

CDN のエッジサーバにコンテンツをキャッシュしておくことで、コンテンツのダウンロードを高速化できる。 エッジサーバは物理的にユーザーに近い場所にあり、レイテンシが小さくなるため。また、エッジサーバは配信に最適化されているため、その点でも高速化…

HTTP ヘッダを使ったキャッシュと Service Worker を使ったキャッシュの関係

ブラウザは HTTP ヘッダを使ってキャッシュの制御を行うが、それ以外にも Service Worker と CacheStorage を使ったキャッシュも存在する。 Service Worker はリクエストを制御し書き換えることが可能なので、HTTP ヘッダの指定を無視した振る舞いをさせるこ…

Route 53 + Cloudflare + Heroku で Deno アプリを公開する

先日、砂場として使うために以下の構成のウェブアプリを作った。 Deno で作ったアプリケーションサーバを Heroku で公開し、それを Cloudflare 経由で配信する ドメインは Route 53 で取得したものを使う Heroku も Cloudflare も無料プランを利用する 忘れ…

Service Worker のインポートを理解する

Service Worker では、importScriptsを使うことでスクリプトをインポートできる。 ES Modules (以下、ESM)を使うこともできるが、ブラウザによってはまだ対応していない。Chrome ではバージョン 91 から利用できるようになった。 この記事では、これらの機能…

Rust の所有権、参照、ライフタイムの初歩

Rust の所有権や借用に関する学習メモ。 Rust のバージョンは1.52.1、Edition は2018で動作確認している。 所有権 変数を値に束縛すると、変数はその値の所有者であり、その値の所有権を持っていると表現される。 以下のコードでは、_xは"foo"の所有者であり…

Service Worker の状態遷移を理解する

ServiceWorkerオブジェクトはstateというプロパティを持っており、その名の通り Service Worker の状態を示している。 この値は状況に応じて移り変わっていくのだが、どのようなタイミングでどう変化するのかについてメンタルモデルを構築できると、Service …

Service Worker のライフサイクルとスコープを理解する

Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していな…

フロントエンドのパフォーマンスチューニングを俯瞰する

去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった…

Deno Deploy で WebAssembly を動かす

Deno Deploy や Rust の練習として、Rust から出力した WebAssembly を Deno Deploy を動かしてみた。 その手順をまとめておく。 ローカルでの動作確認は以下の環境で行った。 rustc 1.50.0 cargo 1.50.0 Deno 1.9.2 deployctl 0.3.0 使用しているクレートの…

Web Worker (Dedicated Worker) によるマルチスレッド処理

JavaScript は基本的にシングルスレッドであり、並列処理を行うことはできない。 そのため何か重たい処理があると、それによってメインスレッドが専有されてしまい、後続の処理が遅延してしまう。 その結果、ウェブアプリの速度や操作性に悪影響を与えてしま…

Deno で学ぶ HTTP/2 の仕組み

先日 Deno のv1.9がリリースされ、HTTP/2 に対応したサーバを立てられるようになった。 deno.com zenn.dev この記事では Deno で実際にサーバを立てながら、HTTP/2 の特徴を見ていく。 動作確認は以下の環境で行った。 Deno1.9.0 Google Chrome90.0.4430.72 …

『コンピュータシステムの理論と実装』を読んだ

「コンピュータが動いている仕組みを知りたい? だったら実際に作ってみるのが一番!」というわけで実際にコンピュータを作っていく、他に類を見ない一冊。 単純な電子回路から始まってアプリケーションソフトウェアの開発まで行うので、各論よりもまずは全…

恒等関数と extends キーワードを使った TypeScript のテクニック

この記事の内容は TypeScript のv4.1.3で、compilerOptions.noUncheckedIndexedAccessを有効にした状態で動作確認している。 参考: zenn.dev 恒等関数(Identity Function)とは、渡されたものを返す関数。 function identity<T>(arg: T) { return arg; } const</t>…

React 要素を props で渡すことで不要な再レンダリングを回避する

この記事の内容は、React のv17.0.2で動作確認している。 React コンポーネントが入れ子になっているとき、親のコンポーネントが再レンダリングされると、子のコンポーネントも再レンダリングされる。stateの受け渡し等があるかどうかは関係ない。 そのため…

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

この記事を書いた文脈 みんな自分が好きな「おれはこれで独学した、文句あるか」記事を定期的に書いてこう— 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 に対応してものの、…

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

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