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

前提の話ブランチ運用の話CI / CD周りブランチ名がそのままリモートの開発環境へデプロイするような運用main: 本番環境 一番StableでLatestなブランチその他の環境staging: ステージング環境...etc環境要するにmain更新されたら存在するリモートの環境分の更新作業がめんどくさい図にするとこんな感じ サンプルプロジェクトhttps://github.com/igara/git-merge-pr-samplemainに直でGitHub ActionsのYAMLをコミット&プッシュしたのでPRに...

TanStack RouterとTanStack Queryを組み合わせたモダンなデータフェッチング戦略 はじめにモダンなReactアプリケーションでは、ルーティングとデータフェッチングの統合が重要な課題となっています。TanStack RouterのloaderとTanStack Queryを組み合わせることで、効率的なデータ取得と状態管理を実現できます。本記事では、この2つのライブラリを連携させる実践的な方法について解説します。 アーキテクチャの概要TanStack RouterとTanStack Queryを組み合わせたアーキテクチャでは、以下のような流れでデータを...

1. はじめにフロントエンドアプリケーションで、たくさんの入力項目を扱う巨大なフォームを構築する場面は少なくありません。1つのフォームコンポーネント内に10個以上のフィールドが並び、それぞれにバリデーションや依存関係、条件分岐があるようなケースでは、コードはすぐに読みにくくなり、ちょっとした修正でも壊れやすくなってしまいます。こうした問題を避けるためには、フォームを適切な単位で分割することが重要です。TanStack Form では withForm を使うことで、型安全かつ再利用性の高いフォーム分割が実現できます。この記事では、TanStack Form の withFo...

概要TypeScriptのnever型の使い所について説明いたします。 never型とはnever型は「値を持たない」を意味するTypeScriptの特別な型です。https://typescriptbook.jp/reference/statements/never以下のような使用をすれば何も代入できません。しかし実際には以下のようなコードを書くことはないはずです。const foo: never = 1; 例外を投げる処理に使う例外を投げる処理に使用可能です。しかし、TSには型推論があるので必須ではありません。const throwError = ():...

React Hook Formを使ってフォーム開発をしているとき、「あれ？配列に要素を追加したのに反映されないのでは？」と思うような予期せぬ挙動に遭遇しました。具体的には、useFieldArrayを使ったフォームを作っていたのですが、複数のコンポーネントで同じフィールド名に対してuseFieldArrayをそれぞれ呼び出した結果、片方で追加した内容がもう片方に反映されないという現象が起きたのです。最初は「自分の実装がまずかったのか？」と思ったのですが、これはReact Hook Form の仕様通りの動作でした。 何が起きたのか？以下は、実際に遭遇した問題を再現するために用意...

!最初にお詫びですが、結局メモリリークを根絶しきれていない可能性があります。 モチベーションVRoid Studio で作ったモデルをウェブサイト上で展示するためのスクリプトを自分用に作っているのですが、three.js のリソース破棄が難しすぎます。どうしてもメモリリークしている気がしてならないので調べようと思い、情報を集めた結果、memlab を使うと良いらしいので使ってみました。https://facebook.github.io/memlab/memlab そのものについては公式サイトをご参照ください。 memlab を使う 調査対象の概要ウェブサイト上...

はじめに 🚀大量のデータを効率的に表示するページネーションは、Web アプリケーションにおいて欠かせない機能です。TanStack Query(@tanstack/react-query) でページネーションを実装する際には、useQuery ベース手法と useSuspenseQuery ベース手法 の 2 つのアプローチが存在すると考えられます。!🎧 この記事の音声解説を聞くNotebookLM による音声解説はこちら本記事では、以下の 2 つのアプローチを比較し、それぞれの特徴と適用場面を明確にします。アプローチ特徴useQuery ベース手法...

はじめに皆さんは、個人開発や簡単なプロトタイプのWebアプリを作るとき、バックエンドはどうしていますでしょうか。私の場合、ここ数年は「とりあえずSupabaseで」というのがお決まりの一手でした。PostgreSQLが使えて、認証やリアルタイム機能もサクッと実装でき、無料枠も十分です。ですが最近、SNSやVibe Codingの文脈で「Convex」というBaaSの名前を見かけるようになりました。「開発体験が革命的」や「リアルタイム実装が驚くほど簡単」など、気になる評判ばかり。今回は実際にConvexを軽く触ってみて、Supabaseと何が違うのか、特に「開発ワークフロー」と...

