はてぶ・Qiita・Zennのトレンド記事を紹介
Hono on Node.js 最速レスポンス選手権 🔖 2
IntroHono は Web 標準の Request を受けて Response を返す Web フレームワークです。Cloudflare Workers や Bun などの JavaScript ランタイムは、(request: Request) => Respon
静的ページをNext.jsのdraftModeで下書きプレビューする実装と注意点
microCMSのようなヘッドレスCMSは便利ですが、下書きした投稿のプレビュー機能はアプリケーション側で実装する必要があります。実装にあたって難しかったのは、静的ページをプレビュー時だけ動的レンダリングに切り替える設計でした。Next.jsの動的APIをどこで・どの条件で呼ぶ
Tailwind CSS v4にBaseline Lintingを行う 🔖 3
はじめにあなたのTailwind CSS、ベースラインに準拠していますか？Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。
ちょっと社でアンケートとってみた - State of chot Inc. 2025
2026年になってしまいましたが、State of chot Inc. 2025 の集計結果を発表します！ State of chot Inc. とは？世界中のJavaScriptエンジニアのアンケートをもとに業界の動向やトレンドを調査する State of JavaScr
そのコマンド、本当に信頼しているだろうかWebフロントエンド開発では npx が良く使われていますよね。インストール不要で一発でコマンドを実行できて便利だと思います。MCP サーバーや AI 関連ツールも同じ配布形態が多くて、 npx のほかにもPythonを呼びだす uvx
この冬、育てたいGitHub Readme。Golang製のスタイリッリュなLanguage Stats SVG 🔖 1
はじめにGitHubのプロフィールページ（README）をカスタムしたくなったことはないでしょうか。よく見かけるカスタムパーツとして下図のような、readme-stats があります。readme statsこの画像は本家の github-readme-stats と
「このデザイン、CSSで再現できないかも😫」を解決してくれるかもしれないプロパティ、mask 🔖 31
CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれか
Web 技術投票サイト向けに Cache Components, Drizzle ORM v1.0β, Better Auth を技術調査
気になる技術を色々使って Web アプリを作っています変化の早い Web 技術、新技術や新機能を試す前に次の更新が出てしまいそう...なので、「いっそフルスタックで何か作ったら新しい技術に触る機会ができるのでは？」 と考えました。 題材：「この技術が好きな人は、この技術も好
Shadow DOMでIslands Architectureっぽく(状態管理編) 🔖 1
記事の内容前回、Shadow DOMでIslands Architectureっぽく(CSS編)という記事を記載しました。今回はShadow DOMにある複数のアプリ間での共有したい状態の管理方法について記載します。 動作環境簡単なカウンターアプリを作ってみました。ht
Shadow DOMでIslands Architectureっぽく(CSS編)
記事のモチベ定期的に、既存アプリケーションのリプレースの効率や、既存を残しつつ新規のアプリケーションを導入しやすい方法を考えることがあります。直近Vue2のプロジェクトをReactに変える相談があって今年度例の定期入ったかというモチベでこの記事を書いてます。前の定期時にはマイ
Effect-TSでサーバーとクライアントの境界を安全に跨ぐには 🔖 1
はじめに昨今、フルスタックフレームワークが浸透し、バックエンドとフロントエンドで型やコードを共有することは、モダンな技術を追い求める開発者にとって受け入れられつつあります。しかし、我々の前に立ちはだかるのはサーバーとクライアントの境界です。サーバー側の処理をまるで関数のように呼
Storybook上でCSSを書き換えてテーマの変更 🔖 1
記事の内容としてデザインシステムなどがあり、色などのデザイントークンぐらいしか変わらない場合がある今回はshadcn/uiによる複数テーマがある場合、実装側でもStorybook上でテーマを切り替えて確認したい場合の対応例になるCSSのカスタムプロパティでテーマを変えるもの
ast-grep/claude-skill で Claude Code に AST ベースの検索を導入する 🔖 2
はじめにgrep では「try-catch がない async 関数」のような構造的な条件を表現できませんが、ast-grep/claude-skill を導入すると Claude が YAML ルールを生成し、1回のコマンドで条件に合致するコードを抽出できます。こんな時にお
はじめにアニメや映画など「作品」を検索するときに、以下のようなことで困ったことはないですか？昔見た作品をもう一度見たいけどタイトルを覚えていない好きなジャンルで検索しても見たいと思うものがなかなか見つからない例えば、「昔見たアニメで、主人公が料理を通じて人と繋がってい
週末にほぼAI (v0・Claude Codeなど) が作った比較サイトをリリース - ほぼ2日で完成した個人開発の裏側 🔖 57
個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。このアプリの約9割はLLM（コーディングエージェン
openapi-fetchで型安全な API クライアントを作る
軽量でfetch準拠でOpenAPI由来の型推論・補完がそのまま効くopenapi-fetchを使ってみました パッケージインストールnpm install openapi-fetchnpm install -D openapi-typescript 1) Ope
Reactにおける<Component />とComponent()の違い 🔖 29
Reactでは、JSXを返す関数を組み合わせてアプリケーションを作っていきます。それらの関数は<Component />のように呼び出すこともあれば、Component()のように呼び出すこともあります。後者を使用する機会は多くないかもしれませんが、例えばrender
View TransitionライブラリSSGOIを使ってNext.jsでネイティブアプリのような画面遷移を再現してみる 🔖 2
SSGOIとはSSGOI（スゴイ）はウェブでネイティブアプリのようなページトランジションを実装することができるアニメーションライブラリです。2025年10月現在はReact・Svelte・Vueに対応しており、Next.jsなどのフレームワークにも互換性があります。ブラウザ
[Next.js] URL末尾に .md つけたらMarkdownをそのまま返す！ 🔖 6
Next.jsのドキュメントやQiitaなどでは、URLの末尾に .md を付けるとページ内容を生のMarkdownで取得できます。AIエージェントにコンテキストを渡したり、別クライアントから取り込んだりするのに便利なパターンです。この記事では Rewrites + Route
propsを1つ増やしただけなのにレスポンスサイズが5倍に増えてしまった 🔖 69
ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。SCからCCに渡したpropsはRS
Next.jsのmiddlewareを本番と開発で切り替える
背景middleware.tsを本番と開発環境で別の内容にする必要があった今までは開発環境のBasic認証にのみ使っていた。新たにリダイレクトの処理を入れるため、middlewareを環境によって分ける必要が出てきた本番環境でのmiddlewareの発火を抑えることも課題
v0 にデザインシステムを与えて、統一感あるデザインに仕上げよう！ 🔖 113
ちょっと株式会社の KindBurger です！本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます
Cloudflare Redirect Rulesで爆速簡単リダイレクト
CloudflareのRedirect Rulesで、すぐに、簡単に、リダイレクト設定ができたので紹介します。 はじめにわたしがプライベートで建てているサービスは以下の構成で動いています。（ドメインは仮のものです）service.example.comメインのEC
Socket.IOはどのようにアクセストークンを送っているのか 🔖 1
はじめに標準の new WebSocket()（RFC 6455）はブラウザ実装で任意のリクエストヘッダー追加を禁止しています。そのため、ハンドシェイクの HTTP リクエストで任意の HTTP ヘッダーを付けることができません。https://github.com/what
フロントエンドカンファレンス北海道 2025 にて v0 の魅力を紹介しました
ちょっと株式会社の KindBurger です！2025/09/06 にて行われた「フロントエンドカンファレンス北海道 2025」にて登壇しました。テーマは v0 という生成 AI ツールで、その特徴や業務での活用について紹介しました。オフラインイベントは初参加かつ初登壇で
こんにちは！9/6(土)に開催された「フロントエンドカンファレンス北海道2025」に参加してきたので自分の感想を共有させてください！イベントのサイトhttps://www.frontend-conf.jp/自分で撮った会場（弊社の社長が写っています笑） 参加背景東
CodexやClaude Codeなどの普及により、ターミナル環境に触れる時間が増えた方も多いのではないでしょうか。私自身もともとターミナル環境が好きで、日常のなかで最も長く接している画面とも言えます。普段使っているターミナルの画面毎日使うターミナル環境だからこそ、もっと
Vercel製AIツール三種の神器で実現する - モダンなAIチャット開発 🔖 4
はじめにAIチャットアプリケーションを開発していると、従来のWeb開発とは異なる課題に直面します。レスポンスが少しずつ生成されるストリーミング処理、不完全なMarkdownのリアルタイムレンダリング、複雑なチャット状態の管理など、AI特有の要件への対応が必要です。この記事では
トップページなど情報量が多いページは、複数のfetch処理ををする場合があります。どのように実装する事が適切か説明します。 1つずつデータを取得fetchTopPageDataを内で、様々なデータを取得する為複数のfetchを実行しています。1つずつデータを取得する直列タイ
【Prisma】findFirst をユニーク検索に使うと危ない 🔖 2
TypeScript の ORM である Prisma の話。Primary Key 制約や Unique 制約のついたカラムを WHERE 句に指定してデータを取得する場合、通常は findUnique を使います。await prisma.user.findUnique(
useSWR+CQRSパターンでローカル状態管理を極限まで減らしてみる 🔖 1
ちょっと株式会社, n13uです. 今回の記事では現在自分が取り組んでいる案件でuseSWR+CQRSパターンを採用しローカルでの状態管理を減らしてみた話をします. 前提条件Next.js 14.x / Pages RouterStatic Exportsで出力されSP
自分専用のClaude Codeの設定をプロジェクトごとに配置したい 🔖 1
背景複数人で開発するプロジェクトにおいて、必ずしもGit管理されたCLAUDE.mdだけで開発がストレスフリーに進むとは限りません。VSCodeの個人用settings.jsonが数十行に及ぶ人がいるように、Claude Codeも自分好みの設定をしたい場合があります。例えば
CommonJS アプリケーションを ESM に移行する。ついでに Vitest にも移行する 🔖 4
Node.js アプリケーションを CommonJS (CJS) から ES Modules (ESM) に移行したのでやったことを書き記します。今回移行したアプリケーションは、バンドラーを伴わない純粋な Node.js アプリケーションです。TypeScript で書かれてお
はじめに6月頃にBiome v2がリリースされましたが、同時期にOxlint v1も安定版がリリースされていました。最近、Biomeを導入するプロジェクトに関わったついでに、Oxlintも少し気になったので触ってみることにしました。Biomeはオールインワンのツールであり厳密
Tailwind CSS で未定義のクラスを指定したら絶対エラーにしたい 🔖 3
この記事の概要Tailwind CSS v4 を前提として、「未定義のクラスを指定した際に Lint エラーになるようにする」を eslint のプラグインで実現する。私が知っている中で最も著名なプラグインは eslint-plugin-tailwindcss なのだが、Ta
mainブランチマージしたら他のブランチにもマージPRを作成するGitHub Actions 🔖 1
前提の話ブランチ運用の話CI / CD周りブランチ名がそのままリモートの開発環境へデプロイするような運用main: 本番環境 一番StableでLatestなブランチその他の環境staging: ステージング環境...etc環境要するにmain更新され
TanStack RouterとTanStack Queryを組み合わせたモダンなデータフェッチング戦略 🔖 2
TanStack RouterとTanStack Queryを組み合わせたモダンなデータフェッチング戦略 はじめにモダンなReactアプリケーションでは、ルーティングとデータフェッチングの統合が重要な課題となっています。TanStack RouterのloaderとTanS
TanStack Formで巨大フォームを安全に分割する方法 🔖 1
1. はじめにフロントエンドアプリケーションで、たくさんの入力項目を扱う巨大なフォームを構築する場面は少なくありません。1つのフォームコンポーネント内に10個以上のフィールドが並び、それぞれにバリデーションや依存関係、条件分岐があるようなケースでは、コードはすぐに読みにくくな
概要TypeScriptのnever型の使い所について説明いたします。 never型とはnever型は「値を持たない」を意味するTypeScriptの特別な型です。https://typescriptbook.jp/reference/statements/never
React Hook Form の useFieldArray が同期されない！？ 複数コンポーネントで使用したときにハマった話と対処法 🔖 1
React Hook Formを使ってフォーム開発をしているとき、「あれ？配列に要素を追加したのに反映されないのでは？」と思うような予期せぬ挙動に遭遇しました。具体的には、useFieldArrayを使ったフォームを作っていたのですが、複数のコンポーネントで同じフィールド名に対
!最初にお詫びですが、結局メモリリークを根絶しきれていない可能性があります。 モチベーションVRoid Studio で作ったモデルをウェブサイト上で展示するためのスクリプトを自分用に作っているのですが、three.js のリソース破棄が難しすぎます。どうしてもメモリ
Tanstack Query による 2 パターンのページネーション設計 🔖 2
はじめに 🚀大量のデータを効率的に表示するページネーションは、Web アプリケーションにおいて欠かせない機能です。TanStack Query(@tanstack/react-query) でページネーションを実装する際には、useQuery ベース手法と useSuspens
話題のBaaS「Convex」を試して、Supabaseと比較してみた 🔖 7
はじめに皆さんは、個人開発や簡単なプロトタイプのWebアプリを作るとき、バックエンドはどうしていますでしょうか。私の場合、ここ数年は「とりあえずSupabaseで」というのがお決まりの一手でした。PostgreSQLが使えて、認証やリアルタイム機能もサクッと実装でき、無料枠も
はじめにYouTubeでNeovimのライブコーディング動画を見て、その操作の速さとかっこよさに惹かれて、自分も始めてみようと思いました。今回は、「LazyVim」を実際に導入してみたので、その方法を共有します。 LazyVimとはLazyVimは、Neovimをすぐに
「なぜかズレるUI」文字数制限だけでは足りないこともある話 🔖 3
はじめに日々の開発業務において、文字数を制限して表示するUIを開発する場面は数多くあると思います。これらの文字を「何文字まで見せるか」「どうやって省略するか？」「表示が崩れないようにするには？」といった点は、デザイナーとエンジニアがすり合わせるべき要素です。ですが「文字数を
State配列ReactでState配列を表示したり操作するUIはよくあると思います。しかし、ReactのState配列ならではの注意点があり、使うメソッドを気をつける必用があります。例えば、State配列末尾に追加する場合はpushでは無くconcatを使う必要があります。
GitHub Copilot Chat を使う時のTips（Instruction files, Prompt files ） 🔖 208
はじめにGitHub Copilot は、Visual Studio Code (以下、VS Code) で提供される AI を活用したプログラミングツールで、VS Code上で拡張機能としてインストールすることで使用できます。主な機能として、コードを編集中のファイルに対して
Rive に Data Binding がやってきた！アニメーション設計がもっと柔軟に！ 🔖 1
ちょっと株式会社の KindBurger です！本記事では、Rive に追加された Data Binding について紹介します！おべんきょうして強くなるちょってぃ※ Rive ってなに？という方は過去記事をご参照ください！https://zenn.dev/chot/a
レビュアーの負荷を軽減して、コードの品質をチームで高めるためのプルリクエストテンプレート活用 🔖 1
ちょっと社に入ってから、レビューをしたり、してもらう機会が増えました。1人で完結させるよりもブラッシュアップできますし、単純にコミュニケーションを取れる楽しさも感じています。その反面、レビューに時間がかかりやすく、全体の工数が膨らんでしまう課題もあります。レビューの負荷軽減
【Astro】コミュニティ製の便利かもしれないツール紹介（Astro Open Graph, @studiocms/cfetch） 🔖 2
Astro 公式ブログではコミュニティ製の便利なツールが紹介されています。https://astro.build/blog/whats-new-april-2025/#tips--toolsその中から Astro Open Graph（morinokami/astro-og）