iPhone Duo対応でレスポンシブ設計を見直す。端末ではなく「available space」でレイアウトを決める
iPhone Duoでは、閉じた外画面、開いた内画面、Split ViewでSafariに与えられる領域が変わる。Duo上のWeb表示、確定している解像度、検証方法を確認し、deviceではなくavailable spaceを基準にしたレスポンシブ設計を考える。
Blog
Frontend posts
React + TypeScriptで動的画像を生成する。Satori、Sharp、Canvasの使い分け
WebアプリでOGP画像やSNSカードを動的生成するとき、クライアントとサーバーでは構成が変わります。React 19 + TypeScriptを前提に、SatoriでSVGを作り、ブラウザではCanvas、サーバーではSharpでPNGへ変換する流れを見ていきます。
古いReactをAIで書き換えてもリファクタリングにはならない。先に依存関係と副作用を分ける
面接で8年前のReact ClassコンポーネントをAIでリファクタリングする課題が出された。見られていたのは新しい構文へ書き換える速さではなく、依存関係や副作用をどう見つけ、どう分けるかだった。
JavaScriptのthisは「どこで定義したか」より「どう呼んだか」で決まる
JavaScriptのthisが何を指すのか。通常の関数、メソッド、call・apply・bind、new、アロー関数ごとの違いと、strict mode・ES Modulesで挙動が変わる点を、呼び出し方から読み解く。
JavaScriptで書く前にCSSでできないか考える――パララックスなど6つの実装を比較
パララックスやスクロール連動アニメーション、親要素の状態判定、コンテナークエリなど、JavaScriptで実装しがちな6つの処理をCSSへ移せる場面と注意点を、実装例を交えて紹介します。
AIエージェントが操作しやすいWebとは？SynWeaverから考えるフロントエンド設計
Webエージェント向けの学習データ生成手法SynWeaverを手がかりに、website map、semantic HTML、Accessibility Tree、状態遷移、E2Eテスト、AI自動操作と計測への影響をフロントエンド視点で整理します。