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

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

Dockerfile に入門して Node.js アプリを作ってみる

Docker への入門の一環として、自分で Dockerfile を作成し、それを使って Node.js アプリを Docker Container で動かしてみる。 Hello World Dockerfile を使うことで、既存の Docker Image を編集して新しい Docker Image を作ることができる。 具体的には…

Prisma に入門して API サーバを作ってみる

Prisma は、Node.js の ORM。 この記事では、導入方法、基本的な使い方について説明したのち、Prisma を使って簡単な API サーバを作ってみる。 Node.js のバージョンは16.13.2、MySQLのバージョンは8.0.28という環境で、動作確認している。 使用している np…

Next.js で始める GraphQL

この記事では、GraphQL を利用したアプリを Next.js で構築していきながら、GraphQL の初歩について書いていく。 GraphQL のクライアントもサーバも、Apollo を用いる。 また、できるだけ型安全に開発したいので、graphql-codegenで型定義ファイルを生成する…

Next.js で始める gRPC 通信

サーバ・クライアント間の通信を gRPC で行う場合、インターフェイスを定義した共通のファイルから、サーバとクライアント双方のコードを生成することができる。 この記事では、インターフェイスの定義ファイルを作成するところから始めて、gRPC を利用した…

引きこもり・日記・エンジニア人生

2 年ぶりに労働し始めたことでブログの更新頻度が露骨に落ちているが、文章を全く書いていないわけではなく、折に触れて社内で長文を投下している。 社内向けの怪文書ばかり書いていて、パブリックなブログを全然書けない。— なむ (@numb_86) 2021年12月29日…

React の新しい概念「トランジション」で React アプリの応答性を改善する

React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く…

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