Zenn

astro-typed-links で型安全にリンクを書く

概要 astro-typed-links は先月 v1.0.0 がリリースされたばかりの比較的新しい Astro Integration で、型安全にリンクを書けるようになる。 Astro の公式ブログ で紹介されていたので使ってみた。 環境 astro: 5.1.2 astro-typed-links は Astro v5 で追加されたばかりの astro:routes:resolved というフックを用いているため、Astro v5 が必須 astro-typed-links: 1.1.1 使ってみた インストールについては README に従って pnpm a...
Zenn

Next.js 環境で Storybook alternative の Ladle を試してみた

モチベーション Storybook は大変素晴らしいツールで非常にお世話になっているが、v6 時代に依存関係で多少面倒だった覚えがある。[1] そこで今後また Storybook 自体の更新の遅さが負債になるケースを想定し、代替ツールを調べてみて最初に見つけたのが Ladle だったので、これに移行できそうか調べてみた。 https://ladle.dev/ Ladle の依存関係については、React にしか対応しないという潔さもあってか Storybook よりはシンプルである。 webpack は使用しておらず、Vite を採用している。 Ladle を試してみる 私のユー...
Zenn

【Next.js】prefetch 時に fetch がどこまで動くのかを検証した

モチベーション Next.js の App Router で 全ページに dynamic rendering を強制している loading.js を一つも配置していない という状況のとき、prefetch(プリフェッチ)で fetch によるデータの取得が行われるのかの理解が曖昧だったため改めて検証した。 環境 Next.js v15.0.1 App Router 検証に使用したソースコードは下記に配置した。 https://gitlab.com/k1350/nextjs-15-prefetch-test Link コンポーネントの prefetch 以外の設定はすべて...
Zenn

Astro Studio が無くなるので接続先を Turso にする

概要 九月半ば、Astro DB に関する変更がアナウンスされました。 https://astro.build/blog/goodbye-astro-studio/ これまでの Astro DB は Astro Studio というプラットフォームを使用することが前提となっていたのですが、Astro Studio は廃止されることになりました。 その代わりに あらゆる libSQL データベースに接続可能になります。 接続先の例として挙げられているのは Turso です。 元々 Astro Studio は Turso のラッパーみたいなものだったので、今後は直接 Turso を使え...
Zenn

Web で縦書きの段組みレイアウトは意外と難しい

! 更新履歴 2024/08/31: コメントで教えていただいた内容を記事に反映 概要 Web で文字数が不定の文章を縦書き段組みでいい感じにレイアウトするのは意外と難しい、ということを紹介する記事です。[1] 環境 Next.js App Router: v14.2.5 React を簡単にセットアップしたかっただけで、ほとんど関係ないです Windows 11 Google Chrome: v127.0.6533.120 実装 今回は「小説のような長さ不定の文章を、縦書きかつ縦スクロールで読みたい」という要望に応えることを想定します。 長い文章を縦書きかつ縦ス...

React Query でキャッシュを活用・Authorization ヘッダの入れ方

アクセスのたびにフェッチしない方法、キャッシュの消し方、Authorization ヘッダの入れ方について。

gomock を使ってテストを書く

gomock を使ってモックを生成してテストを書く。

Riverpod の ConsumerWidget を使っていて 'DO NOT use BuildContext across asynchronous gaps.' が出たときの対応

Riverpod の ConsumerWidget を使っていて ‘DO NOT use BuildContext across asynchronous gaps.’ が出た場合、サジェストされる対応方法では解決しないので解決方法を記載する。

Flutter の Riverpod による状態管理

かつて BLoC パターンが使われていた時代から Flutter について全くキャッチアップしていなかったので Riverpod による状態管理をやる。

React Query と GraphQL Code Generator で Mutation

React Query を単体で使わずいきなり GraphQL Code Generator と組み合わせたために Mutation の実行方法がわからず手こずったので結論を書く。