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

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

『THE MODEL』を読んだ

「科学的な営業」に興味があり、その分野の定番のひとつである『THE MODEL』を読んだ。 どのように営業プロセスを構築し機能させるのかについてコンパクトにまとまっているので、特に BtoB SaaS を提供している企業で働いている開発者は、一度読んでおくとよ…

技術選定の観点や技術の優劣について

技術選定を行う前にまず、どのような開発組織にしたいのか、どのように事業を進めていきたいのか、そこを整理しないと上手くいかない。 そんなことを最近考えていたので、ブログに書いておく。自分は書くことで思考を整理していくので。 この記事では、「技…

プログラミングを勉強するために 30 代半ばの 2 年間を無職として過ごした話

2019 年の夏に前職を辞め、そのまま無職として過ごし今年の 10 月にようやく再就職して働き始めた。 何か事情があって働けなかったわけではなく、プログラミングの能力を伸ばすために敢えて就職しなかった。 自分にとってそれなりに重要な期間だったと思うの…

『仕組みと使い方がわかる 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はリリース間の安定性を何も保証しておらず、破壊的変更が…