Claude Code で Shiki のテーマを見比べられるサイトを作った (Jotai もあるよ)
Shiki というコードシンタックスハイライターライブラリがあります。 https://shiki.style/ Shiki は多くのテーマバリエーションを提供しています。それらを並べて見比べたいと思い、Claude Code に作ってもら
stin's Blog
すてぃんの個人ブログです。技術的なこと、日常のこと、雑記など色々書きます。
2026年の目標
あけましておめでとうございました。 2025年の振り返りと2026年の目標を立てていきましょう。 2025年の振り返り 2025年の目標は以下です。 https://blog.stin.ink/articles/new-years-reso
ts-rest や他色々を試すために Todo アプリを作る
ts-rest という RPC ライブラリを見かけて気になったので、実際に Todo アプリを作って試してみました。 ts-rest とは https://ts-rest.com/ ts-rest は、REST API を型安全に実装するた
Hono Conf 2025 に参加してきたので感想を書く
2025年10月18日に開催された Hono Conf に現地参加したので、自分が見たセッションについて覚えている限りで感想を書きます。 https://honoconf.dev/2025 以下、「発表タイトル by 発表者名」で区切って書
Next.js on Cloudflare Workers (OpenNext) で Drizzle + D1 を使ったユニットテストを書く
OpenNext は Next.js アプリケーションを Vercel 以外に簡単にデプロイするためのツールです。Cloudflare Workers をサポートしています。 Cloudflare 自体も OpenNext によるデプロイを
Drizzle ORM を使った書き捨てスクリプトから Cloudflare D1 にアクセスしたい
Cloudflare D1 (以下 D1) は Cloudflare のリレーショナルデータベースサービスです。実態はリモートにある SQLite です。 Drizzle ORM は TypeScript で各種データベースに接続するデータ
resend-local というツールを作った
Resend というメール送信サービスがあります。 そのAPIエミュレーターをローカルで起動する npm パッケージを作りました。次のコマンドでサーバー http://localhost:8005 で起動します。 Resend SDK は
2025年の目標
あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/artic
ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える
ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H
指定したWebページを動く状態でクローンする方法
ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebペ
Honoの捉え方、またはNext.jsとの組み合わせ方
この記事は「Hono Advent Calendar 2024 シリーズ 2」17日目の記事です。 https://qiita.com/advent-calendar/2024/hono HonoというWebフレームワークがあります。Exp
記事をPicture-in-Pictureで読めるようにしてみた
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 https://developer.mozilla.org/en-U
Next.js 15にアップデートした
このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容 パッケージのアップデート 使っているNext.js関連のパッケージを一気にアッ
Rust始めてみた。JSONフォーマッターを作ってみた
唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由 始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopack
React useで非同期処理を簡単に扱う
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Re
React.FCを使うよ、理に適っているからね
唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方とし
viteがプラグインなしでできることを探る
pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.json
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く
このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたこ
Remix を Cloudflare Pages にデプロイするまでやってみる
Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx
2024年の目標
あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違
react-markdown をやめて remark から自力でレンダリングするようにした話
Intro このブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレ
ブログに Playwright で VRT を導入した
Intro 記事ページのスタイルを維持したまま内部実装に大きめの変更を加えたかったので、Visual Regression Test(VRT)を導入しました。 といってもあまりに簡易的な内容です。CI で自動化とか Chromatic とか
ポケモンBGMループ再生サイトの音声ファイルをキャッシュするために色々調べた
Intro 以前の記事でポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた話をつらつらと書きました。 https://blog.stin.ink/articles/pokemon-soundlibrary-on
ポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた
Intro https://pokemon-soundlibrary.stin.ink/ このポケモンのBGMを無限ループで再生できる Next.js 製サイトは、これまで Vercel にデプロイしていました。しかし Vercel にデプ
Next.js App Router の Static Exports の可能性を探るためにブログでやってみた話
Next.js Advent Calendar 2023 の12月4日の記事です。 https://qiita.com/advent-calendar/2023/next Static Exports とは Next.js の Static
stin.ink を Google Domains から Cloudflare Registrar に移管した
Cloudflare Registrar に移管した このブログもサブドメインとして使用されている stin.ink は、僕が持つ唯一のドメインです。Google Domains で取得して、色々サブドメインを生やして使っています。 半年ほ
個人ブログ開発でとても便利な Contentlayer を導入してみた
またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は N
Chakra UI は "use client" なしで使えるようになった「だけ」
Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると
ブログの記事ページに Table of Contents を設置したので実装方法などを書く
画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/to
ポケモンBGMループ再生サイトをアップデートした
https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンス
ブログのデザインを刷新した
このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意
localStorage に同期する React State を作るカスタムフック
React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ
ブログサイトを Next.js App Router に移行したので学びを書く
このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリン
個人ブログから Chakra UI を剥がして vanilla-extract を入れた(剥がした理由編)
すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から
2022 年振り返りを書き散らし
Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを
@vercel/og を使ってブログに動的 og:image 生成を実装した
Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introdu
Firebase Auth, Firestore, Functions for Firebase でサクッと管理者権限を割り振る
Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Fire
React + TypeScript 用の eslint セットアップメモ書き
Vite で立ち上げた React + TypeScript プロジェクトには eslint のセットアップはされていない。プライベートでちょっとライブラリを試すみたいなケースでしか Vite を使っていなかったので eslint なしで作
React でキーボードショートカットを設定するためのカスタムフックを実装する
以前、『ポケットモンスターダイヤモンド・パール』の BGM をループ再生できる Web サイトを作成しました。 https://dp-soundlibrary.stin.ink/ この Web サイトの実装については過去に Zenn に投稿
WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる
WebSocket でリアルタイム通信したいんじゃ WebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリ