はてぶ・Qiita・Zennのトレンド記事を紹介
概要Vue.jsでSVGを表示するコンポーネントを作成する際に、アイコンごとにコンポーネントを作成するとアイコンの数が増えた時にコンポーネントの管理コストも高くなってしまうため、以下のように1つの汎用的なコンポーネントでまとめて扱える仕組みがあると便利です。<SvgIc
requestAnimationFrameを使ってアニメーションを作ってみる
ちょっと株式会社でフロントエンドエンジニアをしているでんです。業務の中でrequestAnimationFrameに触れる機会がありましたので紹介できればと思います。 requestAnimationFrameとはwindow.requestAnimationFrame
フレームワークのアップグレード作業を計画的に進めるための手順 🔖 3
Next.jsを14系から15系に、Reactを18系から19系にアップグレードする作業をしていて感じたのが「計画的に進めないと、見通しがつけられなくてしんどいな」ということ。最初は計画もなく一気に進めようとしていましたが、状況が把握しきれなくなり、情報を整理してから別ブランチ
MDX 内の画像を Astro の Picture コンポーネントに自動変換する remark プラグインを作る
モチベーションAstro で Markdown に書いた  形式のローカル画像は、自動で webp に変換される。しかし私は特定のパスにある記事だけ画像に quality を指定した上で picture タグにしたかったので、今までは下記の
はじめに仕事の中で小さなCLIツールを作る機会がありました。スピナーや対話型UIが欲しくなり、使えそうなライブラリを探そうと思ったものの、小さなツールなのでそこまで機能性が高いものは必要なさそうでした。AIに頼ればライブラリに依存しすぎることなく、小さくシンプルに作れるのではと
GitHub Actions をローカルで実行！ nektos/act の紹介 🔖 1
はじめにGitHub Actions を使っている方は多いと思います。新しいワークフローを作るとき、GitHubにpushして動作確認しなければいけなくて、手間が多いですよね。そこで、 nektos/act を使うと、自分のマシン上でワークフローを実行できます。公式サイトに
はじめにWebアプリケーションにおいて、ユーザーが重要な操作（データ削除など）を行う前に確認を取るケースがあります。この確認フローをモーダル等を使って実装すると、モーダルの開閉状態をstateで管理する必要があったりと実装が複雑になりがちです。今回は、react-callを活
satisfiesでmetaの型を定義したstorybookのファイルでtsのエラーが起きる 🔖 1
はじめにNext.jsでStorybookを使用し、satisfiesを利用してmetaの型定義を行った際に、以下のエラーが発生しました。Expression produces a union type that is too complex to represent.この