はてなブックマーク

2025年5月23日開催された Anthropic「Code w/ Claude」内セッション Mastering Claude Code in 30 minutes にて Claude Code GitHub Actions（claude-code-action） が紹介されていました。 試したことがなかったので動かしてみることにします。 この記事でやること Claude Code Action を使って GitHub 上で Claude Code を動かす セットアップ手順をハンズオンで確認する やることのイメージ やらないこと GitHub Actions の説明 GitHub CLI (gh) の導入や使用方法 Claude Code Action とは何か Claude Code Action は、GitHub Actions のワークフロー上で Claude を実行し、Issu

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

はじめに あなたのTailwind CSS、ベースラインに準拠していますか？ Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。 本記事では、Tailwind CSS v4が生成したCSSファイルに対して、stylelint-plugin-use-baselineでWeb Platform Baseline準拠チェックを行う手法を紹介します。 Web Platform Baselineとは Baselineは、主要ブラウザ（Chrome, Edge, Firefox, Safari）での機能サポート状況を示す指標です。 2023年末時点で全主要ブラウザが対応している機能だけで開発しているのであれば「Baseline 2023に準拠している」

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

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

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

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。 今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。 このアプリの約9割はLLM（コーディングエージェント）による実装です。 人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。 作ったのはこちら この記事では、使ったツールのセットアップから完成までの流れをまとめます。 また、コードやプロンプトの詳細より「どう進めて短期リリースしたか」という工程に絞って紹介してます。 作りたかったもの 一言で言えば、自分だけのおすすめ商品をまとめた比較サービスです。 日頃から「それの何が良いのか、買ってどうだったのか」を人に話すことがあり、その記録を Notion に溜めていたのですが、「公

Reactでは、JSXを返す関数を組み合わせてアプリケーションを作っていきます。それらの関数は<Component />のように呼び出すこともあれば、Component()のように呼び出すこともあります。後者を使用する機会は多くないかもしれませんが、例えばrender hooksパターンによってカスタムフックからUIを返したいときに使われることがあります。 一見どちらも同じようにJSXを返しますが、Reactはそれらをまったく異なるものとして扱います。 この投稿では、2つの呼び出し方の違いと、それによって挙動がどう変わるのかを見ていきます。 「コンポーネント呼び出し」と「関数呼び出し」 ここでは、JSXを返す関数をJSX関数と呼びます。 JSX関数を<Component />と呼び出すことをコンポーネント呼び出し、Component()のように呼び出すことを関数呼び出しとします。また、コン

Next.jsのドキュメントやQiitaなどでは、URLの末尾に .md を付けるとページ内容を生のMarkdownで取得できます。AIエージェントにコンテキストを渡したり、別クライアントから取り込んだりするのに便利なパターンです。 この記事では Rewrites + Route Handlers（App Router） で、/post/hello はHTML、/post/hello.md は text/markdown を返す“二刀流配信”を実装します。 前提 Next.js 16.0.0 (App Router) React 19.2.0 Markdownでコンテンツを管理している 動作イメージ /post/hello-world -> 通常のWebページ (HTML) /post/hello-world.md -> Markdownがレスポンスされる Demo GitHub ディレク

ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。 原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。 SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。 分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。 そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を簡潔にお伝えします。 RSCペイロードを覗く Next.jsでRSCペイロードがどう扱われているのか、実際に覗いてみます。 以下の3つのファイルを用意して確かめます。 import ClientCompon

ちょっと株式会社の KindBurger です！ 本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。 また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉 これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とは ざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。 自然言語のプロンプトや画像、Figma ファイルなどから、 React / Next.js / Tailwind CSS / shadcn/ui といったモダンな技術スタックのコードを生成してくれます。 さらに、汎用的な AI ツールとは異なり、Vercel エコシステムに最適化されている点も大きな特徴です。 より詳しく知りたい方は、

CodexやClaude Codeなどの普及により、ターミナル環境に触れる時間が増えた方も多いのではないでしょうか。 私自身もともとターミナル環境が好きで、日常のなかで最も長く接している画面とも言えます。 普段使っているターミナルの画面 毎日使うターミナル環境だからこそ、もっと便利に、もっと楽しく使えるものになれば素敵だと思いませんか？ そんな気持ちで私のカスタマイズについて紹介していきます。 この記事が、ターミナル環境をすこし良くする一助になれば嬉しいです 🙏 前提 私の環境は以下の通りです。 仕事：Webエンジニア（フロントエンド） OS：macOS 15.6.1 シェル：zsh シェルのカスタマイズ zshを使っています。 最近のmacOSを使っている方であれば、デフォルトのシェルはこれのはずです。 一般設定 最低限のものだけなので、折り畳みで置いておきます。 zshrc # ベル

第1部：Vercel AI SDK Vercel AI SDKは、異なるAIプロバイダーAPIを統一インターフェースで扱えるTypeScriptライブラリです。一貫性のあるAPIデザインで複数のAIモデルを扱え、ストリーミング形式の応答処理もシンプルに記述できます。 コアアーキテクチャ マルチフレームワーク対応 AI SDKはReactだけでなく、モダンなJavaScriptフレームワーク全般をサポートしています。Next.js、Nuxt、SvelteKit、さらにはReact NativeのExpoでのモバイル開発でも可能です。各フレームワークに最適化された統合を提供し、それぞれのエコシステムに自然に溶け込むように設計されています。 プロバイダー非依存性 SDKは20以上の公式プロバイダーを統一されたインターフェースでサポートしています。主要なプロバイダーとして、OpenAI、Anthr

TypeScript の ORM である Prisma の話。 Primary Key 制約や Unique 制約のついたカラムを WHERE 句に指定してデータを取得する場合、通常は findUnique を使います。

Node.js アプリケーションを CommonJS (CJS) から ES Modules (ESM) に移行したのでやったことを書き記します。 今回移行したアプリケーションは、バンドラーを伴わない純粋な Node.js アプリケーションです。TypeScript で書かれており、ビルド時には単に tsc で型を落としているだけです。ビルド成果物には require / module.exports が残っていて各ファイル同士が参照し合う、古典的なCJSアプリケーションとなります。 Node.js バージョンが 20 とやや古いので、残念ながら TypeScript のまま実行させること(--experimental-strip-types)はできません。よってこの記事では引き続き TypeScript を JavaScript に変換してから実行する場合の ESM 対応です。 tsco