はじめにYouTubeでNeovimのライブコーディング動画を見て、その操作の速さとかっこよさに惹かれて、自分も始めてみようと思いました。今回は、「LazyVim」を実際に導入してみたので、その方法を共有します。 LazyVimとはLazyVimは、Neovimをすぐに使い始められるように設定をまとめたものです。プラグインマネージャーのlazy.nvimをベースに作られており、必要な機能があらかじめセットアップされているため、面倒な初期設定をスキップして快適な開発環境を手に入れることができます。https://www.lazyvim.org/ 特徴LazyVimの最...

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

State配列ReactでState配列を表示したり操作するUIはよくあると思います。しかし、ReactのState配列ならではの注意点があり、使うメソッドを気をつける必用があります。例えば、State配列末尾に追加する場合はpushでは無くconcatを使う必要があります。理由は、配列を書き換えずに更新する必用がある為です。それでは、よく使う操作を説明いたします。 追加useArrayにaddItemを実装しました。concatを使用して追加するコードです。重要な部分は以下の通りです。ベースの配列.concat(追加したい値)ですconcatで新しい値を追...

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

ちょっと株式会社の KindBurger です！本記事では、Rive に追加された Data Binding について紹介します！おべんきょうして強くなるちょってぃ※ Rive ってなに？という方は過去記事をご参照ください！https://zenn.dev/chot/articles/9dfcfb0053ac6a Data Binding とは？Data Binding はアニメーション設計における柔軟性を大きく拡張する仕組みです！主な特徴として、次の3点があります。（参考：公式の解説動画） 1. プロパティ同士を連動させて制御できるこれまで、プロパティを連動させ...

ちょっと社に入ってから、レビューをしたり、してもらう機会が増えました。1人で完結させるよりもブラッシュアップできますし、単純にコミュニケーションを取れる楽しさも感じています。その反面、レビューに時間がかかりやすく、全体の工数が膨らんでしまう課題もあります。レビューの負荷軽減と質の高い議論をするために、プルリクエストテンプレートがとても効果的だと感じているので、その理由と私が使っているテンプレートの内容を紹介します。 プルリクエストテンプレートを使うメリット実装者の内省を促して、レビューを依頼する前の品質を高めるレビューする観点や背景情報を整理して、レビュアーの負荷を減らす...

Astro 公式ブログではコミュニティ製の便利なツールが紹介されています。https://astro.build/blog/whats-new-april-2025/#tips--toolsその中から Astro Open Graph（morinokami/astro-og）と @studiocms/cfetch を紹介します。 Astro Open Graphhttps://github.com/morinokami/astro-ogAstro の Dev toolbar で Open Graph の見た目を確認できるようにする integration です。インストール...

文字の縁取りを実装する場合、 text-stroke や SVG などいろいろな方法があると思います。今回は text-shadow を使った方法を紹介します。 text-shadow を使うケース一般的な縁取りは text-stroke と paint-order を組み合わせた方法で対応できると思います。ただ複数色の縁取りをしたり、縁取りした文字に影をつけたいときにしたいときは、 text-stroke の方法では難しいと思います。こういったケースの解決策の一つとして、text-shadow を使った方法について紹介していきたいと思います。 text-shadow...

モチベーションCVE-2025-29927によるNext.jsのMiddlewareでパッチバージョンの脆弱性対応してたのもあり、14 -> 15にあげようとする対応は並行して検討してた脆弱性対応前から npx @next/codemod@canary upgrade latest によるマイグレーションですんなり15にアップできないか気になっていたのもある数ヶ月に1回はcodemod実行してみるぐらいは気になってた手作業的に変更しないといけない箇所が多くすぐには対応できんとなりだいぶ見送ってたがcodemodが改善されていき、自動で更新できるようになってきて...

Webエンジニアの4096mgです。複数のGitHubアカウントをWSL経由のDevcontainerで使うときに設定していることを備忘録として残しておきます。仕事用と個人用で複数のGitHubアカウントを使い分けたいという需要は大きいと思いますが、Windowsに対応した情報はあまり見つからず、Devcontainerがどの認証情報を参照するかもわかりにくく、ハマりやすいポイントだと思います。WindowsではWindowsからそのままGitHubに接続したいときWSLからGitHubに接続したいときWSL経由のDevcontainerからGitHubに接続したいとき...

GoF が提唱したデザインパターンのうち、 Chain of Responsibility パターン(以下、CoR パターン) というものがあります。責任の連鎖とも訳されますね。CoR パターンはその名の通り、チェーンに見立てて処理を複数の関数へ順々に回していく仕組みです。自分の関心事ではないと判断したら、次の関数に処理をバトンタッチしていきます。良い面としては処理の追加・変更・削除などが比較的容易で、関心事に集中しやすくなります。難しい面としては、処理がストップした場合にエラーの原因を追うのが少し大変だったり、常に処理する順番を意識する必要があります。CoR パターン自体の説...