WEB SERVICE
電子ドラム買いました
せっかく防音性能が高く楽器演奏可のマンションに住んでいるのでと思い、電子ドラムを買いました、無職なのに。 ![VQD106](https://lh3.googleusercontent.com/pw/AP1GczOZLR5TW7TKxT6sMnRCDSvJFYydSxXmJKIPGHn32sdkMO4v7Hj2jPdV9O9-lYmMpPC9qnYpt1FJs7URkkh5sRKu-48nyY
Lovveboxのサイトを作らせていただきました
VTuberプロダクションの ラブボックス公式サイト を作らせていただきました。 愛らしい感じを最大限に引き出しつつ、ポップでキュートな雰囲気も併せ持つサイトデザインに仕立てようと頑張ってみました。 以下少しだけ開発に関する蛇足です。 ラブボックスさんは VTuber プロダクションなんですが、リアルライブも開催するというちょっと
最近読んで面白かった漫画
最近は仕事もプライベートもボロボロでして。 肉体的にも精神的にもだいぶ来ているので、それに合わせて漫画を読む量も増えています。 ということで今回は最近読んで面白かった漫画を紹介していこうと思います。 ハローワークモンスターズ [<img alt="ハローワークモンスターズ" src="https://m.media-a
サイトにフチをつけてくれるパッケージを作りました
久しぶりに npm パッケージを作ってみました。 react-page-border サイトにフチをつけたいなーと思うことがしばしばあるのですが。 スマホのレスポンシブ対応やら Safari 対応やらを考えると、意外とめんどくさいんですよね。 で、今回じっくりと実装感を探ってみまして、一
転職活動
11 月、12 月から働ける現場を探しています。 以下自己紹介となります。 名前 河村康平 年齢 35 歳 勤務地 東京(フルリモート勤務の場合を除く) 雇用形態 正社員 職種 フロントエンドプログラマー スクラムマスター エンジニアリングマネージャー 得意な技術 React 経験:7 年 Nex
常に誰かのモチベーターたれ
スクラムマスターやエンジニアリングマネージャーを務めているときに強く意識することの 1 つとして『常にメンバーのモチベーターであり続けたい』というのがあります。 モチベーター、つまり誰かのモチベーションの維持や向上などマネージメントコントロールを行うロールのことです。 スクラムマスターなんかはとくにモチベーターとしての役割が求められることは、言うまでもありません。 ところがどっこ
Next.js×AIの最新の書きっぷり
日々 AI を用いた書きっぷりはどんどん変わっていまして。 基本的にアメリカを中心に情報がアップデートされているため、日本語の情報はかなり後手後手な印象を受けます。 そんな中でいろいろと情報を調べてみたのですが、基本的には AI SDK を追いかけていれば問題ないかなーという印象です。 ということで、今回は [Next.js × AI](
AIのみでAIを使ったサービスを作ってみた
Claude を使用して作ってみました、自分の実装は 0 です。 youtube-quiz-generator YouTube の URL を入力すると、その動画から四択問題を作ってくれるサービスです。 例えば [【作品多すぎ】マーベル映画をだいたい観てる男によるあなたにオススメのマ
誕生日
35 歳になりました、あらふぉですね、あらふぉ。 恒例のやつです。 34 歳 33 歳 32 歳 [31 歳](https://kk-web.link/bl
サーバーアクション(Vercel AI)をuseMutationに噛ませたい
業務で必要になったので作ってみました。 以下ざくっと実装です、本当に最低限だけ。 useServerAction import { StreamableValue, readStreamableValue } from "ai/rsc"; import { useCallback, useState } from "react"; type UseMutati
35歳目前にしてフロントエンドプログラマーが意識していること
ぼちぼち 35 歳が見えてきまして。 バツイチ独身子なし彼女なしと、なかなかどーしようもない感じになってきましたが、相変わらずフロントエンドプログラマーとして働いています。 いつのまにかエンジニアとしてのキャリアも干支が一周し、フロントエンドプログラマー歴も 7 年目と、まごうことなきおっさんになってきました。 これくらいの年齢になってくるといつのまにか同年代のプログラマーも徐々に減ってき
Next.js×SSO(Cognito)
現在業務で Next.js に Congnito の SSO を乗っける作業をしているのですが。 Okta を使用した SSO の実装だったのですが、とくにサーバーサイドまで考慮した情報はほぼ皆無で、えらく苦戦しました。 ということで、今回は実装中にわかったことやまだわかっていないことを備忘録がてら書いていこうと思います。 Cognito と Okta の連携 [この記事
Next.jsでOGP画像を動的に生成する方法
調べてみると色々と情報が錯綜していたので、備忘録がてら。 今回は以下の仕様となっています。 Next.js Vercel 適当に router.tsx ファイルを作成し、以下のように書いてあげたら動きました。 import { promises as fs } from "fs"; import path from "path"; import { ImageRes
QuietComfort Ultra Earbudsを買ったよ
今まで外出時は WF-1000XM4 を使用していたのですが。 数週間前から左側の聞こえがおかしくなり、修理に出しても良かったのですが、それならばと前々から気になっていた QuietComfort Ultra Earbuds を購入しました。 [![QuietComfort Ultra
リソースの限界とステークホルダー
スクラムマスターとしてのキャリアをぼちぼち積みつつある自分ですが。 スクラムを回すにおいて、開発の序盤はプロダクトオーナーがボトルネックになりやすいのかなーと思うのですが、開発の終盤に差し掛かってくるとほとんどのケースでステークホルダーがボトルネックになっていると感じるのは、個人的に非常に興味深いです。 多くの現場において、ステークホルダーは CTO あたりが割り当てられるケースが
フルリモートワークとスクラムの親和性
個人的に、フルリモートワークとスクラムは親和性が高いと思っていまして。 今回はその根拠について書いていこうと思います。 まず前提として、開発を行う際にスケジュール感やタスク感を洗い出していないというのは結構な問題だと思っていまして。 トップダウンで締め切りや仕様が降りてくるのは当然の話であって、それに対しボトムアップでスケジュール感やタスク感を提示するのは当然なことだと思います。
Next.jsで開発するときにオススメのパッケージ
普段 Next.js で開発する際によく導入するパッケージを書いていこうと思います。 @next/bundle-analyzer build されたファイルのうち、何がどれくらいの割合を占めるのか出力してくれるパッケージです。 以前と比べ出力されたファイルの容量を意
ウィンドウサイズを表示するnpmパッケージを作りました
sass-mq という npm パッケージがありまして。 Sass で開発を行う際、sass-mq に breakpoints を設定することで media-query が書きやすくなるというパッケージでして。 以前はよく使用していたんですが、最近は media-query をなるべく使用しないようにするのがモ
Conformを使う?React Hook Formでいけるかもよ
以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比
めんどくさいことはめんどくさいからめんどくさい
自分の性格の 1 つに『めんどくさがり』というのがあります。 仕事にせよプライベートにせよ、まーめんどくさいことが嫌いなタイプでして。 めんどくさいことって、単純にイヤじゃないですか、めんどくさいし。 ところがどうして、世の中案外めんどくさいことが嫌いじゃない人のほうがマジョリティな気がしていまして。 仕事の付き合いで見ると、めんどくさい考え方とかめんどくさい実装とかめんどくさ
Next.jsのApp Routerにおけるエラーハンドリングまとめ
まだ調査中の内容もあるため間違っている可能性が非常に高いです、あしからず。 Next.js の App Router におけるエラーハンドリングは /404 や /500 へリダイレクトをかけず、url のパスはそのままエラー表示を行うのが基本線となっています。 ということはまずはベーシックなエラーハンドリングを。 [error.js](https://nextjs
フロントエンド開発を楽にするコツ
フロントエンド開発って簡単そうに見えて、意外と難しかったりします。 長年にかけて様々なフロントエンド開発に携わってくると、大体実装がキツくなってくるパターンが明らかになってきます。 ということで、今回は『これを避けたらフロントエンド開発が少し楽になるよ』と個人的に思うパターンをいくつか紹介しようと想います。 パンくずリスト Saas 系だとちょくちょく見かけるパンくずリス
M3 ProのMacBook Proを買いました
なんとなく MacBook を買い替えました。 過去の記事 によると、今まで使っていたMacBook は 2020 年の 11 月に購入していたっぽいので、3 年半くらい使ったんですね。 今回は以下のスペックで購入しました。 14 インチ チップ:Apple M3 Pro 12コア CPU -
Next.jsで使用していないファイルを洗い出すnpmパッケージを作りました
久しぶりに npm パッケージをリリースしてみました。 @piro0919/next-unused 一応 Fork もとに next-unused があるのですが、実装はほぼ作り直しました。
NextAuthのv4でNext.jsのApp Routerに対応する方法
next-auth の v4 では App Router への対応がめちゃくちゃ中途半端だったりします。 現在 v5 を開発中 とのことで、これでようやく公式の対応が入るのですが。 今更 Pages Router を使うのは個人的にイヤすぎるので、結構強引に App Router にア