{ "$schema": "./node_modules/oxlint/configuration_schema.json", "plugins": [ "unicorn", "typescript", "oxc" ], "categories": {}, "rules": { "for-direction": "warn", "no-async-promise-executor": "warn", "no-caller": "warn", "no-class-assign": "warn", "no-compare-neg-zero": "warn", "no-cond-assign": "warn", "no-const-assign": "warn", "no-constant-binary-expression": "warn", "no-constant-condition":

この記事の概要 Tailwind CSS v4 を前提として、「未定義のクラスを指定した際に Lint エラーになるようにする」を eslint のプラグインで実現する。 私が知っている中で最も著名なプラグインは eslint-plugin-tailwindcss なのだが、Tailwind CSS v4 対応がまだベータ版である。 そのため今回は主に eslint-plugin-better-tailwindcss を使っていく。 環境 Tailwind CSS: v4.11.1 eslint: v9.32.0 typescript-eslint: v8.38.0 eslint-plugin-better-tailwindcss: v3.7.3 tailwind-variants: 2.1.0 Next.js: v15.4.5 React 環境のセットアップのために使用 最低限の実装と結

はじめに 皆さんは、個人開発や簡単なプロトタイプのWebアプリを作るとき、バックエンドはどうしていますでしょうか。 私の場合、ここ数年は「とりあえずSupabaseで」というのがお決まりの一手でした。PostgreSQLが使えて、認証やリアルタイム機能もサクッと実装でき、無料枠も十分です。 ですが最近、SNSやVibe Codingの文脈で「Convex」というBaaSの名前を見かけるようになりました。「開発体験が革命的」や「リアルタイム実装が驚くほど簡単」など、気になる評判ばかり。 今回は実際にConvexを軽く触ってみて、Supabaseと何が違うのか、特に「開発ワークフロー」と「コードの簡潔さ」に焦点を当てて比較してみることにしました。 技術選定の一環として、あるいは新しいツールに興味がある方の参考になれば幸いです。 アーキテクチャ思想の比較：SQL中心か、TypeScript-na

はじめに 日々の開発業務において、文字数を制限して表示するUIを開発する場面は数多くあると思います。 これらの文字を「何文字まで見せるか」「どうやって省略するか？」「表示が崩れないようにするには？」といった点は、デザイナーとエンジニアがすり合わせるべき要素です。 ですが「文字数を制限しているのに、なぜか表示がズレる…」という経験はないでしょうか？ それは単なる文字数制限の問題ではなく、フォントと文字幅の関係によって引き起こされている可能性があります。この記事では「文字数の制限」と「プロポーショナルフォントの影響」に関する設計上の注意点などを紹介します。 UI設計で見かける文字数制限のケース 以下のような場面で、限られたスペースに文字を表示するケースはあると思います。 ユーザー名や会社名などの表示枠 ボタンやタブ、表のカラムなど、横幅に制限のあるUI デザイナーからの要望 最大表示文字数を制

はじめに GitHub Copilot は、Visual Studio Code (以下、VS Code) で提供される AI を活用したプログラミングツールで、VS Code上で拡張機能としてインストールすることで使用できます。 主な機能として、コードを編集中のファイルに対して続きのコードを提案してくれる Completions や、 自然言語でプログラミングをサポートする Chat があります。 今回は、GitHub Copilot の Chat を使う上で知っていると便利な知識を紹介します。 GitHub Copilot Chat のモードを使い分ける GitHub Copilot Chat にはいくつかのモードがあり、用途に応じて適切な mode を選択することで効率的に作業を進めることができます。 モード名 説明 使い道

Next.jsを14系から15系に、Reactを18系から19系にアップグレードする作業をしていて感じたのが「計画的に進めないと、見通しがつけられなくてしんどいな」ということ。 最初は計画もなく一気に進めようとしていましたが、状況が把握しきれなくなり、情報を整理してから別ブランチでやり直すことになりました。 原因としては、色々なことを試しているうちに、何をしたからうまくいって、逆になぜうまくいかないかが把握できなくなったこと。 そして、レビューに出す前の最終確認がとてもやりにくいと感じましたし、整理されていない状態だとレビュアーの負荷がかなり上がってしまいます。 フレームワークのアップグレード対応に関する具体的なコード例は記事がありますが、計画的な進め方に関する記事は見かけないなと思ったのが、この記事を書いているモチベーションです。 もっといいやり方や追加情報などがあればコメントいただける

Intro 弊社で開発しているサービスの、ドメインを変更することになったときの話。 すでに旧ドメインで一部顧客に利用していただいていたため、旧ドメインは破棄せずに新ドメインにリダイレクトさせるようにしました。 DNSの設定やコードをいくらか修正し、リリースをしました。Webアプリを触って画像が表示されたりデータが取得更新できたりと、通常通り使えることを確認して一安心していました。 問題発生 すでに使っていただいていた社外ユーザーから「画像が表示されない」と連絡がありました。 スクリーンショットを見るとたしかに画像が切れてALTテキストが表示されていました。しかし同じ画面を自分のPCで閲覧すると正常に画像が表示されています。 先方のファイアウォールがホワイトリスト制にでもなっているのかと思い、ファイアウォールの設定をご確認くださいと返答しました。ですが「TCP/80(http)とTCP/44

Riveってなに？ Riveはリアルタイムでインタラクティブなアニメーションを作成できるツール ReactやFlutterといったフレームワーク向けライブラリを提供 作成したアニメーションを簡単にアプリへ統合できる！ Riveが使われているプロダクト ◆ Duolingo キャラクターの動きやリップシンク（音声に連動した口の動き）をリアルタイムで制御し、学習体験を豊かにしています！ ◆ Notion AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています！ Rive 3つの魅力！ Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。 1. 🤝 デザイナーとエンジニアの連携がスムーズ 従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、 Riveではコードでアニメーシ

きっかけ 個人開発のプロジェクトでStorybookのVRTをやりたくなったので、Chromaticを導入しました。 手軽に導入でき、テストも安定していて満足していたのですが、無料枠がちょっと心許ない感じでした。 5,000 free snapshots per month https://www.chromatic.com/pricing 有料プランは最安でも $149/ month と、個人で利用するには負担が大きい価格だったため、「それなら作っちゃおう！」と思ったのがきっかけです。 目指すもの PR作成時 or PRへの追加コミット時に以下が実行される環境を作ります。 Storybookのユニットテスト StorybookのVRT VRTが失敗したらPRのコメントで通知 VRTの結果をWeb上で確認できる 環境 Storybook: v8.3.6 Playwright: v1.48.

Zodとは Zod は、TypeScript ファーストのスキーマ宣言および検証ライブラリです。ここでは、スキーマという用語を、単純なものから複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指すために使用しています。 https://github.com/colinhacks/zod?tab=readme-ov-file#introduction ZodのREADMEには、上記のような記載があります。 私はanyやunknownのobjectに対して、バリデーションや型付けをする際に使用する事が多いです。その使用方法をサンプルコードと合わせて説明します。 本記事は、"zod": "3.23.8"のバージョンで検証した内容です。 基本的な使用方法 unsafeValueがstringである事を検証します。以下のような流れです。 stringSchemaを定義 stringSchem

先日、業務で開発しているmonorepoのESLintをv9にアップデートして設定ファイルをFlat Configに変更しました。 自分自身はmonorepoにFlat Configを導入するのが初めてでした。色々調べた結果、学びがあったりきれいにまとまった設定ファイルが作れたと感じたので共有します。 Flat Config自体は目新しいものではなくなってきているので、細かい使い方は他の記事や公式ドキュメントを御覧ください。 設定ファイル完成形 my-monorepoは各自のプロジェクト名に、some-workspaceは個別のワークスペース名に置き換えてください。

この記事について 上記の画像はこの現象について詳しく記載されているMartijn HolsさんのブログをGoogle翻訳したものになります。 このブログが現状の解答だと思っているので自分からは結論と経緯（思い出）しか書かないようにして Martijn Holsさんのブログを見るようにしてください。 結論 Virtual DOM内でstateをTextNodeとして反映している場合は翻訳かますことで発生しうる 解消策 <span> で囲む eslint-plugin-sayariというESLintプラグインが no-unwrapped-jsx-text というルールでタグで囲むように矯正できる 多言語化対応 Reactだけではない Virtual DOMの書き換えによって起こる問題なので 他のVirtual DOMを扱うライブラリでも起こり得る Chromeの拡張でVirtual DOMの内

TypeScriptで関数を書く際に、気をつけていることを記載しました。 BMIを計算する処理を例にして説明いたします。 引数をobject形式にする 引数をobject形式にする事で名前付き引数に近い形式になり、順不同になります。引数の順番に意味が無い関数でも、使用時にどの順番で引数を渡すか迷う事がありません。 const calculateBMI = (p: { height: number; weight: number }) => { // BMIの計算処理 }; calculateBMI({ height: 170, weight: 60 }); calculateBMI({ weight: 60, height: 170 }); 以下は、引数がobjectではありません。この関数だけ見ると特に違和感は無いと思います。しかし、上記に比べると情報量が減ります。特にheight, w