技術選定を行う前にまず、どのような開発組織にしたいのか、どのように事業を進めていきたいのか、そこを整理しないと上手くいかない。 そんなことを最近考えていたので、ブログに書いておく。自分は書くことで思考を整理していくので。 この記事では、「技…
2019 年の夏に前職を辞め、そのまま無職として過ごし今年の 10 月にようやく再就職して働き始めた。 何か事情があって働けなかったわけではなく、プログラミングの能力を伸ばすために敢えて就職しなかった。 自分にとってそれなりに重要な期間だったと思うの…
今まで読んできた Docker の入門書や入門記事のなかで一番分かりやすく、ようやく Docker に入門できた気がする。 Docker を学ぼうとして何度も挫折してきた人におすすめ。 本書の「はじめに」に書かれている通り入門者をターゲットにしており、それを徹底し…
Single Page Application（以下、SPA）を構成する技術要素のひとつに、History API がある。この機能によってページ遷移の履歴を管理できるようになり、SPA を成立させることができる。 しかしこの History API はお世辞にも使いやすいとは言い難い。作られ…
この記事では、Rust のDropトレイトとDerefトレイトについて説明していく。 それぞれdropメソッドとderefのメソッドを必須としているが、これらのメソッドを明示的に呼び出すことは稀で、多くの場合暗黙的に呼び出される。 トレイトそのものの初歩については…
個人的に、組織の透明性というものに関心を持っている。自分にとって大切なことだし、組織にとっても大切だと思っている。 この記事では、透明性に対する現時点での考えを書いていく。今の自分の頭のなかのスナップショットのようなものなので、あまり整理さ…
トレイトを使うと、任意の振る舞いを抽象化し、それを複数の型に持たせることができる。 この記事では、トレイトの基本的な使い方を見ていく。 Rust のバージョンは1.55.0、Edition は2018で動作確認している。 基本的な書き方 例として、IceCreamとEnglishC…
エッジサーバからのレスポンスは速い。 コンテンツを CDN のエッジサーバにキャッシュしてそれを返すようにするだけで、ウェブサイトの速度は目に見えて改善される。 特に、リクエストの度にサーバで動的に生成されるコンテンツの場合、キャッシュを利用する…
Deno で React のサーバサイドレンダリング（以下、SSR）を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーション…
Cloudflare Workers KV を使うと、ストアに保存した値を HTTP レスポンスとして使うことができる。 そのため、オリジンサーバに問い合わせて得られた結果をストアに保存しておくことで、キャッシュのように使うことができる。 この記事では、Workers KV をキ…
Cloudflare Workers KV は、Cloudflare のエッジサーバからアクセスできる、グローバルなキーバリューストア。 Workers スクリプトからアクセスして使う。 各エッジサーバ毎に存在するのではなく全てのエッジサーバが共有するストアであるため、API など様々…
CDN のエッジサーバにキャッシュされたコンテンツは、最初にアクセスしたクライアント以外にも利用される。 例えば、キャッシュが存在しない状態で A というクライアントがhttps://example.com/someにアクセスした場合、オリジンサーバがコンテンツを返す。…
レスポンスヘッダのCache-Controlフィールドに設定できるディレクティブとして、must-revalidateがある。 これは、有効期限が切れたキャッシュをそのまま再利用することを許可せず、必ずオリジンサーバに問い合わせることを指示するディレクティブである。 …
CDN のエッジサーバにコンテンツをキャッシュしておくことで、コンテンツのダウンロードを高速化できる。 エッジサーバは物理的にユーザーに近い場所にあり、レイテンシが小さくなるため。また、エッジサーバは配信に最適化されているため、その点でも高速化…
ブラウザは HTTP ヘッダを使ってキャッシュの制御を行うが、それ以外にも Service Worker と CacheStorage を使ったキャッシュも存在する。 Service Worker はリクエストを制御し書き換えることが可能なので、HTTP ヘッダの指定を無視した振る舞いをさせるこ…
先日、砂場として使うために以下の構成のウェブアプリを作った。 Deno で作ったアプリケーションサーバを Heroku で公開し、それを Cloudflare 経由で配信する ドメインは Route 53 で取得したものを使う Heroku も Cloudflare も無料プランを利用する 忘れ…
Service Worker では、importScriptsを使うことでスクリプトをインポートできる。 ES Modules (以下、ESM)を使うこともできるが、ブラウザによってはまだ対応していない。Chrome ではバージョン 91 から利用できるようになった。 この記事では、これらの機能…
Rust の所有権や借用に関する学習メモ。 Rust のバージョンは1.52.1、Edition は2018で動作確認している。 所有権 変数を値に束縛すると、変数はその値の所有者であり、その値の所有権を持っていると表現される。 以下のコードでは、_xは"foo"の所有者であり…
ServiceWorkerオブジェクトはstateというプロパティを持っており、その名の通り Service Worker の状態を示している。 この値は状況に応じて移り変わっていくのだが、どのようなタイミングでどう変化するのかについてメンタルモデルを構築できると、Service …
Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していな…
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった…
Deno Deploy や Rust の練習として、Rust から出力した WebAssembly を Deno Deploy を動かしてみた。 その手順をまとめておく。 ローカルでの動作確認は以下の環境で行った。 rustc 1.50.0 cargo 1.50.0 Deno 1.9.2 deployctl 0.3.0 使用しているクレートの…
JavaScript は基本的にシングルスレッドであり、並列処理を行うことはできない。 そのため何か重たい処理があると、それによってメインスレッドが専有されてしまい、後続の処理が遅延してしまう。 その結果、ウェブアプリの速度や操作性に悪影響を与えてしま…
先日 Deno のv1.9がリリースされ、HTTP/2 に対応したサーバを立てられるようになった。 deno.com zenn.dev この記事では Deno で実際にサーバを立てながら、HTTP/2 の特徴を見ていく。 動作確認は以下の環境で行った。 Deno1.9.0 Google Chrome90.0.4430.72 …
「コンピュータが動いている仕組みを知りたい？ だったら実際に作ってみるのが一番！」というわけで実際にコンピュータを作っていく、他に類を見ない一冊。 単純な電子回路から始まってアプリケーションソフトウェアの開発まで行うので、各論よりもまずは全…
この記事の内容は TypeScript のv4.1.3で、compilerOptions.noUncheckedIndexedAccessを有効にした状態で動作確認している。 参考: zenn.dev 恒等関数（Identity Function）とは、渡されたものを返す関数。 function identity<T>(arg: T) { return arg; } const</t>…
この記事の内容は、React のv17.0.2で動作確認している。 React コンポーネントが入れ子になっているとき、親のコンポーネントが再レンダリングされると、子のコンポーネントも再レンダリングされる。stateの受け渡し等があるかどうかは関係ない。 そのため…
この記事を書いた文脈 みんな自分が好きな「おれはこれで独学した、文句あるか」記事を定期的に書いてこう— keiichiro shikano λ♪ (@golden_lucky) 2021年1月7日 twitter.com みなさんもぜひ思い出書いてみて欲しい。 https://t.co/ZqomOZD6Ob— V (@voluntas…
React で開発が進められている Concurrent Mode。 まだリリース前の開発中の機能だが、「実験的機能」として提供されており、Experimentalビルドをインストールすることで利用できる。 Experimentalはリリース間の安定性を何も保証しておらず、破壊的変更が…
Lighthouse の Performance スコアを52から94に上げた。 Before。 After。 施策として具体的に何を行ったのか、書いていく。 経緯 以前、Shape Painter という SPA を作った。 構成はシンプルで、エントリポイントはひとつだけ。そしてそこで、ライブラリの…
