はてぶ・Qiita・Zennのトレンド記事を紹介
はじめに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 ） 🔖 198
はじめに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）
文字の縁取りを実装する場合、 text-stroke や SVG などいろいろな方法があると思います。今回は text-shadow を使った方法を紹介します。 text-shadow を使うケース一般的な縁取りは text-stroke と paint-order を組
Next.js 14.2.28 -> 15.3.1 のバージョンアップ対応 🔖 1
モチベーションCVE-2025-29927によるNext.jsのMiddlewareでパッチバージョンの脆弱性対応してたのもあり、14 -> 15にあげようとする対応は並行して検討してた脆弱性対応前から npx @next/codemod@canary upgra
CoR パターンで実装する Next.js の middleware 🔖 1
GoF が提唱したデザインパターンのうち、 Chain of Responsibility パターン(以下、CoR パターン) というものがあります。責任の連鎖とも訳されますね。CoR パターンはその名の通り、チェーンに見立てて処理を複数の関数へ順々に回していく仕組みです。自
複数のGitHubアカウントをWSL経由のDevcontainerで使う 🔖 1
Webエンジニアの4096mgです。複数のGitHubアカウントをWSL経由のDevcontainerで使うときに設定していることを備忘録として残しておきます。仕事用と個人用で複数のGitHubアカウントを使い分けたいという需要は大きいと思いますが、Windowsに対応した情
概要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.この