概要Cloudflare はしばらく前から Cloudflare Pages でデプロイされているサイトを Cloudflare Workers に移行することを勧めてきています。ビルド時に Hugo のバージョンを指定するための環境変数 HUGO_VERSION について Pages のドキュメントにしか書いていなかったため放置していたのですが、Workers でも設定したら動いたので移行することにしました。 前提Hugo 製の完全に静的なサイトです。Pagefind で検索機能を提供しています。これまでのデプロイは Pages の環境変数 HUGO_VERSION に...

2025年5月23日開催された Anthropic「Code w/ Claude」内セッション Mastering Claude Code in 30 minutes にて Claude Code GitHub Actions（claude-code-action） が紹介されていました。https://www.anthropic.com/events/code-with-claude-2025試したことがなかったので動かしてみることにします。 この記事でやることClaude Code Action を使って GitHub 上で Claude Code を動かすセットアップ...

「もうコード書いてない（=AIが全部書いてくれた）」系の話をより頻繁に耳にするようになりました。その一方、コードレビューまでもAIだけに任せるという現場はまだ多くないのではないでしょうか。AIが主開発者になったことでコードの生産スピードは上がる一方で、その生産スピードに対してレビューのスピードが追いつかない、あるいはレビュワーの負担が大きい、というのは昨今の開発現場の大きな課題の一つと言えるでしょう。そこで、我々開発者は少しでもレビュワーのペインを軽減すべく、より意識的かつ丁寧にレビューしやすいPRを作ることが重要になってきているように感じています。この記事ではレビューしやすいPR...

IntroHono は Web 標準の Request を受けて Response を返す Web フレームワークです。Cloudflare Workers や Bun などの JavaScript ランタイムは、(request: Request) => Response 関数(以後 fetch ハンドラー)を渡してやれば、それがそのまま HTTP ハンドラーとして機能します。Hono はそれらのランタイムが要求するインターフェイスを満たしているため、簡単に Hono とランタイムを組み合わせることができます。一方で Node.js は node:http モジュールの...

はじめにあなたのTailwind CSS、ベースラインに準拠していますか？Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。本記事では、Tailwind CSS v4が生成したCSSファイルに対して、stylelint-plugin-use-baselineでWeb Platform Baseline準拠チェックを行う手法を紹介します。 Web Platform BaselineとはBaselineは、主要ブラウザ（Chr...

microCMSのようなヘッドレスCMSは便利ですが、下書きした投稿のプレビュー機能はアプリケーション側で実装する必要があります。実装にあたって難しかったのは、静的ページをプレビュー時だけ動的レンダリングに切り替える設計でした。Next.jsの動的APIをどこで・どの条件で呼ぶかによって、通常時のキャッシュ戦略に影響が出てしまいます。加えて、プレビュー終了の仕組みやVercelのPassword Protectionとの共存など、周辺の設計判断にも時間を使いました。この記事では自分が詰まってしまったり、注意が必要と感じた箇所をまとめています。次のような流れで説明しています。プレ...

2026年になってしまいましたが、State of chot Inc. 2025 の集計結果を発表します！ State of chot Inc. とは？世界中のJavaScriptエンジニアのアンケートをもとに業界の動向やトレンドを調査する State of JavaScript というものがあります。それにならって、ちょっと社で働く皆さんのあれこれについて統計を取ってみようという企画です！（名前に "2025" と入っていますが、毎年やるかは未定です…… ！） 調査方法Google フォームを用いて回答を募集回答期間: 12/15 ~ 12/22 回答者合...

そのコマンド、本当に信頼しているだろうかWebフロントエンド開発では npx が良く使われていますよね。インストール不要で一発でコマンドを実行できて便利だと思います。MCP サーバーや AI 関連ツールも同じ配布形態が多くて、 npx のほかにもPythonを呼びだす uvx や pipx が使われることも。Web上に書かれているこれらのコマンドを実行するとき、なにをどこまで信頼しているのかが曖昧になりがちです。開発者を信頼しているのか、プラットフォームを信頼しているのか、評判を信頼しているのか、じぶんのコンピュータの防御を信頼しているのか。 安全だと錯覚してしまうイン...

はじめにGitHubのプロフィールページ（README）をカスタムしたくなったことはないでしょうか。よく見かけるカスタムパーツとして下図のような、readme-stats があります。readme statsこの画像は本家の github-readme-stats とは別で自作したものです。詳細はコチラこれは、自分のアカウントのリポジトリで使用されている言語を集計し可視化したものです。個人的に好きなパーツですが、デザインに飽きてきたので、スタイリッシュなデザインかつ、Golangのキャッチアップがてら作りたいなと思ったのが今回のモチベーションです。本記事では、その紹介...

OxCというRust製のJavaScriptコンパイラを使っているLinter, Formatterがそれぞれoxlint, oxfmtです. 今回この記事ではESLintからoxlintへの移行を試してみます.Rust製のコンパイラということで他のJavaScriptプラグインに比べてコードのastの変換やastの解析が早く, 処理がすぐ終わるのが売りっぽいです. ということで, 既存のESLint, Prettierを置き換えていきます.https://oxc.rs/docs/guide/introduction.htmlLinterの章を見ると, 大規模プロジェクトでは置き換...

CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれから知りたい方は前提知識へ 前提知識 そもそも「マスク」とは左の画像を、星の形にくり抜きたい。そのくり抜く行為を、この記事内では「マスク」と呼びます。※くり抜く行為はクリッピングであり、それを用いてマスクを行うのであればクリッピングマスクなのではないかというもっともな主張があると思いますが、CSSのプロ...

気になる技術を色々使って Web アプリを作っています変化の早い Web 技術、新技術や新機能を試す前に次の更新が出てしまいそう...なので、「いっそフルスタックで何か作ったら新しい技術に触る機会ができるのでは？」 と考えました。 題材：「この技術が好きな人は、この技術も好き」が分析できる Web 技術アンケートサイト個人開発で似た概念のものを作ったのですが、社内で Web 技術についてアンケートや分析をしたいというモチベーションがあるので、題材として丁度良さそうです。State of JavaScript など既に類似するものはありますが、上記の様な関係性の分析はどうやら...

記事の内容前回、Shadow DOMでIslands Architectureっぽく(CSS編)という記事を記載しました。今回はShadow DOMにある複数のアプリ間での共有したい状態の管理方法について記載します。 動作環境簡単なカウンターアプリを作ってみました。https://igara.github.io/multi-fw-demo/nextjs/multi_counter.html今回のアプリも前回と同様でNext.jsのSSGしたページをGitHub Pagesに公開し、ページ内にNext.js、Shadow DOM上にReactとVue2が動作しています。...

記事のモチベ定期的に、既存アプリケーションのリプレースの効率や、既存を残しつつ新規のアプリケーションを導入しやすい方法を考えることがあります。直近Vue2のプロジェクトをReactに変える相談があって今年度例の定期入ったかというモチベでこの記事を書いてます。前の定期時にはマイクロフロントエンドと向きあってみるというのをアウトプットしてたりしました。 記事の内容Shadow DOMの特性を使って、既存アプリケーションに対し、異なるWebフロントエンドの実装を入れてみたというものになります。既存のアプリケーションとShadow DOM内のCSSのスコープが分離できるため、Ta...

はじめに昨今、フルスタックフレームワークが浸透し、バックエンドとフロントエンドで型やコードを共有することは、モダンな技術を追い求める開発者にとって受け入れられつつあります。しかし、我々の前に立ちはだかるのはサーバーとクライアントの境界です。サーバー側の処理をまるで関数のように呼び出せたとしても、ネットワークを超える必要があるというウェブの基本的な構造は変わりません。送受信されるデータはシリアライズ可能でなければならず、開発者たちはSuperJSONなどのライブラリを用いてこの制約に対処してきました。本記事では、Effectを用いてこの境界を乗り越える方法を探ります。 Effe...

記事の内容としてデザインシステムなどがあり、色などのデザイントークンぐらいしか変わらない場合がある今回はshadcn/uiによる複数テーマがある場合、実装側でもStorybook上でテーマを切り替えて確認したい場合の対応例になるCSSのカスタムプロパティでテーマを変えるものであれば他でも応用できるものになっているStorybook上のメニューよりCSSを書き換えてStory上の色を確認できるように実装してみたとはいってもほぼAI実装 解説 動作環境Storybook 使用しているテーマについてshadcn/uiの公式にあるテーマのCSS内容をそのまま使用...

はじめにgrep では「try-catch がない async 関数」のような構造的な条件を表現できませんが、ast-grep/claude-skill を導入すると Claude が YAML ルールを生成し、1回のコマンドで条件に合致するコードを抽出できます。こんな時におすすめです：「〇〇がない関数」のような否定条件で検索したい関数やクラスなどコードの構造単位で検索したいgrep では表現が難しい複合条件で検索したい本記事では、ast-grep/claude-skill を導入して検証した結果を紹介します。 前提条件ast-grep がインストールされて...

はじめにアニメや映画など「作品」を検索するときに、以下のようなことで困ったことはないですか？昔見た作品をもう一度見たいけどタイトルを覚えていない好きなジャンルで検索しても見たいと思うものがなかなか見つからない例えば、「昔見たアニメで、主人公が料理を通じて人と繋がっていく話」をGoogleで検索しようとしても、なかなかその作品をピンポイントで見つけることは難しいです。「同じ感じの作品が見たい！」と思って同ジャンルで調べても「あれ、なんか思った内容と違う」となることが結構多いと思います。 類似検索なら、自分の言葉で探せるもし「心温まる家族の絆を描いた作品」と検索する...

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。このアプリの約9割はLLM（コーディングエージェント）による実装です。人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。作ったのはこちらhttps://www.shimizu-okini.com/この記事では、使ったツールのセットアップから完成までの流れをまとめます。また、コードやプロンプトの詳細より「どう進...

軽量でfetch準拠でOpenAPI由来の型推論・補完がそのまま効くopenapi-fetchを使ってみました パッケージインストールnpm install openapi-fetchnpm install -D openapi-typescript 1) OpenAPIを公開（今回はHonoを使用)/doc でスキーマを返す。import { OpenAPIHono } from '@hono/zod-openapi'export const app = new OpenAPIHono()app.doc('/doc', { openapi: '3.1.0'...