個人のナレッジやdotfilesの管理ではClaudeのMaxプランでClaude Codeを使っています。ある案件で「Claude CodeをAWS Bedrock経由で使ってほしい」という指定が入り、Bedrock版のセットアップが必要になりました。ただ個人作業では引き続きMaxプランを使いたいので、同じマシンでBedrockとMaxプランをコマンドで切り替えられるようにしました。 全体像claude # デフォルト：Bedrock（案件用）cc-my # エイリアス：Anthropic API直接（個人Maxプラン）デフォルトをBedro...

はじめに以前から少し気になっていた、比較的新しい CSS プロパティの ::scroll-marker-group と ::scroll-button を使って Swiper を使ったカルーセル実装置き換えれないか試してみました。なぜ Swiper かというと、現在参画しているプロジェクトで使用されているのでうまくいけば移行できそうと思ったのと、JSカルーセルライブラリとして大きなシェアを持っているためです。 お題：Swiper の Infinite Loop デモ今回の置き換え対象は、Swiper 公式ドキュメントの Infinite Loop デモ です。個人的によく...

robots.txt は更新頻度が高くない分、必要な場面でも見直しを忘れがちです。そこで今回は、Next.js 前提の話ですが page.tsx が PR に含まれていたら、GitHub Actions で robots.txt の確認を促すコメントを付ける例を紹介します。 やったことやったことはシンプルで、PR の差分に page.tsx が含まれていたら、Botが「page.tsx が含まれています」「robots.txt を更新すべきか確認してください」というようなコメントをつけるだけです。これだけでも確認のきっかけとしては十分機能するかと思います。 page.tsx...

はじめにFeature-Sliced Design（FSD）のレイヤー依存ルール、人手で守るの辛くないですか？FSD (v2) は 6 つのレイヤー間で依存を上から下への一方向のみに制限するアーキテクチャですが、このルールは「気をつける」だけではいずれ破綻します。リンターで自動強制したいところです。FSD のルール強制ツールには主に 3 つの選択肢があります。ESLint (eslint-plugin-boundaries 等) - おそらく最も普及しています。no-restricted-imports やプラグインベースです。Steiger - FSD 公式のアーキ...

Claude Codeを使い始めたときに驚いたのは、ファイルを探索して構造や問題点を探し当てるのが上手なことでした。詳細なコマンドを指示しなくても、grepやfindを自ら実行して、コードベースを読み解いて回答を返してくれます。でも、精度が期待よりも低かったり、何かよくわからない処理を延々と繰り返していることもあります。たとえば次のようなことです。直前のやり取りや自分の回答に引っ張られて、遠回りなやり方に固執する会話が長くなるにつれて、途中の情報を見落としたり最初に渡した指示を忘れたりして精度が下がるその一方、CLIツールはAIエージェントのような柔軟性は高くありませんが、機...

概要Next.js で動的ルートを実装していた際に、少し気になる挙動に遭遇しました。npm run dev では問題なく表示できるのに、npm run build && npm run start で起動した環境では同じページが Internal Server Error になります。開発中は再現しないため、最初はルーティングやデータ取得の実装を疑っていたのですが、調べていくと App Router における静的生成と動的 API の扱いが関係していました。 検証環境next: 16.2.1react: 19.2.4react-dom: 19.2....

以前 Convex を少し触ったとき、自分の中ではかなりシンプルな印象がありました。TypeScript で書きやすくて、リアルタイム更新も自然に入ってくる。個人開発で試すぶんには手触りがよくて、「開発体験のいい BaaS」だな、という理解でした。https://zenn.dev/chot/articles/582c381a80d0d1この見方は、今読み返してもそこまで外れていないと思います。実際、今の pricing を見ると、Free & Starter は個人開発やプロトタイプ用途を意識した構成ですし、EU hosting も全プランで利用できます。ただ、最近あらた...

はじめにEC のカートまわりを実装していると、地味に判断が難しいのが「商品をカートに入れたあとで在庫が変わった時の挙動」です。たとえば、カートに商品を n 個入れたあと、別の注文で在庫が n 個を下回ったらどうなるのか在庫が 0 になったら、カート内の明細は消えるのか、数量が 0 になるのかそれは API エラーになるのか、成功しつつ warning が返るのか今回確認していたのは Shopify の Cart API まわりです。このあたりを把握しておかないと、商品詳細画面でどこまで防ぐか、カート画面で何を表示するか、チェックアウト前に何をブロックするかが決めづらく...

概要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 など既に類似するものはありますが、上記の様な関係性の分析はどうやら...